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

Материал из Поле цифровой дидактики
Нет описания правки
 
(не показано 13 промежуточных версий 2 участников)
Строка 1: Строка 1:
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 24px; background-color: #edeef0;">
=== 📊 Аналитика профиля ВКонтакте ===


    <!-- Карточка проекта -->
'''Автор:''' Арлинская Александра
    <div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2>
        <p><b>Автор:</b> Арлинская Александра</p>
        <p><b>Группа:</b> АДЭУ-221</p>
        <p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p>
        <p><b>Статус проекта:</b> Выполнен</p>
    </div>


    <!-- Введение -->
'''Группа:''' АДЭУ-221
    <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>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p>
    </div>


    <!-- Цель проекта -->
'''Дисциплина:''' Работа с API социальных сетей и визуализация данных
    <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>
        <ul>
            <li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li>
            <li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li>
            <li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li>
            <li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li>
        </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>
Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.
        <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>
''Python 3.11, FastAPI, VK API, HTML5, CSS3, JavaScript, Chart.js''
                <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>
Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.
    </div>
 
{{#mermaid:
flowchart TB
    A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]
    B --> C[Backend<br/>FastAPI + Python]
    C --> D[VK API]
    D -->|данные профиля и постов| C
    C -->|аналитика| B
    B -->|визуализация| A
}}
 
=== 🛠 Диаграмма работы приложения «Аналитика профиля ВКонтакте» ===


<!-- Архитектура и блок-схема проекта (UML) -->
{{#mermaid: flowchart TB
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
    A[Начало] --> B(Пользователь вводит ID профиля)
     <h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3>
    B --> C(Backend получает запрос POST /analyze)
     <p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI) обрабатывает запросы к VK API, Frontend отображает информацию и визуализирует графики.</p>
    C --> D{Токен VK настроен?}
    D -->|Нет| E[Ошибка: токен не найден]
    D -->|Да| F(Запрос users.get к VK API)
    F --> G{Пользователь найден?}
    G -->|Нет| H[Ошибка: пользователь не найден]
    G -->|Да| I(Запрос wall.get для получения постов)
    I --> J{Стена доступна?}
     J -->|Нет| K[Ошибка: стена закрыта]
    J -->|Да| L[Сбор постов до 500 шт]
    L --> M(Функция process_posts)
    M --> N{Посты есть?}
    N -->|Нет| O[Аналитика пуста]
    N -->|Да| P[Расчёт графиков вовлечённости]
    P --> Q[Расчёт активности по часам]
    Q --> R[Расчёт активности по дням]
    R --> S[Сбор текста из постов]
    S --> T(Разбивка на слова и фильтрация стоп-слов)
    T --> U[Подсчёт топ-20 слов]
    U --> V[Агрегация сводной статистики]
     V --> W(Форматирование чисел через fmt_num)
    W --> X(Рендеринг result.html)
    X --> Y[Chart.js отрисовывает графики]
    Y --> Z[Пользователь видит аналитику]
    Z --> AA[Готово]
      
      
     {{#mermaid:
     style A fill:#4a76a8,stroke:#2c3e50,color:#fff
     flowchart TB
     style AA fill:#2e7d32,stroke:#1b5e20,color:#fff
        A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]
    style E fill:#e53935,stroke:#c62828,color:#fff
        B --> C[Backend<br/>FastAPI + Python]
    style H fill:#e53935,stroke:#c62828,color:#fff
        C --> D[VK API]
    style K fill:#e53935,stroke:#c62828,color:#fff
        D -->|данные профиля и постов| C
    style O fill:#ff9800,stroke:#ed6c02,color:#fff
        C -->|аналитика| B
}}
        B -->|визуализация| A
 
    }}
=== 🔑 Получение токена доступа VK API ===
</div>
 
Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.
 
==== Шаг 1. Создание приложения ====
 
На странице создания приложения необходимо указать следующие параметры:
* '''Тип приложения''' — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.
* '''Название приложения''' — задаётся уникальное имя (не менее трёх символов).
* '''Категория''' — выбирается «Инструменты» для аналитических сервисов.
 
[[Файл:Создание приложения.jpg|мини|центр]]


    <!-- Получение токена VK API -->
