Аналитический инструмент «Золотой час контента»: различия между версиями

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

📊 Аналитика «Золотого часа контента»

Автор: Федышина София

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

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

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

📘 Введение

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

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

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

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

Проект состоит из backend и frontend. Backend обрабатывает данные VK API, а frontend визуализирует графики и рекомендации.

Ввод домена VK пользователем

Запрос к VK API (Backend)

Сбор лайков, комментариев и репостов

Вычисление вовлеченности (Engagement)

Визуализация графиков и рекомендации (Frontend)

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

backend/app.py — основной скрипт Python для работы с VK API

analytics.py — Cбор данных, обработка VK API

vk_service.py — модуль для работы с VK API

файл .env - содержит токен

frontend/index.html:

<code>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Аналитика "Золотого часа"</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #0f172a;
            color: white;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        input, button {
            padding: 12px;
            border-radius: 10px;
            border: none;
            margin: 5px;
        }

        button {
            background: #2563eb;
            color: white;
            cursor: pointer;
        }

        .ai-box {
            margin: 20px auto;
            padding: 20px;
            background: #1e293b;
            border-radius: 15px;
            text-align: center;
        }

        .charts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        canvas {
            background: #1e293b;
            padding: 15px;
            border-radius: 15px;
        }
    </style>
</head>
<body>

<h1>📊 Аналитика "Золотого часа контента"</h1>

<div class="controls">
    <input id="group" placeholder="Введите домен VK (например: kosti_bloggers)">
    <button onclick="loadData()">Анализировать</button>
</div>

<!-- Блок рекомендаций -->
<div class="ai-box">
    <h3>Рекомендации</h3>
    <p id="aiText">Здесь появятся рекомендации...</p>
</div>

<div class="charts">
    <canvas id="engagementChart"></canvas>
    <canvas id="multiChart"></canvas>
    <canvas id="areaChart"></canvas>
    <canvas id="polarChart"></canvas>
</div>

<script>
let charts = [];

function destroyCharts() {
    charts.forEach(c => c.destroy());
    charts = [];
}

function generateAI(bestHour, engagement) {
    const max = Math.max(...engagement);
    const avg = engagement.reduce((a, b) => a + b, 0) / engagement.length;
    const diff = ((max / avg - 1) * 100).toFixed(0);
    return `Рекомендуем публиковать посты примерно в ${bestHour}:00. В этот час вовлеченность выше средней на ${diff}%. Это оптимальное время для максимального охвата аудитории.`;
}

async function loadData() {
    const group = document.getElementById("group").value;
    if (!group) return alert("Введите домен VK!");

    try {
        const res = await fetch(`http://127.0.0.1:8000/analyze?domain=${group}`);
        const data = await res.json();

        const hours = data.data.map(d => d.hour);
        const engagement = data.data.map(d => d.engagement);
        const likes = data.data.map(d => d.likes);
        const comments = data.data.map(d => d.comments);
        const reposts = data.data.map(d => d.reposts);

        destroyCharts();

        const maxVal = Math.max(...engagement);

        // 1. Столбчатая диаграмма (главный график)
        charts.push(new Chart(document.getElementById("engagementChart"), {
            type: 'bar',
            data: {
                labels: hours,
                datasets: [{
                    label: 'Вовлеченность',
                    data: engagement,
                    backgroundColor: engagement.map(v => v === maxVal ? '#FFD700' : '#3b82f6')
                }]
            }
        }));

        // 2. Много-линейный график
        charts.push(new Chart(document.getElementById("multiChart"), {
            type: 'line',
            data: {
                labels: hours,
                datasets: [
                    { label: 'Лайки', data: likes, borderColor: '#3b82f6', tension: 0.4 },
                    { label: 'Комментарии', data: comments, borderColor: '#16a34a', tension: 0.4 },
                    { label: 'Репосты', data: reposts, borderColor: '#f97316', tension: 0.4 }
                ]
            }
        }));

        // 3. Area chart
        charts.push(new Chart(document.getElementById("areaChart"), {
            type: 'line',
            data: {
                labels: hours,
                datasets: [
                    { label: 'Лайки', data: likes, fill: true, backgroundColor: 'rgba(59,130,246,0.3)', borderColor: '#3b82f6' },
                    { label: 'Комментарии', data: comments, fill: true, backgroundColor: 'rgba(22,163,52,0.3)', borderColor: '#16a34a' },
                    { label: 'Репосты', data: reposts, fill: true, backgroundColor: 'rgba(249,115,22,0.3)', borderColor: '#f97316' }
                ]
            }
        }));

        // 4. Polar chart
        charts.push(new Chart(document.getElementById("polarChart"), {
            type: 'polarArea',
            data: {
                labels: hours,
                datasets: [{
                    label: 'Распределение активности',
                    data: engagement,
                    backgroundColor: engagement.map(v => `hsl(${Math.random()*360}, 70%, 50%)`)
                }]
            }
        }));

        document.getElementById("aiText").innerText = generateAI(data.best_hour, engagement);

    } catch (error) {
        alert("Ошибка при загрузке данных. Проверьте сервер и домен.");
        console.error(error);
    }
}
</script>

