Год назад Евгений Спорыхин руководил SMM-агентством и привлекал разработчиков на проекты. Зерокодингом увлекся после первого потока нашего интенсива Airtable Express. Сейчас Женя — один из лучших экспертов по Bubble, руководит студией NoCode Hero и преподает в университете Зерокодер. Он рассказал о своем новом кейсе — конструкторе сайтов для рестораторов на Bubble.

Как придумал идею

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

Тогда я решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги.

Для сервиса выделил такие требования:

  1. Рестораторам должно быть просто его использовать
  2. Удобная админка с базовыми функциями: статистика по заказам, среднему чеку, клиентам.
  3. Интеграция с платежными сервисами и возможность «запомнить» клиентов.
  4. Адаптация под мобильные— и рестораторы, и клиенты чаще всего выходили в инстаграм с телефонов.
Автоматически сгенерированный мини-сайт ресторана
Автоматически сгенерированный мини-сайт ресторана

Обзор Bubble: мощный конструктор веб-приложений без кода

Что под капотом

Собрал всё на Bubble — «мобильные» Adalo и Glide не потянули бы сложную бизнес-логику.

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

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

Задать вопросы по Bubble и пообщаться с экспертами можно в русскоязычном коммьюнити.

Интерфейс для ресторатора

Ресторатор регистрируется и добавляет свои заведения (можно добавить целую сеть) и у него появляется набор возможностей:

  • По каждому ресторану статистика ведется отдельно.
  • В системе есть дашборды по выручке за каждый день, количеству заказов и среднему чеку.
  • На вкладке «Заказы» — вся информация по текущим и уже выполненным заказам.
  • На вкладке «Клиенты» — базовая CRM.
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке

Дашборды со статистикой по среднему чеку, количеству посетителей и выручке

Потом он вводит все, что собирается продавать в доставке, и стоимость каждого блюда в пункт «категории, блюда и акции» в админке:

  • Есть возможность отметить блюдо как рекомендованное — тогда оно выводится в самом заметном блоке на страничке ресторана.
  • Есть раздел «Акции и скидки» — спецпредложения из него выводятся на главной в виде слайдера. Акций может быть несколько.

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

Добавление категорий блюд в интерфейсе для ресторатора
Добавление категорий блюд в интерфейсе для ресторатора

Пользовательский интерфейс

Пользователь может один раз зарегистрироваться в любом ресторане, подключенном к платформе, а потом делать заказы с этого логина во всех остальных заведениях сервиса. Но во вкладку «Клиенты» конкретного заведения он попадет, только если сделает заказ в нем.

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

Внешний вид конструктора сайтов для рестораторов
Внешний вид конструктора сайтов для рестораторов

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

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

Хаки для разработчиков

Механика в проекте интересная, но в Bubble все делалось очень просто. Мне даже не пришлось подключать дополнительные плагины — хватило стандартной комплектации.

Чтобы не прописывать каждую вкладку меню и кнопки вручную, я сделал их с помощью Option Set — наборы опций. Я использую их, чтобы не надо было создавать вкладки под каждого администратора заведения. Достаточно прописать новую кнопку, элемент или вкладку меню в таком наборе опций, и они тут же появляется в админке и на всех сайтах. Например, сейчас в панели администратора есть статистика, клиенты, блюда и т.п. — если мы добавим новую строку в Option Set, вкладка под нее автоматически появится у всех рестораторов.

Настройки Optional Sets
Настройки Optional Sets

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

Отображение карточки товаров мы генерируем через Reusable Element — то есть если мы захотели поменять отображение какого-то типа карточки, то просто меняем опции и view автоматически обновляется на всем сайте — не приходится переверстывать отдельные страницы.

Сколько потратил на разработку

В сумме я делал приложение 25 часов — примерно неделю по 5 часов в день, но не слишком напрягаясь, это был проект по фану, не для заказчика. Делал на бесплатном тарифе.

Если бы заказывал такое в обычной студии разработки, думаю, это обошлось бы примерно в 1 млн рублей и срок был бы гораздо дольше.

Настройки блюд: можно вывести в «рекомендованное», поменять стоимость, выставить фильтры по категориям
Настройки блюд: можно вывести в «рекомендованное», поменять стоимость, выставить фильтры по категориям

Планы на будущее

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

Смотреть кейс на видео

Изучить платформу можно на нашем курсе «Разработка на Bubble» — в первом на территории СНГ университете ZEROCODER. Вместо долгих поисков информации на англоязычных форумах можно за 2-3 недели освоить платформу без опыта в программировании и зарабатывать круглые суммы.