Аналитика профиля ВК: различия между версиями

Материал из Поле цифровой дидактики
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 13: Строка 13:
     <div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
     <div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
         <h3 style="color: #2c3e50;">📘 Введение</h3>
         <h3 style="color: #2c3e50;">📘 Введение</h3>
         <p>Проект представляет собой веб-приложение для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p>
         <p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p>
     </div>
     </div>


Строка 25: Строка 25:
             <li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li>
             <li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li>
         </ul>
         </ul>
    </div>
<!-- Архитектура и блок-схема -->
    <div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3>
        <p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p>
       
        <div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;">
            <div style="position: relative; width: 320px;">
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div>
            </div>
        </div>
     </div>
     </div>


Строка 39: Строка 59:
             <li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li>
             <li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li>
         </ul>
         </ul>
[[Файл:Создание приложения.jpg|мини]]
         <p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p>
         <p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p>
          
          
         <h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Настройка приложения в разделе для разработчиков</h4>
         <h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4>
         <p>После создания приложения открывается панель управления, где доступна следующая информация:</p>
         <p>В разделе «Ключи доступа» генерируется токен для работы с API. </p>
 
[[Файл:Ключ доступа.jpg|мини]]
         <ul>
         <ul>
            <li><b>Название приложения</b> — отображается созданное ранее имя (test).</li>
                             
            <li><b>Категория</b> — подтверждается выбранная категория (Инструменты).</li>
            <li><b>Описание</b> — поле для заполнения информации о функциональности приложения.</li>
            <li><b>Бонусная программа</b> — при выполнении условий можно получить до 25 000 ₽ на рекламу сервиса.</li>
        </ul>
       
        <h4 style="color: #4a76a8; margin-top: 20px;">Шаг 3. Получение ключей доступа</h4>
        <p>В разделе «Ключи доступа» генерируется токен для работы с API. Доступны следующие опции:</p>
        <ul>
            <li><b>Другие площадки</b> — настройки интеграции с внешними сервисами.</li>
            <li><b>Дополнительные</b> — расширенные настройки доступа.</li>
            <li><b>Разработка</b> — технические параметры приложения.</li>
            <li><b>Ключи доступа</b> — основное место для получения токена.</li>
            <li><b>Удалить процедуры</b> — опция удаления настроенных процедур доступа.</li>
         </ul>
         </ul>
               
         <p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p>
         <p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p>
     </div>
     </div>
 
 
    <!-- Архитектура и блок-схема -->
    <div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3>
        <p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p>
       
        <div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;">
            <div style="position: relative; width: 320px;">
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div>
                <div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div>
                <div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div>
            </div>
        </div>
    </div>


     <!-- Структура проекта -->
     <!-- Структура проекта -->
Строка 119: Строка 111:
         <p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p>
         <p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p>
          
          
[[Файл:Главная страница аналитики.png|мини]]
         <h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4>
         <h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4>
         <p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p>
         <p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p>
Строка 129: Строка 122:
         </ul>
         </ul>
          
          
[[Файл:Карточка профиля.png|мини]]
         <h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4>
         <h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4>
         <p>Блок с агрегированной статистикой по всем проанализированным постам:</p>
         <p>Блок с агрегированной статистикой по всем проанализированным постам:</p>
         <ul>
         <ul>
             <li><b>Общее количество постов</b> (500).</li>
             <li>Общее количество постов.</li>
             <li><b>Суммарное количество лайков</b> (21.9M) и среднее значение на пост (43717.9).</li>
             <li>Суммарное количество лайков и среднее значение на пост.</li>
             <li><b>Суммарное количество репостов</b> (944.3K).</li>
             <li>Суммарное количество репостов.</li>
             <li><b>Суммарное количество комментариев</b> и среднее значение на пост (0).</li>
             <li>Суммарное количество комментариев и среднее значение на пост.</li>
         </ul>
         </ul>
          
          
[[Файл:Ключевые метрики.png|мини]]
         <h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4>
         <h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4>
         <p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p>
         <p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p>
Строка 147: Строка 142:
         <p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p>
         <p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p>
          
          