</body>
</html>
</code>

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

Первичная страница

Необходимо ввести домен сообщества VK и нажать кнопку "Анализировать"

Рекомендации

Столбчатая диаграмма (Engagement) — пики вовлеченности по часам публикации, золотым выделен максимальный час.

Видим, в какое время в анализируемом сообществе собирает больше активности пользователей

Много-линейный график — динамика лайков, комментариев и репостов.

Видим, в какое время какой вид взаимодействия с публикациями на пике

📌 Выводы

Проект позволяет определить «золотой час» публикаций в VK.
Вовлеченность оценивается комплексно: лайки, комментарии и репосты.
Визуализация нескольких графиков делает анализ наглядным и информативным.<
Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.

Аноним

Поиск

Аналитический инструмент «Золотой час контента»: различия между версиями

Пространства имён

Ещё

Действия на странице

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

Содержание

📊 Аналитика «Золотого часа контента»

📘 Введение

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

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

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

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

📌 Выводы

Навигация

Навигация

Вики-инструменты

Вики-инструменты

@@ Строка 53: / Строка 53: @@
          <h3 style="color: #2c3e50;">🗂 Структура проекта</h3>
          <ul>
-             <li>backend/app.py — основной скрипт Python для работы с VK API</li>
+             [[Файл:All.png|500px|center|thumb|Общая структура]]
-             <li>frontend/index.html — веб-дашборд для визуализации данных</li>
+            [[Файл:App.png|500px|center|thumb|backend/app.py — основной скрипт [[Python]] для работы с VK API]]
-             <li>frontend/style.css — стили для дашборда</li>
+             [[Файл:Analitics.png|500px|center|thumb|analytics.py — Cбор данных, обработка VK API]]
-            <li>frontend/script.js — JavaScript для построения графиков и генерации рекомендаций</li>
+             [[Файл:Service.png|500px|center|thumb|vk_service.py — модуль для работы с VK API]]
-            <li>README.md — описание проекта</li>
          </ul>
      </div>
