Личный кабинет рекламодателей, back-end мобильного приложения и админ-панели для туристического сервиса
Туристическая экосистема для путешествия на острове Лансароте. VidodoGuide это мобильный гид, маркетплейс билетов на мероприятия и интерактивная карта заведений.
Автономные экскурсии, каталог достопримечательностей и информационная платформа для Лансароте предоставляют вам свободу исследовать прекрасный остров Лансароте, зная, что посмотреть, где остановиться и что делать, все в вашем собственном темпе.
От легенд и исторических событий Лансароте до современных рассказов и описаний местных достопримечательностей - вам обязательно понравятся истории, которые вы услышите.
KapDev
Vidodo Guide - это амбициозный европейский стартап из сферы туризма. Интересный микс функционала Google Maps, Audible, Ticketmaster и собственных идей.
Этот сервис помогает миллионной аудитории туристов острова Лансароте узнать остров получше. Послушать аудиокниги, рассказывающие о его истории, самостоятельно проехаться в приложении по динамическим автомобильным маршрутам с мобильным гидом, найти музеи, рестораны, мероприятия.
Мобильное приложение Vidodo Guide - must have, если нужно получить максимум от путешествия на Лансароте.
С чем пришёл заказчик
На старте у нас была частично работающая экосистема, заказчик и генеральный подрядчик, который курировал разработку всех систем сервиса: от лендинга до мобильного приложения.
Несмотря на то, что большая часть сервиса работала, были критичные части системы, которые нужно было доделать. Без них запускать проект не было смысла.
Нам предстояло оптимизировать лендинг, добавить на него новые элементы, доделать API для мобильного прилоения под новые бизнес требования, под эти новые фичи обновить админ-панели и личный кабинет рекламодателей, чтобы через них можно было управлять новыми сущностями и процессами.
Помимо добавления нового функционала в каждой сервисе экосистемы мы исправляли баги в легаси коде, оптимизировали его работу. Где было целесообразно, проводили рефакторинг.
Что было сделано
К сожалению, в ракмх статьи мы не можем рассказать про все изменения, которые были нами сделаны. И не из-за NDA, а потому что суммарно на все работы было потрачено около 800 часов и закрыто примерно 500 задач. Но мы можем рассказать про основные и самые интересные.
Лендинг
Исправили баги в логике работы калькулятора, слайдера. Устранили графические ошибки вроде элементов выходящих за экран, разработали back-end для отправки данных с формы обратной связи.
Сам лендинг был написан на стэке HTML, CSS + JavaScript. Без современных и удобных фреймворков вроде React или Vue, но со сборкой проекта на Webpack.
Нам предстояло добавить некоторую нетривиальную логику на сайт, например, поиск POI (point of interest, точек интереса), а точнее коммерческих объектов. К сожалению, полная переработка лендинга не совпадала с требованиями бизнеса на момент нашей работы на проекте, поэтому мы реализовывали сложную логику отдельными React компонентами, которые интегрировали в лендинг.
Реализовали мы это следующим образом: внутри репозитория лендинга мы сделали поддиректорию с React проектом, который через Webpack собирался в единый JavaScript файл, сохраняли в директории с JS статикой сайта и подключали его как обычную библиотеку с функцией, которая позволяла рендерить наш компонент в передаваемый ему элемент.
// Примерное содержимое index.ts в React приложенииimportReactfrom'react';
importReactDOMfrom'react-dom';
importPOISelectfrom'./POISelect';
function renderPOISelect<T>(
container: HTMLElement,
props?: T
): void {
const root = ReactDOM.createRoot(container);
root.render(<POISelect {...props} />);
}
// Дальше на сайте можно было рендерить нужный компонент черзе window.renderPOISelectwindow.renderPOISelect = renderPOISelect;
Для back-end'a было написано небольшое приложение на Flask с одним эндпоинтом, который принимал сообщение с формы и отправлял письмо на почту менеджеру через микросервис email'ов.
Back-end мобильного приложения
После анализа бизнес требований, план будущего развития и системы в целом, мы приняли решение плавно трансформировать систему из сервисной архитектуры с парой больших монолитов в микросервисную архитектуру для обеспечения стабильности и простоты масштабирования системы.
На протяжении нашей работы на проекте мы планомерно "распиливали" монолит на отдельные микросервисы, часть из них являлась полностью новым функционалом. Там, где у нас не было возможности подождать с переходом, мы исправляли работу кода в монолите, проводили небольшой рефакторинг, оптимизировали алгоритмы.
Большая работа была проведена с базой данных back-end'a. В ней хранилась информация о 9.000+ объектов на острове и более 5.000.000 комментариев по ним с 3 разных платформ: Tripadvisor, Google и принадлежащий признаной в России экстремисткой организации Meta Facebook.
Что сделали:
Оптимизировали запросы к базе данных
Добавили необходимые индексы
Реализовали кэширование и запись агрегированных данных в отдельные поля
Всё это помогло значительно сократить время загрузки страниц объектов в приложении, например, больше не требовалось ждать пока информация об общем числе отзывов будет подсчитана. Она изменялась в записи объекта сразу после добавления/удаления комментария в базе дааных. И пользователи могли увидеть полную информацию сразу после загрузки карточки заведения.
Панель администратора
Помимо исправления багов и добавления интерфейсов под новые CRUD операции мы достаточно сильно переработали интерфейс инструмента построения автомобильных туров. Благодаря маршрутам, создаваемым в админке, пользователи могут самостоятельно путешествовать со встроенным в мобильное приложение навигатором изучать историю острова.
Мы внесли ряд изменений в инструмент, в частности:
Исправили баги построения маршрутов
Сделали UI компактнее
Доработали логику порядка посещений POI на маршруте
Мигрировали построение маршрутов на последнюю версию API Here
Наверное, самая нетривиальная часть системы, которую нам было необходимо доработать. Здесь пришлось проводить много сложных интеграций. Нам предстояло не только связать Stripe с back-end'ом, но и настроить взаимодействие со сложной бизнес-логикой между независимыми таблицами в базе данных и другими сервисами экосистемы.
Описание реализации системы может занять несколько страниц А4 технической документации, а что-то нельзя рассказать из-за NDA, поэтому расскажем коротко, что было сделано:
Доработаны имеющиеся таблицы базы данных
Созданы промежуточные таблицы для связки разных сущностей
Выстроена корректная архитектура взаимодействия с платёжной системой
Добавлены механизмы работы с отказами системы
Всё это помогло нам создать платёжный модуль в личном кабинете рекламодателей, который позволял размещать своё заведение по подписке на разных тарифах, покупать размещения акций, билбордов, мероприятий на карте на разные промежутки времени с дополнительным функционалом вроде выбора даты размещения, умного подсчёта дней размещения и т.д.
Провели большую работу по доработке сервиса. Исправили баги, реализовали новые фичи, построили современную, надёжную и быструю архитектуру.
На момент завершения нашего пула работ проект ещё не выходил в релиз, но за его развитием вы можете следить на сайте*, на котором, в частности, можно найти ссылки на их социальные сети.
*Сайт находится в иностранной юрисдикции и не подчиняется законам России. На нём могут присутствовать материалы организаций, которые Российская Федерация считает экстремистскими.
