сайт доставки еды на tilda
«Тильда для ресторанов» на Bubble без кода
Год назад Евгений Спорыхин руководил SMM-агентством и привлекал разработчиков на проекты. Зерокодингом увлекся после первого потока нашего интенсива Airtable Express. Сейчас Женя — один из лучших экспертов по Bubble, руководит студией NoCode Hero и преподает в университете Зерокодер. Он рассказал о своем новом кейсе — конструкторе сайтов для рестораторов на Bubble.
Как придумал идею
Я наблюдал за кафе, ресторанами и кондитерами в инстаграме и заметил, что они берут заказы через директ, выкладывая блюда прямо в ленту. Это неудобно: в сообщениях заказы теряются, отвечать надо быстро — легко упустить продажу. Еще тяжелее вести качественную статистику: приходится отыскивать заказы среди всех сообщений и вручную переносить в таблицы. Оплату принимать можно принимать только в серую — на карточку.
Тогда я решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги.
Для сервиса выделил такие требования:
Рестораторам должно быть просто его использовать
Удобная админка с базовыми функциями: статистика по заказам, среднему чеку, клиентам.
Интеграция с платежными сервисами и возможность «запомнить» клиентов.
Адаптация под мобильные— и рестораторы, и клиенты чаще всего выходили в инстаграм с телефонов.
Автоматически сгенерированный мини-сайт ресторана
Что под капотом
Собрал всё на Bubble — «мобильные» Adalo и Glide не потянули бы сложную бизнес-логику.
Веб-приложение позволяет рестораторам в пару кликов загрузить блюда в сервис. Еще можно сделать аккуратный сайт с доставкой, корзиной, формой заказа. На нем будет просто зарегистрироваться и из него легко доставать статистику. Ссылка на сайт публикуется в инстаграме — туда и ведут клиентов из постов и сториз.
Конечно, они могли бы собрать лендинг на Тильде, но тогда бы пришлось заморачиваться с версткой, кастомизировать шаблоны, подключать корзину, CRM и другие компоненты. А в сервисе всё уже адаптировано под инстаграм-кухню: надо только загрузить картинки, описание блюд и цены — симпатичная верстка генерируется автоматически.
Интерфейс для ресторатора
Ресторатор регистрируется и добавляет свои заведения (можно добавить целую сеть) и у него появляется набор возможностей:
По каждому ресторану статистика ведется отдельно.
В системе есть дашборды по выручке за каждый день, количеству заказов и среднему чеку.
На вкладке «Заказы» — вся информация по текущим и уже выполненным заказам.
На вкладке «Клиенты» — базовая CRM.
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Потом он вводит все, что собирается продавать в доставке, и стоимость каждого блюда в пункт «категории, блюда и акции» в админке:
Есть возможность отметить блюдо как рекомендованное — тогда оно выводится в самом заметном блоке на страничке ресторана.
Есть раздел «Акции и скидки» — спецпредложения из него выводятся на главной в виде слайдера. Акций может быть несколько.
Как только ресторатор закинул всю информацию в админку и сохранил, он сразу может посмотреть свой сайт. Bubble генерирует дизайн сразу под мобильные устройства.
Добавление категорий блюд в интерфейсе для ресторатора
Пользовательский интерфейс
Пользователь может один раз зарегистрироваться в любом ресторане, подключенном к платформе, а потом делать заказы с этого логина во всех остальных заведениях сервиса. Но во вкладку «Клиенты» конкретного заведения он попадет, только если сделает заказ в нем.
Во время оформления заказа платформа проверяет, зарегистрирован ли пользователь. И если да — то сразу дает сделать заказ, а если нет — отправляет на почту уведомление о заказе и ссылку для подтверждения регистрации.
Внешний вид конструктора сайтов для рестораторов
На главной странице видны товары. Если нажать плюс под товаром на главной, попадаешь в подробное описание блюда — можно добавить его в корзину и выбрать количество. Перед оформлением заказа сервис еще раз уточнит количество блюд.
В корзине при оформлении заказа автоматически подтягиваются данные пользователя: имя, телефон, имейл. В стандартной комплектации Bubble уже есть Google Maps — он дает возможность настроить автодополнение адреса.
Хаки для разработчиков
Механика в проекте интересная, но в Bubble все делалось очень просто. Мне даже не пришлось подключать дополнительные плагины — хватило стандартной комплектации.
Чтобы не прописывать каждую вкладку меню и кнопки вручную, я сделал их с помощью Option Set — наборы опций. Я использую их, чтобы не надо было создавать вкладки под каждого администратора заведения. Достаточно прописать новую кнопку, элемент или вкладку меню в таком наборе опций, и они тут же появляется в админке и на всех сайтах. Например, сейчас в панели администратора есть статистика, клиенты, блюда и т.п. — если мы добавим новую строку в Option Set, вкладка под нее автоматически появится у всех рестораторов.
Настройки Optional Sets
Вся бизнес-логика для новых вкладок берется из одного Workflow. Пару месяцев назад я бы прописывал всё это руками, и у меня уже на старте получилось бы целых 7 Workflow. Со временем их становилось бы все больше и больше.
Отображение карточки товаров мы генерируем через Reusable Element — то есть если мы захотели поменять отображение какого-то типа карточки, то просто меняем опции и view автоматически обновляется на всем сайте — не приходится переверстывать отдельные страницы.
Сколько потратил на разработку
В сумме я делал приложение 25 часов — примерно неделю по 5 часов в день, но не слишком напрягаясь, это был проект по фану, не для заказчика. Делал на бесплатном тарифе.
Если бы заказывал такое в обычной студии разработки, думаю, это обошлось бы примерно в 1 млн рублей и срок был бы гораздо дольше.
Настройки блюд: можно вывести в «рекомендованное», поменять стоимость, выставить фильтры по категориям
Планы на будущее
Сейчас популярны различные агрегаторы — та же Яндекс.Еда. Мы тестируем приложение и смотрим, выстрелит ли оно. Если гипотезы подтвердятся, в следующих итерациях добавлю в личный кабинет рестораторов рассылки, CRM, программы лояльности, возможность кастомизации — цвет и форма кнопок, меню, разный дизайн категорий.
Bubble — это платформа для создания веб-приложений без навыков программирования, инструмент all-in-one. В нем есть визуальный редактор, базы данных, инструменты для бизнес-логики и работы с разными API. Он позволяет создавать полнофункциональные чаты, форумы, системы сбора и обработки заявок, таск-трекеры, маркетплейсы, CRM и дашборды. Если вам тоже интересен Bubble, присоединяйтесь к сообществу Bubble Chat & Community.
Как добавить варианты доставки товара
Укажите тип поля «Варианты доставки».
Перечислите варианты доставки, отделяя их переносом строки. Если вариант доставки не бесплатный, поставьте знак = и укажите цену (только цифры, без знака валюты).
После этого при выборе города в корзине будут показываться все пункты выдачи, которые добавлены в данном городе.
После этого при выборе города в корзине будут показываться все пункты выдачи, которые добавлены в данном городе. После успешной оплаты заказа в СДЭК будут передаваться заказы и формироваться накладные.
Если нужно использовать разные тарифы СДЭК в одном проекте, добавьте несколько вариантов доставки, каждый со своим тарифом.
Track Number (трек-номер или номер отслеживания посылки) можно найти в личном кабинете СДЭК.
СДЭК также передает Track Number в раздел «Заявки» в Тильде, но с некоторой задержкой (от нескольких минут, до 24ч.), поэтому в данный момент нет возможности включить Track Number в содержание самой заявки, которая отправляется на подключенные к Корзине приемщики.
Ошибку может вернуть информационная система СДЭК при расчете стоимости отправки с вашими параметрами (тариф, место отправления, габариты и вес товаров в корзине).
О точной причине возникновения ошибки нужно спрашивать в техподдержке СДЭКа, прикладывая к заявке запрос (выводится сразу после ошибки в журнале ошибок доставок) и его время.