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

Обсуждение участника:Patarakin

2026-03-27T13:59:12Z

MukhanovaAI: /* Исправление АДЭУ-221 */

== teachers_flow_web ==
https://digida.mgpu.ru/index.php/Обсуждение:Заглавная_страница#Как_я_взаимодействию_с_ассистентом_искусственного_интеллекта_Перплексити

==Тезаурус 4==

Да, хорошо. Положите пожалуйста. Потому что моя основная проблема, что у меня VOSviewer не работает же и я не могла эти данные получить в таком виде, как вы их прислали.
Но у меня почти получилось что-то похожее! Обходными путями странными)

==Тезаурус 3==

Хорошо, я остановлюсь, во избежание апокалипсиса)
Но мне казалось, что все не так плохо, за исключением того, что в ручную просматривать фамилии в текстовом файле сложно. Попробовала поговорить с ЖПТ, он написал код для R. Но дальше уже я не сильна, какая-то каша началась.

Я научилась в Экселе сделать функцию "Найти" и он выдает все ячейки с таким ФИО, там есть кнопка "Заменить". С ней еще не поняла как работать. И есть ли смысл вообще так делать.

== Тезаурус 2==
Я сохранила из экселя только столбец с авторами, он нормально открылся на маке потом, с этим разобралась. Сейчас основная проблема это понять какой логикой заменять?
Потому что я вижу автора одного, например. Он есть как самостоятельный автор, есть в соавторстве. И непонятно как с этим соавторством быть. Объединять ли или нет, потому что с одним автором есть 2-3 статьи в соавторстве с разными людьми.
Это еще полпроблемы. Проблема если в одном соавторстве на русском, а в другом на английском?
На 59 строк обработала, приступаю на 270.
Но 900 не факт, что осилю физически и эмоционально.

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

== Тезаурус==

Здравствуйте, Евгений Дмитриевич!

Начала разбираться с тезаурусом, возник ряд проблем:
Если в датасете есть один автор с точками, другой без точек - мы их меняем.
1. А если есть один автор, но он без точек в разных местах по одному - как быть?
2. Если автор в соавторстве пишет, и в одном месте он с точками, а в другом - без точек. Что делаем в этом случае?

Помогите пожалуйста) Айжан --[[Участник:Айжан Ужинкина]] ([[Обсуждение участника:Айжан Ужинкина|обсуждение]])

== Просьба от Антюховой Эльзы ==

Евгений Дмитриевич, посмотрите, пожалуйста, почему я не могу добавить приложения, разработанные на языке программирования Snap?

== Если нужно задать ==

Примерный вопрос ... --[[Участник:Patarakin|Patarakin]] ([[Обсуждение участника:Patarakin|обсуждение]]) 17:16, 25 ноября 2025 (MSK)

Получилось добавить Dataset Lens как таблицу, сделала заголовки. Посмотрите, пожалуйста, и отметите в ЛМС это задание, если всё нормально. (Татьяна Астафьева) --[[Участник:Татьяна Астафьева|Татьяна Астафьева]] ([[Обсуждение участника:Татьяна Астафьева|обсуждение]]) 20:30, 25 ноября 2025 (MSK)

Добрый вечер, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания --[[Участник:Дементьева Мария Владимировна|Дементьева Мария]] ([[Обсуждение участника:Дементьева Мария Владимировна|обсуждение]]) 16:08, 5 декабря 2025 (MSK)

Евгений Дмитриевич, проверьте, пожалуйста, выполненные задания на моей странице и проставьте баллы в LMS --[[Участник:Ширкина Д|Ширкина Д]] ([[Обсуждение участника:Ширкина Д|обсуждение]]) 10:57, 6 декабря 2025 (MSK)

Здравствуйте, Евгений Дмитриевич, посмотрите, пожалуйста, задания и отметьте, если все хорошо, в LMS, прошу прощения за скриншоты с телефона, не могу зайти на сайты через браузер ПК [[Участник: Tatiana Khaidarova]] ([[Обсуждение участника: Tatiana Khaidarova|обсуждение]]) 23:43, 6 декабря 2025 (MSK)

Добрый вечер, посмотрите, пожалуйста, страницу и отметьте в LMS (Тюрикова Арина), если всё хорошо --[[Участник:Tyurikovaaa155|Tyurikovaaa155]] ([[Обсуждение участника:Tyurikovaaa155|обсуждение]])

Здравствуйте, Евгений Дмитриевич! Посмотрите, пожалуйста, страницу (Семина Мария)
[[Участник:Мария Семина|Мария Семина]] ([[Участник:Мария Семина|обсуждение]])

Здравствуйте, Евгений Дмитриевич, ссылки в LMS проставила, посмотрите, пожалуйста [[Участник: Tatiana Khaidarova]] ([[Обсуждение участника: Tatiana Khaidarova|обсуждение]]) 15:39, 10 декабря 2025 (MSK)

Добрый вечер, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания (Волынчикова Анна)

Добрый вечер, посмотрите, пожалуйста, страницу и отметьте в LMS (Дмитренко Надежда), если всё хорошо и нужно ли что-то подправить --[[Участник:DmitrenkoNP|DmitrenkoNP]] ([[Обсуждение участника:DmitrenkoNP|обсуждение]])

Добрый вечер. Выполнил задания. Просьба проверить и отметить в LMS. [[Участник:InasovAA]] (Инасов Артем)

Добрый вечер. Выполнила задания Евгений Дмитриевич. посмотрите, пожалуйста, страничку, проверить и отметить в LMS. [[Участник:Карина]] (Мергалиева Карина)

Сделал NetsBlox. [[Участник:Вольдемар]] (Шкабара Владимир)

Здравствуйте, Евгений Дмитриевич. Сделал NetsBlox, прошу проверить. [[Участник:DzhamalkhanovRV]]

Здравствуйте, Евгений Дмитриевич, посмотрите, пожалуйста, страничку и отметьте в LMS сделанные мной задания. (Беляева Мария) [[Участник:БеляеваМД]]

== Основы моделирования - результаты к зачету ==

И здесь - пришел, указал, что сделал, оставил подпись --[[Участник:Patarakin|Patarakin]] ([[Обсуждение участника:Patarakin|обсуждение]]) 09:20, 26 декабря 2025 (MSK)

== Проверка работ в LMS ==

Здравствуйте, Евгений Дмитриевич!
Добавил ссылки на выполненные работы в LMS.
Просьба проверить. и проставить оценку.

== Информация от Антюховой Эльзы ==

Здравствуйте, Евгений Дмитриевич!
Хочу сообщить о том, что я внесла необходимые правки в свою выпускную квалификационную работу. Буду очень признательна, если Вы сможете уделить время и посмотреть ее. Заранее спасибо!

== Проверка статьи "Репрезентация мотивов самостоятельной учебной работы в личностных нарративах студентов" ==

Евгений Дмитриевич, добрый день! Могли бы Вы проверить мою работу? Что нужно скорректировать/добавить?

== Репрезентация мотивов самостоятельной учебной работы в личностных нарративах студентов ==

Евгений Дмитриевич, я добавила категорию [[:Категория:Психо-лингвистическое исследование]] в конце текста статьи, но на странице моя работа не появилась
Подскажите, что нужно поправить сейчас?

== Исправление АДЭУ-221 ==

