Что такое bubble разработка
Сервис для найма продактов с нуля на Bubble: что в платформе не так и почему она все равно крутая
Паша Шишкин из «Карьерного цеха» рассказал о своем кейсе на Bubble — без цензуры. Он продакт, в бэкграунде — разработка и даже победа в Чемпионате мира по программированию. Паша собрал приложение на Bubble для проекта, который он делает вместе с Глебом Кудрявцевым из Skyeng. Приложение создавал в одиночку и Bubble до этого не знал — изучал всё самостоятельно.
Что такое «Карьерный цех»
«Карьерный цех» берёт на себя первую половину воронки найма, чтобы компаниям не надо было проводить по 30 собеседований на одну позицию, а кандидатам — каждый раз проходить всю воронку найма. Основная часть воронки найма — тестовое задание. Мы даем одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.
Вторая особенность «Цеха» — продакты могут сравнить себя с рынком, понять и оценить свой уровень, посмотреть на других, откалибровать план своего развития.
Рейтинг продактов
Как начали делать «Карьерный цех» и почему выбрали Bubble
Я закончил работать в «Авито» и решил делать свой проект — и вышел на Глеба. У него была идея проекта для упрощения найма продактов. Проработали идею и я стал выбирать техническое решение — на чем делать «Карьерный цех». Кодить вручную — долго, нанимать разработчиков — дорого, а Bubble показался отличным вариантом. Правда, изучить его оказалось непросто — уровень самостоятельного вхождения в Bubble очень «кровавый».
Зато всю бизнес-логику реализовали на Bubble.Сначала было тяжело, но когда появилось понимание платформы, основных сущностей и концептов, дело пошло быстро и сроки стали предсказуемыми.
Бизнес-логика в интерфейсе Bubble
Решил собирать «Цех» самостоятельно, чтобы понять всю внутрянку и получить уверенность, что все работает без ошибок и проблем. Например, в Bubble есть workflows. И надо разобраться: страница считается загруженной, только когда загрузились все элементы или раньше? Или пользователь нажимает кнопку: насколько быстро при этом перезагрузится страница и успеет ли отработать дополнительный JS-код. Если проект сложный — однозначно надо проводить эксперименты, чтобы понимать, как работают все компоненты и как протекают все процессы. То есть выбирая разработчика на Bubble, лучше отдать предпочтение тому, кто понимает внутреннее устройство веба, принципы работы браузеров.
Bubble сложно использовать, если нет опыта в разработке — для сложных проектов надо понимать много программистских концепций, операторы условий и т.п. Я бы сказал, что это в первую очередь инструмент для разработчиков, который позволяет раз в пять быстрее собирать веб-приложения.
Анкета, которую пользователи заполняют после регистрации
Что под капотом «Карьерного цеха»
В «Цехе» много разных страниц. Самое интересное: регистрация с анкетой, загрузка выполненного тестового, рейтинг работ других ребят и оценка. Все пришлось делать через эксперименты. Мне очень понравились настройки приватности — они гибкие, удобные и обеспечивают хорошую защиту. Например, нельзя задебажить API, подставить какой-то ID и посмотреть чужие работы. Есть и проблемы — те же поля в формах не могут принимать пустые значения, обязательно надо что-то выбрать, хотя бы дефолтные значения.
Настройки приватности в Bubble
Самая интересная часть бизнес-логики — оценка работ других участников. Их надо перетаскивать в специальную область и ранжировать. Тут пришлось добавлять свой код и разные функции, размечать поля, между которыми перетаскивались тестовые. Стандартные плагины Bubble мне не подошли — многие вещи в них реализованы слишком прямолинейно и негибко.
Сортировка заданий интерфейс
Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга у нас загружались довольно долго.
Легко сверстать адаптивное приложение не получится: в версии для мобильного у нас вначале даже была надпись «Поверните телефон горизонтально», плюс пришлось разбивать контент на две колонки — решение костыльное, но другого я не нашел. Поэтому лендинг «Цеха» в итоге тоже сделали на Тильде — это было проще, инструмент понятный и известный, верстать в ней удобнее. Скажу сразу: никогда не делайте лендинг на Bubble — выйдет в пять раз дольше, чем на Тильде и адаптив сложный.
Сортировка тестовых заданий бэкенд
Но в Bubble есть и очень крутые фичи.
Динамика изменения полей обработки состояний. На этом экономится куча времени.
Некоторые участники хотели скрыть свои профили — тут Bubble тоже показал себя отлично, настройки очень удобные, причем никакими подменами ID это не хакнуть.
Еще у нас есть страничка для экспорта данных о кандидатах в Google Sheets, такая мини-CRM для эйчаров, на Bubble реализовать ее было довольно просто.
Сколько времени заняла разработка
Я собирал приложение для «Карьерного цеха» полтора месяца, тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.
Если бы мы нанимали для этой задачи программиста, пришлось бы искать его, тестировать, делать ТЗ, описания, заплатить пару сотен тысяч рублей — и все равно конечное решение было бы менее гибким, а я потратил бы порядка 60 часов. Команда разработчиков с исследователями, UX-дизайнерами, бизнес-аналитиками, системным архитектором, тимлдидом и разработчиком вообще обошлась бы в миллион рублей и пилила бы приложение полгода.
Выгрузка данных по кандидатам — страница для представителей компаний
Итоги
Если в вашем продукте ключевая вещь — технологии, то не стоит собирать решение на Bubble. Например, игру, какое-то премиальное приложение и т.п. Bubble грузится дольше. А вот бизнес-логику, админки круто собирать на Bubble.
На Webflow или Glide подобное решение сделать было бы невозможно — в них не хватает гибкости и мощи Bubble. По сравнению с Bubble это как блочный конструктор сайтов. Мощнее Bubble — только фреймворки для разработки.
В общем, если бы я снова начал разрабатывать такой проект, я бы точно выбрал Bubble. Только я очень надеюсь, что у них появятся конкуренты и он исправят свои недоработки. Хотя скоро обещали выкатить вторую версию, возможно, там большую часть проблем устранят.
Bubble — это платформа для создания веб-приложений, не требующие навыков программирования. Bubble — это инструмент all-in-one. В нем есть визуальный редактор, базы данных, инструменты для бизнес-логики и работы с разными API. Позволяет создавать полнофункциональные чаты, форумы, системы сбора и обработки заявок, таск-трекеры, маркетплейсы, CRM и дашборды. Присоединяйтесь к нашему сообществу Bubble Chat & Community и каналу «Зерокодер».
Bubble vs Tilda — что выбрать для проекта?
Мы в Code Breakers часто сталкиваемся с резонным вопросом, который возникает у новичков в ноукоде: «Я хочу разработать сайт для бронирования отелей / заказа еды / сервиса доставки и т.д. Какой No-code инструмент мне нужен: Bubble или Tilda? Они же оба для создания сайтов, но Bubble, говорят, намного сложнее!»
Первое, что важно понять — “сайт” на самом деле не всегда такой уж и “сайт”
Для обычных людей, кто далек от мира IT, все, что открывается в браузере, называется «сайтом». Это слово крепко прилипло к миру веба. Но на самом деле вы, не зная того, пользуетесь чаще не сайтами, а веб-приложениями. В чем же разница?
Сайт — это совокупность статических страниц, цель которых — информационный характер. То есть сайт — это витрина, в которой классно визуализировать и размещать информацию: картинки, текст, видео и т.д. Сайты идеально подходят для информационных страниц компании, продажи продуктов, анонса мероприятий, публикации рецептов и др.
Веб-приложение — это IT продукт, с которым пользователь может взаимодействовать: создавать заказы, регистрироваться/логиниться, заходить в личный кабинет, оставлять комментарии, отслеживать статусы покупок, вести переписку, загружать видео и любой другой функционал. Это все реализуемо благодаря 1 вещи — серверной части (она отвечает за базу данных и логику работы вашего приложения).
Примеры: Youtube, Booking.com, Ozon, DoDo Pizza, VC, iHerb
Tilda подходит для создания сайтов (вы реализуете в ней только фронтенд — дизайн). По сути собираете свою уникальную страницу из разных типов блоков: текст, видео, картинки, кнопка с формой, зеро-блок и т.д. В итоге получаете визуальную страницу, на которой можно просматривать контент и максимум отправить заявку через форму или оплатить товар и т.д..
В качестве примера приведу наш кейс: основной сайт — codebreakers.tech сделан на Тильда. Задача сайта — рассказать о компании и показать, какие есть продукты. Тильда отлично справляется с этой целью.
Bubble позволяет создавать веб-приложения (в нем вы создаете фронтенд, базу данных и логику работы вашего приложения — workflows). Именно поэтому на Bubble вы можете создать сервисы любой сложности: от простых интернет-магазинов до маркетплейсов, LMS и т.д. Тут вам доступно все: личные кабинеты и разграничения по ролям пользователей, API интеграции, заказы, бронирование, создание админ панели и управление всей платформой, чаты, загрузка пользователями своего контента и т.д.
Например, наша учебная платформа для студентов создана на Bubble, На платформе есть личный кабинет для каждого студента, возможна отправка домашних работ на проверку куратору, получения оценки и обратной связи после проверки, переписка с ментором, личный трекинг и т.д. На Тильде мы бы не смогли реализовать такой функционал, ведь это полноценное веб-приложение.
Кстати, в Bubble вы также можете создавать не только веб-приложения, но и сайты. Правда это не всегда целесообразно, т.к. верстку в Bubble создавать намного трудозатратней, поэтому с дизайном нужно будет возиться прилично дольше, чем на Тильда.
Важно понимать, что в одном проекте вы можете миксовать оба инструмента. Например, сделать витрину (сайт) с описанием продукта на Тильде, а уже личный кабинет и весь функционал веб-сервиса на Bubble. Либо встроить Bubble в Tilda, если нужен какой-то локальный функционал (например, калькулятор).
Если вы уже знакомы с Тильдой, то наверняка скажете: «Как же так, я знаю, что в Тильде тоже можно создавать личный кабинет и даже сделать онлайн-магазин”. И вы будете правы, но! Эти функции здесь реализованы скорее как отдельная “фича», которую Тильда встроила для пользователей в качестве наиболее используемых кейсов клиентов. При этом она не позволяет делать какую-либо кастомизацию.
То есть личный кабинет на Тильда может быть классным решением для разграничения доступа пользователей к контенту. Но как полноценный ЛК с регистрацией на разные курсы, отправкой дз, комментированием и общением с куратором или другой кастомизацией его использовать невозможно.
То же самое и с функционалом интернет-магазина. На Тильде вы можете сделать карточки товаров, их заказ и оплату, но не получится сделать ЛК с отслеживанием статуса доставки, возможностью отменить заказ, посмотреть историю заказов и т.д. Все это уже функционал веб-приложения и с ним справляется отлично Bubble.
Bubble и Tilda на данный момент очень крутые No-code инструменты для веб-разработки продуктов. Они позволяют закрыть большее количество кейсов и задач бизнеса. Неудивительно, что они так популярны среди заказчиков, ноукодеров и дизайнеров. Такая популярность позволяет легко найти подрядчика для своего проекта, работающего на данных инструментах за адекватные деньги. Либо вы можете сами стать ноукодером и предлагать заказчикам создание проектов на связке Bubble + Tilda. С такими навыками ценник на разработку значительно выше, чем просто за создание сайтов на Tilda. Ведь сочетая оба инструмента, вы создаете полноценные веб-продукты «под ключ» от идеи до запуска.
Если вам интересно больше про мир No-code и экспертных разборов, подписывайтесь на наш Telegram-канал @code_breakers
Разработка приложений на Bubble своими руками: инструкция по выживанию. Часть 2
Древние греки выдумывали богов, героев и фантастических существ, чтобы объяснить явления, которые не понимали. С тех пор, по сути, ничего не изменилось. Новые технологии мгновенно обрастают мифами, легендами и ярлыками. Поэтому нам в Skillum остается только смириться с неизбежным и продолжать развеивать самые популярные заблуждения о визуальном программировании.
Часто к нам приходят и говорят, что NoCode инструменты подходят только для MVP, не более. Так вот, наш первый продукт – сервис для дистанционного тестирования Finassessment – это достаточно объемное SaaS-решение. Каждый год мы думали, что вот-вот и его пора будет переводить на код. Но оно до сих пор успешно работает на Bubble. А все потому, что его разработчики постоянно наращивают мощности и в лишних телодвижениях просто нет смысла.
Поэтому сейчас Bubble – это далеко не об MVP, а о полноценном приложении. Конечно, есть моменты, которые ему пока не под силу, к примеру, игру вы вряд ли напишите, но! С созданием вполне серьезной CRM, маркетплейса или диалогового тренажера сервис справляется на отлично.
В одной из наших LMS порядка 40 000 пользователей. Изначально мы столкнулись с тем, что платформа подтормаживала, а элементы курса могли грузиться 10-12 секунд, но и эту проблему удалось решить при помощи расширения мощностей сервера и оптимизации приложения. Bubble предоставляет довольно много вариантов для разгрузки «тяжелых» систем, поэтому даже с учетом такого количества пользователей, eTutorium LMS работает стабильно и расти есть куда.
Если вы хотите разрабатывать на Bubble, то бесплатного тарифа будет вполне достаточно для того, чтобы научиться, разобраться, попробовать и даже создать какую-то минимальную часть проекта.
Многие заказчики находят нас на странице агентств Bubble. Там есть рейтинг не только по количеству разработчиков, но и созданных проектов. Каждый месяц мы получаем оттуда порядка 50-100 заказов со всего мира, поэтому рекомендую.
Более того, вам доступны все возможности Bubble без дополнительных доплат. К примеру, нет никаких ограничений по функционалу, разве что по хранилищу, и то для разработки доступного объема вполне достаточно. Вы можете делать в своем агентском аккаунте все, что хотите, кроме запуска продукта для реальных пользователей. В принципе, приложение может храниться там сколько угодно долго.
Собственно это еще и очень удобно. Предположим, что вы работаете на доверительных началах, без договора, тогда можно хранить приложение у себя, спокойно его разрабатывать и просто давать ссылку для предварительного просмотра. А как только заказчик все утвердил и оплатил, вы переводите приложение на клиентский аккаунт. Это история и о безопасности в том числе.
Важно учесть, что вне зависимости от выбранного плана, перенести проект на свой сервер не получится. Забрать можно только базу данных или код приложения, то есть выгрузить его в JSON файл.
Для более серьезных продуктов есть такой тариф как “Выделенный сервер”. Он имеет ряд преимуществ, но и цена здесь соответствующая. Просто так на сайте его не найти – можно только запросить. Этот тариф подходит для очень крупных проектов или в том случае, если у вас их несколько.
Он дает возможность контролировать сервер и обновления. Наши разработчики всегда видят, если, допустим, нагрузка на процессор достигает 100%. Это значит, что он не выдерживает “напряжения”, и нужно добавить мощности. Мы полностью контролируем доступ к приложениям, а за счет того, что это более премиальный тариф, отличная техподдержка прилагается.
Не так давно появился еще один тариф для высоконагруженных систем. Его стоимость и преимущества также нужно узнавать под запрос. Он выдерживает продукты с десятками, а то и сотнями тысяч пользователей и при этом выдает хорошие мощности.
Каждый справляется с ограничениями Bubble по-своему, но мой личный рейтинг выглядит так:
Начиная разработку, я устанавливаю уже устоявшийся набор плагинов. Они помогают кастомизировать приложение, добавлять элементы, подключать JavaScript и так далее. Плагинов очень много и новые появляются буквально каждый день, а некоторые разработчики создают их на заказ для решения ваших уникальных задач.
Они могут значительно разнообразить приложение, улучшить его работу или даже украсить. Если вы не технический специалист и не программист, то с этим будет сложнее. Но честно говоря, в сети очень много информации, которая помогает понять, как работают скрипты, поэтому не вижу никаких проблем с их подключением.
Настоящая палочка-выручалочка для каждого разработчика. Интеграции помогают дополнить функционал приложения, например, подключить вебинарную платформу или любую платежную систему, если для нее еще нет плагина.
Да-да, без них все-таки никуда. Даже несмотря на то, что NoCode разработка сейчас на подъеме и все стремятся сократить расходы по максимуму. Программисты всегда будут нужны и важны, особенно когда речь идет о решении каких-то крутых задач или создании тех же плагинов.
Костыли и танцы с бубном
Если вы хорошо знаете, как устроен Bubble, то тупиковых ситуаций для вас просто не существует. В ход идут на первый взгляд неочевидные решения. Вместе с тем они отлично работают и мало кто вообще заметит, что это костыль.
В основном этот прием применяется при верстке сайта. Допустим, на странице есть элемент (это может быть кнопка, картинка или текст), который должен быть всегда справа. Он может “тянуть” за собой другие элементы – в итоге все плывет и разъезжается. Стандартные методы выравнивания не помогают? Тогда просто ставим еще один элемент с противоположной стороны, чтобы уравновесить блоки.
Но все это приходит только с опытом.
Вы начинающий разработчик, которому нужна консультация? Или опытный, но столкнулись с каким-то вопросом? А может просто хотите обсудить с коллегами новые возможности платформы? Именно для этого мы и создали Bubble.io Чат в Telegram, в котором делимся полезными лайфхаками и практическими наработками.
Самый большой объем информации вы найдете на форуме Bubble. Правда здесь можно столкнуться уже с другой проблемой, потому что он полностью англоязычный. Но опять-таки, переводчик в помощь, ведь в 90% случаев интересующий вас ответ найдется именно там. Еще и со скринами!
Несколько лет назад, когда я только начинала изучать Bubble, кроме форума не было ничего от слова абсолютно, поэтому часто приходилось прибегать к силе коллективного разума. Здесь действительно очень дружественное комьюнити, которое поддерживает и помогает в решении любых вопросов.
И да, Google тоже никто не отменял. Если вы что-то не понимаете, всегда можно найти образец, скрипт или HTML-код, который поможет справиться с любой задачей, например, вывести видеоэлемент на страницу. На данный момент Bubble стал достаточно популярным, поэтому все проблемы легко решаются благодаря поисковику.
Сейчас Bubble активно развивается во всех направлениях, в том числе и в обучении. Так что бесплатные вводные видеокурсы, инструкции и подробные гайды по функционалу прилагаются. Также у сервиса появилась своя Bubble Academy, в которой можно пройти интерактивные уроки. Они помогают привыкнуть к интерфейсу и понять, как с ним в принципе работать.
Каждому пользователю доступны мануалы, в которых пошагово показано, как сделать клоны различных приложений, таких как Facebook, Airbnb или Pinterest. Там же можно прокачать свои скиллы и взять платные уроки от специалистов Bubble.
На странице Академии также размещен список проверенных обучающих ресурсов, которым действительно можно доверять. Из них хочу отдельно выделить YouTube-канал Coaching No Code Apps. Если вы уже начали осваивать визуальное программирование, то точно находили видео Габи Роман о работе на Bubble. Все ролики на английском, но поверьте, даже без знания языка сложностей с пониманием все равно не возникнет.
Еще один полезный ресурс – канал Zeroqode. Это первое агентство, которое начало заниматься Bubble разработкой на заказ. Думаю, вы уже знаете этих ребят благодаря множеству крутых плагинов и шаблонов, ведь они упрощают жизнь тысячам визуальных программистов.
Что касается русскоязычного пространства, то мы запускали свои первые курсы почти 2 года назад. Тогда в рунете никто не обучал разработке на Bubble, поэтому донести людям ценность этой технологии было довольно сложно. Но тем не менее группы успешно набирались, а многие наши выпускники создавали собственные NoCode стартапы.
Сейчас Skillum Academy предоставляет как бесплатное, так и платное обучение. Кроме того, вы можете найти уроки для начинающих визуальных программистов в открытом доступе на нашем YouTube-канале.
Ситуация из жизни: открываю статью с подборкой NoCode инструментов для быстрого запуска продуктов и автоматизации процессов. А в ней говорится, что Bubble – это идеальный сервис для создания мобильных приложений. Удивляет то, что это далеко не единичный случай. И если в первый раз еще можно было снисходительно улыбнуться или закатить глаза, то во второй, третий, десятый становится уже не до смеха.
В действительности, Bubble – это о веб-приложениях. Чаще всего на нем делают CRM-системы и маркетплейсы. То есть продукты, которые позволяют автоматизировать или масштабировать работу компании. Также в последнее время часто заказывают разработку различного рода рекрутинговых систем.
На самом деле, вы можете создавать мобильные приложения на Bubble, но они не будут нативными.
Есть 2 вида решений:
Существуют ли сервисы, которые предоставляют такой же функционал? Все зависит от задач. Если вам нужно создать лендинг, то нет смысла ради этого осваивать Bubble. Лучше использовать ту же Tilda. У нас есть карта NoCode решений, где можно посмотреть, какой сервис подойдет для решения именно вашей задачи.
Основатели Bubble не скрывают, что считают своим основным конкурентом Webflow – облачную платформу для разработки веб-приложений. У нее гораздо больше возможностей для вставки скриптов, красивого дизайна, анимаций и так далее. Поэтому иногда Bubble используют как back-end, а Webflow – как front-end.
Звучит сложно? Это к слову о том, что имеет смысл пробовать разные варианты, но полного аналога Bubble все равно нет. Поверьте, мы искали. Можно с чем-то интегрироваться, но опять-таки, если стоит задача сделать CRM, зачем использовать несколько сервисов, которые нужно связывать между собой, если Bubble дает все эти возможности в одном месте?
Для того, чтобы запустить проект на Bubble с нуля, нужны:
В защиту Bubble не могу не сказать, что вы все равно будете платить за хостинг – от этого никуда не денешься. Поэтому мне кажется, что цена за подписку не настолько большая и она полностью себя оправдывает.
Да, человек, который не знаком с конструкторами сайтов, может без проблем зарегистрироваться на Tilda и за 1-2 часа сделать себе лендинг. С Bubble так не получится. Без опыта и четкого плана проекта вы вряд ли создадите что-то стоящее. Но и функционал здесь просто несопоставим.
А что касается языка, то в нашей команде 80% разработчиков не знают английского. Здесь все дело в привычке – они просто помнят, что где находится. Сложности могут возникнуть при поиске информации, но и они решаются при помощи переводчика.
Не важно, кто выиграет в этом противостоянии – сторонники Bubble или же его противники. Главное, что теперь вы можете отличить миф от реальности и сделать осознанный выбор до того, как перейти к практике!
Обзор Bubble: мощный конструктор веб-приложений без кода
Несмотря на то, что зерокодинг в России только набирает обороты, в распоряжении зерокодера десятки платформ под разные задачи и вкусы. Есть довольно простые, как iBuildApp, и многофункциональные — как Bubble. Последний — один из лидеров среди конструкторов веб-приложений. Ему и посвящен этот обзор.
Общая информация
Bubble — это облачная платформа, которая позволяет разрабатывать веб-приложения без программирования. Отличается широким набором инструментов, которые дополняются встроенными и сторонними плагинами, и большим сообществом разработчиков по всему миру.
Из-за обилия возможностей разобраться в Bubble чуть сложнее, чем в Glide, Adalo или Webflow. Зато возможностей куда больше. Разработчики создают как простые приложения для личного применения, так и сложные системы на десятки−сотни тысяч пользователей. Например, на основе встроенных шаблонов можно построить онлайн-школу, CRM-систему или клон Uber.
Основное понятие в Bubble-разработке — рабочий процесс (workflow). Сначала вы собираете интерфейс из форм, кнопок, иконок и текста, перетаскивая их в рабочее пространство. А затем «оживляете» каждый элемент — закрепляете за ним события и связываете с другими элементами и данными. Мы ещё расскажем подробно о процессе разработки.
Как Bubble спасает от рутины
Иногда программисты пишут приложения или части приложений, которые уже реализованы в других проектах. Вот самые распространенные из них:
Постоянно писать их с нуля — впустую тратить дорогое время разработчика. В большинстве случаев бизнесу нужно быстрое типовое решения. В мире программирования, чтобы не заниматься рутиной, придумали фреймворки. Это каркасы приложений, которые можно адаптировать под свои нужды. Bubble — это такой же фреймворк, только еще проще и без кода.
В Bubble однообразные задачи решаются быстрее и приятнее. Если зерокодер видит шаблонную задачу, он ищет подходящий плагин в библиотеке. Плагины — это функциональные «кирпичики», из которых можно собирать сложные программы. Разработчик думает о бизнес-логике и полезном действии, не отвлекаясь на технические вопросы. Такой подход автоматизирует разработку и экономит время.
Ограничения Bubble
Есть 3 вещи, которые Bubble не может или может, но не очень хорошо.
На Bubble нельзя создавать мощные игры. В платформе нет инструментов для работы со сложной графикой и физикой. Зато можно собирать игрушки с примитивной механикой: «крестики−нолики», казино, судоку и др. Все-таки Bubble — это про бизнес-приложения, а не про развлечения.
На Bubble по умолчанию нельзя сделать нативное мобильное приложение. Это значит, что его не получится установить на Android и iOS. Но не спешите расстраиваться. Проблему можно обойти с помощью двух инструментов:
Даже при работе через мобильный браузер с UI нет проблем: кнопки, вкладки и ссылки открываются легко.
С адаптивностью в Bubble сложновато. Чтобы сделать адаптивное веб−приложение, нужно погружаться в нюансы платформы и потратить время. Поэтому собрать лендинг или простую страницу удобнее в Тильде, а приложения с базами данных и сложной логикой — в Bubble. Затем их можно объединить на одном домене.
Во всем остальном Bubble — полноценный инструмент для разработки полезных и работающих веб-приложений.
Изучить Bubble и начать зарабатывать можно на нашем курсе «Зерокодер на Bubble»
Сколько денег экономит Bubble по сравнению с традиционной разработкой
Зерокодеру важно знать, сколько денег заказчика сэкономит его продукт по сравнению с работой программиста или студии. Это поможет определить справедливую цену заказа и конкурировать со студиями.
Допустим, есть задача: разработать личный кабинет ученика для оффлайн-школы с обучающими материалами, домашними заданиями и контрольным работами. В школе зарегистрировано 15 тыс учеников. В этом году компания планирует привлечь еще 10 тыс.
Вот из чего складывается стоимость заказа:
Если заказываем в студии на цену также влияют репутация, город и наличие офиса. Московская студия с офисом в «Сити» попросит за работу в 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?
Основа построения визуала в 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 действий, с которыми можно построить любой популярный сценарий. Вот некоторые из них:
А еще там с десяток опций для работы с пользовательскими событиями и API сторонних приложений.
В Bubble предустановлены только необходимые функции. Этого ядра хватит, чтобы позерокодить «для себя». Серьезные проекты и работа на заказ требуют более широкого функционала. К счастью у зерокодера под рукой есть библиотека модулей. Там найдутся инструменты для работы с базами SQL, платежными системами, сервисами аналитики и многое другое.
Окно установки плагинов в Bubble
Чтобы найти подходящий модуль, достаточно в панели Install new plugins выбрать тип (работа с API, фоновые сервисы и т.д.) и категорию. В окне появится список платных и бесплатных плагинов, которые можно отсортировать, например, по рейтингу или цене. Если ничего стоящего не нашли, можно загрузить свой js-код через панель My plugins.
В общем функций в Bubble — уйма. Во всем нужно разбираться и желательно с опытным наставником или хорошим мануалом. База знаний по Bubble пока не такая обширная, как по языкам программирования или Тильде. Но познакомиться с основами есть где.
Примеры приложений на Bubble
«Тильда для ресторанов»
Евгений Спорыхин наблюдал за кафе, ресторанами и кондитерами в инстаграме и заметил, что они берут заказы через директ, выкладывая блюда прямо в ленту. Это неудобно: в сообщениях заказы теряются, отвечать надо быстро — легко упустить продажу. Еще тяжелее вести качественную статистику: приходится отыскивать заказы среди всех сообщений и вручную переносить в таблицы.
Тогда он решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги. Результатом стал Ornum.
Автоматически сгенерированный мини-сайт ресторана
Веб-приложение позволяет рестораторам в пару кликов загрузить блюда в сервис. Еще можно сделать аккуратный сайт с доставкой, корзиной, формой заказа. На нем будет просто зарегистрироваться и из него легко доставать статистику. Ссылка на сайт публикуется в инстаграме — туда и ведут клиентов из постов и сториз.
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Также администратор может просматривать статистику по среднему чеку, выручке и количеству посетителей. Есть возможность отмечать рекомендованные блюда и публиковать акции и скидки.
Пользователь может один раз зарегистрироваться в любом ресторане, подключенном к платформе, а потом делать заказы с этого логина во всех остальных заведениях сервиса. Во время оформления заказа платформа проверяет, зарегистрирован ли пользователь. И если да — то сразу дает сделать заказ, а если нет — отправляет на почту уведомление о заказе и ссылку для подтверждения регистрации.
На главной странице видны товары. Если нажать плюс под товаром на главной, попадаешь в подробное описание блюда — можно добавить его в корзину и выбрать количество. Перед оформлением заказа сервис еще раз уточнит количество блюд. В корзине при оформлении заказа автоматически подтягиваются данные пользователя: имя, телефон, имейл.
Карьерный цех. Сервис для найма продактов
Паша Шишкин в одиночку назерокодил приложение, которое берет на себя первую половину воронки найма. Оно избавляет компании от необходимости проводить по 30 собеседований на одну позицию, а кандидатов — каждый раз проходить всю воронку найма.
Основная часть воронки найма — тестовое задание. «Карьерный цех» дает одно задание на всех продактов, они выполняют его и оценивают друг друга — на выходе получается рейтинг кандидатов, компании выбирают тех, кто по своему мышлению и уровню проработки тестового подходит им больше всего. Модель монетизации простая — компании платит комиссию, если кандидат успешно прошел испытательный срок.
В «Цехе» много разных страниц, в том числе регистрация с анкетой, загрузка выполненного тестового, рейтинг работ других ребят и оценка. Все пришлось делать через эксперименты. Самая интересная часть бизнес-логики — оценка работ других участников. Их надо перетаскивать в специальную область и ранжировать. Тут пришлось добавлять свой код и разные функции, размечать поля, между которыми перетаскивались тестовые.
Анкета, которую пользователи заполняют после регистрации
Еще надо понимать, что каждое поле в Bubble отправляется отдельным запросом, такое ограничение системы. Например, все 170 позиций рейтинга загружались довольно долго.
Паша собирал приложение для «Карьерного цеха» полтора месяца и тратил на это по 15−20 часов в неделю. То есть в сумме ушло примерно 120.
Ornum. Мобильное приложение для геймификации обучения и личного развития
Еще одно приложение Евгения Спорыхина. На этот раз вместе с ребятами из WeLoveNoCode он сделал мобильное приложение под iOS и Android — Ornum. Оно помогает осознанно выстраивать карьеру и прокачивать нужные навыки с использованием геймификации. Пока это самое крутое мобильное приложение на Bubble от российских разработчиков, которое мы встречали.
Экран Ornum с дашбордами и статистика по выполнению задач
Ornum построен на геймификации: выполняешь задания, получаешь баллы, повышаешь уровень. Пользователь может ставить краткосрочные, среднесрочные и долгосрочные карьерные задачи, выполняя которые, он добивается необходимой квалификации — например, чтобы из руководителя отдела вырасти в CEO.
Экраны регистрации, входа в приложение и карта компетенций
При регистрации надо заполнить информацию о себе, в том числе выбрать текущую должность и компанию. В приложении уже есть карьерные треки с необходимыми скилами и баллами по каждому из навыков — и когда пользователь ставит карьерную цель, то есть желаемую должность и дедлайн, она сопоставляется с текущей должностью и выдается пошаговая дорожная карта для ежедневной прокачки квалификации. Причем сопоставляется не только должность, но и уровень текущих навыков — например, сейчас по менеджменту у пользователя 300 баллов, а чтобы стать CEO, надо набрать 1500.
Каждый день надо выполнять задания и зарабатывать баллы. Если выполняешь все дневные задачи — получаешь дополнительный балл, если пропускаешь день, не получаешь «страйк».
Что внутри приложения:
Евгений делал приложение один. В традиционной разработке нужна была бы команда из пяти человек и 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 сторонних сайтов, понимать, как элементы будут отображаться на экране устройств и т.д. Но если всему научитесь, то станете востребованным зерокодером. Ведь клиенту не столь важно, на чем написано приложение. Гораздо важнее сэкономленное время и успешное решение поставленной задачи.