Карта друзей

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

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

Дисциплина: Работа с 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. Оформление страницы в вики

Добавила на страницу проекта:

• Блок с результатами (сколько друзей, сколько меток, сколько городов)
• Скриншот карты
• Обновлённую таблицу хода выполнения
• Пример кода на Python
• Выводы и планы по развитию

Удалила лишнюю форму DigitalTool, оставила только категорию «Работа с API».

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

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

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

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

Готовая карта с точками

Вставь сюда скриншот: 1) код карты, 2) финальный вид карты в браузере

Этап 7. Коммуникация с преподавателем и завершение проекта