Bubble что это за программа

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

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

Общая информация

Bubble — это облачная платформа, которая позволяет разрабатывать веб-приложения без программирования. Отличается широким набором инструментов, которые дополняются встроенными и сторонними плагинами, и большим сообществом разработчиков по всему миру.

Из-за обилия возможностей разобраться в Bubble чуть сложнее, чем в Glide, Adalo или Webflow. Зато возможностей куда больше. Разработчики создают как простые приложения для личного применения, так и сложные системы на десятки−сотни тысяч пользователей. Например, на основе встроенных шаблонов можно построить онлайн-школу, CRM-систему или клон Uber.

Основное понятие в Bubble-разработке — рабочий процесс (workflow). Сначала вы собираете интерфейс из форм, кнопок, иконок и текста, перетаскивая их в рабочее пространство. А затем «оживляете» каждый элемент — закрепляете за ним события и связываете с другими элементами и данными. Мы ещё расскажем подробно о процессе разработки.

Как Bubble спасает от рутины

Иногда программисты пишут приложения или части приложений, которые уже реализованы в других проектах. Вот самые распространенные из них:

• страница авторизации/регистрации
• онлайн−магазин с каталогом товаров и корзиной
• сайт−блог
• корпоративная CRM−система.

Постоянно писать их с нуля — впустую тратить дорогое время разработчика. В большинстве случаев бизнесу нужно быстрое типовое решения. В мире программирования, чтобы не заниматься рутиной, придумали фреймворки. Это каркасы приложений, которые можно адаптировать под свои нужды. Bubble — это такой же фреймворк, только еще проще и без кода.

В Bubble однообразные задачи решаются быстрее и приятнее. Если зерокодер видит шаблонную задачу, он ищет подходящий плагин в библиотеке. Плагины — это функциональные «кирпичики», из которых можно собирать сложные программы. Разработчик думает о бизнес-логике и полезном действии, не отвлекаясь на технические вопросы. Такой подход автоматизирует разработку и экономит время.

Ограничения Bubble

Есть 3 вещи, которые Bubble не может или может, но не очень хорошо.

На Bubble нельзя создавать мощные игры. В платформе нет инструментов для работы со сложной графикой и физикой. Зато можно собирать игрушки с примитивной механикой: «крестики−нолики», казино, судоку и др. Все-таки Bubble — это про бизнес-приложения, а не про развлечения.

На Bubble по умолчанию нельзя сделать нативное мобильное приложение. Это значит, что его не получится установить на Android и iOS. Но не спешите расстраиваться. Проблему можно обойти с помощью двух инструментов:

• Web View — обертка для размещения веб-приложений в Play Market и App Store
• PWA (Progressive Web App) — веб-приложение, которое имитирует работу нативного. Оно запускается в браузере, но позволяет установить на экран телефона иконку для быстрого доступа.

Даже при работе через мобильный браузер с UI нет проблем: кнопки, вкладки и ссылки открываются легко.

С адаптивностью в Bubble сложновато. Чтобы сделать адаптивное веб−приложение, нужно погружаться в нюансы платформы и потратить время. Поэтому собрать лендинг или простую страницу удобнее в Тильде, а приложения с базами данных и сложной логикой — в Bubble. Затем их можно объединить на одном домене.

Во всем остальном Bubble — полноценный инструмент для разработки полезных и работающих веб-приложений.

Изучить Bubble и начать зарабатывать можно на нашем курсе «Зерокодер на Bubble»

Сколько денег экономит Bubble по сравнению с традиционной разработкой

Зерокодеру важно знать, сколько денег заказчика сэкономит его продукт по сравнению с работой программиста или студии. Это поможет определить справедливую цену заказа и конкурировать со студиями.

Допустим, есть задача: разработать личный кабинет ученика для оффлайн-школы с обучающими материалами, домашними заданиями и контрольным работами. В школе зарегистрировано 15 тыс учеников. В этом году компания планирует привлечь еще 10 тыс.

Вот из чего складывается стоимость заказа:

• возможности приложения, функциональность
• оптимизация UX/UI
• оригинальный дизайн
• подключение сторонних сервисов
• тестирование и отладка
• публикация в App Store и Play Market
• поддержка и развитие.

Если заказываем в студии на цену также влияют репутация, город и наличие офиса. Московская студия с офисом в «Сити» попросит за работу в 1.5-2 раза больше, чем группа специалистов из Красноярска на удаленке. Цена за решение нашей задачи «под ключ» начинается от 1 млн рублей. То есть за эти деньги студия разработает для школы уникальный дизайн, напишет код с админкой и ролями ученик/преподаватель и опубликует приложение в сторах. Часто студии гарантируют бесплатную техническую поддержку от нескольких месяцев.

