визуальное программирование без кода basic bubble developer
«Тильда для ресторанов» на 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.
Визуальное программирование без кода. Basic Bubble developer
От идеи до готового web-продукта без кода
Описание :
МОЖНО ЛИ СТАТЬ ПРОГРАММИСТОМ, КОТОРЫЙ НЕ ПИШЕТ КОД?
МОЖНО. Оказывается, для того, чтобы разрабатывать функциональные web-продукты, не обязательно печатать сложные текстовые команды и иметь технический бэкграунд. Идея «программирования мышкой» давно не нова.
Но настоящая шумиха вокруг визуализации алгоритмов поднялась после того, как пользователь платформы Bubble смог за 4 дня создать полностью работоспособную копию Twitter. Без написания кода, а просто манипулируя графическими элементами. О чем это говорит? Визуальный программист — человек, который при наличии правильного инструмента и скиллов, сможет как самостоятельно создавать проекты любой сложности, так и взять на себя задачи требующие оперативной реализации.
Цель курса — научить вас «строить без кода».
Вы пройдете по шагам весь процесс визуального программирования на Bubble: от идеи до готового web-приложения!
Программа курса :
Модуль 1. Welcome to Bubble! Экскурсия по интерфейсу.
Модуль 2. Проектирование базы данных.
Логика и алгоритмы. Контейнеры и манипуляции с данными.
Система контроля версий. Интеграция с внешними сервисами.
Создай веб-приложение без кода. Beginner Bubble developer
Чему вы научитесь
Материалы курса
Введение 1 лекция • 1 мин
Создание планировщика 4 лекции • 49 мин
Требования
Описание
Курс для тех, кто хочет попробовать себя в IT, познакомиться с процессом разработки веб-приложений и сделать первый шаг в изучении no-code инструментов. No-code – это визуальный способ разработки IT продуктов, начиная от чат-ботов в Telegram и заканчивая сервисами доставки, сложными CRM системами, а также платформами для предоставления образовательных услуг. Также это отличный инструмент для проверки гипотез и разработки MVP (минимально жизнеспособного продукта), который создается за быстрый промежуток времени и с небольшими затратами. Это отличная возможность, чтобы проверить спрос на продукт, а также использовать готовый работающий прототип для создания продукта на коде (в многих случаях стартапы продолжают работать на ноукоде).
На этом курсе вы создадите своё первое веб-приложение, которое называется «Task manager» или планировщик задач. Используемый no-code инструмент – Bubble, для которого вам не потребуется устанавливать дополнительные ПО или оплачивать подписку. Работа полностью происходит в браузере и процесс разработки полностью бесплатный до момента, когда вы захотите купить домен и опубликовать своё приложение. В этом случае, оплата сервиса составит от 29$ ежемесячно за обслуживание одного приложения.
Всего за 1 час мы научимся работать с такими базовыми элементами, как text, group, repeating group, input и многое другое. Также мы рассмотрим принцип работы реляционной базы данных и настроим workflow, то есть установим принцип взаимодействия приложения с пользователем.
Данный курс является ознакомительным и не охватывает всего спектра возможностей no-code инструментов.
No-code
Для создания сложных приложений не нужны большие денежные затраты, толпа разработчиков или много времени.
Тренд стремительно развивается и постоянно появляется множество новых приложений, как на Product Hunt, так и по упоминаниям в Твиттере! Это действительно захватывающе.
Тренд «без кода» подразумевает не только создание новых стартапов или предприятий, но и автоматизацию рабочего цикла, улучшение бизнес-процессов и все то, что помогает вам в работе и развитии.
Давайте посмотрим правде в глаза, научиться программировать сложно! Теперь вам не нужно писать код, чтобы выстроить успешный бизнес.
Мы подобрали 20 лучших инструментов без кода, которые мы использовали для Cenario и других наших сторонних проектов и бизнесов.
1. Bubble
Если кодирование никогда не было вашей сильной стороной (или же вы просто никогда в жизни не программировали), то это то приложение, которое вы ждали.
Bubble облегчает вам жизнь, позволяя создавать удивительные приложения без лишних хлопот. Он помогает вам создавать приложения без необходимости изучать языки программирования или учиться кодить вообще.
Вы можете делать сложные приложения с множеством функций, без единой строчки кода или скриптинга.
Функция перетаскивания мышью позволяет быстро втянуться и не только увидеть мгновенные результаты, но и получить навык работы с другими конструкторами сайтов и посадочных страниц (пусть даже и более продвинутыми).
Это отличный вариант, если вы всегда хотели создать приложение или новый стартап, но не можете позволить себе платить разработчику или не хотите ждать несколько месяцев до запуска.
На самом деле, вы даже можете создать приложения вроде Facebook, Twitter, Quora и многие другие с уроками Bubble. Настоятельно рекомендуем проверить этот ресурс!
2. Glide
Да, теперь вы можете создавать приложения всего за 5 минут прямо из Google Sheets!
Glide поможет вам создать мобильное приложение менее чем за 5 минут. Как? Оно строится на базе Google Sheets бесплатно (до тех пор, пока вам не понадобятся более продвинутые функции).
Опыта в программировании не требуется.
Таким образом, если у вас есть бизнес или вы знаете бизнес, которому нужно приложение, то вы можете создать его очень быстро с помощью руководства.
У них есть несколько отличных шаблонов и примеров на сайте.
3. Adalo
Adalo — потрясающий продукт, который вам обязательно нужно опробовать.
Вы можете создавать полнофункциональные приложения в кратчайшие сроки, не прибегая к программированию!
Хотя он может показаться похожим на Glide, Adalo больше ориентирован на визуальной составляющей функции перетаскивания, так чтобы пользователи могли сразу видеть то, что они создают в режиме реального времени.
У них есть несколько очень хороших инструкций по созданию игр без кода, которые можно посмотреть, чтобы изучить и понять полный потенциал Adalo.
4. Voiceflow
Если вы хотите создать приложение с голосовым управлением, вам нужно попробовать Voiceflow. Voiceflow позволяет разрабатывать приложения для Amazon Alexa и Google Assistant, что делает их доступными для всех.
Продукт имеет простой интерфейс и позволяет легко перетаскивать блоки, что поможет вам быстро создавать голосовые приложения с минимальными затратами — и никакого кода.
Видео-уроки просто потрясающие!
5. Thunkable
Как известно, разработка приложения требует тщательного планирования и надлежащего исполнения. Обычно говорят, что изучение языков программирования — единственный способ создать функциональное мобильное приложение.
С Thunkable можно забыть об этом предубеждении.
Теперь вы можете легко создавать свои мобильные приложения с помощью этого инструмента. Оно позволяет просто перетаскивать элементы и разрабатывать сложные функции. Если у вас есть идеи, которые вы хотите быстро протестировать на потенциальных пользователях, вы можете использовать этот инструмент для их реализации.
Это классное приложение, хотя и не имеет хороших инструкций для эффективного использования инструмента и, что более важно, использования его для быстрого создания продуктов. Тем не менее, у него большой потенциал.
6. Carrd
Мы в Cenario большие поклонники Carrd.
Carrd — отличный вариант для предпринимателей, так как он позволяет систематически и легко создавать одностраничные сайты. Он имеет простой интерфейс, который позволяет настраивать и создавать одностраничные сайты в кратчайшие сроки.
Для этого инструмента доступно множество шаблонов, которые вы можете легко изменять в соответствии с вашими предпочтениями.
Вы можете использовать Carrd для создания трех сайтов бесплатно, после чего вы можете выбрать тарифный план от 19 долларов в год.
Визуальное программирование: Bubble позволяет создавать веб-приложения без использования кода
Пользователям доступны сотни плагинов, которые можно интегрировать в приложение.
Стартап Bubble развивает сервис для создания веб-приложений без использования кода. Инструмент воспроизводит все основные опции веб-программирования в понятном визуальном интерфейсе.
Первая вкладка «Дизайн» позволит создавать страницы, перетаскивая различные визуальные элементы. Пользователи смогут изменять местоположение и размеры изображений, карт, видео, иконок и других составных частей веб-приложений. Также в Bubble есть кнопка предварительного просмотра, которую можно нажимать на любом этапе работы.
Перейдя во вторую вкладку, пользователи смогут построить алгоритм работы будущего веб-приложения. В ней необходимо определить последовательность выполнения задач и подзадач, а также указать зависимые от них процессы.
В третьей вкладке пользователи смогут взаимодействовать со своей базой данных. В любое время можно будет экспортировать и импортировать нужную информацию.
Кроме того, в Bubble есть сотни плагинов, которые можно интегрировать в приложение, к примеру: чаты для общения с клиентами, капчу и платёжную систему.
Ранее мы писали о платформе Lobe, которая позволяет создавать модели машинного обучения без написания специального кода.
О диджитале в удобном формате ➜ читайте нас в Телеграме
Замеряем пульс российского диджитал-консалтинга
Какие консалтинговые услуги востребованы на российском рынке, и как они меняют бизнес-процессы? Представляете компанию-заказчика диджитал-услуг?
Примите участие в исследовании Convergent, Ruward и Cossa!