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

Материал из Поле цифровой дидактики
← Предыдущая правка
Нет описания правки
Нет описания правки
 
(не показано 9 промежуточных версий 2 участников)
Строка 1: Строка 1:
{{DigitalTool
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">
|Description=Скрипт на базе VK API, который анализирует временные метки лайков под последними постами сообщества и визуализирует пики активности аудитории. Это позволяет определить идеальное время для публикации постов, когда охват и вовлеченность будут максимальными.}}
 
    <!-- Карточка проекта -->
    <div style="background-color: #f0f8ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <h2 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px;">📊 Аналитика «Золотого часа контента»</h2>
        <p><b>Автор:</b> Федышина София</p>
        <p><b>Группа:</b> АДЭУ-221</p>
        <p><b>Дисциплина:</b> Работа с API социальных сетей и визуализация данных</p>
        <p><b>Статус проекта:</b> Выполнен</p>
    </div>
 
    <!-- Введение -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <h3 style="color: #2c3e50;">📘 Введение</h3>
        <p>Цель проекта — разработать инструмент для анализа публикаций в VK и определения оптимального времени для постинга, чтобы максимизировать вовлеченность аудитории. Проект использует API VK для получения статистики по последним постам сообщества и визуализирует пики активности аудитории через графики.</p>
    </div>
 
    <!-- Цели проекта -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <h3 style="color: #2c3e50;">🎯 Цели проекта</h3>
        <ul>
            <li>Определение «золотого часа» публикаций в VK для максимальной вовлеченности.</li>
            <li>Сбор данных о лайках, комментариях и репостах последних постов.</li>
            <li>Визуализация данных с помощью различных типов графиков для наглядности.</li>
            <li>Автоматическая генерация рекомендаций по времени публикаций.</li>
        </ul>
    </div>
 
    <!-- Архитектура и блок-схема -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <h3 style="color: #2c3e50;">🛠 Архитектура и блок-схема проекта</h3>
        <p>Проект состоит из backend и frontend. Backend обрабатывает данные VK API, а frontend визуализирует графики и рекомендации.</p>
       
        <!-- Блок-схема -->
        <div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;">
           
            <div style="position: relative; width: 300px;">
                <div style="background-color: #3498db; color: white; text-align: center; padding: 10px 0; border-radius: 5px;">Ввод домена VK пользователем</div>
                <div style="width: 2px; height: 20px; background-color: #2c3e50; margin: 0 auto;"></div>
                <div style="background-color: #3498db; color: white; text-align: center; padding: 10px 0; border-radius: 5px;">Запрос к VK API (Backend)</div>
                <div style="width: 2px; height: 20px; background-color: #2c3e50; margin: 0 auto;"></div>
                <div style="background-color: #3498db; color: white; text-align: center; padding: 10px 0; border-radius: 5px;">Сбор лайков, комментариев и репостов</div>
                <div style="width: 2px; height: 20px; background-color: #2c3e50; margin: 0 auto;"></div>
                <div style="background-color: #3498db; color: white; text-align: center; padding: 10px 0; border-radius: 5px;">Вычисление вовлеченности (Engagement)</div>
                <div style="width: 2px; height: 20px; background-color: #2c3e50; margin: 0 auto;"></div>
                <div style="background-color: #3498db; color: white; text-align: center; padding: 10px 0; border-radius: 5px;">Визуализация графиков и рекомендации (Frontend)</div>
            </div>
        </div>
    </div>
 
    <!-- Структура проекта -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <h3 style="color: #2c3e50;">🗂 Структура проекта</h3>
        <ul>
            [[Файл:All.png|500px|center|thumb|Общая структура]]
            [[Файл:App.png|500px|center|thumb|backend/app.py — основной скрипт [[Python]] для работы с VK API]]
            [[Файл:Analitics.png|500px|center|thumb|analytics.py — Cбор данных, обработка VK API]]
            [[Файл:Service.png|500px|center|thumb|vk_service.py — модуль для работы с VK API]]
        </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>
 
    <!-- Описание графиков -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
        <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>
            [[Файл:Dia.png|500px|center|thumb|Видим, в какое время какой вид взаимодействия с публикациями на пике]]
        </ul>
    </div>
 
    <!-- Рекомендации -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
 
    <!-- Выводы -->
    <div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
 
=== 📌 Выводы ===
# Проект позволяет определить «золотой час» публикаций в VK.
# Вовлеченность оценивается комплексно: лайки, комментарии и репосты.
#Визуализация нескольких графиков делает анализ наглядным и информативным.<
# Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.
    </div>
 
</div>

Текущая версия от 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
requirements.txt - требования

файл .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) — пики вовлеченности по часам публикации, золотым выделен максимальный час.
    • Видим, в какое время в анализируемом сообществе собирает больше активности пользователей
  • Много-линейный график — динамика лайков, комментариев и репостов.
    • Видим, в какое время какой вид взаимодействия с публикациями на пике

📌 Выводы

  1. Проект позволяет определить «золотой час» публикаций в VK.
  2. Вовлеченность оценивается комплексно: лайки, комментарии и репосты.
  3. Визуализация нескольких графиков делает анализ наглядным и информативным.<
  4. Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.
Источник — http://digida.mgpu.ru/index.php?title=Аналитический_инструмент_«Золотой_час_контента»&oldid=45533