Карта друзей

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

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

Дисциплина: Работа с 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 и нанесла на нее реальные геоданные.
• Поняла, как устроены современные веб-сервисы, которые собирают данные из разных источников.

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

Пример кода (Python)

<code>
import vk_api

# Получаем посты друга и проверяем геометки
posts = vk.wall.get(owner_id=friend_id, count=50)

for post in posts['items']:
    if 'geo' in post and post['geo']:
        coordinates = post['geo']['coordinates']
        print(f"Найдена геометка: {coordinates}")
    </code>