Если создаём на Bubble — цена зависит от тарифа. Так как компания планирует привлекать новых пользователей, нужно масштабируемое решение. В нашем случае подходит тариф Professional за 129$ или 115$ в месяц, если оплачиваем на год вперед (подробнее о тарифах ниже).

Допустим, зерокодер напишет приложение за месяц. Тогда себестоимость работы — около 130$. По нынешнему курсу — 10 тыс рублей. Прибавим сюда вознаграждение за работу — примерно 100 тыс рублей. Итого: 110 тыс.

Получается, что зерокодер выполнит заказ на Bubble примерно в 10 раз дешевле, чем студия. Самостоятельная разработка вообще обойдётся 100 раз дешевле, но тогда нужно четко понимать структуру приложения и нанимать дизайнера. В любом случае, когда необходимо написать стандартное бизнес−приложение, есть смысл обратиться к Bubble.

Тарифы: какие есть и как подобрать подходящий?

В Bubble есть 4 основных тарифных плана. Один базовый, для знакомства с платформой и три для разработки.
Тарифные планы и некоторые опции перечислены в таблице. Подробнее с ними можно ознакомиться на странице bubble.io.

Но это еще не все. Для крупных проектов Bubble предлагает специальные тарифы с премиальным обслуживанием и техподдержкой. Их нельзя найти на сайте — доступ предоставляется по запросу.

Бесплатный тариф подойдет, чтобы познакомиться с платформой и построить простейшее приложение. А вот решать серьезные задачи для бизнеса получится только на Personal или Professional. Тарифы отличаются выделенной серверной мощностью и объемом дискового пространства. Благодаря гибкой тарификации зерокодер легко подберет эффективный набор опций для приложения. Все зависит от величины проекта и планов на масштабирование.

История Bubble: как появился и стал платформой разработки номер один

Идея Bubble пришла в голову Джошу Хаасу, когда он работал в Share Point. Тогда ему удалось разработать платформу, на которой сотрудники без технического бэкграунда могли создавать свое ПО. Увидев перспективы, Джош решает построить нечто более масштабное и открывает компанию. Через пару месяцев он знакомится с Эммануэлем Страшновым — будущим соучредителем Bubble.

Первые пользователи появились у Bubble в декабре 2012 года. По словам Страшнова, на тот момент у платформы не было многих важных функций, и она частенько лагала. По сути это был MVP для создания MVP. Но даже в таком виде клиенты были в восторге от Bubble. После презентации на ProductHunt на платформе зарегистрировалось 3000 новых пользователей. С тех пор трафик только растет.

На начало 2020 года Bubble приносил создателям более 100 000$ в месяц. Уверены, что после глобальной миграции бизнеса в интернет сумма только выросла. Компания продолжает расти, привлекает разработчиков, маркетологов и планирует стать сервисом для создания нативных приложений.

Знакомимся поближе

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

Регистрация и первые шаги в зерокодинге

Зарегистрироваться на платформе довольно просто — достаточно ввести email и пароль или, что проще, залогиниться через Google или Github.

После успешной авторизации нас приглашают познакомиться с интерфейсом и возможностями Bubble. Для этого платформа предлагает пройти короткий курс. Он полностью на английском, но пусть это вас не смущает: с переводчиком все инструкции будут понятны.

Что умеет Bubble?

Основа построения визуала в Bubble — технология drag-and-drop. Зерокодеры перетаскивают графические элементы в рабочую область и собирают из них интерфейс. Для каждого элемента можно настроить параметры отображения: длину и ширину, цвет и толщину границы, размер шрифта и т.д. Помимо общих параметров, есть и индивидуальные. И те и другие отображаются в соответствующем диалоговом окне. Позиция элемента задается через координаты или вручную.

После компоновки — формы, кнопки и ссылки «оживляют» — закрепляют за ними события и связывают с данными. Как мы уже сказали ранее, зерокодеры выстраивают рабочий процесс (он же workflow), который представляет собой цепочку действий и событий. Например, чтобы кнопка Save сохраняла пользовательские данные и сбрасывала содержимое полей, на нее последовательно навешивают действия «Create a new thing» и «Reset inputs».

Create a new thing — создает запись в БД. Например, можно создать запись user и прописать поля name, surname, birth и пр. Для каждого поля указываем источник данных. В нашем случае name берет информацию из инпута «Имя», а surname — из «Фамилия». Reset inputs — сбрасывает все, что ввел пользователь.

В панели Workflow более 50 действий, с которыми можно построить любой популярный сценарий. Вот некоторые из них:

• зарегистрировать/авторизовать пользователя
• создать новый объект (thing) в БД
• экспортировать/импортировать данные из CSV
• отправить email
• произвести оплату через подключенный сервис.

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

