http://digida.mgpu.ru/api.php?action=feedcontributions&feedformat=atom&user=Arlinskaya+Alexandra
Поле цифровой дидактики - Вклад [ru]
2026-05-21T03:08:34Z
Вклад
MediaWiki 1.44.0
http://digida.mgpu.ru/index.php?title=%D0%9E%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D1%83%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA%D0%B0:Patarakin&diff=45611
Обсуждение участника:Patarakin
2026-03-27T08:20:38Z
<p>Arlinskaya Alexandra: /* Исправление АДЭУ-221 */ новая тема</p>
<hr />
<div>== teachers_flow_web ==<br />
https://digida.mgpu.ru/index.php/Обсуждение:Заглавная_страница#Как_я_взаимодействию_с_ассистентом_искусственного_интеллекта_Перплексити<br />
<br />
==Тезаурус 4== <br />
<br />
Да, хорошо. Положите пожалуйста. Потому что моя основная проблема, что у меня VOSviewer не работает же и я не могла эти данные получить в таком виде, как вы их прислали. <br />
Но у меня почти получилось что-то похожее! Обходными путями странными) <br />
<br />
<br />
==Тезаурус 3==<br />
<br />
Хорошо, я остановлюсь, во избежание апокалипсиса) <br />
Но мне казалось, что все не так плохо, за исключением того, что в ручную просматривать фамилии в текстовом файле сложно. Попробовала поговорить с ЖПТ, он написал код для R. Но дальше уже я не сильна, какая-то каша началась.<br />
<br />
Я научилась в Экселе сделать функцию "Найти" и он выдает все ячейки с таким ФИО, там есть кнопка "Заменить". С ней еще не поняла как работать. И есть ли смысл вообще так делать.<br />
<br />
== Тезаурус 2== <br />
Я сохранила из экселя только столбец с авторами, он нормально открылся на маке потом, с этим разобралась. Сейчас основная проблема это понять какой логикой заменять? <br />
Потому что я вижу автора одного, например. Он есть как самостоятельный автор, есть в соавторстве. И непонятно как с этим соавторством быть. Объединять ли или нет, потому что с одним автором есть 2-3 статьи в соавторстве с разными людьми. <br />
Это еще полпроблемы. Проблема если в одном соавторстве на русском, а в другом на английском?<br />
На 59 строк обработала, приступаю на 270. <br />
Но 900 не факт, что осилю физически и эмоционально. <br />
<br />
Я сейчас делаю текстовый документ по каждому универу, в котором отдельных "Нормальных" авторов удаляю, а повторки оставляю и группирую, чтобы вам завтра показать. <br />
<br />
== Тезаурус== <br />
<br />
Здравствуйте, Евгений Дмитриевич! <br />
<br />
Начала разбираться с тезаурусом, возник ряд проблем: <br />
Если в датасете есть один автор с точками, другой без точек - мы их меняем. <br />
1. А если есть один автор, но он без точек в разных местах по одному - как быть? <br />
2. Если автор в соавторстве пишет, и в одном месте он с точками, а в другом - без точек. Что делаем в этом случае? <br />
<br />
Помогите пожалуйста) Айжан --[[Участник:Айжан Ужинкина]] ([[Обсуждение участника:Айжан Ужинкина|обсуждение]])<br />
<br />
== Просьба от Антюховой Эльзы ==<br />
<br />
Евгений Дмитриевич, посмотрите, пожалуйста, почему я не могу добавить приложения, разработанные на языке программирования Snap?<br />
<br />
== Если нужно задать ==<br />
<br />
Примерный вопрос ... --[[Участник:Patarakin|Patarakin]] ([[Обсуждение участника:Patarakin|обсуждение]]) 17:16, 25 ноября 2025 (MSK)<br />
<br />
Получилось добавить Dataset Lens как таблицу, сделала заголовки. Посмотрите, пожалуйста, и отметите в ЛМС это задание, если всё нормально. (Татьяна Астафьева) --[[Участник:Татьяна Астафьева|Татьяна Астафьева]] ([[Обсуждение участника:Татьяна Астафьева|обсуждение]]) 20:30, 25 ноября 2025 (MSK)<br />
<br />
<br />
Добрый вечер, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания --[[Участник:Дементьева Мария Владимировна|Дементьева Мария]] ([[Обсуждение участника:Дементьева Мария Владимировна|обсуждение]]) 16:08, 5 декабря 2025 (MSK)<br />
<br />
Евгений Дмитриевич, проверьте, пожалуйста, выполненные задания на моей странице и проставьте баллы в LMS --[[Участник:Ширкина Д|Ширкина Д]] ([[Обсуждение участника:Ширкина Д|обсуждение]]) 10:57, 6 декабря 2025 (MSK)<br />
<br />
<br />
Здравствуйте, Евгений Дмитриевич, посмотрите, пожалуйста, задания и отметьте, если все хорошо, в LMS, прошу прощения за скриншоты с телефона, не могу зайти на сайты через браузер ПК [[Участник: Tatiana Khaidarova]] ([[Обсуждение участника: Tatiana Khaidarova|обсуждение]]) 23:43, 6 декабря 2025 (MSK)<br />
<br />
Добрый вечер, посмотрите, пожалуйста, страницу и отметьте в LMS (Тюрикова Арина), если всё хорошо --[[Участник:Tyurikovaaa155|Tyurikovaaa155]] ([[Обсуждение участника:Tyurikovaaa155|обсуждение]])<br />
<br />
Здравствуйте, Евгений Дмитриевич! Посмотрите, пожалуйста, страницу (Семина Мария)<br />
[[Участник:Мария Семина|Мария Семина]] ([[Участник:Мария Семина|обсуждение]])<br />
<br />
Здравствуйте, Евгений Дмитриевич, ссылки в LMS проставила, посмотрите, пожалуйста [[Участник: Tatiana Khaidarova]] ([[Обсуждение участника: Tatiana Khaidarova|обсуждение]]) 15:39, 10 декабря 2025 (MSK)<br />
<br />
Добрый вечер, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания (Волынчикова Анна)<br />
<br />
Добрый вечер, посмотрите, пожалуйста, страницу и отметьте в LMS (Дмитренко Надежда), если всё хорошо и нужно ли что-то подправить --[[Участник:DmitrenkoNP|DmitrenkoNP]] ([[Обсуждение участника:DmitrenkoNP|обсуждение]])<br />
<br />
Добрый вечер. Выполнил задания. Просьба проверить и отметить в LMS. [[Участник:InasovAA]] (Инасов Артем)<br />
<br />
Добрый вечер. Выполнила задания Евгений Дмитриевич. посмотрите, пожалуйста, страничку, проверить и отметить в LMS. [[Участник:Карина]] (Мергалиева Карина)<br />
<br />
Сделал NetsBlox. [[Участник:Вольдемар]] (Шкабара Владимир)<br />
<br />
Здравствуйте, Евгений Дмитриевич. Сделал NetsBlox, прошу проверить. [[Участник:DzhamalkhanovRV]]<br />
<br />
Здравствуйте, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания. (Беляева Мария) [[Участник:БеляеваМД]]<br />
<br />
== Основы моделирования - результаты к зачету ==<br />
<br />
И здесь - пришел, указал, что сделал, оставил подпись --[[Участник:Patarakin|Patarakin]] ([[Обсуждение участника:Patarakin|обсуждение]]) 09:20, 26 декабря 2025 (MSK)<br />
<br />
== Проверка работ в LMS ==<br />
<br />
Здравствуйте, Евгений Дмитриевич!<br />
Добавил ссылки на выполненные работы в LMS.<br />
Просьба проверить. и проставить оценку.<br />
<br />
== Информация от Антюховой Эльзы ==<br />
<br />
Здравствуйте, Евгений Дмитриевич! <br />
Хочу сообщить о том, что я внесла необходимые правки в свою выпускную квалификационную работу. Буду очень признательна, если Вы сможете уделить время и посмотреть ее. Заранее спасибо!<br />
<br />
== Проверка статьи "Репрезентация мотивов самостоятельной учебной работы в личностных нарративах студентов" ==<br />
<br />
Евгений Дмитриевич, добрый день! Могли бы Вы проверить мою работу? Что нужно скорректировать/добавить?<br />
<br />
== Репрезентация мотивов самостоятельной учебной работы в личностных нарративах студентов ==<br />
<br />
Евгений Дмитриевич, я добавила категорию [[:Категория:Психо-лингвистическое исследование]] в конце текста статьи, но на странице моя работа не появилась<br />
Подскажите, что нужно поправить сейчас?<br />
<br />
== Исправление АДЭУ-221 ==<br />
<br />
Арлинская поправила [[Аналитика_профиля_ВК#🗂_Структура_проекта|Работа_Арлинская]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45610
Аналитика профиля ВК
2026-03-27T08:15:29Z
<p>Arlinskaya Alexandra: /* 🗂 Структура проекта */</p>
<hr />
<div>=== 📊 Аналитика профиля ВКонтакте ===<br />
<br />
'''Автор:''' Арлинская Александра<br />
<br />
'''Группа:''' АДЭУ-221<br />
<br />
'''Дисциплина:''' Работа с API социальных сетей и визуализация данных<br />
<br />
=== 📘 Введение ===<br />
<br />
Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.<br />
<br />
=== 🎯 Цель проекта ===<br />
<br />
* Создать удобный инструмент для анализа статистики сообществ ВКонтакте.<br />
* Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.<br />
* Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.<br />
* Провести текстовый анализ контента с выделением самых частых слов в публикациях.<br />
<br />
=== 💻 Стек технологий ===<br />
<br />
''Python 3.11, FastAPI, VK API, HTML5, CSS3, JavaScript, Chart.js''<br />
<br />
=== 🛠 Архитектура и блок-схема проекта ===<br />
<br />
Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
<br />
=== 🛠 Диаграмма работы приложения «Аналитика профиля ВКонтакте» ===<br />
<br />
{{#mermaid: flowchart TB<br />
A[Начало] --> B(Пользователь вводит ID профиля)<br />
B --> C(Backend получает запрос POST /analyze)<br />
C --> D{Токен VK настроен?}<br />
D -->|Нет| E[Ошибка: токен не найден]<br />
D -->|Да| F(Запрос users.get к VK API)<br />
F --> G{Пользователь найден?}<br />
G -->|Нет| H[Ошибка: пользователь не найден]<br />
G -->|Да| I(Запрос wall.get для получения постов)<br />
I --> J{Стена доступна?}<br />
J -->|Нет| K[Ошибка: стена закрыта]<br />
J -->|Да| L[Сбор постов до 500 шт]<br />
L --> M(Функция process_posts)<br />
M --> N{Посты есть?}<br />
N -->|Нет| O[Аналитика пуста]<br />
N -->|Да| P[Расчёт графиков вовлечённости]<br />
P --> Q[Расчёт активности по часам]<br />
Q --> R[Расчёт активности по дням]<br />
R --> S[Сбор текста из постов]<br />
S --> T(Разбивка на слова и фильтрация стоп-слов)<br />
T --> U[Подсчёт топ-20 слов]<br />
U --> V[Агрегация сводной статистики]<br />
V --> W(Форматирование чисел через fmt_num)<br />
W --> X(Рендеринг result.html)<br />
X --> Y[Chart.js отрисовывает графики]<br />
Y --> Z[Пользователь видит аналитику]<br />
Z --> AA[Готово]<br />
<br />
style A fill:#4a76a8,stroke:#2c3e50,color:#fff<br />
style AA fill:#2e7d32,stroke:#1b5e20,color:#fff<br />
style E fill:#e53935,stroke:#c62828,color:#fff<br />
style H fill:#e53935,stroke:#c62828,color:#fff<br />
style K fill:#e53935,stroke:#c62828,color:#fff<br />
style O fill:#ff9800,stroke:#ed6c02,color:#fff<br />
}}<br />
<br />
=== 🔑 Получение токена доступа VK API ===<br />
<br />
Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.<br />
<br />
==== Шаг 1. Создание приложения ====<br />
<br />
На странице создания приложения необходимо указать следующие параметры:<br />
* '''Тип приложения''' — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.<br />
* '''Название приложения''' — задаётся уникальное имя (не менее трёх символов).<br />
* '''Категория''' — выбирается «Инструменты» для аналитических сервисов.<br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».<br />
<br />
==== Шаг 2. Получение ключей доступа ====<br />
<br />
В разделе «Ключи доступа» генерируется токен для работы с API.<br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<br />
Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.<br />
<br />
=== 🗂 Структура проекта ===<br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
'''Назначение ключевых файлов:'''<br />
* '''main.py''' — серверная логика: маршруты, взаимодействие с VK API, обработка данных.<br />
* '''templates/index.html''' — стартовая страница с полем ввода адреса профиля.<br />
* '''templates/result.html''' — страница с полной аналитикой: графики, статистика, топ-слов.<br />
* '''.env''' — хранение токена доступа к VK API и других секретов.<br />
<br />
=== 📊 Описание визуализации ===<br />
<br />
==== 1. Главная страница ====<br />
<br />
Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.<br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<br />
==== 2. Карточка профиля ====<br />
<br />
В верхней части страницы результатов отображается основная информация о сообществе или пользователе:<br />
* '''Имя профиля''' и статус (например, «Pavel Durov» и «Детектор»).<br />
* '''Геолокация''' — город (Saint Petersburg).<br />
* '''Дата рождения''' и '''пол''' (для пользователей).<br />
* '''Количество подписчиков''' — крупным шрифтом (4.8M).<br />
* '''Количество загруженных постов''' (500).<br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<br />
==== 3. Ключевые метрики ====<br />
<br />
Блок с агрегированной статистикой по всем проанализированным постам:<br />
* Общее количество постов.<br />
* Суммарное количество лайков и среднее значение на пост.<br />
* Суммарное количество репостов.<br />
* Суммарное количество комментариев и среднее значение на пост.<br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<br />
==== 4. График вовлечённости по постам ====<br />
<br />
Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.<br />
<br />
==== 5. Активность по часам ====<br />
<br />
Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.<br />
<br />
==== 6. Активность по дням ====<br />
<br />
Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.<br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<br />
==== 7. Топ-20 слов ====<br />
<br />
Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
<br />
[[Файл:Топ20.png|мини|центр]]<br />
<br />
=== 🚫 Фильтрация стоп-слов ===<br />
<br />
При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.<br />
<br />
==== 📝 Отрывок кода, отвечающий за фильтрацию: ====<br />
<br />
'''Список стоп-слов (русские и английские):'''<br />
<br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
'''Функция обработки текста постов (фрагмент из process_posts):'''<br />
<br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
'''Как это работает:'''<br />
* Из всех постов собирается текст и разбивается на отдельные слова<br />
* Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)<br />
* Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code><br />
* Подсчитывается частота оставшихся слов с помощью <code>Counter</code><br />
* Формируется топ-20 самых частых слов для отображения на графике<br />
<br />
=== 📌 Выводы ===<br />
<br />
* Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.<br />
* Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.<br />
* Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.<br />
* Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.<br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45609
Аналитика профиля ВК
2026-03-27T08:13:29Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>=== 📊 Аналитика профиля ВКонтакте ===<br />
<br />
'''Автор:''' Арлинская Александра<br />
<br />
'''Группа:''' АДЭУ-221<br />
<br />
'''Дисциплина:''' Работа с API социальных сетей и визуализация данных<br />
<br />
=== 📘 Введение ===<br />
<br />
Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.<br />
<br />
=== 🎯 Цель проекта ===<br />
<br />
* Создать удобный инструмент для анализа статистики сообществ ВКонтакте.<br />
* Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.<br />
* Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.<br />
* Провести текстовый анализ контента с выделением самых частых слов в публикациях.<br />
<br />
=== 💻 Стек технологий ===<br />
<br />
''Python 3.11, FastAPI, VK API, HTML5, CSS3, JavaScript, Chart.js''<br />
<br />
=== 🛠 Архитектура и блок-схема проекта ===<br />
<br />
Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
<br />
=== 🛠 Диаграмма работы приложения «Аналитика профиля ВКонтакте» ===<br />
<br />
{{#mermaid: flowchart TB<br />
A[Начало] --> B(Пользователь вводит ID профиля)<br />
B --> C(Backend получает запрос POST /analyze)<br />
C --> D{Токен VK настроен?}<br />
D -->|Нет| E[Ошибка: токен не найден]<br />
D -->|Да| F(Запрос users.get к VK API)<br />
F --> G{Пользователь найден?}<br />
G -->|Нет| H[Ошибка: пользователь не найден]<br />
G -->|Да| I(Запрос wall.get для получения постов)<br />
I --> J{Стена доступна?}<br />
J -->|Нет| K[Ошибка: стена закрыта]<br />
J -->|Да| L[Сбор постов до 500 шт]<br />
L --> M(Функция process_posts)<br />
M --> N{Посты есть?}<br />
N -->|Нет| O[Аналитика пуста]<br />
N -->|Да| P[Расчёт графиков вовлечённости]<br />
P --> Q[Расчёт активности по часам]<br />
Q --> R[Расчёт активности по дням]<br />
R --> S[Сбор текста из постов]<br />
S --> T(Разбивка на слова и фильтрация стоп-слов)<br />
T --> U[Подсчёт топ-20 слов]<br />
U --> V[Агрегация сводной статистики]<br />
V --> W(Форматирование чисел через fmt_num)<br />
W --> X(Рендеринг result.html)<br />
X --> Y[Chart.js отрисовывает графики]<br />
Y --> Z[Пользователь видит аналитику]<br />
Z --> AA[Готово]<br />
<br />
style A fill:#4a76a8,stroke:#2c3e50,color:#fff<br />
style AA fill:#2e7d32,stroke:#1b5e20,color:#fff<br />
style E fill:#e53935,stroke:#c62828,color:#fff<br />
style H fill:#e53935,stroke:#c62828,color:#fff<br />
style K fill:#e53935,stroke:#c62828,color:#fff<br />
style O fill:#ff9800,stroke:#ed6c02,color:#fff<br />
}}<br />
<br />
=== 🔑 Получение токена доступа VK API ===<br />
<br />
Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.<br />
<br />
==== Шаг 1. Создание приложения ====<br />
<br />
На странице создания приложения необходимо указать следующие параметры:<br />
* '''Тип приложения''' — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.<br />
* '''Название приложения''' — задаётся уникальное имя (не менее трёх символов).<br />
* '''Категория''' — выбирается «Инструменты» для аналитических сервисов.<br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».<br />
<br />
==== Шаг 2. Получение ключей доступа ====<br />
<br />
В разделе «Ключи доступа» генерируется токен для работы с API.<br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<br />
Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.<br />
<br />
=== 🗂 Структура проекта ===<br />
<br />
VK-DASHBOARD/<br />
├── __pycache__/<br />
├── .venv/ # виртуальное окружение<br />
├── public/<br />
│ └── img/<br />
│ └── favicon.svg<br />
├── templates/<br />
│ ├── index.html # главная страница с формой ввода<br />
│ └── result.html # страница с результатами аналитики<br />
├── main.py # основной файл приложения (Flask/FastAPI)<br />
├── .env # переменные окружения (токен VK API)<br />
└── .env.example # пример конфигурации<br />
<br />
'''Назначение ключевых файлов:'''<br />
* '''main.py''' — серверная логика: маршруты, взаимодействие с VK API, обработка данных.<br />
* '''templates/index.html''' — стартовая страница с полем ввода адреса профиля.<br />
* '''templates/result.html''' — страница с полной аналитикой: графики, статистика, топ-слов.<br />
* '''.env''' — хранение токена доступа к VK API и других секретов.<br />
<br />
=== 📊 Описание визуализации ===<br />
<br />
==== 1. Главная страница ====<br />
<br />
Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.<br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<br />
==== 2. Карточка профиля ====<br />
<br />
В верхней части страницы результатов отображается основная информация о сообществе или пользователе:<br />
* '''Имя профиля''' и статус (например, «Pavel Durov» и «Детектор»).<br />
* '''Геолокация''' — город (Saint Petersburg).<br />
* '''Дата рождения''' и '''пол''' (для пользователей).<br />
* '''Количество подписчиков''' — крупным шрифтом (4.8M).<br />
* '''Количество загруженных постов''' (500).<br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<br />
==== 3. Ключевые метрики ====<br />
<br />
Блок с агрегированной статистикой по всем проанализированным постам:<br />
* Общее количество постов.<br />
* Суммарное количество лайков и среднее значение на пост.<br />
* Суммарное количество репостов.<br />
* Суммарное количество комментариев и среднее значение на пост.<br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<br />
==== 4. График вовлечённости по постам ====<br />
<br />
Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.<br />
<br />
==== 5. Активность по часам ====<br />
<br />
Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.<br />
<br />
==== 6. Активность по дням ====<br />
<br />
Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.<br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<br />
==== 7. Топ-20 слов ====<br />
<br />
Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
<br />
[[Файл:Топ20.png|мини|центр]]<br />
<br />
=== 🚫 Фильтрация стоп-слов ===<br />
<br />
При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.<br />
<br />
==== 📝 Отрывок кода, отвечающий за фильтрацию: ====<br />
<br />
'''Список стоп-слов (русские и английские):'''<br />
<br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
'''Функция обработки текста постов (фрагмент из process_posts):'''<br />
<br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
'''Как это работает:'''<br />
* Из всех постов собирается текст и разбивается на отдельные слова<br />
* Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)<br />
* Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code><br />
* Подсчитывается частота оставшихся слов с помощью <code>Counter</code><br />
* Формируется топ-20 самых частых слов для отображения на графике<br />
<br />
=== 📌 Выводы ===<br />
<br />
* Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.<br />
* Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.<br />
* Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.<br />
* Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.<br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45583
Аналитика профиля ВК
2026-03-27T07:18:20Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span> <br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<h3 style="color: #34495e;">🛠 Диаграмма работы приложения «Аналитика профиля ВКонтакте»</h3><br />
<br />
{{#mermaid: flowchart TB<br />
A[Начало] --> B(Пользователь вводит ID профиля)<br />
B --> C(Backend получает запрос POST /analyze)<br />
C --> D{Токен VK настроен?}<br />
D -->|Нет| E[Ошибка: токен не найден]<br />
D -->|Да| F(Запрос users.get к VK API)<br />
F --> G{Пользователь найден?}<br />
G -->|Нет| H[Ошибка: пользователь не найден]<br />
G -->|Да| I(Запрос wall.get для получения постов)<br />
I --> J{Стена доступна?}<br />
J -->|Нет| K[Ошибка: стена закрыта]<br />
J -->|Да| L[Сбор постов до 500 шт]<br />
L --> M(Функция process_posts)<br />
M --> N{Посты есть?}<br />
N -->|Нет| O[Аналитика пуста]<br />
N -->|Да| P[Расчёт графиков вовлечённости]<br />
P --> Q[Расчёт активности по часам]<br />
Q --> R[Расчёт активности по дням]<br />
R --> S[Сбор текста из постов]<br />
S --> T(Разбивка на слова и фильтрация стоп-слов)<br />
T --> U[Подсчёт топ-20 слов]<br />
U --> V[Агрегация сводной статистики]<br />
V --> W(Форматирование чисел через fmt_num)<br />
W --> X(Рендеринг result.html)<br />
X --> Y[Chart.js отрисовывает графики]<br />
Y --> Z[Пользователь видит аналитику]<br />
Z --> AA[Готово]<br />
<br />
style A fill:#4a76a8,stroke:#2c3e50,color:#fff<br />
style AA fill:#2e7d32,stroke:#1b5e20,color:#fff<br />
style E fill:#e53935,stroke:#c62828,color:#fff<br />
style H fill:#e53935,stroke:#c62828,color:#fff<br />
style K fill:#e53935,stroke:#c62828,color:#fff<br />
style O fill:#ff9800,stroke:#ed6c02,color:#fff<br />
}}<br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<br />
<p><b>Список стоп-слов (русские и английские):</b></p><br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Функция обработки текста постов (фрагмент из process_posts):</b></p><br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)</li><br />
<li>Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code></li><br />
<li>Подсчитывается частота оставшихся слов с помощью <code>Counter</code></li><br />
<li>Формируется топ-20 самых частых слов для отображения на графике</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45582
Аналитика профиля ВК
2026-03-27T07:17:15Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span> <br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<h3 style="color: #34495e;">🛠 Диаграмма работы приложения «Аналитика профиля ВКонтакте»</h3><br />
<br />
{{#mermaid: flowchart TB<br />
A[Начало] --> B(Пользователь вводит домен или ID профиля)<br />
B --> C(Backend получает запрос POST /analyze)<br />
C --> D{Токен VK настроен?}<br />
D -->|Нет| E[Ошибка: токен не найден]<br />
D -->|Да| F(Запрос users.get к VK API)<br />
F --> G{Пользователь найден?}<br />
G -->|Нет| H[Ошибка: пользователь не найден]<br />
G -->|Да| I(Запрос wall.get для получения постов)<br />
I --> J{Стена доступна?}<br />
J -->|Нет| K[Ошибка: стена закрыта]<br />
J -->|Да| L[Сбор постов до 500 шт]<br />
L --> M(Функция process_posts)<br />
M --> N{Посты есть?}<br />
N -->|Нет| O[Аналитика пуста]<br />
N -->|Да| P[Расчёт графиков вовлечённости]<br />
P --> Q[Расчёт активности по часам]<br />
Q --> R[Расчёт активности по дням]<br />
R --> S[Сбор текста из постов]<br />
S --> T(Разбивка на слова и фильтрация стоп-слов)<br />
T --> U[Подсчёт топ-20 слов]<br />
U --> V[Агрегация сводной статистики]<br />
V --> W(Форматирование чисел через fmt_num)<br />
W --> X(Рендеринг result.html)<br />
X --> Y[Chart.js отрисовывает графики]<br />
Y --> Z[Пользователь видит аналитику]<br />
Z --> AA[Готово]<br />
<br />
style A fill:#4a76a8,stroke:#2c3e50,color:#fff<br />
style AA fill:#2e7d32,stroke:#1b5e20,color:#fff<br />
style E fill:#e53935,stroke:#c62828,color:#fff<br />
style H fill:#e53935,stroke:#c62828,color:#fff<br />
style K fill:#e53935,stroke:#c62828,color:#fff<br />
style O fill:#ff9800,stroke:#ed6c02,color:#fff<br />
}}<br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<br />
<p><b>Список стоп-слов (русские и английские):</b></p><br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Функция обработки текста постов (фрагмент из process_posts):</b></p><br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)</li><br />
<li>Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code></li><br />
<li>Подсчитывается частота оставшихся слов с помощью <code>Counter</code></li><br />
<li>Формируется топ-20 самых частых слов для отображения на графике</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45561
Аналитика профиля ВК
2026-03-27T06:46:16Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span> <br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<br />
<p><b>Список стоп-слов (русские и английские):</b></p><br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Функция обработки текста постов (фрагмент из process_posts):</b></p><br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)</li><br />
<li>Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code></li><br />
<li>Подсчитывается частота оставшихся слов с помощью <code>Counter</code></li><br />
<li>Формируется топ-20 самых частых слов для отображения на графике</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45560
Аналитика профиля ВК
2026-03-27T06:43:12Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<br />
<p><b>Список стоп-слов (русские и английские):</b></p><br />
<syntaxhighlight lang="python"><br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"мне","было","вот","от","меня","ещё","нет","о","из","ему","теперь","когда",<br />
"даже","ну","вдруг","ли","если","уже","или","ни","быть","был","него","до",<br />
"вас","нибудь","опять","уж","вам","ведь","там","потом","себя","ничего","ей",<br />
"может","они","тут","где","есть","надо","ней","для","мы","тебя","их","чем",<br />
"была","сам","чтоб","без","будто","чего","раз","тоже","себе","под","будет",<br />
"ж","тогда","кто","этот","того","потому","этого","какой","совсем","ним",<br />
"здесь","этом","один","почти","мой","тем","чтобы","нее","сейчас","были",<br />
"куда","зачем","всех","никогда","можно","при","наконец","два","об","другой",<br />
"хоть","после","над","больше","тот","через","эти","нас","про","всего","них",<br />
"какая","много","разве","три","эту","моя","впрочем","свою","этой","перед",<br />
"иногда","лучше","чуть","том","нельзя","такой","им","более","всегда",<br />
"конечно","всю","между","это","этим","при","нам","этих","та","те","при",<br />
"ещe","тебе","со","вся","все","бы","ведь","вон","вот","да","даже","для",<br />
"его","нет","ни","тот","раз","еще",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
"was","at","be","by","this","have","from","or","an","but","not","they",<br />
"we","you","he","she","all","as","do","did","been","his","her","our","their",<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Функция обработки текста постов (фрагмент из process_posts):</b></p><br />
<syntaxhighlight lang="python"><br />
def process_posts(posts: list) -> dict:<br />
# ... остальной код ...<br />
<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {<br />
# ... остальные данные ...<br />
"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words],<br />
},<br />
}<br />
</syntaxhighlight><br />
<br />
<p><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов (регулярное выражение <code>r"\b[а-яёa-zA-Z]{3,}\b"</code>)</li><br />
<li>Из оставшихся слов удаляются стоп-слова из списка <code>RU_STOPWORDS</code></li><br />
<li>Подсчитывается частота оставшихся слов с помощью <code>Counter</code></li><br />
<li>Формируется топ-20 самых частых слов для отображения на графике</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45559
Аналитика профиля ВК
2026-03-27T06:39:32Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<br />
<pre style="background-color: #f5f5f5; padding: 15px; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: 13px;"><br />
# Список стоп-слов (русские и английские)<br />
RU_STOPWORDS = {<br />
"и","в","во","не","что","он","на","я","с","со","как","а","то","все","она",<br />
"так","его","но","да","ты","к","у","же","вы","за","бы","по","только","её",<br />
"the","and","in","of","to","a","is","it","that","for","on","are","with",<br />
}<br />
<br />
# Функция обработки текста постов<br />
def process_posts(posts: list) -> dict:<br />
# Сбор всего текста из постов<br />
all_text = " ".join(p.get("text", "") for p in posts if p.get("text"))<br />
<br />
# Разбивка на слова (только слова длиной от 3 символов)<br />
words = re.findall(r"\b[а-яёa-zA-Z]{3,}\b", all_text.lower())<br />
<br />
# Фильтрация стоп-слов<br />
filtered = [w for w in words if w not in RU_STOPWORDS]<br />
<br />
# Подсчёт топ-20 самых частых слов<br />
top_words = Counter(filtered).most_common(20)<br />
<br />
return {"words": {<br />
"labels": [w[0] for w in top_words],<br />
"data": [w[1] for w in top_words]<br />
}}<br />
</pre><br />
<br />
<p style="margin-top: 15px;"><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов</li><br />
<li>Из оставшихся слов удаляются стоп-слова (предлоги, местоимения, союзы)</li><br />
<li>Подсчитывается частота оставшихся слов и формируется топ-20</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45558
Аналитика профиля ВК
2026-03-27T06:37:36Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Фильтрация стоп-слов --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🚫 Фильтрация стоп-слов</h3><br />
<p>При анализе текстов постов система автоматически исключает часто встречающиеся, но не несущие смысловой нагрузки слова (предлоги, местоимения, союзы). Это позволяет выделить действительно значимые ключевые слова и получить точную картину тематики контента.</p><br />
<br />
<p><b>Стоп-слова включают:</b> «и», «в», «на», «не», «что», «он», «я», «с», «как», «а», «то», «все», «она», «но», «да», «ты», «к», «у», «же», «вы», «за», «бы», «по», «только», «её», «мне», «было», «вот», «от», «меня», «ещё», «нет», «о», «из», «ему», «теперь», «когда», «даже», «ну», «вдруг», «ли», «если», «уже», «или», «ни», «быть», «был», «него», «до», «вас», «нибудь», «опять», «уж», «вам», «ведь», «там», «потом», «себя», «ничего», «ей», «может», «они», «тут», «где», «есть», «надо», «ней», «для», «мы», «тебя», «их», «чем», «была», «сам», «чтоб», «без», «будто», «чего», «раз», «тоже», «себе», «под», «будет», «ж», «тогда», «кто», «этот», «того», «потому», «этого», «какой», «совсем», «ним», «здесь», «этом», «один», «почти», «мой», «тем», «чтобы», «нее», «сейчас», «были», «куда», «зачем», «всех», «никогда», «можно», «при», «наконец», «два», «об», «другой», «хоть», «после», «над», «больше», «тот», «через», «эти», «нас», «про», «всего», «них», «какая», «много», «разве», «три», «эту», «моя», «впрочем», «свою», «этой», «перед», «иногда», «лучше», «чуть», «том», «нельзя», «такой», «им», «более», «всегда», «конечно», «всю», «между», «это», «этим», «нам», «этих», «та», «те», «при», «ещe», «тебе», «со», «вся», «все», «бы», «ведь», «вон», «вот», «да», «даже», «для», «его», «нет», «ни», «тот», «раз», «еще».</p><br />
<br />
<p><b>А также английские стоп-слова:</b> «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».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">📝 Отрывок кода, отвечающий за фильтрацию:</h4><br />
<div style="background-color: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 13px;"><br />
<pre style="margin: 0; color: #d4d4d4;"><br />
<span style="color: #569cd6;"># Список стоп-слов (русские и английские)</span><br />
<span style="color: #569cd6;">RU_STOPWORDS</span> = {<br />
<span style="color: #ce9178;">"и"</span>,<span style="color: #ce9178;">"в"</span>,<span style="color: #ce9178;">"во"</span>,<span style="color: #ce9178;">"не"</span>,<span style="color: #ce9178;">"что"</span>,<span style="color: #ce9178;">"он"</span>,<span style="color: #ce9178;">"на"</span>,<span style="color: #ce9178;">"я"</span>,<span style="color: #ce9178;">"с"</span>,<span style="color: #ce9178;">"со"</span>,<span style="color: #ce9178;">"как"</span>,<span style="color: #ce9178;">"а"</span>,<span style="color: #ce9178;">"то"</span>,<span style="color: #ce9178;">"все"</span>,<span style="color: #ce9178;">"она"</span>,<br />
<span style="color: #ce9178;">"так"</span>,<span style="color: #ce9178;">"его"</span>,<span style="color: #ce9178;">"но"</span>,<span style="color: #ce9178;">"да"</span>,<span style="color: #ce9178;">"ты"</span>,<span style="color: #ce9178;">"к"</span>,<span style="color: #ce9178;">"у"</span>,<span style="color: #ce9178;">"же"</span>,<span style="color: #ce9178;">"вы"</span>,<span style="color: #ce9178;">"за"</span>,<span style="color: #ce9178;">"бы"</span>,<span style="color: #ce9178;">"по"</span>,<span style="color: #ce9178;">"только"</span>,<span style="color: #ce9178;">"её"</span>,<br />
<span style="color: #ce9178;">"the"</span>,<span style="color: #ce9178;">"and"</span>,<span style="color: #ce9178;">"in"</span>,<span style="color: #ce9178;">"of"</span>,<span style="color: #ce9178;">"to"</span>,<span style="color: #ce9178;">"a"</span>,<span style="color: #ce9178;">"is"</span>,<span style="color: #ce9178;">"it"</span>,<span style="color: #ce9178;">"that"</span>,<span style="color: #ce9178;">"for"</span>,<span style="color: #ce9178;">"on"</span>,<span style="color: #ce9178;">"are"</span>,<br />
}<br />
<br />
<span style="color: #569cd6;"># Функция обработки текста постов</span><br />
<span style="color: #569cd6;">def</span> <span style="color: #dcdcaa;">process_posts</span>(posts: list) -> dict:<br />
<span style="color: #6a9955;"># Сбор всего текста из постов</span><br />
all_text = <span style="color: #ce9178;">" "</span>.join(p.get(<span style="color: #ce9178;">"text"</span>, <span style="color: #ce9178;">""</span>) <span style="color: #569cd6;">for</span> p <span style="color: #569cd6;">in</span> posts <span style="color: #569cd6;">if</span> p.get(<span style="color: #ce9178;">"text"</span>))<br />
<br />
<span style="color: #6a9955;"># Разбивка на слова (только слова длиной от 3 символов)</span><br />
words = re.findall(<span style="color: #ce9178;">r"\b[а-яёa-zA-Z]{3,}\b"</span>, all_text.lower())<br />
<br />
<span style="color: #6a9955;"># Фильтрация стоп-слов</span><br />
filtered = [w <span style="color: #569cd6;">for</span> w <span style="color: #569cd6;">in</span> words <span style="color: #569cd6;">if</span> w <span style="color: #569cd6;">not</span> <span style="color: #569cd6;">in</span> RU_STOPWORDS]<br />
<br />
<span style="color: #6a9955;"># Подсчёт топ-20 самых частых слов</span><br />
top_words = Counter(filtered).most_common(<span style="color: #b5cea8;">20</span>)<br />
<br />
<span style="color: #569cd6;">return</span> {<span style="color: #ce9178;">"words"</span>: {<br />
<span style="color: #ce9178;">"labels"</span>: [w[<span style="color: #b5cea8;">0</span>] <span style="color: #569cd6;">for</span> w <span style="color: #569cd6;">in</span> top_words],<br />
<span style="color: #ce9178;">"data"</span>: [w[<span style="color: #b5cea8;">1</span>] <span style="color: #569cd6;">for</span> w <span style="color: #569cd6;">in</span> top_words]<br />
}}<br />
</pre><br />
</div><br />
<br />
<p style="margin-top: 15px;"><b>Как это работает:</b></p><br />
<ul><br />
<li>Из всех постов собирается текст и разбивается на отдельные слова</li><br />
<li>Отбрасываются слова короче 3 символов (чтобы исключить бессмысленные сочетания)</li><br />
<li>Из оставшихся слов удаляются стоп-слова (предлоги, местоимения, союзы)</li><br />
<li>Подсчитывается частота оставшихся слов и формируется топ-20</li><br />
<li>В результате пользователь видит самые значимые темы, которые чаще всего встречаются в постах сообщества</li><br />
</ul><br />
</div><br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45554
Аналитика профиля ВК
2026-03-27T06:34:50Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; justify-content: center; margin-top: 20px;"><br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45549
Аналитика профиля ВК
2026-03-27T06:32:54Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45548
Аналитика профиля ВК
2026-03-27T06:32:43Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45546
Аналитика профиля ВК
2026-03-27T06:32:31Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Стек технологий --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px;">💻 Стек технологий</h3><br />
<br />
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;"><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🐍 Python 3.11</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">⚡ FastAPI</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🌐 VK API</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📄 HTML5</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 CSS3</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📜 JavaScript</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">📊 Chart.js</span><br />
<span style="background-color: #eef2f6; padding: 6px 14px; border-radius: 20px; font-size: 14px;">🎨 Jinja2</span><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с [https://dev.vk.com/ru/reference API ВКонтакте] необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45543
Аналитика профиля ВК
2026-03-27T06:29:14Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45540
Аналитика профиля ВК
2026-03-27T06:27:42Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Архитектура и блок-схема проекта (UML) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI) обрабатывает запросы к VK API, Frontend отображает информацию и визуализирует графики.</p><br />
<br />
{{#mermaid:<br />
flowchart TB<br />
A[Пользователь] --> B[Frontend<br/>HTML/CSS/JS]<br />
B --> C[Backend<br/>FastAPI + Python]<br />
C --> D[VK API]<br />
D -->|данные профиля и постов| C<br />
C -->|аналитика| B<br />
B -->|визуализация| A<br />
}}<br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45531
Аналитика профиля ВК
2026-03-27T06:17:15Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Категория:Работа с API]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45529
Аналитика профиля ВК
2026-03-27T06:15:25Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div><br />
<br />
[[Участник:|Участник:]] ([[Обсуждение участника:|обсуждение]])</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45436
Аналитика профиля ВК
2026-03-26T20:36:57Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини|центр]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини|центр]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини|центр]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45434
Аналитика профиля ВК
2026-03-26T20:35:02Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини|центр]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45433
Аналитика профиля ВК
2026-03-26T20:33:54Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<br />
[[Файл:Создание приложения.jpg|мини]]<br />
<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45432
Аналитика профиля ВК
2026-03-26T20:31:30Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-сайт для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
[[Файл:Создание приложения.jpg|мини]]<br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. </p><br />
<br />
[[Файл:Ключ доступа.jpg|мини]]<br />
<ul><br />
<br />
</ul><br />
<br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
[[Файл:Главная страница аналитики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
[[Файл:Карточка профиля.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li>Общее количество постов.</li><br />
<li>Суммарное количество лайков и среднее значение на пост.</li><br />
<li>Суммарное количество репостов.</li><br />
<li>Суммарное количество комментариев и среднее значение на пост.</li><br />
</ul><br />
<br />
[[Файл:Ключевые метрики.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
[[Файл:Визуализация 1.png|мини]]<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».<br />
</p><br />
[[Файл:Топ20.png|мини]]<br />
<div style="clear: both; margin-bottom: 1px;"></div><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанный веб-сайт предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li> <br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%A2%D0%BE%D0%BF20.png&diff=45411
Файл:Топ20.png
2026-03-26T20:19:39Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Топ20-слов</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%92%D0%B8%D0%B7%D1%83%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_1.png&diff=45409
Файл:Визуализация 1.png
2026-03-26T20:18:37Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Визуализация 1</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%9A%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%8B%D0%B5_%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D0%BA%D0%B8.png&diff=45393
Файл:Ключевые метрики.png
2026-03-26T19:55:47Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Ключевые метрики</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%9A%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F.png&diff=45392
Файл:Карточка профиля.png
2026-03-26T19:53:49Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Карточка профиля</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%93%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0_%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B8.png&diff=45391
Файл:Главная страница аналитики.png
2026-03-26T19:51:04Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Главная страница веб-сайта</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%9A%D0%BB%D1%8E%D1%87_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B0.jpg&diff=45390
Файл:Ключ доступа.jpg
2026-03-26T19:46:05Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Ключ для выполнения запросов API ВКонтакте</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F.jpg&diff=45389
Файл:Создание приложения.jpg
2026-03-26T19:41:07Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Создание приложения</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45388
Аналитика профиля ВК
2026-03-26T19:32:46Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-приложение для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Настройка приложения в разделе для разработчиков</h4><br />
<p>После создания приложения открывается панель управления, где доступна следующая информация:</p><br />
<ul><br />
<li><b>Название приложения</b> — отображается созданное ранее имя (test).</li><br />
<li><b>Категория</b> — подтверждается выбранная категория (Инструменты).</li><br />
<li><b>Описание</b> — поле для заполнения информации о функциональности приложения.</li><br />
<li><b>Бонусная программа</b> — при выполнении условий можно получить до 25 000 ₽ на рекламу сервиса.</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 3. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. Доступны следующие опции:</p><br />
<ul><br />
<li><b>Другие площадки</b> — настройки интеграции с внешними сервисами.</li><br />
<li><b>Дополнительные</b> — расширенные настройки доступа.</li><br />
<li><b>Разработка</b> — технические параметры приложения.</li><br />
<li><b>Ключи доступа</b> — основное место для получения токена.</li><br />
<li><b>Удалить процедуры</b> — опция удаления настроенных процедур доступа.</li><br />
</ul><br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li><b>Общее количество постов</b> (500).</li><br />
<li><b>Суммарное количество лайков</b> (21.9M) и среднее значение на пост (43717.9).</li><br />
<li><b>Суммарное количество репостов</b> (944.3K).</li><br />
<li><b>Суммарное количество комментариев</b> и среднее значение на пост (0).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».</p><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанное приложение предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li><br />
<li>Проект может быть расширен добавлением прогнозных моделей, сравнением нескольких сообществ, а также экспортом отчётов в PDF или Excel.</li><br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45387
Аналитика профиля ВК
2026-03-26T19:32:04Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Федышина София</p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-приложение для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Получение токена VK API --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🔑 Получение токена доступа VK API</h3><br />
<p>Для работы с API ВКонтакте необходимо создать приложение и получить ключ доступа (токен). Ниже описан пошаговый процесс.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 1. Создание приложения</h4><br />
<p>На странице создания приложения необходимо указать следующие параметры:</p><br />
<ul><br />
<li><b>Тип приложения</b> — выбирается «Мини-приложение» для получения доступа к API сообществ и пользователей.</li><br />
<li><b>Название приложения</b> — задаётся уникальное имя (не менее трёх символов).</li><br />
<li><b>Категория</b> — выбирается «Инструменты» для аналитических сервисов.</li><br />
</ul><br />
<p>После заполнения формы необходимо подтвердить согласие с правилами размещения и платформы, затем нажать кнопку «Создать».</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 2. Настройка приложения в разделе для разработчиков</h4><br />
<p>После создания приложения открывается панель управления, где доступна следующая информация:</p><br />
<ul><br />
<li><b>Название приложения</b> — отображается созданное ранее имя (test).</li><br />
<li><b>Категория</b> — подтверждается выбранная категория (Инструменты).</li><br />
<li><b>Описание</b> — поле для заполнения информации о функциональности приложения.</li><br />
<li><b>Бонусная программа</b> — при выполнении условий можно получить до 25 000 ₽ на рекламу сервиса.</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">Шаг 3. Получение ключей доступа</h4><br />
<p>В разделе «Ключи доступа» генерируется токен для работы с API. Доступны следующие опции:</p><br />
<ul><br />
<li><b>Другие площадки</b> — настройки интеграции с внешними сервисами.</li><br />
<li><b>Дополнительные</b> — расширенные настройки доступа.</li><br />
<li><b>Разработка</b> — технические параметры приложения.</li><br />
<li><b>Ключи доступа</b> — основное место для получения токена.</li><br />
<li><b>Удалить процедуры</b> — опция удаления настроенных процедур доступа.</li><br />
</ul><br />
<p>Сгенерированный токен сохраняется в файле <code>.env</code> проекта для дальнейшего использования при запросах к VK API.</p><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li><b>Общее количество постов</b> (500).</li><br />
<li><b>Суммарное количество лайков</b> (21.9M) и среднее значение на пост (43717.9).</li><br />
<li><b>Суммарное количество репостов</b> (944.3K).</li><br />
<li><b>Суммарное количество комментариев</b> и среднее значение на пост (0).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма, показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<p>Список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».</p><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанное приложение предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Для работы с API был успешно получен токен доступа через создание мини-приложения в VK.</li><br />
<li>Проект может быть расширен добавлением прогнозных моделей, сравнением нескольких сообществ, а также экспортом отчётов в PDF или Excel.</li><br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F_%D0%92%D0%9A&diff=45381
Аналитика профиля ВК
2026-03-26T19:21:54Z
<p>Arlinskaya Alexandra: Новая страница: «<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: 1...»</p>
<hr />
<div><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;"><br />
<br />
<!-- Карточка проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h2 style="color: #2c3e50; border-bottom: 2px solid #4a76a8; padding-bottom: 10px; margin-top: 0;">📊 Аналитика профиля ВКонтакте</h2><br />
<p><b>Автор:</b> Арлинская Александра </p><br />
<p><b>Группа:</b> АДЭУ-221</p><br />
<p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p><br />
<p><b>Статус проекта:</b> Выполнен</p><br />
</div><br />
<br />
<!-- Введение --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📘 Введение</h3><br />
<p>Проект представляет собой веб-приложение для детального анализа публичной страницы или профиля ВКонтакте. Пользователь вводит адрес сообщества, после чего система собирает данные через официальное API VK, обрабатывает их и отображает в виде структурированной статистики и наглядных графиков.</p><br />
</div><br />
<br />
<!-- Цель проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🎯 Цель проекта</h3><br />
<ul><br />
<li>Создать удобный инструмент для анализа статистики сообществ ВКонтакте.</li><br />
<li>Предоставить пользователю ключевые метрики: количество подписчиков, постов, суммарные лайки, репосты и комментарии.</li><br />
<li>Визуализировать динамику вовлечённости по времени: график активности по постам, распределение по часам и дням недели.</li><br />
<li>Провести текстовый анализ контента с выделением самых частых слов в публикациях.</li><br />
</ul><br />
</div><br />
<br />
<!-- Архитектура и блок-схема --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3><br />
<p>Проект построен на архитектуре клиент-сервер. Backend (Python + FastAPI/Flask) обрабатывает запросы к VK API, собирает и агрегирует данные. Frontend (HTML/CSS/JS) отображает информацию и визуализирует графики с использованием библиотеки Chart.js.</p><br />
<br />
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;"><br />
<div style="position: relative; width: 320px;"><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Ввод домена или ID профиля</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Запрос к VK API (стена, профиль, статистика)</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Сбор и агрегация данных: лайки, репосты, комментарии, текст постов</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Расчёт метрик: вовлечённость, частотность слов, временные паттерны</div><br />
<div style="width: 2px; height: 15px; background-color: #4a76a8; margin: 0 auto;"></div><br />
<div style="background-color: #4a76a8; color: white; text-align: center; padding: 10px 0; border-radius: 8px; margin: 5px 0;">Визуализация: графики активности, диаграммы, топ-слов</div><br />
</div><br />
</div><br />
</div><br />
<br />
<!-- Структура проекта --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">🗂 Структура проекта</h3><br />
<br />
<div style="font-family: monospace; background-color: #2c3e50; color: #e8e8e8; padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 14px;"><br />
<div style="color: #6aab9a;">VK-DASHBOARD/</div><br />
<div style="margin-left: 20px;"><br />
<div>📁 <span style="color: #e5c07b;">__pycache__/</span></div><br />
<div>📁 <span style="color: #e5c07b;">.venv/</span> — виртуальное окружение</div><br />
<div>📁 <span style="color: #e5c07b;">public/</span></div><br />
<div style="margin-left: 20px;">📁 img/</div><br />
<div style="margin-left: 40px;">🖼 favicon.svg</div><br />
<div>📁 <span style="color: #e5c07b;">templates/</span></div><br />
<div style="margin-left: 20px;">📄 index.html — главная страница с формой ввода</div><br />
<div style="margin-left: 20px;">📄 result.html — страница с результатами аналитики</div><br />
<div>📄 <span style="color: #e5c07b;">main.py</span> — основной файл приложения (Flask/FastAPI)</div><br />
<div>📄 <span style="color: #e5c07b;">.env</span> — переменные окружения (токен VK API)</div><br />
<div>📄 <span style="color: #e5c07b;">.env.example</span> — пример конфигурации</div><br />
</div><br />
</div><br />
<br />
<p style="margin-top: 16px;"><b>Назначение ключевых файлов:</b></p><br />
<ul><br />
<li><b>main.py</b> — серверная логика: маршруты, взаимодействие с VK API, обработка данных.</li><br />
<li><b>templates/index.html</b> — стартовая страница с полем ввода адреса профиля.</li><br />
<li><b>templates/result.html</b> — страница с полной аналитикой: графики, статистика, топ-слов.</li><br />
<li><b>.env</b> — хранение токена доступа к VK API и других секретов.</li><br />
</ul><br />
</div><br />
<br />
<!-- Описание визуализации (на основе скриншотов) --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">1. Главная страница</h4><br />
<p>Пользователю предлагается ввести адрес страницы (например, <code>durov</code> или полную ссылку <code>vk.com/durov</code>). После нажатия кнопки «Анализировать» система начинает сбор данных. Кнопка «Сбросить» очищает форму для нового запроса.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">2. Карточка профиля</h4><br />
<p>В верхней части страницы результатов отображается основная информация о сообществе или пользователе:</p><br />
<ul><br />
<li><b>Имя профиля</b> и статус (например, «Pavel Durov» и «Детектор»).</li><br />
<li><b>Геолокация</b> — город (Saint Petersburg).</li><br />
<li><b>Дата рождения</b> и <b>пол</b> (для пользователей).</li><br />
<li><b>Количество подписчиков</b> — крупным шрифтом (4.8M).</li><br />
<li><b>Количество загруженных постов</b> (500).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">3. Ключевые метрики</h4><br />
<p>Блок с агрегированной статистикой по всем проанализированным постам:</p><br />
<ul><br />
<li><b>Общее количество постов</b> (500).</li><br />
<li><b>Суммарное количество лайков</b> (21.9M) и среднее значение на пост (43717.9).</li><br />
<li><b>Суммарное количество репостов</b> (944.3K).</li><br />
<li><b>Суммарное количество комментариев</b> и среднее значение на пост (0).</li><br />
</ul><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">4. График вовлечённости по постам</h4><br />
<p>Линейный график, отображающий динамику трёх метрик (лайки, репосты, комментарии) для последних 50 постов. По оси X — даты публикаций, по оси Y — количество взаимодействий. График позволяет визуально оценить пики активности и выявить наиболее успешные публикации.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">5. Активность по часам</h4><br />
<p>Горизонтальная столбчатая диаграмма (или круговой график), показывающая распределение публикаций по часам суток. Позволяет определить, в какое время автор чаще всего публикует контент. Часовые интервалы от 00:00 до 21:00.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">6. Активность по дням</h4><br />
<p>Столбчатая диаграмма, отображающая количество публикаций по дням недели (Пн, Вт, Ср, Чт, Пт, Сб, Вс). Помогает выявить наиболее активные дни ведения сообщества.</p><br />
<br />
<h4 style="color: #4a76a8; margin-top: 20px;">7. Топ-20 слов</h4><br />
<p>Облако слов или список наиболее часто встречающихся слов в текстах постов. Анализ позволяет понять основные темы и ключевые понятия, вокруг которых строится контент сообщества. Пример: «вконтакте», «telegram», «россии», «пользователей», «сегодня».</p><br />
</div><br />
<br />
<!-- Выводы --><br />
<div style="background-color: #ffffff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br />
<h3 style="color: #2c3e50;">📌 Выводы</h3><br />
<ul><br />
<li>Разработанное приложение предоставляет полную аналитику публичного профиля ВКонтакте: от базовых метрик до детальных графиков вовлечённости.</li><br />
<li>Визуализация данных включает линейные графики динамики постов, распределение по часам и дням недели, а также текстовый анализ с выделением ключевых слов.</li><br />
<li>Интерфейс выполнен в стилистике VK: светлый фон, акцентные синие элементы, удобная карточная структура.</li><br />
<li>Проект может быть расширен добавлением прогнозных моделей, сравнением нескольких сообществ, а также экспортом отчётов в PDF или Excel.</li><br />
</ul><br />
</div><br />
<br />
</div></div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:Arlinskaya_Alexandra&diff=45366
Участник:Arlinskaya Alexandra
2026-03-26T19:05:35Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>{{UserMGPU<br />
|Field_of_knowledge=Математика, Экономика, Искусственный интеллект, Большие данные<br />
|Environment=Python, SQL, JavaScrip, PHP, CSS, HTML, 1С, MySQL, PostgreSQL<br />
|Position=Бакалавриат<br />
|Profile=Математика, Информатика, Обществознание, Экономика<br />
|PedDirection=Нет<br />
|Working_On=Игра в цвета, Аналитика профиля ВК<br />
}}<br />
[[Категория: UserMGPU]]<br />
[[Категория: АДЭУ-221]]</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29329
Игра в цвета
2025-05-26T13:14:19Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
блоки1.png|<small>Блоки игровых страниц</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
блоки3.png|<small>Блоки экрана результата</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29328
Игра в цвета
2025-05-26T13:12:07Z
<p>Arlinskaya Alexandra: /* Финальный экран */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
блоки1.png|<small>Блоки игровых страниц</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
блоки3.png|<small>Блоки экрана результата</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29327
Игра в цвета
2025-05-26T13:11:15Z
<p>Arlinskaya Alexandra: /* Финальный экран */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
блоки1.png|<small>Блоки игровых страниц</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
блоки3|<small>Блоки экрана результата</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%91%D0%BB%D0%BE%D0%BA%D0%B83.png&diff=29326
Файл:Блоки3.png
2025-05-26T13:10:59Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Блоки экрана результата</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29325
Игра в цвета
2025-05-26T13:09:54Z
<p>Arlinskaya Alexandra: /* Функциональные разделы и описание приложения "Игра в цвета" */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
блоки1.png|<small>Блоки игровых страниц</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29324
Игра в цвета
2025-05-26T13:09:28Z
<p>Arlinskaya Alexandra: /* Игровые экраны (3 уровня) */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
блоки1.png|<small>Блоки игровых страниц</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%91%D0%BB%D0%BE%D0%BA%D0%B81.png&diff=29323
Файл:Блоки1.png
2025-05-26T13:09:12Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Блоки игровых страниц</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29322
Игра в цвета
2025-05-26T13:07:29Z
<p>Arlinskaya Alexandra: /* Главная страница приложения: */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
блоки.png|<small>Блоки главной страницы</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:%D0%91%D0%BB%D0%BE%D0%BA%D0%B8.png&diff=29321
Файл:Блоки.png
2025-05-26T13:06:53Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Блоки главной страницы</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29319
Игра в цвета
2025-05-26T10:20:59Z
<p>Arlinskaya Alexandra: /* Главная страница приложения: */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29318
Игра в цвета
2025-05-26T10:20:43Z
<p>Arlinskaya Alexandra: /* Главная страница приложения: */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
glavnaya.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%A4%D0%B0%D0%B9%D0%BB:Glavnaya.png&diff=29317
Файл:Glavnaya.png
2025-05-26T10:20:23Z
<p>Arlinskaya Alexandra: </p>
<hr />
<div>Главная страница</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29316
Игра в цвета
2025-05-26T10:18:35Z
<p>Arlinskaya Alexandra: /* Игровые экраны (3 уровня) */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
Файл:Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
<br />
1. Цветовую головоломку:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
<br />
2. Варианты ответов (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29315
Игра в цвета
2025-05-26T10:18:11Z
<p>Arlinskaya Alexandra: /* Финальный экран */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
Файл:Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
1. **Цветовую головоломку**:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
2. **Варианты ответов** (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29314
Игра в цвета
2025-05-26T10:17:51Z
<p>Arlinskaya Alexandra: /* Финальный экран */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
Файл:Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
1. **Цветовую головоломку**:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
2. **Варианты ответов** (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29313
Игра в цвета
2025-05-26T10:17:16Z
<p>Arlinskaya Alexandra: /* Главная страница приложения: */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
<br />
Файл:Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
1. **Цветовую головоломку**:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
2. **Варианты ответов** (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29312
Игра в цвета
2025-05-26T10:16:27Z
<p>Arlinskaya Alexandra: /* Функциональные разделы и описание приложения "Игра в цвета" */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
<br />
🔹 Простой и понятный интерфейс<br />
<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
1. **Цветовую головоломку**:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
2. **Варианты ответов** (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra
http://digida.mgpu.ru/index.php?title=%D0%98%D0%B3%D1%80%D0%B0_%D0%B2_%D1%86%D0%B2%D0%B5%D1%82%D0%B0&diff=29311
Игра в цвета
2025-05-26T10:15:48Z
<p>Arlinskaya Alexandra: /* Функциональные разделы и описание приложения "Игра в цвета" */</p>
<hr />
<div>{{Scripting Tutorials<br />
|Description=Подготовлено АрлинскоЙ Александрой<br />
Игра в цвета — это увлекательная игра-викторина, где игрокам нужно угадать название цвета, который визуально представлен в противоположном оттенке. Например, слово "Красный" может быть написано синим цветом, а "Зелёный" — розовым. Задача — выбрать правильный вариант из предложенных, проигнорировав визуальную "ловушку".<br />
Как играть:<br />
<br />
На экране появляется слово, окрашенное в противоположный ему цвет (например, "Жёлтый" фиолетовым).<br />
<br />
Игрок выбирает верное название цвета из 3 вариантов. За правильный ответ начисляются очки.<br />
<br />
|Field_of_knowledge=Информатика, Образование, Моделирование<br />
|FieldActivity=Digital Citizen<br />
|Возрастная категория=6+<br />
|Environment=Thunkable<br />
}}<br />
==Приложение "Игра в цвета"== <br />
Ссылка на приложение:<br />
https://x.thunkable.com/projectPage/6834223819f2371b17d0c233<br />
<br />
==Диаграмма работы приложения "Игра в цвета"==<br />
<graphviz><br />
digraph ColorMind {<br />
rankdir=TB;<br />
node [fontsize=12, shape="ellipse"];<br />
<br />
"Приложение" -> "Главный экран" [label="открывает"];<br />
"Главный экран" -> "Экран задания 1" [label="кнопка 'Начать игру'"];<br />
<br />
"Экран задания 1" -> "Проверка ответа 1" [label="выбор варианта"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="верный ответ"];<br />
"Проверка ответа 1" -> "Экран задания 2" [label="неверный ответ"];<br />
<br />
"Экран задания 2" -> "Проверка ответа 2" [label="выбор варианта"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="верный ответ"];<br />
"Проверка ответа 2" -> "Экран задания 3" [label="неверный ответ"];<br />
<br />
"Экран задания 3" -> "Проверка ответа 3" [label="выбор варианта"];<br />
"Проверка ответа 3" -> "Итоговый экран" [label="любой ответ"];<br />
<br />
"Итоговый экран" -> "Главный экран" [label="кнопка 'Начать сначала'"];<br />
<br />
}<br />
</graphviz><br />
<br />
==Описание приложения == <br />
Игра в цвета - весёлая игра на внимательность и знание цветов! 🌈<br />
<br />
Это простое и увлекательное приложение, где нужно угадывать настоящие названия цветов, несмотря на хитрые визуальные обманки. Каждый раунд - это новый вызов вашей внимательности!<br />
<br />
==Thunkable и как им пользоваться== <br />
* [[Ликбез по инструменту Thunkable]]<br />
<br />
==Функциональные разделы и описание приложения "Игра в цвета"==<br />
Создание интуитивно понятного мобильного приложения, развивающего внимательность и когнитивные способности через увлекательный игровой процесс с цветами.<br />
<br />
Основной функционал<br />
<br />
🎨 Игровой процесс:<br />
<br />
Угадывание реального названия цвета, когда само слово окрашено в противоположный оттенок<br />
<br />
Три варианта сложности: базовые, расширенные и редкие цвета<br />
<br />
Несколько игровых режимов на выбор<br />
<br />
📊 Система прогресса:<br />
<br />
Начисление очков за правильные ответы<br />
<br />
Технические особенности<br />
🔹 Простой и понятный интерфейс<br />
🔹 Адаптивный дизайн для всех устройств<br />
<br />
Целевая аудитория<br />
Приложение предназначено для:<br />
<br />
Детей (развитие цветовосприятия)<br />
<br />
Взрослых (тренировка внимательности)<br />
<br />
Пожилых людей (поддержание когнитивных функций)<br />
<br />
Приложение не требует специальных знаний и подходит для пользователей любого возраста. Простой интерфейс делает процесс игры максимально комфортным, а система достижений мотивирует к совершенствованию результатов.<br />
<br />
===Главная страница приложения:===<br />
<gallery><br />
Glav.png|<small>Главная_страница</small><br />
</gallery><br />
<br />
На главной странице пользователь может:<br />
<br />
Начать игру с помощью нажатия кнопки "Начать"<br />
<br />
=== Игровые экраны (3 уровня) ===<br />
<gallery><br />
level1.png|<small>Раунд 1</small><br />
level2.png|<small>Раунд 2</small><br />
level3.png|<small>Раунд 3</small><br />
</gallery><br />
<br />
Каждый игровой экран содержит:<br />
1. **Цветовую головоломку**:<br />
- Слово с названием цвета (например "Красный")<br />
- Текст окрашен в контрастный цвет <br />
2. **Варианты ответов** (3 кнопки):<br />
- 1 правильный ответ (название цвета)<br />
- 2 случайных цвета-дистрактора<br />
<br />
=== Финальный экран ===<br />
<gallery><br />
results.png|<small>Экран результатов</small><br />
</gallery><br />
<br />
После завершения 3 раундов показывается:<br />
• Итоговый счет (например "2/3 правильных ответов")<br />
• Кнопка "Играть снова" (возврат к первому раунду)</div>
Arlinskaya Alexandra