Личный кабинет рекламодателей, back-end мобильного приложения и админ-панели для туристического сервиса

Vidodo Guide - это амбициозный европейский стартап из сферы туризма. Интересный микс функционала Google Maps, Audible, Ticketmaster и собственных идей.

Этот сервис помогает миллионной аудитории туристов острова Лансароте узнать остров получше. Послушать аудиокниги, рассказывающие о его истории, самостоятельно проехаться в приложении по динамическим автомобильным маршрутам с мобильным гидом, найти музеи, рестораны, мероприятия.

Мобильное приложение Vidodo Guide - must have, если нужно получить максимум от путешествия на Лансароте.

С чем пришёл заказчик

На старте у нас была частично работающая экосистема, заказчик и генеральный подрядчик, который курировал разработку всех систем сервиса: от лендинга до мобильного приложения.

Мы были приглашены для доработки  лендинга*, back-end'a мобильного приложения*, различных админ-панелей и личного кабинета рекламодателей*.

Почему к нам обратились

Несмотря на то, что большая часть сервиса работала, были критичные части системы, которые нужно было доделать. Без них запускать проект не было смысла.

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

Помимо добавления нового функционала в каждой сервисе экосистемы мы исправляли баги в легаси коде, оптимизировали его работу. Где было целесообразно, проводили рефакторинг.

Что было сделано

К сожалению, в ракмх статьи мы не можем рассказать про все изменения, которые были нами сделаны. И не из-за NDA, а потому что суммарно на все работы было потрачено около 800 часов и закрыто примерно 500 задач. Но мы можем рассказать про основные и самые интересные.

Лендинг

Исправили баги в логике работы калькулятора, слайдера. Устранили графические ошибки вроде элементов выходящих за экран, разработали back-end для отправки данных с формы обратной связи.

Сам лендинг был написан на стэке HTML, CSS + JavaScript. Без современных и удобных фреймворков вроде React или Vue, но со сборкой проекта на Webpack.

Нам предстояло добавить некоторую нетривиальную логику на сайт, например, поиск POI (point of interest, точек интереса), а точнее коммерческих объектов. К сожалению, полная переработка лендинга не совпадала с требованиями бизнеса на момент нашей работы на проекте, поэтому мы реализовывали сложную логику отдельными React компонентами, которые интегрировали в лендинг.

Реализовали мы это следующим образом: внутри репозитория лендинга мы сделали поддиректорию с React проектом, который через Webpack собирался в единый JavaScript файл, сохраняли в директории с JS статикой сайта и подключали его как обычную библиотеку с функцией, которая позволяла рендерить наш компонент в передаваемый ему элемент.

// Примерное содержимое index.ts в React приложении

import React from 'react';
import ReactDOM from 'react-dom';

import POISelect from './POISelect';

function renderPOISelect<T>(
  container: HTMLElement,
  props?: T
): void {
  const root = ReactDOM.createRoot(container);
  root.render(<POISelect {...props} />);
}

// Дальше на сайте можно было рендерить нужный компонент черзе window.renderPOISelect
window.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, поэтому расскажем коротко, что было сделано:

• Доработаны имеющиеся таблицы базы данных
• Созданы промежуточные таблицы для связки разных сущностей
• Выстроена корректная архитектура взаимодействия с платёжной системой
• Добавлены механизмы работы с отказами системы

Всё это помогло нам создать платёжный модуль в личном кабинете рекламодателей, который позволял размещать своё заведение по подписке на разных тарифах, покупать размещения акций, билбордов, мероприятий на карте на разные промежутки времени с дополнительным функционалом вроде выбора даты размещения, умного подсчёта дней размещения и т.д.

Демо-видео доступно в галерее.

Итог

Провели большую работу по доработке сервиса. Исправили баги, реализовали новые фичи, построили современную, надёжную и быструю архитектуру.

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

*Сайт находится в иностранной юрисдикции и не подчиняется законам России. На нём могут присутствовать материалы организаций, которые Российская Федерация считает экстремистскими.