После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».
    <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;">🔑 Получение токена доступа VK API</h3>
        <p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p>
       
        <h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4>
        <p>На странице создания приложения необходимо указать следующие параметры:</p>
        <ul>
            <li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li>
            <li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li>
            <li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li>
        </ul>


[[Файл:Создание приложения.jpg|мини|центр]]
==== Шаг 2. Получение ключей доступа ====


        <p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p>
В разделе «Ключи доступа» генерируется токен для работы с API.
       
        <h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4>
        <p>В разделе «Ключи доступа» генерируется токен для работы с API. </p>


[[Файл:Ключ доступа.jpg|мини|центр]]
[[Файл:Ключ доступа.jpg|мини|центр]]
        <ul>
                             
        </ul>
               
        <p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p>
    </div>
 


    <!-- Структура проекта -->
Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.
    <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>
=== 🗂 Структура проекта ===
          
          
         <div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;">
         <div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;">
Строка 112: Строка 115:
             </div>
             </div>
         </div>
         </div>
       
        <p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p>
        <ul>
            <li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li>
            <li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li>
            <li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li>
            <li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li>
        </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);">
* '''main.py''' — серверная логика: маршруты, взаимодействие с VK API, обработка данных.
        <h3 style="color: #2c3e50;">📊 Описание визуализации</h3>
* '''templates/index.html''' — стартовая страница с полем ввода адреса профиля.
       
* '''templates/result.html''' — страница с полной аналитикой: графики, статистика, топ-слов.
        <h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4>
* '''.env''' — хранение токена доступа к VK API и других секретов.
        <p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p>
 
       
=== 📊 Описание визуализации ===
 
==== 1. Главная страница ====
 
Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.
 
[[Файл:Главная страница аналитики.png|мини|центр]]
[[Файл:Главная страница аналитики.png|мини|центр]]
        <h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4>
 
        <p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p>
==== 2. Карточка профиля ====
        <ul>
 
            <li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li>
В верхней части страницы результатов отображается основная информация о сообществе или пользователе:
            <li><b>Геолокация</b> — город (Saint Petersburg).</li>
* '''Имя профиля''' и статус (например, «Pavel Durov» и «Детектор»).
            <li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li>
* '''Геолокация''' — город (Saint Petersburg).
            <li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li>
* '''Дата рождения''' и '''пол''' (для пользователей).
            <li><b>Количество загруженных постов</b> (500).</li>
* '''Количество подписчиков''' — крупным шрифтом (4.8M).
        </ul>
* '''Количество загруженных постов''' (500).
       
 
[[Файл:Карточка профиля.png|мини|центр]]
[[Файл:Карточка профиля.png|мини|центр]]
        <h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4>
 
        <p>Блок с агрегированной статистикой по всем проанализированным постам:</p>
==== 3. Ключевые метрики ====
        <ul>
 
            <li>Общее количество постов.</li>
Блок с агрегированной статистикой по всем проанализированным постам:
            <li>Суммарное количество лайков и среднее значение на пост.</li>
* Общее количество постов.
            <li>Суммарное количество репостов.</li>
* Суммарное количество лайков и среднее значение на пост.
            <li>Суммарное количество комментариев и среднее значение на пост.</li>
* Суммарное количество репостов.
        </ul>
* Суммарное количество комментариев и среднее значение на пост.
       
 
[[Файл:Ключевые метрики.png|мини|центр]]
[[Файл:Ключевые метрики.png|мини|центр]]
        <h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4>
 
        <p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p>
==== 4. График вовлечённости по постам ====
       
 
        <h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4>
Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.
        <p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p>
 
       
==== 5. Активность по часам ====
        <h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4>
 
        <p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p>
Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.
       
 
==== 6. Активность по дням ====
 
Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.
 
[[Файл:Визуализация 1.png|мини|центр]]
[[Файл:Визуализация 1.png|мини|центр]]
        <h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4>


        <p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».
==== 7. Топ-20 слов ====
</p>
 
Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».
 
[[Файл:Топ20.png|мини|центр]]
[[Файл:Топ20.png|мини|центр]]
<div style="clear: both; margin-bottom: 1px;"></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>
При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.
         <ul>
 
             <li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li>
==== 📝 Отрывок кода, отвечающий за фильтрацию: ====
             <li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li>
 
            <li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li>
