Поле цифровой дидактики - Вклад [ru]

Аналитический инструмент «Золотой час контента»

2026-03-25T07:59:24Z

FedyshinaSP:

<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">


<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>
<!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>
</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;">
<h3 style="color: #2c3e50;">📌 Выводы</h3>
<ul>
<li>Проект позволяет определить «золотой час» публикаций в VK.</li>
<li>Вовлеченность оценивается комплексно: лайки, комментарии и репосты.</li>
<li>Визуализация нескольких графиков делает анализ наглядным и информативным.</li>
<li>Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.</li>
</ul>
</div>

</div>

Аналитический инструмент «Золотой час контента»

2026-03-25T07:52:47Z

FedyshinaSP:

<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">


<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>
<!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>
</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|]]
<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;">
<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>
<li>Вовлеченность оценивается комплексно: лайки, комментарии и репосты.</li>
<li>Визуализация нескольких графиков делает анализ наглядным и информативным.</li>
<li>Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.</li>
</ul>
</div>

</div>

Файл:Dia.png

2026-03-25T07:49:46Z

FedyshinaSP:

Файл:Vol.png

2026-03-25T07:48:48Z

FedyshinaSP:

Файл:Rec.png

2026-03-25T07:48:22Z

FedyshinaSP:

Файл:Per.png

2026-03-25T07:48:05Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-24T14:10:30Z

FedyshinaSP:

<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">


<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>
<!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>
</pre>


<div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3>
<ul>
<li><b>Столбчатая диаграмма (Engagement)</b> — пики вовлеченности по часам публикации, золотым выделен максимальный час.</li>
<li><b>Много-линейный график</b> — динамика лайков, комментариев и репостов.</li>
<li><b>Area chart</b> — структура вовлеченности по типам взаимодействий.</li>
<li><b>Polar chart</b> — распределение активности по часам публикации.</li>
</ul>
</div>


<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>
<li>Вовлеченность оценивается комплексно: лайки, комментарии и репосты.</li>
<li>Визуализация нескольких графиков делает анализ наглядным и информативным.</li>
<li>Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.</li>
</ul>
</div>

</div>

Файл:R.png

2026-03-24T14:08:31Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-24T14:07:31Z

FedyshinaSP:

<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">


<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>

<p>frontend/index.html:</p>

<pre style="background-color:#1e293b; color:#fff; padding:15px; border-radius:10px; overflow-x:auto;">
<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>
</pre>


<div style="background-color: #e6f2ff; padding: 15px; border-radius: 10px; margin-bottom: 25px;">
<h3 style="color: #2c3e50;">📊 Описание визуализации</h3>
<ul>
<li><b>Столбчатая диаграмма (Engagement)</b> — пики вовлеченности по часам публикации, золотым выделен максимальный час.</li>
<li><b>Много-линейный график</b> — динамика лайков, комментариев и репостов.</li>
<li><b>Area chart</b> — структура вовлеченности по типам взаимодействий.</li>
<li><b>Polar chart</b> — распределение активности по часам публикации.</li>
</ul>
</div>


<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>
<li>Вовлеченность оценивается комплексно: лайки, комментарии и репосты.</li>
<li>Визуализация нескольких графиков делает анализ наглядным и информативным.</li>
<li>Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.</li>
</ul>
</div>

</div>

Аналитический инструмент «Золотой час контента»

2026-03-24T13:58:25Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-24T13:57:09Z

FedyshinaSP:

Файл:Service.png

2026-03-24T13:56:17Z

FedyshinaSP:

Файл:App.png

2026-03-24T13:56:09Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-24T13:55:38Z

FedyshinaSP:

Файл:Analitics.png

2026-03-24T13:44:01Z

FedyshinaSP:

Файл:All.png

2026-03-24T13:43:48Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-24T13:43:19Z

FedyshinaSP:

Аналитический инструмент «Золотой час контента»

2026-03-02T14:02:29Z

FedyshinaSP:

{{DigitalTool
|Description=Скрипт на базе VK API, который анализирует временные метки лайков под последними постами сообщества и визуализирует пики активности аудитории. Это позволяет определить идеальное время для публикации постов, когда охват и вовлеченность будут максимальными.}}

Аналитический инструмент «Золотой час контента»

2026-03-02T14:02:04Z