[[Файл:Визуализация 1.png|мини]]
         <h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4>
         <h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4>
         <p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».</p>
 
         <p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».
</p>
[[Файл:Топ20.png|мини]]
<div style="clear: both; margin-bottom: 1px;"></div>
     </div>
     </div>


Строка 155: Строка 155:
         <h3 style="color: #2c3e50;">📌 Выводы</h3>
         <h3 style="color: #2c3e50;">📌 Выводы</h3>
         <ul>
         <ul>
             <li>Разработанное приложение предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li>
             <li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li>
             <li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li>
             <li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li>
             <li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li>
             <li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li>
             <li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li>
             <li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li>          
            <li>Проект может быть расширен добавлением прогнозных моделей, сравнением нескольких сообществ, а также экспортом отчётов в PDF или Excel.</li>
         </ul>
         </ul>
     </div>
     </div>


</div>
</div>

Версия от 23:31, 26 марта 2026

📊 Аналитика профиля ВКонтакте

Автор: Арлинская Александра

Группа: АДЭУ-221

Дисциплина: Работа с API социальных сетей и визуализация данных

Статус проекта: Выполнен

📘 Введение

Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.

🎯 Цель проекта

  • Создать удобный инструмент для анализа статистики сообществ ВКонтакте.
  • Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.
  • Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.
  • Провести текстовый анализ контента с выделением самых частых слов в публикациях.

🛠 Архитектура и блок-схема проекта

Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.

Ввод домена или ID профиля
Запрос к VK API (стена, профиль, статистика)
Сбор и агрегация данных: лайки, репосты, комментарии, текст постов
Расчёт метрик: вовлечённость, частотность слов, временные паттерны
Визуализация: графики активности, диаграммы, топ-слов

🔑 Получение токена доступа VK API

Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.

Шаг 1. Создание приложения

На странице создания приложения необходимо указать следующие параметры:

  • Тип приложения — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.
  • Название приложения — задаётся уникальное имя (не менее трёх символов).
  • Категория — выбирается «Инструменты» для аналитических сервисов.

После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».

Шаг 2. Получение ключей доступа

В разделе «Ключи доступа» генерируется токен для работы с API.

Сгенерированный токен сохраняется в файле .env проекта для дальнейшего использования при запросах к VK API.


🗂 Структура проекта

VK-DASHBOARD/
📁 __pycache__/
📁 .venv/ — виртуальное окружение
📁 public/
📁 img/
🖼 favicon.svg
📁 templates/
📄 index.html — главная страница с формой ввода
📄 result.html — страница с результатами аналитики
📄 main.py — основной файл приложения (Flask/FastAPI)
📄 .env — переменные окружения (токен VK API)
📄 .env.example — пример конфигурации

Назначение ключевых файлов:

  • main.py — серверная логика: маршруты, взаимодействие с VK API, обработка данных.
  • templates/index.html — стартовая страница с полем ввода адреса профиля.
  • templates/result.html — страница с полной аналитикой: графики, статистика, топ-слов.
  • .env — хранение токена доступа к VK API и других секретов.

📊 Описание визуализации

1. Главная страница

Пользователю предлагается ввести адрес страницы (например, durov или полную ссылку vk.com/durov). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.

2. Карточка профиля

В верхней части страницы результатов отображается основная информация о сообществе или пользователе:

  • Имя профиля и статус (например, «Pavel Durov» и «Детектор»).
  • Геолокация — город (Saint Petersburg).
  • Дата рождения и пол (для пользователей).
  • Количество подписчиков — крупным шрифтом (4.8M).
  • Количество загруженных постов (500).

3. Ключевые метрики

Блок с агрегированной статистикой по всем проанализированным постам:

  • Общее количество постов.
  • Суммарное количество лайков и среднее значение на пост.
  • Суммарное количество репостов.
  • Суммарное количество комментариев и среднее значение на пост.

4. График вовлечённости по постам

Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.

5. Активность по часам

Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.

6. Активность по дням

Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.

7. Топ-20 слов

Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».

📌 Выводы

  • Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.
  • Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.
  • Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.
  • Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.
Источник — http://digida.mgpu.ru/index.php?title=Аналитика_профиля_ВК&oldid=45432