В Bubble предустановлены только необходимые функции. Этого ядра хватит, чтобы позерокодить «для себя». Серьезные проекты и работа на заказ требуют более широкого функционала. К счастью у зерокодера под рукой есть библиотека модулей. Там найдутся инструменты для работы с базами SQL, платежными системами, сервисами аналитики и многое другое.

Чтобы найти подходящий модуль, достаточно в панели Install new plugins выбрать тип (работа с API, фоновые сервисы и т.д.) и категорию. В окне появится список платных и бесплатных плагинов, которые можно отсортировать, например, по рейтингу или цене. Если ничего стоящего не нашли, можно загрузить свой js-код через панель My plugins.

В общем функций в Bubble — уйма. Во всем нужно разбираться и желательно с опытным наставником или хорошим мануалом. База знаний по Bubble пока не такая обширная, как по языкам программирования или Тильде. Но познакомиться с основами есть где.

Примеры приложений на Bubble

«Тильда для ресторанов»

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

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

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

Также администратор может просматривать статистику по среднему чеку, выручке и количеству посетителей. Есть возможность отмечать рекомендованные блюда и публиковать акции и скидки.

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

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

Карьерный цех. Сервис для найма продактов

Паша Шишкин в одиночку назерокодил приложение, которое берет на себя первую половину воронки найма. Оно избавляет компании от необходимости проводить по 30 собеседований на одну позицию, а кандидатов — каждый раз проходить всю воронку найма.

Основная часть воронки найма — тестовое задание. «Карьерный цех» дает одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.

В «Цехе» много разных страниц, в том числе регистрация с анкетой, загрузка выполненного тестового, рейтинг работ других ребят и оценка. Все пришлось делать через эксперименты. Самая интересная часть бизнес-логики — оценка работ других участников. Их надо перетаскивать в специальную область и ранжировать. Тут пришлось добавлять свой код и разные функции, размечать поля, между которыми перетаскивались тестовые.

Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга загружались довольно долго.

Паша собирал приложение для «Карьерного цеха» полтора месяца и тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.

Ornum. Мобильное приложение для геймификации обучения и личного развития

Еще одно приложение Евгения Спорыхина. На этот раз вместе с ребятами из WeLoveNoCode он сделал мобильное приложение под iOS и Android — Ornum. Оно помогает осознанно выстраивать карьеру и прокачивать нужные навыки с использованием геймификации. Пока это самое крутое мобильное приложение на Bubble от российских разработчиков, которое мы встречали.

Ornum построен на геймификации: выполняешь задания, получаешь баллы, повышаешь уровень. Пользователь может ставить краткосрочные, среднесрочные и долгосрочные карьерные задачи, выполняя которые, он добивается необходимой квалификации — например, чтобы из руководителя отдела вырасти в CEO.

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

Каждый день надо выполнять задания и зарабатывать баллы. Если выполняешь все дневные задачи — получаешь дополнительный балл, если пропускаешь день, не получаешь «страйк».

Что внутри приложения:

• Уровни и должности по 49 навыкам и направлениям развития — 3000 комбинаций для расчета карьерного трека
• Игровые механики, система начисления баллов за выполненные задания и «страйк»-баллов при выполнении всех дневных заданий
• Задачи на разные горизонты планирования: краткосрочный, среднесрочный, долгосрочный
• Ачивки
• Дашборды
• Страница с подробной статистикой по каждому навыку и количеством баллов, которое еще предстоит набрать
• Система оценки текущих компетенций.

Евгений делал приложение один. В традиционной разработке нужна была бы команда из пяти человек и 1−2 млн рублей (при готовом ТЗ), а с итерациями и добавлением функций это в итоге могло бы обойтись в 4−5 млн рублей.

Где поучиться и что почитать?

В поисках материалов по Bubble, как правило, наталкиваешься на англоязычные статьи и мануалы. Пока Bubble и зерокодинг не на хайпе в России, знания придется черпать оттуда. Впрочем, как и в традиционном программировании, самая актуальная информация о платформе сначала появляется на английском. Поэтому, если есть цель самостоятельно освоить Bubble, вооружайтесь переводчиком и дерзайте. Благо все инструкции написаны на понятном языке, и проблем с переводом у вас возникнет.

Обучающий курс есть на сайте самого сервиса. Это мини-экскурсия по интерфейсу и основным возможностям платформы. Чтобы начать, просто зарегистрируйтесь. Дальше — Bubble сам все покажет с помощью стрелочек и всплывающих подсказок. Когда разберетесь в интерфейсе, можно попробовать силы в разработке приложений-клонов. В разделе How to build — 50 туториалов, в которых вы научитесь создавать Instagram, Netflix, Spotify и другие крупные приложения.