+            [[Файл:R.png|500px|center|thumb|requirements.txt - требования ]]
+        <p> файл .env - содержит токен</p>
+        <p>frontend/index.html:</p>
+<pre style="background-color:#1e293b; color:#fff; padding:15px; border-radius:10px; overflow-x:auto;">
+<code>
+&lt;!DOCTYPE html&gt;
+&lt;html lang="ru"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Аналитика "Золотого часа"&lt;/title&gt;
+    &lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;
+    &lt;style&gt;
+        body {
+            font-family: 'Segoe UI', sans-serif;
+            background: #0f172a;
+            color: white;
+            margin: 0;
+            padding: 20px;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .controls {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        input, button {
+            padding: 12px;
+            border-radius: 10px;
+            border: none;
+            margin: 5px;
+        }
+        button {
+            background: #2563eb;
+            color: white;
+            cursor: pointer;
+        }
+        .ai-box {
+            margin: 20px auto;
+            padding: 20px;
+            background: #1e293b;
+            border-radius: 15px;
+            text-align: center;
+        }
+        .charts {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-top: 20px;
+        }
+        canvas {
+            background: #1e293b;
+            padding: 15px;
+            border-radius: 15px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;h1&gt;📊 Аналитика "Золотого часа контента"&lt;/h1&gt;
+&lt;div class="controls"&gt;
+    &lt;input id="group" placeholder="Введите домен VK (например: kosti_bloggers)"&gt;
+    &lt;button onclick="loadData()"&gt;Анализировать&lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- Блок рекомендаций --&gt;
+&lt;div class="ai-box"&gt;
+    &lt;h3&gt;Рекомендации&lt;/h3&gt;
+    &lt;p id="aiText"&gt;Здесь появятся рекомендации...&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="charts"&gt;
+    &lt;canvas id="engagementChart"&gt;&lt;/canvas&gt;
+    &lt;canvas id="multiChart"&gt;&lt;/canvas&gt;
+    &lt;canvas id="areaChart"&gt;&lt;/canvas&gt;
+    &lt;canvas id="polarChart"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+&lt;script&gt;
+let charts = [];
+function destroyCharts() {
+    charts.forEach(c =&gt; c.destroy());
+    charts = [];
+}
+function generateAI(bestHour, engagement) {
+    const max = Math.max(...engagement);
+    const avg = engagement.reduce((a, b) =&gt; a + b, 0) / engagement.length;
+    const diff = ((max / avg - 1) * 100).toFixed(0);
+    return `Рекомендуем публиковать посты примерно в ${bestHour}:00. В этот час вовлеченность выше средней на ${diff}%. Это оптимальное время для максимального охвата аудитории.`;
+}
+async function loadData() {
+    const group = document.getElementById("group").value;
+    if (!group) return alert("Введите домен VK!");
+    try {
+        const res = await fetch(`http://127.0.0.1:8000/analyze?domain=${group}`);
+        const data = await res.json();
+        const hours = data.data.map(d =&gt; d.hour);
+        const engagement = data.data.map(d =&gt; d.engagement);
+        const likes = data.data.map(d =&gt; d.likes);
+        const comments = data.data.map(d =&gt; d.comments);
+        const reposts = data.data.map(d =&gt; d.reposts);
+        destroyCharts();
+        const maxVal = Math.max(...engagement);
+        // 1. Столбчатая диаграмма (главный график)
+        charts.push(new Chart(document.getElementById("engagementChart"), {
+            type: 'bar',
+            data: {
+                labels: hours,
+                datasets: [{
+                    label: 'Вовлеченность',
+                    data: engagement,
+                    backgroundColor: engagement.map(v =&gt; v === maxVal ? '#FFD700' : '#3b82f6')
+                }]
+            }
+        }));
+        // 2. Много-линейный график
+        charts.push(new Chart(document.getElementById("multiChart"), {
+            type: 'line',
+            data: {
+                labels: hours,
+                datasets: [
+                    { label: 'Лайки', data: likes, borderColor: '#3b82f6', tension: 0.4 },
+                    { label: 'Комментарии', data: comments, borderColor: '#16a34a', tension: 0.4 },
+                    { label: 'Репосты', data: reposts, borderColor: '#f97316', tension: 0.4 }
+                ]
+            }
+        }));
+        // 3. Area chart
+        charts.push(new Chart(document.getElementById("areaChart"), {
+            type: 'line',
+            data: {
+                labels: hours,
+                datasets: [
+                    { label: 'Лайки', data: likes, fill: true, backgroundColor: 'rgba(59,130,246,0.3)', borderColor: '#3b82f6' },
+                    { label: 'Комментарии', data: comments, fill: true, backgroundColor: 'rgba(22,163,52,0.3)', borderColor: '#16a34a' },
+                    { label: 'Репосты', data: reposts, fill: true, backgroundColor: 'rgba(249,115,22,0.3)', borderColor: '#f97316' }
+                ]
+            }
+        }));
+        // 4. Polar chart
+        charts.push(new Chart(document.getElementById("polarChart"), {
+            type: 'polarArea',
+            data: {
+                labels: hours,
+                datasets: [{
+                    label: 'Распределение активности',
+                    data: engagement,
+                    backgroundColor: engagement.map(v =&gt; `hsl(${Math.random()*360}, 70%, 50%)`)
+                }]
+            }
+        }));
+        document.getElementById("aiText").innerText = generateAI(data.best_hour, engagement);
+    } catch (error) {
+        alert("Ошибка при загрузке данных. Проверьте сервер и домен.");
+        console.error(error);
+    }
+}
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</code>
+</pre>
      <!-- Описание графиков -->
@@ Строка 65: / Строка 250: @@
          <h3 style="color: #2c3e50;">📊 Описание визуализации</h3>
          <ul>
+            <li><b>Первичная страница</b></li>
+            [[Файл:Per.png|500px|center|thumb|Необходимо ввести домен сообщества VK и нажать кнопку "Анализировать"]]
+            <li><b>Рекомендации</b></li>
+            [[Файл:Rec.png|500px|center|thumb|Здесь появляются рекомендации]]
              <li><b>Столбчатая диаграмма (Engagement)</b> — пики вовлеченности по часам публикации, золотым выделен максимальный час.</li>
+            [[Файл:Vol.png|500px|center|thumb|Видим, в какое время в анализируемом сообществе собирает больше активности пользователей]]
              <li><b>Много-линейный график</b> — динамика лайков, комментариев и репостов.</li>
-             <li><b>Area chart</b> — структура вовлеченности по типам взаимодействий.</li>
+             [[Файл:Dia.png|500px|center|thumb|Видим, в какое время какой вид взаимодействия с публикациями на пике]]
-            <li><b>Polar chart</b> — распределение активности по часам публикации.</li>
          </ul>
      </div>
@@ Строка 74: / Строка 263: @@
      <!-- Рекомендации -->
      <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
-        <h3 style="color: #2c3e50;">🤖 Рекомендации</h3>
-        <p>Оптимальный час публикации определяется по максимальному значению показателя Engagement. Это позволяет повысить охват и вовлеченность аудитории. Дополнительно можно учитывать пики активности по дням недели для более точного планирования публикаций.</p>
-    </div>
      <!-- Выводы -->
      <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
-        <h3 style="color: #2c3e50;">📌 Выводы</h3>
-        <ul>
+=== 📌 Выводы ===
-            <li>Проект позволяет определить «золотой час» публикаций в VK.</li>
+# Проект позволяет определить «золотой час» публикаций в VK.
-            <li>Вовлеченность оценивается комплексно: лайки, комментарии и репосты.</li>
+# Вовлеченность оценивается комплексно: лайки, комментарии и репосты.
-            <li>Визуализация нескольких графиков делает анализ наглядным и информативным.</li>
+#Визуализация нескольких графиков делает анализ наглядным и информативным.<
-            <li>Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.</li>
+# Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.
-        </ul>
      </div>
 </div>

Аноним

Поиск

Аналитический инструмент «Золотой час контента»: различия между версиями

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

📊 Аналитика «Золотого часа контента»

📘 Введение

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

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

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

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

📌 Выводы

Навигация

Вики-инструменты

Инструменты для страниц