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

Материал из Поле цифровой дидактики
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 32: Строка 32:
         <p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p>
         <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>
 
<!-- Архитектура и блок-схема проекта (UML) -->
<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) обрабатывает запросы к VK API, Frontend отображает информацию и визуализирует графики.</p>
   
     {{#mermaid:
     {{#mermaid:
     flowchart TB
     flowchart TB

Версия от 09:29, 27 марта 2026

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

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

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

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

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

📘 Введение

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

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

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

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

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


🔑 Получение токена доступа 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=45543