FedyshinaSP: Новая страница: «{{DigitalTool |Description=Скрипт на базе VK API, который анализирует временные метки лайков под последними постами сообщества и визуализирует пики активности аудитории. Это позволяет определить идеальное время для публикации постов, когда охват и вовлеченность бу...»

Участник:FedyshinaSP

2026-03-02T13:56:27Z

FedyshinaSP:

{{UserMGPU
|Field_of_knowledge=Математика, Информатика, Психология, Экономика, Искусственный интеллект, Статистика, Алгебра
|Position=Бакалавриат
|PedDirection=Нет
|Working_On=Трекер привычек, Аналитический инструмент «Золотой час контента»
}}
[[Категория: UserMGPU]]
[[Категория: АДЭУ-221]]

Трекер привычек

2025-05-19T09:32:00Z

FedyshinaSP:

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

==Ссылка на приложение==
Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

'''Главный экран приложения''':
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>
На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:
* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

'''Экран добавления привычки''':
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>
На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

'''Взаимодействие с привычкой''':
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Увеличение счетчика</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

==Блоки приложения==
'''Главный экран''':
<gallery>
bl1.png|<small>Блоки главного экрана</small>
</gallery>
Программные блоки главного экрана выполняют следующие задачи:
* загружают сохранённые привычки из базы данных TinyDB
* отображают их в виде списка
* очищают весь список по нажатию кнопки
* реагируют на выбор привычки и вызывают всплывающее окно с вариантами действия

'''Экран добавления привычки''':
<gallery>
bl2.png|<small>Блоки экрана добавления привычки</small>
</gallery>
Блоки осуществляют:
* добавление новой привычки в список;
* присвоение ей значения 0 выполнений;
* возврат на главный экран после сохранения;
* очистку поля ввода после добавления.

Трекер привычек

2025-05-19T09:30:09Z

FedyshinaSP: /* Описание приложения */

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

'''Главный экран приложения''':
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>

На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:

* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

'''Экран добавления привычки''':
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>

На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

'''Взаимодействие с привычкой''':
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Увеличение счетчика</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

==Блоки приложения==
Главный экран:
<gallery>
bl1.png|<small>Блоки главного экрана</small>
</gallery>
Программные блоки главного экрана выполняют следующие задачи:
* загружают сохранённые привычки из базы данных TinyDB
* отображают их в виде списка
* очищают весь список по нажатию кнопки
* реагируют на выбор привычки и вызывают всплывающее окно с вариантами действия

Экран добавления привычки:
<gallery>
bl2.png|<small>Блоки экрана добавления привычки</small>
</gallery>
Блоки осуществляют:
* добавление новой привычки в список;
* присвоение ей значения 0 выполнений;
* возврат на главный экран после сохранения;
* очистку поля ввода после добавления.

Трекер привычек

2025-05-19T09:27:48Z

FedyshinaSP: /* Описание приложения */

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

'''Главный экран приложения''':
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>

На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:

* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

'''Экран добавления привычки''':
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>

На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

'''Взаимодействие с привычкой''':
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Увеличение счетчика</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

Блоки
Главный экран:
<gallery>
bl1.png|<small>Блоки главного экрана</small>
</gallery>
Программные блоки главного экрана выполняют следующие задачи:
* загружают сохранённые привычки из базы данных TinyDB
* отображают их в виде списка
* очищают весь список по нажатию кнопки
* реагируют на выбор привычки и вызывают всплывающее окно с вариантами действия

Экран добавления привычки:
Главный экран:
<gallery>
bl2.png|<small>Блоки экрана добавления привычки</small>
</gallery>
Блоки осуществляют:
* добавление новой привычки в список;
* присвоение ей значения 0 выполнений;
* возврат на главный экран после сохранения;
* очистку поля ввода после добавления.

Файл:Bl2.png

2025-05-19T09:27:41Z

FedyshinaSP:

блоки2

Файл:Bl1.png

2025-05-19T09:27:04Z

FedyshinaSP:

блоки 1

Трекер привычек

2025-05-19T09:12:01Z

FedyshinaSP: /* Описание приложения */

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

'''Главный экран приложения''':
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>

На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:

* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

'''Экран добавления привычки''':
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>

На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

'''Взаимодействие с привычкой''':
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Увеличение счетчика</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

Трекер привычек

2025-05-19T09:11:32Z

FedyshinaSP: /* Описание приложения */

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

Главный экран приложения:
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>

На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:

* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

Экран добавления привычки:
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>

На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

'''Взаимодействие с привычкой''':
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Увеличение счетчика</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

Трекер привычек

2025-05-19T09:08:47Z

FedyshinaSP: /* Описание приложения */

{{Scripting Tutorials
|Description=Это мобильное приложение помогает формировать полезные привычки и отслеживать их выполнение. Оно позволяет пользователю добавлять новые привычки и отмечать их выполнение неограниченное количество раз. Также есть возможность удаления как отдельной привычки из списка, так и очищение всего списка. Приложение подойдёт для всех, кто хочет выработать новые полезные привычки и следить за своим прогрессом каждый день.
|Field_of_knowledge=Психология, Управление
|FieldActivity=Digital Citizen
|Возрастная категория=12
|Environment=App Inventor
}}

Проект можно посмотреть по ссылке в MIT APP Inventor: https://gallery.appinventor.mit.edu/?galleryid=c09a36b8-f79e-42dd-be67-89f7a37848d9

==Диаграмма логики приложения "Трекер привычек"==
{{#mermaid:flowchart TB
A[Начало] --> B(Открытие приложения)
B --> C(Загрузка привычек на сегодня)

C --> D(Добавить новую привычку?)
D -->|Да| E(Ввод названия привычки)
E --> F(Сохранение привычки)
F --> G(Возврат на главный экран)
G --> C

C --> H(Очистить список привычек?)
H -->|Да| I(Удаление всех привычек)
I --> C

C --> J(Выбор привычки из списка)

J --> K(Действие с привычкой)
K -->|Отметить выполненной| L(Увеличить счётчик выполнений)
L --> C
K -->|Удалить| M(Удаление привычки)
M --> C
K -->|Отменить| C
}}

==Описание приложения==
«Трекер привычек» — мобильное приложение, которое помогает пользователю отслеживать и формировать полезные привычки. Простой и понятный интерфейс позволяет добавлять привычки, отмечать их выполнение и при необходимости удалять или полностью очищать список.

Главный экран приложения:
<gallery>
glav.jpg|<small>Главная страница</small>
</gallery>

На главном экране отображается список всех добавленных пользователем привычек. При первом запуске приложения список будет пустым.
Две кнопки в нижней части экрана дают пользователю возможность:

* «Очистить список» — полностью удалить все привычки из списка.
* «Добавить привычку» — перейти на отдельный экран, где можно ввести новую привычку.

Экран добавления привычки:
<gallery>
dob.jpg|<small>Добавление привычки</small>
</gallery>

На этом экране пользователь может ввести название своей новой привычки.
<gallery>
vv.jpg|<small>Вводим название</small>
</gallery>
После нажатия кнопки «Сохранить» привычка будет добавлена в основной список на главной странице. Количество добавляемых привычек не ограничено.
Также доступна кнопка «Назад», возвращающая пользователя на главный экран.
<gallery>
glavnew.jpg|<small>Сохранили привычку и вернулись назад</small>
</gallery>
Привычка успешно добавляется в список, и рядом с её названием отображается число 0 — это счётчик, показывающий, сколько раз привычка была выполнена.

Взаимодействие с привычкой:
<gallery>
vsp.jpg|<small>Всплывающее окно</small>
</gallery>
При нажатии на любую привычку из списка появляется всплывающее окно с выбором действия:
* «Отметить выполненной за сегодня» — увеличивает счётчик выполнения привычки на 1.
<gallery>
ch.jpg|<small>Всплывающее окно</small>
</gallery>
* «Удалить» — удаляет выбранную привычку.
* «Отменить» — закрывает окно без изменений.

Файл:Ch.jpg

2025-05-19T09:06:35Z

FedyshinaSP:

счетчик

Файл:Vsp.jpg

2025-05-19T09:06:00Z

FedyshinaSP:

всплывающее окно

Трекер привычек

2025-05-19T09:00:09Z

FedyshinaSP: /* Описание приложения */

Трекер привычек

2025-05-19T08:58:54Z

FedyshinaSP: /* Описание приложения */

Файл:Glavnew.jpg

2025-05-19T08:58:29Z

FedyshinaSP:

Добавили привычку на главную

Трекер привычек

2025-05-19T08:56:49Z

FedyshinaSP: /* Описание приложения */

Файл:Vv.jpg

2025-05-19T08:56:35Z

FedyshinaSP:

ввели название

Трекер привычек

2025-05-19T08:54:26Z

FedyshinaSP: /* Описание приложения */

Файл:Dob.jpg

2025-05-19T08:53:21Z

FedyshinaSP:

Добавление привычки

Трекер привычек

2025-05-19T08:49:10Z

FedyshinaSP: /* Описание приложения */

Трекер привычек

2025-05-19T08:48:29Z

FedyshinaSP: /* Описание приложения */

Трекер привычек

2025-05-19T08:45:47Z

FedyshinaSP: /* Главный экран приложения */

Трекер привычек

2025-05-19T08:45:19Z

FedyshinaSP:

Файл:Glav.jpg

2025-05-19T08:44:38Z

FedyshinaSP:

главный экран

Трекер привычек

2025-05-19T08:41:21Z

FedyshinaSP:

Трекер привычек

2025-05-17T06:33:50Z

FedyshinaSP:

Трекер привычек

2025-05-16T09:11:23Z

FedyshinaSP:

Трекер привычек

2025-05-16T09:08:27Z

FedyshinaSP: /* Диаграмма логики приложения "Трекер привычек" */

Трекер привычек

2025-05-16T09:07:32Z

FedyshinaSP: /* Диаграмма логики приложения "Трекер привычек" */

Трекер привычек

2025-05-16T09:07:00Z

FedyshinaSP: /* Диаграмма логики приложения "Трекер привычек" */

Трекер привычек

2025-05-16T09:05:27Z

FedyshinaSP: /* Диаграмма логики приложения "Трекер привычек" */

Трекер привычек

2025-05-16T09:03:05Z

FedyshinaSP: /* Диаграмма логики приложения "Трекер привычек" */