Разработали MVP-версию Дримтрип — сервиса для поиска отелей

Клиент пришёл к нам, чтобы реализовать MVP-версию веб-приложения по поиску дешевых отелей. Мы поставили перед собой задачу разработать сайт по готовым дизайн-макетам, проработать основные фичи и сделать это в сжатые сроки.

В рамках проекта было решено: 

1. Построить процесс так, чтобы клиент в короткие сроки получил работающую MVP-версию сайта;

2. Сверстать сайт по готовым дизайн-макетам;

3. Реализовать фичи в виде карты и календаря;

4. Разработать фронтенд часть приложения.

Дальше расскажем подробно как работали над проектом и какой результат передали клиенту.

Мы работали в связке с дизайнером со стороны клиента. Чтобы быстрее дойти до MVP, построили процесс таким образом:

1. Посмотреть макеты и вместе с дизайнером подумать над UX составляющей, чтобы даже в MVP-версии пользователи могли быстро ориентироваться и выполнить действие на сайте;

2. Взять на себя фронтенд-разработку и за короткое время реализовать нужные фичи для MVP-версии.

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

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

Первое, с чем работали — выпадашка с количеством гостей. На первых вариантах макета дизайнер отрисовал функционал так: взрослых можно было добавить в одно нажатие на «+», а детей через отдельный дропдаун с выбором возраста ребёнка. Чтобы пользователю было просто совершить это действие, мы нашли схожие сценарии на других сайтах и остановились на решении с двумя дропдаунами.

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

Изначально клиент не планировал добавлять карту с отелями на сайт, поэтому она не была отрисована в макетах. Но в процессе все-таки принял решение добавить отдельный блок с ней для просмотра отелей. Мы решили взять Яндекс Карты — с ними проще работать технически, да и пользователи чаще выбирают их для навигации. 

Для реализации мы использовали мобильное представление листинга отелей на десктопе — это помогло нам сократить время на реализацию. Сложность была в том, чтобы совместить это противоречие в стейте приложения.

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

Кстати, архитектурно все же пришлось немного повозиться, потому что изначально ресурсы на карту мы не закладывали. Думали над тем, как построить приложение, чтобы не задублировать кучу кода, всё работало в синергии и без багов. Мы могли создать две сущности, которые плюс-минус выглядят одинаково, продублировать их и увеличить объем кода. Но сделали по-другому, поэтому код будет проще поддерживать в будущем. 

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

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

В фильтрах Дримтрипа есть параметры, которые помогают найти подходящие отели — с городом, тарифами, типами размещения и удобствами. Когда пользователь выбрал фильтр и нажал «Найти», мы идем на сайты других сервисов и ищем варианты. А именно: к Яндекс Путешествиям, Отелло, Трип и Островок!

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

Каждые 3 секунды сервис обновляет статус по запросу. Мы получаем первые варианты сразу, а остальные подгружаются со временем. Если нужного для прекращения опроса статуса не получено, то сервис продолжает собирать данные. 

На сайте есть календарь, который помогает пользователю выбрать дату заезда и выезда — находится на главной странице.

Для реализации мы использовали популярную библиотеку React Datepicker и кастомизировали календарь под стиль сайта. В общем, использовали готовое решение и не тратили время клиента на разработку с нуля. Получилось привычно и стильно.

Для MVP-версии мы выбирали решения, которые не требовали много времени на реализацию и при этом хорошо смотрелись на сайте клиента. Что сделали:

1. Помогли доработать макеты по части UX, чтобы пользователям было проще искать отели;

2. Забрали на себя весь фронтенд-приложения;

3. Сделали карту;

4. Поработали с фильтрами;

5. Добавили простой календарь;

6. Оптимизировали запросы;

7. Отдали клиенту MVP-версию, которую еще будем дорабатывать.