Карта друзей
🗺️ Карта друзей
Автор: Анна Муханова
Дисциплина: Работа с API социальных сетей и облачных сервисов
Статус проекта: В разработке
Цель работы
Разработать инструмент для сбора и визуализации геоданных из открытых источников (VK) с целью изучения принципов работы API и создания интерактивных карт.
Задачи
- Изучить документацию VK API.
- Получить токен доступа для работы с данными.
- Написать скрипт на Python для сбора ID друзей и их публичных постов с геометками.
- Сохранить полученные координаты в формате JSON.
- Создать веб-страницу с картой (Leaflet) и нанести на нее точки.
- Опубликовать результат.
Технологии
- Языки: Python, JavaScript, HTML/CSS
- Библиотеки Python: requests, vk_api
- API: VK API, OpenStreetMap (через Leaflet)
- Хостинг: GitHub Pages (для карты)
Структура проекта
Файлы проекта: 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 через терминал:
Написала скрипт, который:
- Авторизуется по токену
- Получает список друзей
- Для каждого друга запрашивает последние 30 постов
- Проверяет наличие поля
geoв каждом посте - Сохраняет координаты, имя друга, текст поста и ссылку в JSON-файл
Результат: собрано 18 постов с геометками у 30 обработанных друзей.
Этап 4. Создание интерактивной карты
Создала HTML-страницу с картой на базе библиотеки Leaflet (OpenStreetMap). Написала JavaScript-код, который:
- Загружает данные из JSON-файла
- Разбирает координаты (формат "широта долгота")
- Добавляет маркеры на карту
- При клике на маркер показывает всплывающее окно с именем друга, местом и ссылкой на пост
Результат: готовая интерактивная карта с точками всех найденных геометок.
Этап 5. Создание интерактивной карты
Создала файл map.html с картой на базе Leaflet (OpenStreetMap). Написала JavaScript-код, который загружает данные из JSON и добавляет маркеры на карту. При клике на маркер открывается окошко с именем друга, названием места и ссылкой на пост.
