TripLive — Telegram сервис для привязки контента к геолокации

TripLive — Telegram сервис для привязки контента к геолокации

Описание

Хочу рассказать вам про свой пет проект TripLive. 3 года назад когда я переехал в Санкт-Петербург, я хотел как-то сохранять интересные места: кофейни, картины, улицы, дома и т.д. Идея сервиса родилась именно в тот период, когда в избранном или заметках делать это стало не так удобно.

Телеграм бот привязывает контент, который вы отправляете боту, к точке на карте, а затем просматривать или управлять им в Web приложении. Это могут быть, как отдельные метки, так и целые маршруты с медиа/заметками, по которым вы передвигались, чтобы запечатлеть свои эмоции и не потерять классную локацию. Вы можете пользоваться TripLive абсолютно бесплатно!

Возможности

Сейчас Android или IOS по умолчанию сохраняют гепозицию в метаданных для фото и видео. Однако, экосистема Telegram шире в плане разнообразия контента. Вы присылаете: 📷 фото 📹 видео 📝 текст 🎤 аудио сообщения ⭕ видео-кружочки или даже группа из несколько фото/видео. Бот предложит вам начать трансляцию геопозиции или отправить текущую геопозицию, и после того, как вы это сделаете, TripLive привяжет ваш контент к этой геопозиции.

Вы можете заранее начать трансляцию и в течении всего маршрута отправлять контент, он так же будет привязан к тому месту, где вы сейчас находитесь. Если отправляете контент в радиусе 20 метров, то для удобства контент на карте будет группироваться.

Процесс создания Trip Live

Последнее время я пишу пет проекты на NodeJS и React. Поэтому для бота я использовал библиотеку grammY, для WebApp - NextJS.

Telegram Bot

Для работы с геоданными в PostgreSQL используется расширение postgis, которое оптимизированно хранит гео-данные и эффективно выполняет вычисления.
После нескольких попыток сконфигурировать Docker контейнер c расширением postgis я не стал продолжать это делать и использовал готовый образ PostgreSQL с расширением postgis.

В процессе передачи геоданных я заметил, что после окончания таймера гео-трансляции Телеграмм не передает флаг о завершении самой трансляции, и события просто перестают приходить, это довольно странно. Однако при ручном завершении мы можем отследить завершение стриминга, когда не приходит свойство live_period. Для этого я написал фоновую задачу, которая проверяет новые эвенты для незавершенных маршрутов, и если в терчении 10 минут геолокация не приходит, то маршрут завершается.

Telegram App

UI

За логотип спасибо потрясающей художнице @psychodelfina. Закрепленная фотокарточка с логотипом сайта отражает суть проекта и принадлежность к моему творчеству.

Приложение для удобства просмотра поддерживает системную тему Telegram (Light/Dark).

Скрин светлой темы Trip LiveСкрин тёмной темы Trip Live

Telegram Apps SDK

Для WebApp используется неофициальный Telegram Apps SDK, в нём решены некоторые проблемы официального SDK:

  • связанные с безопасностью;
  • плохое качество кода на Vanilla JS;
  • большой размер bundle;
  • и другие, полный список можно найти тут.

Карта

За движок карты отвечает leaflet. (На одной из прежних работ я работал с Openlayers и leaflet, но из опыта, последний мне больше нравится, и весит он в разы меньше) В качестве подложки я взял Mapbox, в нем есть возможность кастомизировать стили карты, выглядит она достаточно стильно и используется в самом Telegram.

При рендеринге страницы с метками я столкнулся с нетривиальной задачей. Во время отрисовки карты, выдвижное окно BottomSheet из библиотеки react-spring-bottom-sheet отображалось под тайлами, которые перекрывали его, и при этом неважно, какой z-index стоит у этого окна, или у карты, или у тайлов. Оказывается, это известная проблема stacking context и для её решения в BottomSheet есть свойство sibling. Оно отрисовывает переданный компонент, как одноуровневый элемент и управляет его анимацией поверх слоя карты.

В планах

У меня много идей относительно проекта, которые можно добавить в будущем при запросе от пользователей, например:

  • выравнивание линии геометрии маршрута;
  • добавления ссылки на маршрут в сообщение при окончании трансляции;
  • добавления ссылки на метку в сообщение при привязке гео метки;
  • шаринг отдельных меток и маршрутов между пользователями;
  • коллективные сообщества;
  • и многое другое.

Не стесняйтесь предлагать свои идеи. Напишите мне предложения по улучшению, какого функционала вам не хватает и мы вместе что-нибудь придумаем.

Так же, если вы нашли баг, или просто хотите оставить отзыв, это можно сделать в сообщениях моего Telegram канала или на почту maks@besssarab.ru.

Отправить