Карта друзей: различия между версиями

Материал из Поле цифровой дидактики
← Предыдущая правка
Нет описания правки
 
(не показано 15 промежуточных версий этого же участника)
Строка 1: Строка 1:
{{DigitalTool
|Description=Карта друзей на основе API.
Интерактивная карта, отображающая геолокацию публичных постов друзей из ВКонтакте. Проект демонстрирует работу с API социальных сетей и визуализацию геоданных.
|Affordances=Сбор публичных постов с геометками через VK API. Сохранение координат в JSON. Визуализация точек на интерактивной карте. Отображение информации о месте и авторе поста при клике на маркер.
|Difficult=Требуется токен доступа VK (с ограниченным сроком жизни). Работает только с публичными постами (не со всеми друзьями). Зависит от стабильности API ВКонтакте. Не предназначен для слежки в реальном времени, только для анализа исторических открытых данных.
|Field_of_knowledge=Информатика, Образование, Большие данные, Картография, Статистика, Моделирование
|Область применения=Учебный проект
|End users=Учащиеся, Разработчики
|Developer=Муханова Анна АДЭУ-221
|launch year=2026
|distant_collab=Нет
|Language_Ru_Eng=Русский, Python/JavaScript
|AI=Нет
}}
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">
<div style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">


Строка 19: Строка 5:
         <h2 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px;">🗺️ Карта друзей</h2>
         <h2 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px;">🗺️ Карта друзей</h2>
         <p><b>Автор:</b> Анна Муханова</p>
         <p><b>Автор:</b> Анна Муханова</p>
        <p><b>Группа:</b> АДЭУ-221</p>
         <p><b>Дисциплина:</b> Работа с API социальных сетей и облачных сервисов</p>
         <p><b>Дисциплина:</b> Работа с API социальных сетей и облачных сервисов</p>
         <p><b>Статус проекта:</b> В разработке</p>
         <p><b>Статус проекта:</b> Выполнен</p>
     </div>
     </div>


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


     <!-- Задачи -->
     <!-- Задачи -->
     <h3 style="color: #34495e;">📋 Задачи</h3>
     <h3 style="color: #34495e;">Задачи</h3>
     <ol>
     <ol>
         <li>Изучить документацию VK API.</li>
         <li>Изучить документацию VK API.</li>
Строка 39: Строка 26:


     <!-- Планируемый стек технологий -->
     <!-- Планируемый стек технологий -->
     <h3 style="color: #34495e;">⚙️ Технологии</h3>
     <h3 style="color: #34495e;">Технологии</h3>
     <ul>
     <ul>
         <li><b>Языки:</b> Python, JavaScript, HTML/CSS</li>
         <li><b>Языки:</b> Python, JavaScript, HTML/CSS</li>
Строка 47: Строка 34:
     </ul>
     </ul>


    <!-- Ход работы (прогресс) -->