Полезные материалы о Bubble и зерокодинге в целом есть на портале no code.tech. Их можно найти в разделе nocode.tech/learn. В обозримом будущем сайт планирует запустить платную подписку с премиум-контентом и скидками на Bubble за 40£ в месяц. Подписаться можно уже сейчас.

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

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

Вывод

Bubble отлично подходит для разработки как MVP, так и «боевых» веб-приложений. Он гибкий, расширяемый и постоянно развивается. Конечно, у платформы хватает ограничений, но в своих задачах — это лучший инструмент. Стать профессионалом здесь непросто: нужно разобраться в особенностях построения рабочих процессов, работе с БД и API сторонних сайтов, понимать, как элементы будут отображаться на экране устройств и т.д. Но если всему научитесь, то станете востребованным зерокодером. Ведь клиенту не столь важно, на чем написано приложение. Гораздо важнее сэкономленное время и успешное решение поставленной задачи.

Что нам стоит на Bubble построить (+ мнение о возможности симбиоза кода и nocode)

Привет! В статье я расскажу про альтернативный способ создания веб-приложений с помощью nocode инструмента Bubble.io — опишу преимущества, недостатки этого подхода, а также постараюсь раскрыть возможности «симбиоза» Javascript и Bubble для реализации качественных проектов и увеличения размера оплаты за работу.

Немного воды

Сразу оговорюсь, я понимаю, что задачу перед собой поставил амбициозную, плюс охватил большую область знаний от создания приложения до бизнес-аналитики и поиска рациональности в выборе средств создания ПО. Статья предназначена для ознакомления с конкретным инструментом, подходом к разработке на nocode-решениях и преследует цель дать несколько советов nocode-разработчикам.

Для начала введу в курс дела. Про использование nocode, lowcode, нейросетей типа ChatGPT сейчас наслышаны все, я не буду пиарить конкретные инструменты или топить за nocode, убеждать, как это, мол, круто, а программисты скоро будут не нужны. Само собой, это не так, просто разные инструменты будут помогать разработчику создавать приложение быстрее (на радость крупным компаниям), качественнее (к счастью клиентов) и даже с большей маржинальностью. Для себя я поставил задачи: раскрыть некоторые нюансы разработки без кода, трезво описать плюсы/минусы и подружить ноукодеров с языками разработки фронтенда. Это будет лонгрид, разделенный на главы, а потому приготовьтесь)

1. Контекст — опишу ограничения и входные данные
2. Опишу приложение, на которое буду опираться по ходу статьи
3. Как можно использовать JS и Bubble в «симбиозе»
4. Заключение

Контекст статьи

Я постараюсь адекватно оценить возможности совместного использования кода и nocode платформ в конкретных случаях:

• MVP для стартапа в целях тестирования гипотезы
• Средних размеров-маленькая SaaS с ограниченным бюджетом и без наполеоновских планов
• Веб-приложение для региональной компании (+ мобильное приложение по запросу)

Я считаю, что эти случаи наиболее релевантны на текущий момент в связи с особенностями позиционирования nocode-инструментов в целом (маркетинг работает на лозунге «Создай MVP быстро и дешево без кода у себя на кухне», реакции и восприятия их бизнесом и средним уровнем разрабов на рынке (он, чего уж греха таить, не очень высокий). Опишу ограничения, чтобы не вызывать недопонимание по тексту:

1. В качестве nocode-инструмента я подразумеваю Bubble.io, как на текущий момент один из самых функциональных, эффективных и популярных инструментов (а еще на нем можно делать как веб-приложения, так и мобильные — то есть охватить сразу два направления). Он выполняет функции хостинга (приложение хранится на AWS), git-репозитория (можно сохранять прогресс точечно и возвращаться не только к конкретному «коммиту», но и к состоянию приложения в выбранный промежуток времени!), фронтенд и бэкэнд-платформ и позволяет дебажить приложение (функционал dev tools упакован в красивый интерфейс и позволяет пошагово отследить выполнение функций). Можно пробросить DNS-сервера к домену, а SSL стоит по умолчанию, как и базовая защита сайта от простейших атак. В общем, мы разрабатываем SaaS со всеми вытекающими плюсами и минусами, вопрос доверия — открытый)
2. Многие нюансы я поясняю на основе создания мной мобильного приложения для компании, занимающейся сдачей в аренду автомобилей премиум-класса.

Про приложение

За проект я взялся в ноябре 2022 года. Заказчик — предприниматель из России, занимающийся сдачей в аренду люксовых авто в Дубае. На тот момент уже был сайт на Тильде, через который потенциальные клиенты отправляли заявки на аренду машин. Моей задачей было создать мультиязычное (en-ru) мобильное приложение с расширенным (по сравнению с сайтом) функционалом, настроить двухфакторную авторизацию через Telegram и WhatsApp, а еще сделать интеграцию с amoCRM.

