В феврале 2021 года ВкусВилл запустил проект «Сгоряча» по доставке блюд из более 50 «dark kitchen» в Москве, Санкт-Петербурге, Волгограде, Чебоксарах и других городах. Сейчас через приложение можно заказать также еду из ресторанов-партнеров. Блюда бесплатно доставляют собственные курьеры сети в среднем за 1 — 1,5 часа после оформления заказа.

Доставок из «dark kitchen» не так много — всего 3-4 агрегатора доставляют блюда. Это нетривиальная задача: нужно наладить работу курьеров, разработать приложения для партнеров, курьеров и клиентов, подключить партнеров и обучить их пользоваться доставкой, продумать архитектуру на случаи загрузки — много всего.

Подробнее расскажем, как мы сделали 3 небольших доработки для сервиса по доставке блюд из ресторанов, как он работает и с какими сложностями нам пришлось столкнуться в процессе.

Что нужно для доставки?

У ВкусВилл 5,5 млн активных покупателей, 1300 магазинов, 120 дарксторов в 63 городах России и свое клиентское приложение для заказа продуктов. Чтобы расширять возможности партнеров и ассортимент услуг ВкусВилл создает новые сервисы. Один из них — по доставке блюд из ресторанов.

Мы — команда «Фулстек» — им в этом помогаем.

Чтобы сделать доставку нужно несколько «компонентов»:

1. Штат собственных курьеров, потому что у ресторанов редко бывают свои.

2. Клиентское приложение для заказа продуктов из магазинов и блюд у партнеров.

3. Приложение для курьеров, где они могут брать заказы.

4. Административная панель.

5. Приложение для Партнеров, для отслеживания заказов.

6. Бэкенд, чтобы товары ресторанов отображались в мобильном приложении пользователей.

В этой схеме мы работали над последними тремя задачами.

Немного доработали бэкенд

У «ВкусВилл» уже есть приложение, где клиенты могут заказывать продукты. Наша первая задача была в том, что мы должны были написать бэкенд так, чтобы товары ресторанов отображались в мобильном приложении пользователей.

Нам повезло — мы не писали с нуля. У ВкусВилл уже был проект — сервис «Аптеки» (понятно, какие товары через него продавались). Для работы этого сервиса была разработана PIM-система (учет товаров), которую мы и решили использовать и в реализации сервиса по доставке блюд из ресторанов, потому что аптека мало чем отличается от работы ресторана.

Что добавили:

• Добавили рестораны партнеров в учетную систему ВкусВилл.

• Разместили ассортимент блюд, которые предлагали Партнеры. 

• Привязали рестораны к магазинам сети для определения зон доставки, ориентируясь на графики работы новых партнеров. 

• Наладили процесс сбора заказа, чтобы оптимизировать время доставки.

• Доработали задания курьерам, чтобы получали части заказа из разных точек, например, горячее из одного ресторана, а десерт — из другого.

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

Складской учет. На складе либо есть товар, либо нет, а блюда повара готовят под заказ, при этом не предусмотрен подсчет остатков ингредиентов, как это реализовано в «dark kitchen». Поэтому вместо складского учета блюда «ставим на стоп». На этапе разработки функционала сервиса нам требовалось учесть все ситуации, когда блюдо «ставится на стоп», например, когда пропал повар или сломалось оборудование. 

Ограничение зоны доставки. Команда «Фулстек» создала проектные структурные единицы (ПСЕ) и настроила складской учет для ПСЕ. Специалисты запустили новое API сборки и разделили заказ на сборочные листы для «dark store» и «dark kitchen». Затем подключили WEB-рестораны к API сборки, как результат — кухня работает по сборочным листам.

Панель администратора

Вторая задача — панель администратора: нужна, чтобы отслеживать заказы и изменение их статуса…

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

Также через панель можно отключить ресторан в случае форс-мажора, тогда новые заказы не будут поступать, а клиенты не будут бессмысленно ждать блюда из ресторана, который не работает.

При разработке web-приложения административной панели: 

• Собрали MVP панели по ТЗ. Туда входили пункты меню: заказы, архив, каталог, уведомления и о ресторане.

• Оформили карточки заказа: информация о номере заказа, телефоны горячей линии, состав заказа, кнопки для перевода заказа в следующий статус.

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

• Добавить фильтрацию заказов по статусам. Это нужно, чтобы, например, посмотреть сколько заказов сейчас находятся в статусе «Доставка».

• Добавить формирование отчета в CSV и PDF. Позже функционал отчетов дорабатывался.

Для панели использовали React в сочетании Typescript, что позволило обеспечить большую безопасность и меньшее количество ошибок, отправляемых во внешний интерфейс. 

Мобильное приложение для Партнеров как продолжение админки

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

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

Основа экранов — экрана веб-приложения, что логично. Само мобильное приложение для Android и iOS собрали через Capacitor: в нем используются как плагины Capacitor, так и несколько пользовательских плагинов из-за отсутствия официальных альтернатив. После сборки приложения немного доработали интерфейс под мобильное и планшетное разрешение.

Приложение — это Iframe внутри Webview. После сборки поработали над версткой и исправляли баги. 

Основное преимущество приложения в том, что мы настроили пуш-уведомления, чтобы можно было отслеживать с телефона приходящий заказ. Потому что не всегда есть возможность 24 часа держать открытой вкладку браузера. Сами заказы передаются в приложение по API.

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

Все дополнительные решения, как и само приложение, разрабатываются по Lean-модели, что позволяет допиливать проект с учетом новых данных. На все ушло примерно месяц: сборка, исправление багов, доработка верстки, пуши. Приложение тестировали по тест-кейсам. Плюс в стадию тестирования можно добавить доставку из двух московских ресторанов сети «Osteria Mario». Сейчас доступно меню из 80 блюд. Заказать доставку можно в разделе «Рестораны» в мобильном приложении ВкусВилл.

Вся работа у нас заняла 1 год. Процесс по шагам:

• Бэкенд: 1 месяц PHP, 2 месяца — SQL.

• Разработки API сборки для «dark kitchen» — 1 месяц.

• Подключить API сборки – 1 месяц интеграции.

• Базовый функционал админки — 2 месяца.

• Исправление багов — 2 недели.

• Дополнительный функционал — 3 месяца.

• Исправление багов 1 месяц.

• Основной функционал приложения — 1 месяц.

• Исправление багов — 2 недели.

Примечание. Статья основана на материале, который мы уже выпускали. Мы обновили статистику, структуру, какую-то часть сократили для удобства читателей.