<h3 style="color: #34495e;">Диаграмма работы приложения «Карта друзей»</h3>
    <h3 style="color: #34495e;">🚀 Ход выполнения</h3>
 
     <table style="width: 100%; border-collapse: collapse;">
{{#mermaid: flowchart TB
        <tr style="background-color: #3498db; color: white;">
     A[Начало] --> B(Получение токена VK API)
            <th style="padding: 8px; border: 1px solid #ddd;">Этап</th>
    B --> C(Запрос списка друзей)
            <th style="padding: 8px; border: 1px solid #ddd;">Статус</th>
    C --> D{Есть друзья?}
            <th style="padding: 8px; border: 1px solid #ddd;">Комментарий</th>
    D -->|Нет| E[Завершить]
        </tr>
    D -->|Да| F[Цикл по каждому другу]
        <tr>
    F --> G(Запрос последних 30 постов)
            <td style="padding: 8px; border: 1px solid #ddd;">Создание страницы проекта в вики</td>
    G --> H{Пост содержит geo?}
            <td style="padding: 8px; border: 1px solid #ddd; background-color: #90ee90;">✅ Выполнено</td>
    H -->|Нет| I[Следующий пост]
            <td style="padding: 8px; border: 1px solid #ddd;">Страница зарегистрирована в форме DigitalTool</td>
    I --> G
        </tr>
    H -->|Да| J(Сохранить координаты, имя, место, ссылку)
        <tr>
    J --> K{Все посты проверены?}
            <td style="padding: 8px; border: 1px solid #ddd;">Получение токена VK API</td>
    K -->|Нет| I
            <td style="padding: 8px; border: 1px solid #ddd; background-color: #ffb6c1;">⏳ Ожидает</td>
    K -->|Да| L{Все друзья обработаны?}
            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
    L -->|Нет| F
        </tr>
    L -->|Да| M(Сохранить данные в JSON-файл)
        <tr>
    M --> N(Открыть HTML-страницу с картой)
            <td style="padding: 8px; border: 1px solid #ddd;">Написание скрипта сбора данных</td>
    N --> O(Загрузить JSON в JavaScript)
            <td style="padding: 8px; border: 1px solid #ddd; background-color: #ffb6c1;">⏳ Ожидает</td>
    O --> P(Отрисовать маркеры на карте)
            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
    P --> Q(Клик по маркеру → всплывающее окно)
        </tr>
    Q --> R[Готово]
    </table>
}}
 
    <!-- Структура проекта -->
    <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>
     <h3 style="color: #34495e;">🔗 Ссылки</h3>
    <p>Создала страницу проекта на Digida MGPU через форму DigitalTool. Тема: «Карта друзей» — сбор и визуализация геолокаций из постов ВКонтакте. Получила комментарий от преподавателя, исправила категорию на «Работа с API».</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>
     <ul>
         <li><i>Ссылка на репозиторий появится после создания GitHub</i></li>
         <li>Загружает данные из JSON-файла</li>
         <li><i>Ссылка на демо-карту появится после публикации</i></li>
        <li>Разбирает координаты (формат "широта долгота")</li>
         <li>Добавляет маркеры на карту</li>
        <li>При клике на маркер показывает всплывающее окно с именем друга, местом и ссылкой на пост</li>
     </ul>
     </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>


     <!-- Раздел для заметок -->
     <!-- ИТОГОВЫЙ РЕЗУЛЬТАТ -->
     <h3 style="color: #34495e;">📝 Заметки по разработке</h3>
    <div style="background-color: #eef2f5; padding: 20px; border-radius: 15px; margin: 30px 0; text-align: center; border-left: 4px solid #3498db;">
     <p><i>Здесь будет появляться полезная информация, найденная в документации, и примеры кода.</i></p>
        <h3 style="color: black;">Итог проекта</h3>
        <p style="font-size: 18px;">Создан работающий инструмент для сбора и визуализации геоданных из ВКонтакте</p>
        <p>23 друга обработано &nbsp;|&nbsp; 7 геометок собрано &nbsp;|&nbsp; 6 городов на карте</p>
        <p><small>Проект выполнен в рамках дисциплины «Работа с API социальных сетей и облачных сервисов»</small></p>
    </div>
 
    <!-- ВЫВОДЫ -->
     <h3 style="color: #34495e;">Выводы</h3>
     <p>В ходе работы над проектом я:</p>
    <ul>
        <li>Научилась работать с VK API — получать токен, делать запросы, обрабатывать ответы.</li>
        <li>Освоила парсинг JSON-данных и сохранение результатов в файл.</li>
        <li>Создала интерактивную карту на Leaflet и нанесла на нее реальные геоданные.</li>
        <li>Поняла, как устроены современные веб-сервисы, которые собирают данные из разных источников.</li>
    </ul>
    <p>Проект можно развивать дальше: добавить тепловую карту, сделать анализ популярных мест, подключить Яндекс.Карты с более детальными данными.</p>




Текущая версия от 22:50, 22 марта 2026

🗺️ Карта друзей

Автор: Анна Муханова

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

Дисциплина: Работа с API социальных сетей и облачных сервисов

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

Цель работы

Разработать инструмент для сбора и визуализации геоданных из открытых источников (VK) с целью изучения принципов работы API и создания интерактивных карт.

Задачи

  1. Изучить документацию VK API.
  2. Получить токен доступа для работы с данными.
  3. Написать скрипт на Python для сбора ID друзей и их публичных постов с геометками.
  4. Сохранить полученные координаты в формате JSON.
  5. Создать веб-страницу с картой (Leaflet) и нанести на нее точки.
  6. Опубликовать результат.

Технологии

  • Языки: Python, JavaScript, HTML/CSS
  • Библиотеки Python: requests, vk_api
  • API: VK API, OpenStreetMap (через Leaflet)
  • Хостинг: GitHub Pages (для карты)

Диаграмма работы приложения «Карта друзей»

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

Папка проекта в VS Code

Файлы проекта: config.py (токен), main.py (скрипт), friends_geo.json (результат), map.html (карта)

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

Этап 1. Создание страницы в вики и выбор темы

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

Этап 2. Изучение VK API и получение токена

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

Этап 3. Установка библиотеки и написание Python-скрипта

Установила библиотеку vk_api через терминал:

Установка библиотеки vk_api

Написала скрипт, который:

  • Авторизуется по токену
  • Получает список друзей
  • Для каждого друга запрашивает последние 30 постов
  • Проверяет наличие поля geo в каждом посте
  • Сохраняет координаты, имя друга, текст поста и ссылку в JSON-файл
Процесс поиска данных в терминале
Результат работы скрипта

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

Этап 4. Создание интерактивной карты

Создала HTML-страницу с картой на базе библиотеки Leaflet (OpenStreetMap). Написала JavaScript-код, который:

  • Загружает данные из JSON-файла
  • Разбирает координаты (формат "широта долгота")
  • Добавляет маркеры на карту
  • При клике на маркер показывает всплывающее окно с именем друга, местом и ссылкой на пост
Файл friends_geo.json

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

Этап 5. Создание интерактивной карты

Создала файл map.html с картой на базе Leaflet (OpenStreetMap). Написала JavaScript-код, который загружает данные из JSON и добавляет маркеры на карту. При клике на маркер открывается окошко с именем друга, названием места и ссылкой на пост.

Код JavaScript для отображения маркеров
Код JavaScript для отображения маркеров
Готовая карта с точками

Итог проекта

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

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

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

Выводы

В ходе работы над проектом я:

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

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


Источник — http://digida.mgpu.ru/index.php?title=Карта_друзей&oldid=45063