Над проектом трудились 3 человека:

Общение с заказчиком и создание ТЗ (совместно), проблемные вопросы

Подготовка дизайн-макета в Figma (сначала грубый, потом подробный с кликабельными элементами и подобием дизайн системы)

Создание БД, разработка приложения, настройка интеграции с amoCRM, выкладывание в сторы

В каждом проекте, за который берусь, я всегда требую: ТЗ (пусть не слишком формализованное, хотя бы в общих чертах должны быть описаны ключевые бизнес-процессы. Схема в Miro — вообще шик!), макет в Figma (навыков проектирования дизайна, тем более с глубоким понимание UI-китов Apple и Google у меня нет), несколько установочных звонков с заказчиком/его представителем для обсуждения проблемных вопросов, уточнения функциональности, других нюансов.

Разработчик на Bubble — это фуллстек в классическом понимании: ты должен отвечать и за БД, и за взаимодействие с сервисами через API, и за верстку со стилями, и функционал компонентов, и настройку процессов на бэке по расписанию, и тестирование. Именно этим я и занялся.

Отсюда в том числе и берет начало хейт и недоверие к ноукод-разработчикам: мало кто разбирается в архитектуре БД и знает, как приводить её хотя бы к 3НФ, знает про принципы REST API, но зато разработчик с радостью берется пилить кнопочки в приложении. С другой стороны, часто в таком случае, задача со стороны заказчика звучит как «создайте мне Авито за 50к».

На старте проекта был составлен документ в гугл доке, в котором расписан процесс разработки по шагам с предварительной оценкой времени на каждую задачу — получился план на 120 часов работы. По нему было удобно отслеживать, какие появляются сложности, какой шаг занял сколько времени, когда нужно связаться с клиентом или подключить дизайнера. Там же мы вели список багов и отмечали, что и когда исправлено. Конечно, все это можно было запушить в любой Kanban, формализовать задачи для бэклога, используя, например ClickUp или другой сервис, но тут решили обойтись обычной табличкой.

Процесс создания веб-приложения

Разработку я разбил на шаги:

1. Создание БД.
2. Верстка и стили.
3. Внедрение мультиязычности.
4. Настройка workflow (это и есть связующее звено между бэком и фронтом, в котором происходят запросы к БД, отправляются данные по API, настраиваются обработчики событий, вроде onClick в JS — см. картинку ниже).
5. Работа с API Telegram, WhatsApp и amoCRM.
6. Настройка cron-событий для синхронизации данных приложения и amoCRM.
7. Автоматизированный импорт данных в БД (внесено более 300 автомобилей со всеми характеристиками в формате .csv).
8. Тестирование.
9. Доработки.

Полноценного ТЗ на приложение не было, только на интеграцию с amoCRM. Но зато я использовал подробный макет в Figma с дизайн-системой и уже существующий сайт для ориентира.

База данных крайне простая. Классические связи один ко одному и несколько технических табличек. В приложении важно настроить Privacy rules — чтобы защитить пользователей от раскрытия данных. ИБ приложений в Bubble — больная тема для сообщества, мало кто заботится об этом на этапе MVP (и так каждая копейка на счету), а иногда у разработчиков просто нет достаточной экспертизы. Платформа позволяет неплохо обезопасить данные встроенными средствами, надо просто изучить мануалы и реализовать базовую защиту.

Про функционал

Приложение состоит из четырех разделов:

• Главная — список всех автомобилей с фото, характеристиками, ценами. В карточке каждой машины — кнопка «Заказать», чтобы отправить заявку на аренду.
• Избранное — автомобили, которые пользователь лайкнул .
• Уведомления — заявки на аренду, отображается ход заказа по воронке продаж.
• ЛК — профиль пользователя с реферальным кодом, количеством набранных баллов и историей заказов.

Чтобы отправить заявку на аренду, нужно зарегистрироваться. Для этого необходимо ввести в приложении свой номер телефона и выбрать мессенджер, куда придет код для авторизации: Telegramили WhatsApp. Каждый раз человеку приходит новый код, с помощью которого можно зайти в приложение — украсть данные без стандартной комбинации логин+пароль гораздо сложнее. Для этого использовалась интеграция с Wazzup24 (чтобы не заморачиваться с WABA) и через Telegram Bot Api.

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

Из приложения заявка автоматически попадает в воронку продаж в amoCRM. Менеджер видит у себя в системе имя и контакты лида, откуда пришло бронирование. Дальше ответственный сотрудник связывается с клиентом, уточняет наличие автомобиля в выбранные даты, подтверждает цену и рассказывает, как и где забрать машину.

