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

Материал из Поле цифровой дидактики
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 34: Строка 34:


     <!-- Структура проекта -->
     <!-- Структура проекта -->
     <h3 style="color: #34495e;">📁 Структура проекта</h3>
     <h3 style="color: #34495e;">Структура проекта</h3>
     <div style="text-align: center; margin: 15px 0;">
     <div style="text-align: center; margin: 15px 0;">
         [[Файл:Project_folder.png|500px|center|thumb|Папка проекта в VS Code]]
         [[Файл:Project_folder.png|500px|center|thumb|Папка проекта в VS Code]]
Строка 79: Строка 79:
     <p><b>Результат:</b> готовая интерактивная карта с точками всех найденных геометок.</p>
     <p><b>Результат:</b> готовая интерактивная карта с точками всех найденных геометок.</p>


     <h4 style="color: #3498db;">Этап 5. Оформление страницы в вики</h4>
     <h4 style="color: #3498db;">Этап 5. Создание интерактивной карты</h4>
    <p>Добавила на страницу проекта:</p>
    <ul>
        <li>Блок с результатами (сколько друзей, сколько меток, сколько городов)</li>
        <li>Скриншот карты</li>
        <li>Обновлённую таблицу хода выполнения</li>
        <li>Пример кода на Python</li>
        <li>Выводы и планы по развитию</li>
    </ul>
    <p>Удалила лишнюю форму DigitalTool, оставила только категорию «Работа с API».</p>
 
    <h4 style="color: #3498db;">Этап 6. Создание интерактивной карты</h4>
     <p>Создала файл <code>map.html</code> с картой на базе Leaflet (OpenStreetMap). Написала JavaScript-код, который загружает данные из JSON и добавляет маркеры на карту. При клике на маркер открывается окошко с именем друга, названием места и ссылкой на пост.</p>
     <p>Создала файл <code>map.html</code> с картой на базе Leaflet (OpenStreetMap). Написала JavaScript-код, который загружает данные из JSON и добавляет маркеры на карту. При клике на маркер открывается окошко с именем друга, названием места и ссылкой на пост.</p>
     <div style="text-align: center; margin: 15px 0;">
     <div style="text-align: center; margin: 15px 0;">
Строка 96: Строка 85:
         [[Файл:Map code2.png|400px|center|thumb|Код JavaScript для отображения маркеров]]
         [[Файл:Map code2.png|400px|center|thumb|Код JavaScript для отображения маркеров]]
         [[Файл:map_result.png|400px|center|thumb|Готовая карта с точками]]
         [[Файл:map_result.png|400px|center|thumb|Готовая карта с точками]]
        <p><i>Вставь сюда скриншот: 1) код карты, 2) финальный вид карты в браузере</i></p>
     </div>
     </div>
    <h4 style="color: #3498db;">Этап 7. Коммуникация с преподавателем и завершение проекта</h4>


</div>
</div>


[[Файл:Map code1.png]]
    [[Файл:Карта_друзей.png|мини]]
</div>


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

Версия от 20:11, 22 марта 2026

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

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

Дисциплина: Работа с 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 для отображения маркеров
Готовая карта с точками
Источник — http://digida.mgpu.ru/index.php?title=Карта_друзей&oldid=45058