Личный B2B кабинет для отелей по управлению номерами и ценами на сервисе Отелло от 2ГИС

Весной 2022 приостановили работу международные провайдеры онлайн-бронирования Booking и Airbnb, занимавшие до 80% рынка. Спрос оставался высоким: в мае – августе в России путешествовало около 25 млн человек.

Пользователи переключились на российские сервисы. Так был запущен Отелло от 2ГИС – онлайн-сервис для бронирования отелей и гостиниц. Сервис стал заменой зарубежным провайдерам, обеспечивая бесшовный опыт пользования при путешествиях.

Команда Отелло обратилась к нам за разработкой личного кабинета, с помощью которого малые и средние игроки бизнеса могли бы обеспечить себе загрузку. У R&D центра не было ресурсов для параллельной разработки основного сервиса и экспериментального сервиса, поэтому выбор пал на аутсорс-разработку. От своевременной реализации проекта зависел его дальнейший успех.

У команды не было готового ТЗ на разработку, но была идея, референсы для функционала. А ещё было ограничение по срокам запуска – 3 месяца – из-за подготовки к сезону отпусков (май-август).

Мы предложили этап аналитики перед началом работ: чтобы сформировать функционал MVP и ТЗ, запланировать загрузку и ресурсы, тестировать на выборке пользователей перед запуском.

В первую неделю после принятия решения о старте провели встречу с РП, аналитиком и архитектором, заказчиком.

За 2 недели описали бизнес-аналитику проекта, подготовили CJM, составили User Stories и определили функционал MVP. Параллельно описывали системные требования, чтобы запустить разработку и первый спринт, дорабатывать аналитику на следующие.

На 3 неделю подготовили макеты ЛК и запустили разработку. В процессе масштабировали команду и добавляли специалистов нужных ролей по необходимости.

Фронтенд

Использовали библиотеку компонентов Material UI с готовыми решениями, которые кастомизировали под проект. 

При создании архитектуры фронтенда мы ориентировались на технологии, которые позволят автоматизировать рутинные процессы. Так мы остановились на NX – системе инструментов для создания монорепозиториев для react-приложений.  

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

Подключили lazy components для загрузки страниц по бандлам. Это экономит ресурсы, повышает скорость загрузки. 

После завершения основной работы начали покрывать фронтенд тестами с помощью jest и @testing-library/react. С их помощью мы тестируем утилиты, функции, компоненты, чтобы проверить корректную работу небольших элементов кода, выявить места, где возможны поломки. 

Бэкенд

При создании архитектуры бэкенда ориентировались на ограничения и размер команды. Выбрали монолит на Django – Python-фреймворке для быстрого создания веб-сайтов. Содержит инструменты для удобной работы “из коробки”. 

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

Основным челленжем стала разработка шахматки – таблицы с доступностью и вариантами размещения. Команда клиента хотела ограничиться функционалом без UI, но мы смогли запланировать и реализовать юзер-френдли отображение для таблицы.

Для шахматки взяли микс: TanStack Table для рендера таблицы, фильтры Material UI, добавили календарь с B2C-сервиса – react date picker. 

Для виртуализации – отображения компонентов по мере потребности пользователя – использовали tablevirtuoso. Это тоже помогает ускорить загрузку: например, приходят данные на 2000 ячеек, но пользователь видит только 500, больше – если проскроллит. 

Таблица позволяет редактировать данные по номерному фонду в удобном для пользователей формате: актуальная информация попадает в модальное окно и при завершении редактирования уходит на сервер, становится доступной для пользователей Отелло.

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

После релиза MVP-версии мы продолжили работу по оптимизации хранения и передачи данных: каждая комбинация сохраняется в базе данных, актуализируется или помечается на удаление, если пользователь хочет вернуть прежние данные. Это значительно повысило скорость отображения данных для пользователей.

Первую версию ЛК запустили в 2023 за 3 месяца.

ЛК автоматизирует и облегчает неприятную рутину: добавление и редактирование номерного фонда, доступности по датам. Благодаря простому и понятному UI даже непрофессиональные отельеры без проблем адаптируются к сервису. А чтобы не пропустить новое бронирование, мы подключили оповещение через Телеграм-бота.

За 4,5 месяцев с момента запуска было зарегистрировано более 2000 уникальных отелей, которые получили доступ к площадке. Команда Отелло не тратила внутренние ресурсы для реализации проекта, зато взамен получила работающий и развивающийся продукт, который подтвердил гипотезу. Как следствие – кратный рост уникальной базы номерного фонда.