Еще в приложении есть специальные условия для постоянных клиентов — программа лояльности и реферальная программа. Вот как они работают:

• Программа лояльности: за каждую поездку пользователю начисляются баллы, которыми потом можно оплатить новую аренду или вывести деньги по ставке 1 балл = 0,5 долларов. Заявки на вывод денег также отправляются в CRM, где их обрабатывает менеджер.
• Реферальная программа: у каждого пользователя есть личный код, который можно отправить друзьям. Этот код нужно ввести при регистрации в приложении — тогда и владельцу кода, и его другу начисляются дополнительные баллы. Более того: владелец реферального кода будет получать баллы за каждую поездку друга.

Для проводки клиента через воронку, создания сделки, лида, настройки процесса по начислению баллов и синхронизации этих данных использовалось API amoCRM — неплохая документация и Postman способствовали быстрому прогрессу в изучении сервиса.

Благодаря кронам менеджер работает только в CRM, ему не нужно заходить в приложение и проверять, сколько на самом деле баллов на счету у пользователя и имеет ли вообще он право на обмен баллов на денежные средства.

Загрузка приложения в сторы

Отдельная сложность — выложить готовое приложение в сторы. Это на самом деле долгий, затратный и не очень интересный процесс: нужно создать аккаунты разработчика под клиента, купить дополнительные плагины (мобильное приложение по сути своей является оберткой веба — этаким, сам процесс «конвертации» стоит 365$), заполнить кучу документации и конечно решить вопрос с оплатой, потому что из России это сделать нельзя.

В процессе я столкнулся с проблемой — App Store отказывался принимать приложение, в связи с реализацией процесса авторизации через уникальный код в мессенджере, отправленный по номеру телефона. Чтобы решить проблему, мне пришлось создать демо-режим — так можно пропустить регистрацию (в этом случае доступен только просмотр машин) и специальный аккаунт с автовходом для ассесоров.

В январе приложение было опубликовано в App Store, и сейчас в нем уже больше 100 зарегистрированных пользователей. Из Google Play приложение недавно отозвали, этой проблемой сейчас занимается проджект-менеджер.

Итог разработки

Заказчик получил полностью готовое приложение через 2 месяца. Еще 2 недели ушло на бюрократию с выкладыванием в сторы. Мобильное приложение в обоих магазинах + веб-приложение (Mobile First) обошлось заказчику в ~240 тысяч рублей. Сжатых сроков не было, поэтому я мог себе позволить работать неспеша, параллельно с другими проектами. В целом, считаю, что это достойный результат для бизнеса в соотношении цена/время/качество. Конечно, есть свои минусы, но об этом подробнее расскажу ниже.

Использование JS и Bubble в симбиозе

С начала 2022 я стал заниматься изучением фронтенда (JS + React), а сейчас углубленно изучаю Node.js. Изначально я стал изучать языки, чтобы стать более универсальным разработчиком и увеличить размер оплаты. В моменте я заметил, что после Bubble изучать код значительно легче — новые знания попадают на уже удобренную почву, а некоторые концепции в голове раскрываются по аналогии.

Опираясь на свой опыт в обеих сферах (хотя пока опыт в фронтенде не слишком обширный), я хотел бы описать конкретные плюсы и минусы идеи создания приложения на Bubble.io:

• Меньше затраченного времени на разработку
• Маленькая команда, которую легко контролировать заказчику
• Сокращение расходов на оплату труда
• Универсальность решения (на выходе получаем веб + мобильные приложения)
• Отсутствие необходимости разворачивания окружения, какого-то ПО, серверных мощностей, возни с хостингом
• Удобство проведения стадий ЖЦ проекта — от разработки до сдачи клиенту
• Просто дебажить, функционал отслеживания нагрузки на сервер, весь проект можно посмотреть с разных сторон в одном месте

• Сложность внедрения нестандартного функционала
• Bubble позволяет разрабатывать только SaaS — отсюда вытекают минусы с доверием, безопасностью, ограниченной функциональностью в условиях отсутствия подключения к сети
• Непросто найти хорошего разраба, который знаком с фундаментальным пониманием основ построения качественного веб-приложения (чтобы и БД была не кривая, и адаптивная flex-верстка не сыпалась, и оплата через API Stripe работала, и форма с валидацией отправлялась нормально)
• Меньшее качество проекта в связи с тем, что разработчик является «швейцарским ножом» — отсутствие возможности внедрить UNIT-тесты, автоматизировать отлов багов, ограниченный размер команды неизменно ведут к появлению оных на проде
• Отсутствие возможности переиспользовать компоненты одного проекта в другом (внутри одного проекта это не вызывает проблем). Это прям большой недостаток, который после изучения БЭМ и принципов SOLID применительно к JS и React подтолкнул меня к переходу в «классическую разработку»
• С точки зрения эксплуатации в России: необходимость лепки костылей для соответствия 159-ФЗ, слабо развитая стартап-культура, безумные запросы заказчиков (хочу Битрикс24 за 100к)