'''Список стоп-слов (русские и английские):'''
            <li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li>          
 
        </ul>
<syntaxhighlight lang="python">
    </div>
RU_STOPWORDS = {
    "и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",
     "так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",
    "мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",
    "даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",
    "вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",
    "может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",
    "была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",
    "ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",
    "здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",
    "куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",
    "хоть","после","над","больше","тот","через","эти","нас","про","всего","них",
    "какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",
    "иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",
    "конечно","всю","между","это","этим","при","нам","этих","та","те","при",
    "ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",
    "его","нет","ни","тот","раз","еще",
    "the","and","in","of","to","a","is","it","that","for","on","are","with",
    "was","at","be","by","this","have","from","or","an","but","not","they",
    "we","you","he","she","all","as","do","did","been","his","her","our","their",
}
</syntaxhighlight>
 
'''Функция обработки текста постов (фрагмент из process_posts):'''
 
<syntaxhighlight lang="python">
def process_posts(posts: list) -> dict:
    # ... остальной код ...
   
    # Сбор всего текста из постов
    all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))
   
    # Разбивка на слова (только слова длиной от 3 символов)
    words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())
   
    # Фильтрация стоп-слов
    filtered = [w for w in words if w not in RU_STOPWORDS]
   
    # Подсчёт топ-20 самых частых слов
    top_words = Counter(filtered).most_common(20)
   
    return {
         # ... остальные данные ...
         "words": {
             "labels": [w[0] for w in top_words],
             "data":  [w[1] for w in top_words],
        },
    }
</syntaxhighlight>
 
'''Как это работает:'''
* Из всех постов собирается текст и разбивается на отдельные слова
* Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)
* Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code>
* Подсчитывается частота оставшихся слов с помощью <code>Counter</code>
* Формируется топ-20 самых частых слов для отображения на графике
 
=== 📌 Выводы ===


</div>
* Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.
* Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.
* Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.
* Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.


[[Категория:Работа с API]]
[[Категория:Работа с API]]

Текущая версия от 11:15, 27 марта 2026

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

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

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

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

📘 Введение

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

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

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

💻 Стек технологий

Python 3.11, FastAPI, VK API, HTML5, CSS3, JavaScript, Chart.js

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

Проект построен на архитектуре клиент-сервер. 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», «россии», «пользователей», «сегодня».

🚫 Фильтрация стоп-слов

При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.

📝 Отрывок кода, отвечающий за фильтрацию:

Список стоп-слов (русские и английские):

RU_STOPWORDS = {
    "и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",
    "так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",
    "мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",
    "даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",
    "вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",
    "может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",
    "была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",
    "ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",
    "здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",
    "куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",
    "хоть","после","над","больше","тот","через","эти","нас","про","всего","них",
    "какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",
    "иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",
    "конечно","всю","между","это","этим","при","нам","этих","та","те","при",
    "ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",
    "его","нет","ни","тот","раз","еще",
    "the","and","in","of","to","a","is","it","that","for","on","are","with",
    "was","at","be","by","this","have","from","or","an","but","not","they",
    "we","you","he","she","all","as","do","did","been","his","her","our","their",
}

Функция обработки текста постов (фрагмент из process_posts):

def process_posts(posts: list) -> dict:
    # ... остальной код ...
    
    # Сбор всего текста из постов
    all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))
    
    # Разбивка на слова (только слова длиной от 3 символов)
    words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())
    
    # Фильтрация стоп-слов
    filtered = [w for w in words if w not in RU_STOPWORDS]
    
    # Подсчёт топ-20 самых частых слов
    top_words = Counter(filtered).most_common(20)
    
    return {
        # ... остальные данные ...
        "words": {
            "labels": [w[0] for w in top_words],
            "data":   [w[1] for w in top_words],
        },
    }

Как это работает:

  • Из всех постов собирается текст и разбивается на отдельные слова
  • Отбрасываются слова короче 3 символов (регулярное выражение r"\b[а-яёa-zA-Z]{3,}\b")
  • Из оставшихся слов удаляются стоп-слова из списка RU_STOPWORDS
  • Подсчитывается частота оставшихся слов с помощью Counter
  • Формируется топ-20 самых частых слов для отображения на графике

📌 Выводы

  • Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.
  • Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.
  • Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.
  • Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.