Тильда для ресторанов на Bubble без кода

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

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

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

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

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

1. Рестораторам должно быть просто его использовать

2. Удобная админка с базовыми функциями: статистика по заказам, среднему чеку, клиентам.

3. Интеграция с платежными сервисами и возможность запомнить клиентов.

4. Адаптация под мобильные и рестораторы, и клиенты чаще всего выходили в инстаграм с телефонов.

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

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

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

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

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

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

• По каждому ресторану статистика ведется отдельно.

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

• На вкладке Заказы вся информация по текущим и уже выполненным заказам.

• На вкладке Клиенты базовая CRM.

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

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

• Есть возможность отметить блюдо как рекомендованное тогда оно выводится в самом заметном блоке на страничке ресторана.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bubble это платформа для создания веб-приложений без навыков программирования, инструмент all-in-one. В нем есть визуальный редактор, базы данных, инструменты для бизнес-логики и работы с разными API. Он позволяет создавать полнофункциональные чаты, форумы, системы сбора и обработки заявок, таск-трекеры, маркетплейсы, CRM и дашборды. Присоединяйтесь к сообществу Bubble Chat & Community и каналу Зерокодер.