Вернуться

КемГуру Сервис доставки еды

Разработали сервис доставки еды, где можно заказывать блюда одновременно из нескольких ресторанов на разные адреса и даты.

О клиенте

КемГуру — это служба доставки сети кемеровских ресторанов ResStar. Особенность сети в том, что у каждого ресторана своя специализация: здесь можно найти самую разнообразную кухню, от русской, итальянской и японской до ирландской или немецкой.

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

Ситуация

Заказы могут быть как простыми, так и составными. Например, ситуация в пределах одного дня: вы заказываете обед коллегам в офис. Половина хочет пиццу, другая — роллы из «Сильвер — Япония». Суровый технический директор говорит, что не против медальонов из говяжьей голени, они особенно хороши в «Забое». При этом у него скоро встреча, так что доставку лучше сделать не как всем, а к 16:00, чтобы блюдо не успело остыть. Пока вы записываете заявки, вспоминаете, что сегодня никак не успеваете заехать за тортом ко дню рождения сына — так что к вечеру вам нужна доставка его любимого чизкейка «Мюнхен» на домашний адрес. Вы доходите до самого конца цепочки оформления заказа, как вдруг один из коллег решает добавить к своим роллам еще и шоколадные, на десерт, из того же ресторана.

Посмотрим, как с таким заказом справится новый «КемГуру», а заодно расскажем все о проекте.

Проектирование и дизайн

 

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

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

Проект получился позитивным и легким, с виду и не скажешь, что внутри — столько функций и нюансов.

Реализация

Дина Гарбуз
Руководитель проекта
Дина Гарбуз

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

Заказ происходит в два этапа. На первом пользователь просто добавляет блюда в корзину.

Следующий этап — оформление заказа. Здесь можно выбирать разные адреса, день и время доставки. Например, часть заказов в офис сделать на ближайшее время, а один — к определенному часу. Для оплаты на сайте подключен интернет-эквайринг Сбербанка.

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

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

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

Технологии

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

Павел Бондарович
технический директор
Павел Бондарович

При разработке мы применили подход API Based: параллельно с версткой макетов мы разработали API, а затем интегрировали с ним клиентскую часть — фронтенд веб-приложения. Благодаря этому проект будет легче поддерживать и развивать. 

Vue.js для оформления заказа

У корзины и оформления заказа очень много состояний и сложная логика работы интерфейса. Чтобы все работало плавно и рассчитывалось быстро, мы использовали Vue.js. 

Максим Савченко
фронтенд-тимлид
Максим Савченко

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

В итоге мы добились того, что всей логикой приложения можно управлять с помощью одного JS-файла, не нужно запрашивать весь HTML на пару тысяч строк кода при каждом движении пользователя. Конечно, у Vue есть свои минусы — например, если на jQuery код может писать даже джуниор, то здесь нужен более компетентный специалист с глубокими знаниями JavaScript и умением строить системы.

Оформление заказа на Кемгуру сильно отличается от медлительных сайтов доставок, которые имеют привычку тормозить на самом важном моменте.

Результаты

Сайт только-только запустился, а у нас на очереди двусторонняя интеграция с R-Keeper и личный кабинет — эти функции запланировали сделать сразу после релиза.

R-Keeper Delivery — это система автоматизации доставки еды. Она позволяет принимать большой поток заказов через сайт и по телефону, быстро обрабатывает заказ, подтверждает его и передает на кухню, передает курьеру и формирует электронные документы. Из этой системы выгружаются рестораны и меню, а в нее будут уходить сделанные заказы.

Дина Гарбуз
Менеджер проекта
Дина Гарбуз

Систему R-Keeper Delivery на момент разработки только-только внедряли на стороне заказчика, и пришлось отложить задачу до момента готовности выгрузки. Так что в ближайшее время сайт станет не просто инструментом заказа, но еще и поможет клиенту автоматизировать обработку заявок.

Заказы принимают здесь:

Никита Храмов
Аккаунт-менеджер
Никита Храмов

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

Давайте обсудим ваш проект

Заполняя данную форму, вы принимаете условия Соглашения об использовании сайта, и соглашаетесь с Правилами обработки и использования персональных данных

Другие наши кейсы

МейТан

МейТан

Сайт и интернет-магазин

МейТан
Novex

Novex

Перезапуск интернет-магазина

Novex
MODI

MODI

Интернет-магазин интересных товаров для дома

MODI
Домкрат 365

Домкрат 365

Интернет-магазин автозапчастей

Домкрат 365
Revery

Revery

Интернет-каталог товаров для сна

Revery
Radjab Carpet

Radjab Carpet

Интернет-магазин ковровых изделий

Radjab Carpet

Звоните, пишите

Давайте обсудим ваш проект

Никита Храмов
Аккаунт-менеджер
Никита Храмов

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

Заполняя данную форму, вы принимаете условия Соглашения об использовании сайта, и соглашаетесь с Правилами обработки и использования персональных данных
Блог