В целом, я думаю, что будущее за синергией nocode-решений и кода. 90% приложений не содержат в себе каких-то необыкновенных фичей, с которыми nocode не справится. Просто нужно знать, когда и какой инструмент использовать, а когда нужно перестать костылить и реализовать все на ванильном JS или Node (фронтенд-фреймворки вроде React в Bubble пока не поддерживаются).

Вот тут я и хотел бы перейти к преимуществам совместного использования программирования в JS в Bubble. Конечно, ноукод-разработчику неплохо бы понимать JSON, принципы двухфакторной авторизации, знать основы оптимизации запросов к БД и почему первичные ключи должны быть уникальными и желательно иметь тип Number. Но как я сказал выше, одним из серьезных бичей в Bubble является переиспользование компонентов. Это касается как кастомных UI-элементов (например, календарей), так и банальных настроек полей в форме, API-запросов к сервисам (я не могу просто скопировать файл api-amocrm.js — мне приходится заново заполнять заголовки, ключи аутентификации, тело запроса, тестировать доступ) и многого другого.

Решить эту проблему можно просто, зная банальную связку HTML+CSS+JS и создав свой собственный плагин, который можно потом внедрять в любой свой проект и даже продавать на маркетплейсе другим разработчикам.

Также я сталкивался с проблемой реализации нативных пушей (с помощью API OneSignal) на телефонах в PWA-приложении из-за конфликта Service Worker-ов двух систем. Решалось все работой напильником по готовому плагину, позволяющему реализовать PWA и написанием маленькой асинхронной функции для OneSignal.

Валидация вводимых данных тоже не сладкая задача в проектах на Bubble. И тут конечно никуда без нативной поддержки Regex. Мы не можем опереться на готовые библиотеки, поэтому придется изучать работу с карманами, негативным и позитивным просмотром и иметь под рукой шпаргалку с готовыми часто используемыми комбинациями.

А что с инпутами/чекбоксами форм, календарями, другими html-элементами? Я предпочитаю делать шаблоны для себя и сохранять CSS, а потом использовать в следующих своих проектах. Это позволяет не нагружать проект лишними плагинами, гибко менять UI и экономить деньги заказчиков. Например, код для реализации своего (нормально выглядящего, а не противного дефолтного) чекбокса в Баббле может выглядеть так.

 label:after < display: block; height: 23px; width: 23px; position: absolute; top: 0; left: 0; >input[type=checkbox]:checked + label:after < width: 23px; height: 23px; background-color: #41AD4C; color: #fff; content: '\2713'; text-align: center; left: 4px; top: 3px; >input[type=checkbox] 

Если хочешь завести цикл в цикле на бэке или провести, например, бинарный поиск по огромной базе лекций в LMS — придется изучить логические операции и основы алгоритмов, иначе твое колёсико ожидания запроса будет крутиться овер-долго. А студент напишет, что приложение медленное из-за того, что оно написано на «каком-то конструкторе».

Надеюсь, эти примеры помогут убедить ноукодеров использовать в своих проектах щепотку инженерных знаний, кода и CSS. Это позволит более эффективно решать задачи (экономим время, увеличиваем производительность), глубоко понимать функционал элементов, происходящую в Bubble магию и самое главное (а чего мы тут все собрались) — увеличить свой чек.

Заключение

Зачем нужна эта статья? Недавно меня пригласили показать описанное в статье приложение на региональной выставке программистов в городе, где я живу. Многие знакомые кодеры были удивлены, какой продукт можно сделать на ноукоде быстро, недорого и силами одного разработчика, а не команды. Здесь я хотел показать некоторые возможности nocode-решений сообществу, рассказать про преимущества знания ЯП ноукодерам и постараться подружить эти два направления в голове. Надеюсь, данная статья этому поспособствует.

PS. Я считаю, что у хорошего ноукодера есть большое преимущество перед фронтенд или бэкенд-разработчиком — он глубже понимает бизнес-процессы, несет ответственность за работоспособность приложения и напрямую влияет на успех проекта. А ведь сейчас нормальный бизнес старается искать не кодописателей — им нужны разработчики, глубоко погруженные в процессы, понимающие взаимосвязи в функционале. Но многие пока заточены под покраску кнопок) Сейчас я полностью ухожу в классическую разработку (на то есть экономические причины, готов обсудить их в комментариях), этапа с кнопками мне не миновать, я это прекрасно осознаю. Но уверен, что в дальнейшем, с карьерным ростом, опыт в Bubble даст конкурентное преимущество при трудоустройстве на middle, senior или руководящие позиции.

