Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Год назад Евгений Спорыхин руководил SMM-агентством и привлекал разработчиков на проекты. Зерокодингом увлекся после первого потока нашего интенсивна Airtable Express. Сейчас Женя — один из лучших экспертов по Bubble, руководит студией NoCode Hero и преподает в университете Зерокодер. Он рассказал о своем новом кейсе — конструкторе сайтов для рестораторов на Bubble.
Как придумал идею
Я наблюдал за кафе, ресторанами и кондитерами в инстаграме и заметил, что они берут заказы через директ, выкладывая блюда прямо в ленту. Это неудобно: в сообщениях заказы теряются, отвечать надо быстро — легко упустить продажу. Еще тяжелее вести качественную статистику: приходится отыскивать заказы среди всех сообщений и вручную переносить в таблицы. Оплату принимать можно принимать только в серую — на карточку.
Тогда я решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги.
Для сервиса выделил такие требования:
Рестораторам должно быть просто его использовать
Удобная админка с базовыми функциями: статистика по заказам, среднему чеку, клиентам.
Интеграция с платежными сервисами и возможность «запомнить» клиентов.
Адаптация под мобильные— и рестораторы, и клиенты чаще всего выходили в инстаграм с телефонов.
Что под капотом
Собрал всё на 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 и каналу «Зерокодер».