Арлинская поправила [[Аналитика_профиля_ВК#🗂_Структура_проекта|Работа_Арлинская]]
Муханова Анна (добавила интерактивную карту на страничку) [[Карта друзей|Муханова_карта_друзей]]

Карта друзей

2026-03-27T07:39:09Z

MukhanovaAI:

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


<div style="padding: 15px; 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>


<h3 style="color: #34495e;">Цель работы</h3>
<p>Разработать инструмент для сбора и визуализации геоданных из открытых источников (VK) с целью изучения принципов работы [[API]] и создания интерактивных карт.</p>


<h3 style="color: #34495e;">Задачи</h3>
<ol>
<li>Изучить документацию VK API.</li>
<li>Получить токен доступа для работы с данными.</li>
<li>Написать скрипт на Python для сбора ID друзей и их публичных постов с геометками.</li>
<li>Сохранить полученные координаты в формате JSON.</li>
<li>Создать веб-страницу с картой (Leaflet) и нанести на нее точки.</li>
<li>Опубликовать результат.</li>
</ol>


<h3 style="color: #34495e;">Технологии</h3>
<ul>
<li><b>Языки:</b> [[Python]], [[JavaScript]], [[HTML]]/[[CSS]]</li>
<li><b>Библиотеки [[Python]]:</b> requests, vk_api</li>
<li><b>API:</b> [[VK API]], OpenStreetMap (через Leaflet)</li>
<li><b>Хостинг:</b> [[GitHub]] Pages (для карты)</li>
</ul>

<h3 style="color: #34495e;">Диаграмма работы приложения «Карта друзей»</h3>

{{#mermaid: flowchart TB
A[Начало] --> B(Получение токена VK API)
B --> C(Запрос списка друзей)
C --> D{Есть друзья?}
D -->|Нет| E[Завершить]
D -->|Да| F[Цикл по каждому другу]
F --> G(Запрос последних 30 постов)
G --> H{Пост содержит geo?}
H -->|Нет| I[Следующий пост]
I --> G
H -->|Да| J(Сохранить координаты, имя, место, ссылку)
J --> K{Все посты проверены?}
K -->|Нет| I
K -->|Да| L{Все друзья обработаны?}
L -->|Нет| F
L -->|Да| M(Сохранить данные в JSON-файл)
M --> N(Открыть HTML-страницу с картой)
N --> O(Загрузить JSON в JavaScript)
O --> P(Отрисовать маркеры на карте)
P --> Q(Клик по маркеру → всплывающее окно)
Q --> R[Готово]
}}


<h3 style="color: #34495e;">Структура проекта</h3>
<div style="text-align: center; margin: 15px 0;">
[[Файл:Project_folder.png|500px|center|thumb|Папка проекта в VS Code]]
<p><i>Файлы проекта: config.py (токен), main.py (скрипт), friends_geo.json (результат), map.html (карта)</i></p>
</div>

=== Ход работы над проектом ===

==== Этап 1. Создание страницы в вики и выбор темы ====
Создала страницу проекта на Digida MGPU через форму DigitalTool. Тема: «Карта друзей» — сбор и визуализация геолокаций из постов ВКонтакте. Получила комментарий от преподавателя, исправила категорию на «Работа с API».

==== Этап 2. Изучение VK API и получение токена ====
Изучила документацию VK API. Пыталась создать приложение, но столкнулась с трудностями. Использовала сервис vkhost.github.io для получения временного токена. Позже разобралась с созданием собственного приложения, получила стабильный токен через standalone-приложение.

==== Этап 3. Установка библиотеки и написание Python-скрипта ====
Установила библиотеку vk_api через терминал:

<syntaxhighlight lang="bash">
pip install vk_api
</syntaxhighlight>

Написала скрипт, который:
* Авторизуется по токену
* Получает список друзей
* Для каждого друга запрашивает последние 30 постов
* Проверяет наличие поля <code>geo</code> в каждом посте
* Сохраняет координаты, имя друга, текст поста и ссылку в JSON-файл

[[Файл:Terminal_result1.png|400px|center|thumb|Процесс поиска данных в терминале]]
[[Файл:Terminal_result2.png|400px|center|thumb|Результат работы скрипта]]

'''Результат:''' собрано 18 постов с геометками у 23 обработанных друзей.

==== Этап 4. Сохранение данных в JSON ====
Скрипт сохранил все найденные геометки в файл <code>friends_geo.json</code>.

[[Файл:Json_data.png|500px|center|thumb|Файл friends_geo.json с координатами]]

''Структура данных: имя друга, координаты, место, текст поста, ссылка''

==== Этап 5. Создание интерактивной карты ====
Создала HTML-страницу <code>map.html</code> с картой на базе библиотеки Leaflet (OpenStreetMap). Написала JavaScript-код, который:
* Загружает данные из JSON-файла
* Разбирает координаты (формат "широта долгота")
* Добавляет маркеры на карту
* При клике на маркер показывает всплывающее окно с именем друга, местом и ссылкой на пост

[[Файл:Map_code1.png|400px|center|thumb|Код JavaScript для отображения маркеров]]
[[Файл:Map_code2.png|400px|center|thumb|Массив данных для карты]]
[[Файл:Map_result.png|400px|center|thumb|Готовая карта с точками]]

'''Результат:''' готовая интерактивная карта с точками всех найденных геометок.

==== Этап 6. Оформление страницы в вики ====
Добавила на страницу проекта:
* Блок с результатами
* Скриншоты всех этапов
* Структуру проекта
* Пример кода на Python
* Выводы и планы по развитию

=== Итог проекта ===

Создан работающий инструмент для сбора и визуализации геоданных из ВКонтакте

23 друга обработано | 18 геометок собрано | 14 городов на карте

Проект выполнен в рамках дисциплины «Работа с API социальных сетей и облачных сервисов»

===Аналитический дашборд===

[[Файл:Dashboard preview.png|700px|center|thumb|Аналитический дашборд «Карта друзей»]]

На основе собранных данных был разработан интерактивный дашборд, который включает:

* Интерактивную карту с маркерами всех найденных мест
* Блок статистики (количество друзей, геометок, городов, самое популярное место)
* Гистограмму распределения отметок по городам
* Круговую диаграмму топ-10 мест по популярности
* Фильтр по друзьям для детального анализа
* Список всех мест со ссылками на посты

<div class="mw-collapsible mw-collapsed">

'''▸ Показать код дашборда (dashboard.html)'''

<div class="mw-collapsible-content">

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Дашборд: Карта друзей</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f7fa; padding: 20px; }
.dashboard { max-width: 1400px; margin: 0 auto; }
h1 { color: #2c3e50; margin-bottom: 20px; border-bottom: 3px solid #3498db; padding-bottom: 10px; }
.row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; flex: 1; min-width: 250px; }
.map-container { flex: 2; min-width: 500px; }
.stats { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-box { background: white; border-radius: 12px; padding: 20px; text-align: center; flex: 1; min-width: 150px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.stat-number { font-size: 32px; font-weight: bold; color: #3498db; }
.stat-label { color: #7f8c8d; margin-top: 8px; }
#map { height: 400px; width: 100%; border-radius: 8px; }
canvas { max-height: 300px; }
.filter-select { padding: 8px 12px; border-radius: 6px; border: 1px solid #ddd; margin-bottom: 15px; width: 100%; }
hr { margin: 15px 0; border: none; border-top: 1px solid #eee; }
</style>
</head>
<body>
<div class="dashboard">
<h1>Карта друзей — аналитический дашборд</h1>

<div class="stats">
<div class="stat-box"><div class="stat-number" id="totalFriends">0</div><div class="stat-label">Друзей обработано</div></div>
<div class="stat-box"><div class="stat-number" id="totalMarkers">0</div><div class="stat-label">Геометок найдено</div></div>
<div class="stat-box"><div class="stat-number" id="totalCities">0</div><div class="stat-label">Городов</div></div>
<div class="stat-box"><div class="stat-number" id="topPlace">—</div><div class="stat-label">Самое популярное место</div></div>
</div>

<div class="row">
<div class="card map-container">
<h3>Карта с отметками</h3>
<div id="map"></div>
<hr>
<label for="friendFilter">Фильтр по другу:</label>
<select id="friendFilter" class="filter-select"><option value="all">Все друзья</option></select>
</div>
<div class="card">
<h3>Города по количеству отметок</h3>
<canvas id="cityChart"></canvas>
</div>
</div>

<div class="row">
<div class="card">
<h3>Активность по местам</h3>
<canvas id="placesChart"></canvas>
</div>
<div class="card">
<h3>Список найденных мест</h3>
<div id="placesList" style="max-height: 300px; overflow-y: auto;"></div>
</div>
</div>
</div>

<script>
const rawData = [
{
"friend_name": "Наталья Шевковская",
"friend_id": 4671765,
"coordinates": "54.960033758443 20.47501174861",
"place": "Зеленоградск",
"post_text": "Балтика замерзла",
"post_url": "https://vk.com/wall4671765_1030"
},
......
{
"friend_name": "Татьяна Бондаренко",
"friend_id": 131800785,
"coordinates": "52.227369601217 21.003966668331",
"place": "Warszawa Poland",
"post_text": "довольные и счастливые #BGON ❤️",
"post_url": "https://vk.com/wall131800785_3508"
}
];

let currentFilter = "all";

const uniqueFriends = [...new Set(rawData.map(d => d.friend_id))];
const totalFriends = uniqueFriends.length;
const totalMarkers = rawData.length;

const cityCount = {};
const placeCount = {};
rawData.forEach(d => {
const city = d.place.split(',')[0] || d.place;
cityCount[city] = (cityCount[city] || 0) + 1;
placeCount[d.place] = (placeCount[d.place] || 0) + 1;
});

const totalCities = Object.keys(cityCount).length;

let topPlaceName = "—";
let topPlaceCount = 0;
for (const [place, count] of Object.entries(placeCount)) {
if (count > topPlaceCount) {
topPlaceCount = count;
topPlaceName = place;
}
}

document.getElementById('totalFriends').innerText = totalFriends;
document.getElementById('totalMarkers').innerText = totalMarkers;
document.getElementById('totalCities').innerText = totalCities;
document.getElementById('topPlace').innerText = topPlaceName.length > 25 ? topPlaceName.slice(0, 25) + '…' : topPlaceName;

const friendSelect = document.getElementById('friendFilter');
const uniqueNames = [...new Map(rawData.map(d => [d.friend_id, d.friend_name])).entries()];
uniqueNames.forEach(([id, name]) => {
const option = document.createElement('option');
option.value = id;
option.textContent = name;
friendSelect.appendChild(option);
});

function getFilteredData() {
if (currentFilter === "all") return rawData;
return rawData.filter(d => d.friend_id == currentFilter);
}

const cityLabels = Object.keys(cityCount);
const cityValues = Object.values(cityCount);
const cityCtx = document.getElementById('cityChart').getContext('2d');
let cityChart = new Chart(cityCtx, {
type: 'bar',
data: { labels: cityLabels, datasets: [{ label: 'Количество отметок', data: cityValues, backgroundColor: '#3498db', borderRadius: 8 }] },
options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'top' } } }
});

const sortedPlaces = Object.entries(placeCount).sort((a,b) => b[1] - a[1]).slice(0, 10);
const placesLabels = sortedPlaces.map(p => p[0].length > 20 ? p[0].slice(0, 20) + '…' : p[0]);
const placesValues = sortedPlaces.map(p => p[1]);
const placesCtx = document.getElementById('placesChart').getContext('2d');
let placesChart = new Chart(placesCtx, {
type: 'pie',
data: { labels: placesLabels, datasets: [{ data: placesValues, backgroundColor: ['#3498db', '#e74c3c', '#2ecc71', '#f1c40f', '#9b59b6', '#1abc9c', '#e67e22', '#34495e', '#16a085', '#27ae60'] }] },
options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'right', labels: { boxWidth: 12, font: { size: 10 } } } } }
});

function updatePlacesList() {
const filtered = getFilteredData();
const listContainer = document.getElementById('placesList');
if (filtered.length === 0) { listContainer.innerHTML = '<p>Нет данных</p>'; return; }
let html = '<ul style="list-style: none; padding: 0;">';
filtered.forEach(d => {
const text = d.post_text ? d.post_text.substring(0, 80) : '';
html += `<li style="padding: 8px 0; border-bottom: 1px solid #eee;"><b>${d.place}</b><br><small>${d.friend_name} · ${text ? text + '…' : ''}<br><a href="${d.post_url}" target="_blank" style="color: #3498db;">открыть пост</a></small></li>`;
});
html += '</ul>';
listContainer.innerHTML = html;
}

const map = L.map('map').setView([55.76, 37.64], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
let markersLayer = L.layerGroup().addTo(map);

function updateMap() {
markersLayer.clearLayers();
const filtered = getFilteredData();
const bounds = [];
filtered.forEach(item => {
const [lat, lng] = item.coordinates.split(' ');
const marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(markersLayer);
const postText = item.post_text ? item.post_text.substring(0, 100) : '';
marker.bindPopup(`<b>${item.friend_name}</b><br><i>${item.place}</i><br>${postText}<br><a href="${item.post_url}" target="_blank">Открыть пост</a>`);
bounds.push([parseFloat(lat), parseFloat(lng)]);
});
if (bounds.length > 0) map.fitBounds(bounds);
}

function updateCharts() {
const filtered = getFilteredData();
const filteredCityCount = {};
const filteredPlaceCount = {};
filtered.forEach(d => {
const city = d.place.split(',')[0] || d.place;
filteredCityCount[city] = (filteredCityCount[city] || 0) + 1;
filteredPlaceCount[d.place] = (filteredPlaceCount[d.place] || 0) + 1;
});
cityChart.data.labels = Object.keys(filteredCityCount);
cityChart.data.datasets[0].data = Object.values(filteredCityCount);
cityChart.update();
const newSortedPlaces = Object.entries(filteredPlaceCount).sort((a,b) => b[1] - a[1]).slice(0, 10);
placesChart.data.labels = newSortedPlaces.map(p => p[0].length > 20 ? p[0].slice(0,20)+'…' : p[0]);
placesChart.data.datasets[0].data = newSortedPlaces.map(p => p[1]);
placesChart.update();
}

friendSelect.addEventListener('change', (e) => {
currentFilter = e.target.value;
updateMap();
updatePlacesList();
updateCharts();
});

updateMap();
updatePlacesList();
</script>
</body>
</html>
</syntaxhighlight>

</div>
</div>

=== Выводы ===

В ходе работы над проектом я:
* Научилась работать с VK API — получать токен, делать запросы, обрабатывать ответы.
* Освоила парсинг JSON-данных и сохранение результатов в файл.
* Создала интерактивную карту на Leaflet и нанесла на нее реальные геоданные.
* Поняла, как устроены современные веб-сервисы, которые собирают данные из разных источников.
* Научилась оформлять проекты в вики и структурировать отчёт.

Проект можно развивать дальше: добавить тепловую карту, сделать анализ популярных мест, подключить Яндекс.Карты с более детальными данными.

===Полный исходный код приложения===

<div class="mw-collapsible mw-collapsed">

'''▸ Показать полный код приложения'''

<div class="mw-collapsible-content">

<syntaxhighlight lang="python">
# config.py
# Токен доступа VK API (получен через standalone-приложение)

TOKEN = "vk1.a.мой_токен_здесь"
</syntaxhighlight>

<syntaxhighlight lang="python">
# main.py
import vk_api
from config import TOKEN
import json
import time

# Авторизация
vk_session = vk_api.VkApi(token=TOKEN)
vk = vk_session.get_api()

def get_friends_with_geo():
"""
Получает список друзей и собирает их посты с геометками
"""
print("Получаю список друзей...")
friends = vk.friends.get(fields=['first_name', 'last_name'])

friends_data = []
total_friends = friends['count']
print(f"Найдено друзей: {total_friends}")

# Обрабатываем первых 30 друзей
for i, friend in enumerate(friends['items'][:30]):
print(f"Обрабатываю друга {i+1}/30: {friend['first_name']} {friend['last_name']}")

try:
# Получаем последние 50 постов друга
posts = vk.wall.get(owner_id=friend['id'], count=50)

for post in posts['items']:
if 'geo' in post and post['geo']:
geo_data = {
'friend_name': f"{friend['first_name']} {friend['last_name']}",
'friend_id': friend['id'],
'coordinates': post['geo']['coordinates'],
'place': post['geo'].get('place', {}).get('title', 'Без названия'),
'post_text': post.get('text', '')[:100],
'post_url': f"https://vk.com/wall{friend['id']}_{post['id']}"
}
friends_data.append(geo_data)
print(f" Найдена геометка: {geo_data['coordinates']} - {geo_data['place']}")

except Exception as e:
print(f" Ошибка при обработке: {e}")

time.sleep(0.5) # пауза, чтобы не спамить API

# Сохраняем результат
with open('friends_geo.json', 'w', encoding='utf-8') as f:
json.dump(friends_data, f, ensure_ascii=False, indent=4)

print(f"\nГотово! Найдено {len(friends_data)} постов с геометками.")
return friends_data

if __name__ == "__main__":
get_friends_with_geo()
</syntaxhighlight>

<syntaxhighlight lang="json">
# friends_geo.json (пример данных)
[
{
"friend_name": "Анна Смирнова",
"friend_id": 123456789,
"coordinates": "55.751244 37.618423",
"place": "Красная площадь",
"post_text": "Красота!",
"post_url": "https://vk.com/wall123456789_123"
},
{
"friend_name": "Иван Петров",
"friend_id": 987654321,
"coordinates": "55.755814 37.617635",
"place": "Парк Горького",
"post_text": "Гуляем с друзьями",
"post_url": "https://vk.com/wall987654321_456"
}
]
</syntaxhighlight>

<syntaxhighlight lang="html">
# map.html
<!DOCTYPE html>
<html>
<head>
<title>Карта друзей</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const friendsData = [
{
"friend_name": "Анна Смирнова",
"coordinates": "55.751244 37.618423",
"place": "Красная площадь",
"post_text": "Красота!",
"post_url": "https://vk.com/wall123456789_123"
},
{
"friend_name": "Иван Петров",
"coordinates": "55.755814 37.617635",
"place": "Парк Горького",
"post_text": "Гуляем с друзьями",
"post_url": "https://vk.com/wall987654321_456"
}
];

const map = L.map('map').setView([55.76, 37.64], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

friendsData.forEach(item => {
const [lat, lng] = item.coordinates.split(' ');
const marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(map);
marker.bindPopup(`
<b>${item.friend_name}</b><br>
<i>${item.place}</i><br>
${item.post_text}<br>
<a href="${item.post_url}" target="_blank">Открыть пост</a>
`);
});
</script>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="text">
# requirements.txt
vk-api==5.107
requests==2.31.0
</syntaxhighlight>

</div>
</div>

=== Географическая карта с интерактивными метками (создано с помощью семантических страниц) ===

{{#ask:
[[Category:Карта друзей]]
|?Coordinate
|?Friend
|?PostText
|format=map
|height=400
|width=700
}}

</div>

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

Карта друзей

2026-03-27T07:29:25Z

MukhanovaAI:

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


<div style="padding: 15px; 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>


<h3 style="color: #34495e;">Цель работы</h3>
<p>Разработать инструмент для сбора и визуализации геоданных из открытых источников (VK) с целью изучения принципов работы [[API]] и создания интерактивных карт.</p>


<h3 style="color: #34495e;">Задачи</h3>
<ol>
<li>Изучить документацию VK API.</li>
<li>Получить токен доступа для работы с данными.</li>
<li>Написать скрипт на Python для сбора ID друзей и их публичных постов с геометками.</li>
<li>Сохранить полученные координаты в формате JSON.</li>
<li>Создать веб-страницу с картой (Leaflet) и нанести на нее точки.</li>
<li>Опубликовать результат.</li>
</ol>


<h3 style="color: #34495e;">Технологии</h3>
<ul>
<li><b>Языки:</b> [[Python]], [[JavaScript]], [[HTML]]/[[CSS]]</li>
<li><b>Библиотеки [[Python]]:</b> requests, vk_api</li>
<li><b>API:</b> [[VK API]], OpenStreetMap (через Leaflet)</li>
<li><b>Хостинг:</b> [[GitHub]] Pages (для карты)</li>
</ul>

<h3 style="color: #34495e;">Диаграмма работы приложения «Карта друзей»</h3>

{{#mermaid: flowchart TB
A[Начало] --> B(Получение токена VK API)
B --> C(Запрос списка друзей)
C --> D{Есть друзья?}
D -->|Нет| E[Завершить]
D -->|Да| F[Цикл по каждому другу]
F --> G(Запрос последних 30 постов)
G --> H{Пост содержит geo?}
H -->|Нет| I[Следующий пост]
I --> G
H -->|Да| J(Сохранить координаты, имя, место, ссылку)
J --> K{Все посты проверены?}
K -->|Нет| I
K -->|Да| L{Все друзья обработаны?}
L -->|Нет| F
L -->|Да| M(Сохранить данные в JSON-файл)
M --> N(Открыть HTML-страницу с картой)
N --> O(Загрузить JSON в JavaScript)
O --> P(Отрисовать маркеры на карте)
P --> Q(Клик по маркеру → всплывающее окно)
Q --> R[Готово]
}}


<h3 style="color: #34495e;">Структура проекта</h3>
<div style="text-align: center; margin: 15px 0;">
[[Файл:Project_folder.png|500px|center|thumb|Папка проекта в VS Code]]
<p><i>Файлы проекта: config.py (токен), main.py (скрипт), friends_geo.json (результат), map.html (карта)</i></p>
</div>

<h3 style="color: #34495e;">Ход работы над проектом</h3>

<div style="background-color: #f9f9f9; border-radius: 10px; padding: 20px; margin: 20px 0;">

<h4 style="color: #3498db;">Этап 1. Создание страницы в вики и выбор темы</h4>
<p>Создала страницу проекта на Digida MGPU через форму DigitalTool. Тема: «Карта друзей» — сбор и визуализация геолокаций из постов ВКонтакте.</p>

<h4 style="color: #3498db;">Этап 2. Изучение VK API и получение токена</h4>
<p>Изучила документацию VK API. Пыталась создать приложение, но столкнулась с трудностями. Использовала сервис vkhost.github.io для получения временного токена. Позже разобралась с созданием собственного приложения, получила стабильный токен через standalone-приложение.</p>

<h4 style="color: #3498db;">Этап 3. Установка библиотеки и написание Python-скрипта</h4>
<p>Установила библиотеку vk_api через терминал:</p>
<div style="text-align: center; margin: 10px 0;">
[[Файл:Terminal_install.png|500px|center|thumb|Установка библиотеки vk_api]]
</div>
<p>Написала скрипт, который:</p>
<ul>
<li>Авторизуется по токену</li>
<li>Получает список друзей</li>
<li>Для каждого друга запрашивает последние 30 постов</li>
<li>Проверяет наличие поля <code>geo</code> в каждом посте</li>
<li>Сохраняет координаты, имя друга, текст поста и ссылку в JSON-файл</li>
</ul>
<div style="text-align: center; margin: 15px 0;">
[[Файл:Terminal_result1.png|400px|center|thumb|Процесс поиска данных в терминале]]
[[Файл:Terminal_result2.png|400px|center|thumb|Результат работы скрипта]]
</div>
<p><b>Результат:</b> собрано 18 постов с геометками у 30 обработанных друзей.</p>
<h4 style="color: #3498db;">Этап 4. Создание интерактивной карты</h4>
<p>Создала HTML-страницу с картой на базе библиотеки Leaflet (OpenStreetMap). Написала JavaScript-код, который:</p>
<ul>
<li>Загружает данные из JSON-файла</li>
<li>Разбирает координаты (формат "широта долгота")</li>
<li>Добавляет маркеры на карту</li>
<li>При клике на маркер показывает всплывающее окно с именем друга, местом и ссылкой на пост</li>
</ul>
[[Файл:Json data.png|400px|center|thumb|Файл friends_geo.json]]
<p><b>Результат:</b> готовая интерактивная карта с точками всех найденных геометок.</p>

<h4 style="color: #3498db;">Этап 5. Создание интерактивной карты</h4>
<p>Создала файл <code>map.html</code> с картой на базе Leaflet (OpenStreetMap). Написала JavaScript-код, который загружает данные из JSON и добавляет маркеры на карту. При клике на маркер открывается окошко с именем друга, названием места и ссылкой на пост.</p>
<div style="text-align: center; margin: 15px 0;">
[[Файл:Map code1.png|400px|center|thumb|Код JavaScript для отображения маркеров]]
[[Файл:Map code2.png|400px|center|thumb|Код JavaScript для отображения маркеров]]
[[Файл:map_result.png|400px|center|thumb|Готовая карта с точками]]
</div>


<div style="background-color: #eef2f5; padding: 20px; border-radius: 15px; margin: 30px 0; text-align: center; border-left: 4px solid #3498db;">
<h3 style="color: black;">Итог проекта</h3>
<p style="font-size: 18px;">Создан работающий инструмент для сбора и визуализации геоданных из ВКонтакте</p>
<p>23 друга обработано  |  7 геометок собрано  |  6 городов на карте</p>
<p><small>Проект выполнен в рамках дисциплины «Работа с API социальных сетей и облачных сервисов»</small></p>
</div>

===Аналитический дашборд===

[[Файл:Dashboard preview.png|700px|center|thumb|Аналитический дашборд «Карта друзей»]]

На основе собранных данных был разработан интерактивный дашборд, который включает:

* Интерактивную карту с маркерами всех найденных мест
* Блок статистики (количество друзей, геометок, городов, самое популярное место)
* Гистограмму распределения отметок по городам
* Круговую диаграмму топ-10 мест по популярности
* Фильтр по друзьям для детального анализа
* Список всех мест со ссылками на посты

<div class="mw-collapsible mw-collapsed">

'''▸ Показать код дашборда (dashboard.html)'''

<div class="mw-collapsible-content">

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Дашборд: Карта друзей</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f7fa; padding: 20px; }
.dashboard { max-width: 1400px; margin: 0 auto; }
h1 { color: #2c3e50; margin-bottom: 20px; border-bottom: 3px solid #3498db; padding-bottom: 10px; }
.row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; flex: 1; min-width: 250px; }
.map-container { flex: 2; min-width: 500px; }
.stats { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-box { background: white; border-radius: 12px; padding: 20px; text-align: center; flex: 1; min-width: 150px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.stat-number { font-size: 32px; font-weight: bold; color: #3498db; }
.stat-label { color: #7f8c8d; margin-top: 8px; }
#map { height: 400px; width: 100%; border-radius: 8px; }
canvas { max-height: 300px; }
.filter-select { padding: 8px 12px; border-radius: 6px; border: 1px solid #ddd; margin-bottom: 15px; width: 100%; }
hr { margin: 15px 0; border: none; border-top: 1px solid #eee; }
</style>
</head>
<body>
<div class="dashboard">
<h1>Карта друзей — аналитический дашборд</h1>

<div class="stats">
<div class="stat-box"><div class="stat-number" id="totalFriends">0</div><div class="stat-label">Друзей обработано</div></div>
<div class="stat-box"><div class="stat-number" id="totalMarkers">0</div><div class="stat-label">Геометок найдено</div></div>
<div class="stat-box"><div class="stat-number" id="totalCities">0</div><div class="stat-label">Городов</div></div>
<div class="stat-box"><div class="stat-number" id="topPlace">—</div><div class="stat-label">Самое популярное место</div></div>
</div>

<div class="row">
<div class="card map-container">
<h3>Карта с отметками</h3>
<div id="map"></div>
<hr>
<label for="friendFilter">Фильтр по другу:</label>
<select id="friendFilter" class="filter-select"><option value="all">Все друзья</option></select>
</div>
<div class="card">
<h3>Города по количеству отметок</h3>
<canvas id="cityChart"></canvas>
</div>
</div>

<div class="row">
<div class="card">
<h3>Активность по местам</h3>
<canvas id="placesChart"></canvas>
</div>
<div class="card">
<h3>Список найденных мест</h3>
<div id="placesList" style="max-height: 300px; overflow-y: auto;"></div>
</div>
</div>
</div>

<script>
const rawData = [
{
"friend_name": "Наталья Шевковская",
"friend_id": 4671765,
"coordinates": "54.960033758443 20.47501174861",
"place": "Зеленоградск",
"post_text": "Балтика замерзла",
"post_url": "https://vk.com/wall4671765_1030"
},
......
{
"friend_name": "Татьяна Бондаренко",
"friend_id": 131800785,
"coordinates": "52.227369601217 21.003966668331",
"place": "Warszawa Poland",
"post_text": "довольные и счастливые #BGON ❤️",
"post_url": "https://vk.com/wall131800785_3508"
}
];

let currentFilter = "all";

const uniqueFriends = [...new Set(rawData.map(d => d.friend_id))];
const totalFriends = uniqueFriends.length;
const totalMarkers = rawData.length;

const cityCount = {};
const placeCount = {};
rawData.forEach(d => {
const city = d.place.split(',')[0] || d.place;
cityCount[city] = (cityCount[city] || 0) + 1;
placeCount[d.place] = (placeCount[d.place] || 0) + 1;
});

const totalCities = Object.keys(cityCount).length;

let topPlaceName = "—";
let topPlaceCount = 0;
for (const [place, count] of Object.entries(placeCount)) {
if (count > topPlaceCount) {
topPlaceCount = count;
topPlaceName = place;
}
}

document.getElementById('totalFriends').innerText = totalFriends;
document.getElementById('totalMarkers').innerText = totalMarkers;
document.getElementById('totalCities').innerText = totalCities;
document.getElementById('topPlace').innerText = topPlaceName.length > 25 ? topPlaceName.slice(0, 25) + '…' : topPlaceName;

const friendSelect = document.getElementById('friendFilter');
const uniqueNames = [...new Map(rawData.map(d => [d.friend_id, d.friend_name])).entries()];
uniqueNames.forEach(([id, name]) => {
const option = document.createElement('option');
option.value = id;
option.textContent = name;
friendSelect.appendChild(option);
});

function getFilteredData() {
if (currentFilter === "all") return rawData;
return rawData.filter(d => d.friend_id == currentFilter);
}

const cityLabels = Object.keys(cityCount);
const cityValues = Object.values(cityCount);
const cityCtx = document.getElementById('cityChart').getContext('2d');
let cityChart = new Chart(cityCtx, {
type: 'bar',
data: { labels: cityLabels, datasets: [{ label: 'Количество отметок', data: cityValues, backgroundColor: '#3498db', borderRadius: 8 }] },
options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'top' } } }
});

const sortedPlaces = Object.entries(placeCount).sort((a,b) => b[1] - a[1]).slice(0, 10);
const placesLabels = sortedPlaces.map(p => p[0].length > 20 ? p[0].slice(0, 20) + '…' : p[0]);
const placesValues = sortedPlaces.map(p => p[1]);
const placesCtx = document.getElementById('placesChart').getContext('2d');
let placesChart = new Chart(placesCtx, {
type: 'pie',
data: { labels: placesLabels, datasets: [{ data: placesValues, backgroundColor: ['#3498db', '#e74c3c', '#2ecc71', '#f1c40f', '#9b59b6', '#1abc9c', '#e67e22', '#34495e', '#16a085', '#27ae60'] }] },
options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'right', labels: { boxWidth: 12, font: { size: 10 } } } } }
});

function updatePlacesList() {
const filtered = getFilteredData();
const listContainer = document.getElementById('placesList');
if (filtered.length === 0) { listContainer.innerHTML = '<p>Нет данных</p>'; return; }
let html = '<ul style="list-style: none; padding: 0;">';
filtered.forEach(d => {
const text = d.post_text ? d.post_text.substring(0, 80) : '';
html += `<li style="padding: 8px 0; border-bottom: 1px solid #eee;"><b>${d.place}</b><br><small>${d.friend_name} · ${text ? text + '…' : ''}<br><a href="${d.post_url}" target="_blank" style="color: #3498db;">открыть пост</a></small></li>`;
});
html += '</ul>';
listContainer.innerHTML = html;
}

const map = L.map('map').setView([55.76, 37.64], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
let markersLayer = L.layerGroup().addTo(map);

function updateMap() {
markersLayer.clearLayers();
const filtered = getFilteredData();
const bounds = [];
filtered.forEach(item => {
const [lat, lng] = item.coordinates.split(' ');
const marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(markersLayer);
const postText = item.post_text ? item.post_text.substring(0, 100) : '';
marker.bindPopup(`<b>${item.friend_name}</b><br><i>${item.place}</i><br>${postText}<br><a href="${item.post_url}" target="_blank">Открыть пост</a>`);
bounds.push([parseFloat(lat), parseFloat(lng)]);
});
if (bounds.length > 0) map.fitBounds(bounds);
}

function updateCharts() {
const filtered = getFilteredData();
const filteredCityCount = {};
const filteredPlaceCount = {};
filtered.forEach(d => {
const city = d.place.split(',')[0] || d.place;
filteredCityCount[city] = (filteredCityCount[city] || 0) + 1;
filteredPlaceCount[d.place] = (filteredPlaceCount[d.place] || 0) + 1;
});
cityChart.data.labels = Object.keys(filteredCityCount);
cityChart.data.datasets[0].data = Object.values(filteredCityCount);
cityChart.update();
const newSortedPlaces = Object.entries(filteredPlaceCount).sort((a,b) => b[1] - a[1]).slice(0, 10);
placesChart.data.labels = newSortedPlaces.map(p => p[0].length > 20 ? p[0].slice(0,20)+'…' : p[0]);
placesChart.data.datasets[0].data = newSortedPlaces.map(p => p[1]);
placesChart.update();
}

friendSelect.addEventListener('change', (e) => {
currentFilter = e.target.value;
updateMap();
updatePlacesList();
updateCharts();
});

updateMap();
updatePlacesList();
</script>
</body>
</html>
</syntaxhighlight>

</div>
</div>


<h3 style="color: #34495e;">Выводы</h3>
<p>В ходе работы над проектом я:</p>
<ul>
<li>Научилась работать с VK API — получать токен, делать запросы, обрабатывать ответы.</li>
<li>Освоила парсинг JSON-данных и сохранение результатов в файл.</li>
<li>Создала интерактивную карту на Leaflet и нанесла на нее реальные геоданные.</li>
<li>Поняла, как устроены современные веб-сервисы, которые собирают данные из разных источников.</li>
</ul>
<p>Проект можно развивать дальше: добавить тепловую карту, сделать анализ популярных мест, подключить Яндекс.Карты с более детальными данными.</p>

===Полный исходный код приложения===

<div class="mw-collapsible mw-collapsed">

'''▸ Показать полный код приложения'''

<div class="mw-collapsible-content">

<syntaxhighlight lang="python">
# config.py
# Токен доступа VK API (получен через standalone-приложение)

TOKEN = "vk1.a.мой_токен_здесь"
</syntaxhighlight>

<syntaxhighlight lang="python">
# main.py
import vk_api
from config import TOKEN
import json
import time

# Авторизация
vk_session = vk_api.VkApi(token=TOKEN)
vk = vk_session.get_api()

def get_friends_with_geo():
"""
Получает список друзей и собирает их посты с геометками
"""
print("Получаю список друзей...")
friends = vk.friends.get(fields=['first_name', 'last_name'])

friends_data = []
total_friends = friends['count']
print(f"Найдено друзей: {total_friends}")

# Обрабатываем первых 30 друзей
for i, friend in enumerate(friends['items'][:30]):
print(f"Обрабатываю друга {i+1}/30: {friend['first_name']} {friend['last_name']}")

try:
# Получаем последние 50 постов друга
posts = vk.wall.get(owner_id=friend['id'], count=50)

for post in posts['items']:
if 'geo' in post and post['geo']:
geo_data = {
'friend_name': f"{friend['first_name']} {friend['last_name']}",
'friend_id': friend['id'],
'coordinates': post['geo']['coordinates'],
'place': post['geo'].get('place', {}).get('title', 'Без названия'),
'post_text': post.get('text', '')[:100],
'post_url': f"https://vk.com/wall{friend['id']}_{post['id']}"
}
friends_data.append(geo_data)
print(f" Найдена геометка: {geo_data['coordinates']} - {geo_data['place']}")

except Exception as e:
print(f" Ошибка при обработке: {e}")

time.sleep(0.5) # пауза, чтобы не спамить API

# Сохраняем результат
with open('friends_geo.json', 'w', encoding='utf-8') as f:
json.dump(friends_data, f, ensure_ascii=False, indent=4)

print(f"\nГотово! Найдено {len(friends_data)} постов с геометками.")
return friends_data

if __name__ == "__main__":
get_friends_with_geo()
</syntaxhighlight>

<syntaxhighlight lang="json">
# friends_geo.json (пример данных)
[
{
"friend_name": "Анна Смирнова",
"friend_id": 123456789,
"coordinates": "55.751244 37.618423",
"place": "Красная площадь",
"post_text": "Красота!",
"post_url": "https://vk.com/wall123456789_123"
},
{
"friend_name": "Иван Петров",
"friend_id": 987654321,
"coordinates": "55.755814 37.617635",
"place": "Парк Горького",
"post_text": "Гуляем с друзьями",
"post_url": "https://vk.com/wall987654321_456"
}
]
</syntaxhighlight>

<syntaxhighlight lang="html">
# map.html
<!DOCTYPE html>
<html>
<head>
<title>Карта друзей</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const friendsData = [
{
"friend_name": "Анна Смирнова",
"coordinates": "55.751244 37.618423",
"place": "Красная площадь",
"post_text": "Красота!",
"post_url": "https://vk.com/wall123456789_123"
},
{
"friend_name": "Иван Петров",
"coordinates": "55.755814 37.617635",
"place": "Парк Горького",
"post_text": "Гуляем с друзьями",
"post_url": "https://vk.com/wall987654321_456"
}
];

const map = L.map('map').setView([55.76, 37.64], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

friendsData.forEach(item => {
const [lat, lng] = item.coordinates.split(' ');
const marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(map);
marker.bindPopup(`
<b>${item.friend_name}</b><br>
<i>${item.place}</i><br>
${item.post_text}<br>
<a href="${item.post_url}" target="_blank">Открыть пост</a>
`);
});
</script>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="text">
# requirements.txt
vk-api==5.107
requests==2.31.0
</syntaxhighlight>

</div>
</div>

=== Географическая карта с интерактивными метками (создано с помощью семантических страниц) ===

{{#ask:
[[Category:Карта друзей]]
|?Coordinate
|?Friend
|?PostText
|format=map
|height=400
|width=700
}}

</div>

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

Проект:Карта друзей/Сочи

2026-03-27T07:27:40Z

MukhanovaAI: Новая страница: «Coordinate::43.656406140133, 39.651700347255 Friend::Елена Горькова PostText::Это были прекрасные 4 дня 😍 г.Сочи PostUrl::https://vk.com/wall18485740_4581 Category:Карта друзей Description::Геометка из поста Елены Горьковой в Сочи»

[[Coordinate::43.656406140133, 39.651700347255]]
[[Friend::Елена Горькова]]
[[PostText::Это были прекрасные 4 дня 😍 г.Сочи]]
[[PostUrl::https://vk.com/wall18485740_4581]]
[[Category:Карта друзей]]
[[Description::Геометка из поста Елены Горьковой в Сочи]]

Проект:Карта друзей/Санкт-Петербург

2026-03-27T07:27:24Z

MukhanovaAI: Новая страница: «Coordinate::59.938746608095, 30.31621092758 Friend::Ира Семенова PostText::Веснаа😊❤️ тепло🌷 PostUrl::https://vk.com/wall6437942_6146 Category:Карта друзей Description::Геометка из поста Иры Семеновой в Санкт-Петербурге»

[[Coordinate::59.938746608095, 30.31621092758]]
[[Friend::Ира Семенова]]
[[PostText::Веснаа😊❤️ тепло🌷]]
[[PostUrl::https://vk.com/wall6437942_6146]]
[[Category:Карта друзей]]
[[Description::Геометка из поста Иры Семеновой в Санкт-Петербурге]]

Проект:Карта друзей/Зеленоградск

2026-03-27T07:27:01Z

MukhanovaAI: /* Google таблица с выгруженными данными пользователя */

{{Scripting Tutorials
|Description=Подготовлено Мухановой Анной
✨MoodTrack — дневник настроения. Это простое и дружелюбное приложение для отслеживания своего настроения каждый день. Пользователь выбирает кнопку с описанием настроения, которая отражает его эмоции, указывает дату (сегодняшнюю или любую другую), и сохраняет это в личную историю.🌻
На отдельных страницах можно просматривать свои прошлые записи, анализировать, как менялось настроение со временем.
|Field_of_knowledge=Информатика, Психология, Социология, Управление, Моделирование
|FieldActivity=Digital Citizen
|Возрастная категория=14
|similar_concepts=Дневник настроения, Трекеры привычек (habit tracker), Mental health apps
|Environment=Thunkable, Google Sheets, AirTable
}}
==Приложение "MoodTrack"==
Ссылка на приложение:
https://x.thunkable.com/copy/2b5a10b15a5391519e44481ccd3bb16eㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
либо
https://x.thunkable.com/projectPage/6827c381d7604f6d73056cbd

==Диаграмма работы приложения "MoodTrack"==
<graphviz>
digraph MoodApp {
rankdir=TB;
node [fontsize=12, shape="ellipse"];

"Приложение" -> "Главный экран" [label="открывает"];
"Главный экран" -> "Выбор даты" [label="пользователь выбирает"];
"Главный экран" -> "Выбор кнопки с описанием" [label="пользователь выбирает"];
"Выбор кнопки с описанием" -> "Кнопка Сохранить" [label="нажимает"];
"Кнопка Сохранить" -> "Сохраняем в таблицу" [label="добавляем"];
"Сохраняем в таблицу" -> "Показываем сообщение\nи анимацию" [label="выполняем"];
"Главный экран" -> "Экран истории" [label="можно перейти"];
"Экран истории" -> "Показываем данные\nиз таблицы" [label="загружаем"];
}
</graphviz>

==Описание приложения ==
Это простое и дружелюбное приложение для отслеживания своего настроения каждый день. Пользователь выбирает кнопку с описанием настроения, которая отражает его эмоции, указывает дату (сегодняшнюю или любую другую), и сохраняет это в личную историю.🌻
На отдельных страницах можно просматривать свои прошлые записи, анализировать, как менялось настроение со временем.

==Thunkable и как им пользоваться==
* [[Ликбез по инструменту Thunkable]]

==Функциональные разделы и описание приложения MoodTrack==
💢Целью проекта является создание простого и интуитивно понятного мобильного приложения для отслеживания настроения пользователя. Приложение позволяет:

Выбирать и сохранять настроение с помощью простого интерфейса;

Указывать дату (текущую или прошедшую) для каждого настроения;

Сохранять данные во внутреннюю таблицу;

Просматривать историю настроений на отдельном экране;

Добавить визуальные элементы и уведомления для улучшения пользовательского опыта.

Приложение ориентировано на пользователей, желающих ''отслеживать своё эмоциональное состояние в формате простого ежедневника-настроений, с возможностью анализа данных в будущем.''

===Главная страница приложения:===
<gallery>
Glav page.png|<small>Главная_страница</small>
</gallery>

На главной странице пользователь может:

Выбрать своё текущее настроение, нажав на одну из кнопок с описанием настроения.
Указать дату, к которой относится настроение (например, прошедший день, прошедший месяц и тд).
Нажать кнопку «Сохранить», чтобы сохранить настроение в личную таблицу.
Получить подтверждение о сохранении (с помощью метки с анимацией).
Перейти на страницу «История настроений», чтобы просмотреть весь список своих записей.

<gallery>
Notif label.png|<small>Лэйбл с успехом</small>
</gallery>

При успешном сохранении информации за определенный день выскакивает окно с "успехом", длительность его видимости у пользователя - ''3 секунды''

Программный блок данной страницы выглядит так:
<gallery>
Blocks glav page.png|<small>Блоки главной страницы</small>
</gallery>

===Экран «История настроений»===
<gallery>
История_настроений.png|<small>История настроений</small>
</gallery>

На этом экране отображается список всех записанных настроений. Здесь можно:

Просмотреть дату и соответствующее ей настроение.
Убедиться, что данные были корректно сохранены.
Используется компонент ''Data Viewer List'' для наглядного отображения информации.

===Экран с дашбордом анализа настроения===
<gallery>
Экран дашборд1.jpg|<small>Экран дашборда</small>

Экран дашборд2.jpg|<small>Экран дашборда</small>

Экран дашборд3.jpg|<small>Экран дашборда</small>

Экран дашборд4.jpg|<small>Экран дашборда</small>
</gallery>

Этот экран предназначен для наглядной визуализации истории настроений с помощью встроенного дашборда, созданного в [[AirTable]]. Здесь пользователь может:

Видеть диаграммы и графики, отображающие частоту различных состояний за выбранный период.
Анализировать, в какие дни настроение было наиболее позитивным или негативным.
Оценивать динамику эмоционального состояния на основе исторических данных.
Использовать фильтры в [[AirTable]] для более гибкого просмотра информации.

''Технически Airtable-доска встроена с помощью компонента Web Viewer в Thunkable, что позволяет отображать дашборд в реальном времени прямо в приложении.''

===Google таблица с выгруженными данными пользователя===

<gallery>
Google sheet mdtrck.png|<small>Google таблица с данными пользователя</small>
</gallery>

Все данные пользователя выгружаются в Google таблицу, которая хранит эти данные, а также передает AirTable для построений более подробных дашбордов и анализа настроения человека. При желании, в дальнейшем, ''продвинутый'' пользователь сможет либо самостоятельно составлять себе различные визуализации и анализировать своё настроение, либо же будет обращаться к специалисту для дальнейшей проработки собственного ментального здоровья.🌟

Трекер настроения

2025-05-17T07:05:14Z

MukhanovaAI: /* Google таблица с выгруженными данными пользователя */

{{Scripting Tutorials
|Description=Подготовлено Мухановой Анной
✨MoodTrack — дневник настроения. Это простое и дружелюбное приложение для отслеживания своего настроения каждый день. Пользователь выбирает кнопку с описанием настроения, которая отражает его эмоции, указывает дату (сегодняшнюю или любую другую), и сохраняет это в личную историю.🌻
На отдельных страницах можно просматривать свои прошлые записи, анализировать, как менялось настроение со временем.
|Field_of_knowledge=Информатика, Психология, Социология, Управление, Моделирование
|FieldActivity=Digital Citizen
|Возрастная категория=14
|similar_concepts=Дневник настроения, Трекеры привычек (habit tracker), Mental health apps
|Environment=Thunkable, Google Sheets, AirTable
}}
==Приложение "MoodTrack"==
Ссылка на приложение:
https://x.thunkable.com/copy/2b5a10b15a5391519e44481ccd3bb16eㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
либо
https://x.thunkable.com/projectPage/6827c381d7604f6d73056cbd

==Диаграмма работы приложения "MoodTrack"==
<graphviz>
digraph MoodApp {
rankdir=TB;
node [fontsize=12, shape="ellipse"];

"Приложение" -> "Главный экран" [label="открывает"];
"Главный экран" -> "Выбор даты" [label="пользователь выбирает"];
"Главный экран" -> "Выбор кнопки с описанием" [label="пользователь выбирает"];
"Выбор кнопки с описанием" -> "Кнопка Сохранить" [label="нажимает"];
"Кнопка Сохранить" -> "Сохраняем в таблицу" [label="добавляем"];
"Сохраняем в таблицу" -> "Показываем сообщение\nи анимацию" [label="выполняем"];
"Главный экран" -> "Экран истории" [label="можно перейти"];
"Экран истории" -> "Показываем данные\nиз таблицы" [label="загружаем"];
}
</graphviz>

==Описание приложения ==
Это простое и дружелюбное приложение для отслеживания своего настроения каждый день. Пользователь выбирает кнопку с описанием настроения, которая отражает его эмоции, указывает дату (сегодняшнюю или любую другую), и сохраняет это в личную историю.🌻
На отдельных страницах можно просматривать свои прошлые записи, анализировать, как менялось настроение со временем.

==Thunkable и как им пользоваться==
* [[Ликбез по инструменту Thunkable]]

==Функциональные разделы и описание приложения MoodTrack==
💢Целью проекта является создание простого и интуитивно понятного мобильного приложения для отслеживания настроения пользователя. Приложение позволяет:

Выбирать и сохранять настроение с помощью простого интерфейса;

Указывать дату (текущую или прошедшую) для каждого настроения;

Сохранять данные во внутреннюю таблицу;

Просматривать историю настроений на отдельном экране;

Добавить визуальные элементы и уведомления для улучшения пользовательского опыта.

Приложение ориентировано на пользователей, желающих ''отслеживать своё эмоциональное состояние в формате простого ежедневника-настроений, с возможностью анализа данных в будущем.''

===Главная страница приложения:===
<gallery>
Glav page.png|<small>Главная_страница</small>
</gallery>

На главной странице пользователь может:

Выбрать своё текущее настроение, нажав на одну из кнопок с описанием настроения.
Указать дату, к которой относится настроение (например, прошедший день, прошедший месяц и тд).
Нажать кнопку «Сохранить», чтобы сохранить настроение в личную таблицу.
Получить подтверждение о сохранении (с помощью метки с анимацией).
Перейти на страницу «История настроений», чтобы просмотреть весь список своих записей.

<gallery>
Notif label.png|<small>Лэйбл с успехом</small>
</gallery>

При успешном сохранении информации за определенный день выскакивает окно с "успехом", длительность его видимости у пользователя - ''3 секунды''

Программный блок данной страницы выглядит так:
<gallery>
Blocks glav page.png|<small>Блоки главной страницы</small>
</gallery>

===Экран «История настроений»===
<gallery>
История_настроений.png|<small>История настроений</small>
</gallery>

На этом экране отображается список всех записанных настроений. Здесь можно:

Просмотреть дату и соответствующее ей настроение.
Убедиться, что данные были корректно сохранены.
Используется компонент ''Data Viewer List'' для наглядного отображения информации.

===Экран с дашбордом анализа настроения===
<gallery>
Экран дашборд1.jpg|<small>Экран дашборда</small>

Экран дашборд2.jpg|<small>Экран дашборда</small>

Экран дашборд3.jpg|<small>Экран дашборда</small>

Экран дашборд4.jpg|<small>Экран дашборда</small>
</gallery>

Этот экран предназначен для наглядной визуализации истории настроений с помощью встроенного дашборда, созданного в [[AirTable]]. Здесь пользователь может:

Видеть диаграммы и графики, отображающие частоту различных состояний за выбранный период.
Анализировать, в какие дни настроение было наиболее позитивным или негативным.
Оценивать динамику эмоционального состояния на основе исторических данных.
Использовать фильтры в [[AirTable]] для более гибкого просмотра информации.

''Технически Airtable-доска встроена с помощью компонента Web Viewer в Thunkable, что позволяет отображать дашборд в реальном времени прямо в приложении.''

===Google таблица с выгруженными данными пользователя===
<gallery>
Google sheet mdtrck.png|<small>Google таблица с данными пользователя</small>
</gallery>

Google sheet mdtrck.png
Все данные пользователя выгружаются в Google таблицу, которая хранит эти данные, а также передает AirTable для построений более подробных дашбордов и анализа настроения человека. При желании, в дальнейшем, ''продвинутый'' пользователь сможет либо самостоятельно составлять себе различные визуализации и анализировать своё настроение, либо же будет обращаться к специалисту для дальнейшей проработки собственного ментального здоровья.🌟