• Веб-разработка
• Разработка мобильных приложений

Bubble

Сервис для создания веб-приложений без использования кода.

Похожие на Bubble

Описание Bubble

Bubble — платформа для создания многофункциональных веб-приложений без использования программного кода (No-Code). Платформа содержит в себе необходимые для разработки: графический редактор, сбор данных, подключение других сервисов по API. Пользователь может создать как отдельные веб-приложения, так и полноценные десктопные программы и приложения для мобильных устройств.

Графический редактор позволяет создавать интерфейс веб-приложений с логической структурой, корректно работающей пре перемещении пользователя по приложению. Редактор состоит из коллекции контейнеров и динамических элементов (меню навигаций, графиков, новостных лент, формы и т. д.), которые имеют много возможностей для настройки. Структурные данные хранятся в отдельном хранилище. Хранилище данных содержит в себе данные пользователей, пользующихся разработанным приложением, из базы данных можно управлять пользователями. При помощи JavaScript созданное приложение можно интегрировать по API с другими сервисами.

Особенности Bubble:

• Создание подогнанного под стандарты сайтов дизайна с возможностью вставки изображения, видео, иконок, карт и другого.
• Возможность создания многоязычного приложения — автоматический перевод на один из 80 языков.
• Масштабируемость приложения — платформа позволяет создавать как демоверсии продукта, так и полнофункциональные программы, поддерживающие миллионы пользователей.
• Экспорт и управление информацией — импортирование или экспортирование данных приложения в формате CSV или Excel.
• Магазин плагинов — содержит пользовательские шаблоны и плагины для реализации недостающих функций приложения.

Bubble.io для Windows

Bubble.io — это программа разработки, которая представляет новый способ создания приложений и программного обеспечения. Это не код, точку и нажмите программирование инструмент , позволяющий практически любому проектировать, разрабатывать и хост полностью функциональные веб — приложения. Когда вам нужно продемонстрировать свою идею инвестору или быстро создать клиентскую веб-платформу, это приложение может стать вашим решением. Он позволяет создавать интерактивные многопользовательские приложения для настольных и мобильных веб-браузеров. В нем есть все инструменты, необходимые для создания сайта с местом для расширений за счет поддержки плагинов Javascript .

Создание веб-сайтов стало проще

После успеха WordPress и его многочисленных аналогов, таких как Magento, Wix и Joomla , создание веб-сайтов стало проще. Эти программные продукты предлагают определенный вид стандартизированной системы управления контентом, которая представляет контент в Интернете с использованием различных шаблонов, чтобы он выглядел по-другому. Bubble.io — еще один разработчик программного обеспечения и веб-сайтов, цель которого — упростить процесс запуска вашего приложения или веб-страницы.

Приложение предоставляет вам инструменты , необходимые на каждом этапе разработки веб-приложения, от MVP (минимально жизнеспособный продукт) до готового продукта и т. Д. Приложение поставляется с редактором перетаскивания, который упрощает процесс проектирования и разработки. Вам нужно только выбрать один из вариантов раскрывающегося меню « Дерево элементов» и предоставить необходимый элемент, включая текст, значки, изображения, ссылки и фигуры. Вы также можете добавлять видео, карты и предупреждения. Bubble.io также позволяет отображать пользовательский контент или данные, полученные из таких сервисов, как Google, Facebook или Stripe.

Bubble.io предлагает полную свободу дизайна, не требуя владения HTML или CSS. Он позволяет создавать макеты, удобные для мобильных устройств. Более того, в то время как традиционные веб-приложения требуют управления кодом и настройки процесса развертывания на веб-сервере, Bubble.io выполняет развертывание и хостинг за вас. При этом не будет жестких ограничений на количество пользователей, хранилище данных или объем трафика. Вы также можете легко масштабироваться по мере роста вашей базы. Более того, вы можете обезопасить своих сотрудников и пользователей с помощью бесплатных автоматических SSL-сертификатов для всех ваших веб-сайтов, созданных с помощью Bubble.

Используйте с осторожностью

Bubble.io — это эффективный способ создать веб-сайт или приложение. Это может сократить время, необходимое для написания кода интерфейса с помощью простого в использовании редактора. Однако, хотя он может заменить определенные блоки вашего веб-сайта или помочь в дизайне и управлении контентом, он не может полностью заменить разработку. Кроме того, веб-сайты, созданные с использованием таких приложений, как правило, работают медленнее и не имеют оригинальности.

• Простой редактор перетаскивания
• Широкий выбор инструментов
• Не требует кодирования
• Поддерживает плагины