Что такое bubble

Сервис для найма продактов с нуля на Bubble: что в платформе не так и почему она все равно крутая

Паша Шишкин из «Карьерного цеха» рассказал о своем кейсе на Bubble — без цензуры. Он продакт, в бэкграунде — разработка и даже победа в Чемпионате мира по программированию. Паша собрал приложение на Bubble для проекта, который он делает вместе с Глебом Кудрявцевым из Skyeng. Приложение создавал в одиночку и Bubble до этого не знал — изучал всё самостоятельно.

Что такое «Карьерный цех»

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

Вторая особенность «Цеха» — продакты могут сравнить себя с рынком, понять и оценить свой уровень, посмотреть на других, откалибровать план своего развития.

Как начали делать «Карьерный цех» и почему выбрали Bubble

Я закончил работать в «Авито» и решил делать свой проект — и вышел на Глеба. У него была идея проекта для упрощения найма продактов. Проработали идею и я стал выбирать техническое решение — на чем делать «Карьерный цех». Кодить вручную — долго, нанимать разработчиков — дорого, а Bubble показался отличным вариантом. Правда, изучить его оказалось непросто — уровень самостоятельного вхождения в Bubble очень «кровавый».

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

Решил собирать «Цех» самостоятельно, чтобы понять всю внутрянку и получить уверенность, что все работает без ошибок и проблем. Например, в Bubble есть workflows. И надо разобраться: страница считается загруженной, только когда загрузились все элементы или раньше? Или пользователь нажимает кнопку: насколько быстро при этом перезагрузится страница и успеет ли отработать дополнительный JS-код. Если проект сложный — однозначно надо проводить эксперименты, чтобы понимать, как работают все компоненты и как протекают все процессы. То есть выбирая разработчика на Bubble, лучше отдать предпочтение тому, кто понимает внутреннее устройство веба, принципы работы браузеров.

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

Что под капотом «Карьерного цеха»

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

Самая интересная часть бизнес-логики — оценка работ других участников. Их надо перетаскивать в специальную область и ранжировать. Тут пришлось добавлять свой код и разные функции, размечать поля, между которыми перетаскивались тестовые. Стандартные плагины 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. Мощная программа, которая позволяет делать сайты, лендинги, онлайн-магазины, маркетплейсы, сложные веб-приложений без кода

Bubble читается как «бабл». Это программа для создания полноценных веб-приложений разного уровня сложности. И это одна из мощнейших на данный момент платформ для разработки без кода, на которой можно собрать простые лендинги, веб-сайты, красивые прототипы — так и сложносоставные веб-приложения по типу Airbnb, маркетплейсов Ozon или Wildberries, соцсети типа Twitter, платформы для онлайн-обучения по типу Udemy или даже второй Netflix. Всё это возможно благодаря разнообразию функций и собственной мощной базе данных. Разбираемся, что и как устроено в бабле — и объясняем, почему его надо изучать тем, кто хочет стать ноукодером.

После запуска откроется белый лист-экран с включённой по умолчанию колончатой и горизонтальной сеткой для настройки дизайна. Её можно отключить, чтобы она не мешала.

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

Чтобы разместить на рабочей области элемент — текстовый блок, кнопку, контейнеры и так далее — нато перетащить его с панели инструментов слева (да-да, то самое визуальное программирование с перетаскиванием элементов). Настройка внешнего вида элементов в бабле достаточно гибкая — тут можно внедрить любой цвет, подключить шрифт из Google Fonts или загрузить свой, закачать любую картинку, выбрать подходящую одну из десятков иконок из внутренней библиотеки, настроить анимацию и другие детали. При наведении на объект программа будет показывать расстояние между объектом и рамками рабочей области. Здесь же внутри приложения создаётся и настраивается база данных и логика событий — воркфлоу (о том, что такое воркфлоу вы можете прочитать тут). Ну, и в любой момент можно перейти в режим превью и посмотреть, что получается.

Как устроен интерфейс Bubble

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

Но в действительности интерфейс в Bubble.io интуитивно понятный и абсолютно логичный — на разобраться где и что лежит, хватит 10 минут.

Слева находится главная рабочая панель. Самый левый рубрикатор — вкладки со средствами визуального редактирования (Design, Workflow), вкладка с базой данных (Data), вкладка со стилями (Styles) и системные вкладки с плагинами, настройками и логи (Plugins, Settings, Logs).

• Design — сердце всей разработки на бабле. Используется для визуального редактирования. Именно здесь создаётся внешний вид приложения — содержимое каждой страницы приложения, как картинки, тексты, иконки, кнопки, контейнеры, группы, фото и видео, кодовые вставки, поп-апы и всё остальное. Здесь собраны 11 визуальных элементов, 5 видов контейнеров, 10 форм для взаимодействия с интерфейсом. Их количество можно расширять плагинами.

• Workflow — служит для добавления сценариев (действий) при взаимодействии с элементами (например, клик по кнопке) или при наступлении определённых событий (регистрация, передача данных, добавление товара и так далее). Настроить события можно за любым элементом — например, можно сделать так, чтобы логотип в хедере по клику на него вёл на главную страницу или по нажатию на кнопку можно было сделать заказ. Сильная сторона бабла — в тонкой и подробной настройке логики приложения. Разработчику подвластны разнообразные разветвления событий внутри приложения.

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

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

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

• Settings — вкладка с различными настройками. Здесь регулируются права доступа для разработчиков, настраиваются политика конфиденциальности (Privacy Policy), настройки API (это штука для подключения сторонних приложений к своему — подробнее про что API написали тут).

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

• В выпадающем меню Page — список всех созданных страниц-экранов. Здесь можно перейти на созданные страницы, к reusable-элементам вроде хедеров и футеров, к дополнительным поп-апам, в кабинеты администраторов приложения и пользователей. По умолчанию в бабле уже созданы страницы с ошибкой 404 и обновлением пароля. Создавать новые страницы нужно тоже отсюда.

• В графе Pick the element (либо Search the element) можно посмотреть все элементы, находящиеся на этой странице, и найти по запросу, если вы помните, как назвали элемент.

• Вкладки Edit и Help нужны для управления процессом разработки — откатить какое-то событие назад, структурировать элементы, выбрать элементы, скопировать элементы, форматировать и так далее. Делать это можно и внутри рабочей области по правому клику мышки.

• Под иконкой подарка прячется весь список последних обновлений в Bubble.

• Grid&borders — это сетки и границы — направляющие для дизайна и настройки внешнего вида приложения.

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

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

• Ещё может оказаться полезным спрятанный под знаком вопроса Help Center. Если вы знаете английский, то тут можно почитать документацию и мануалы, посмотреть обучающие видео, включить видео-подсказки.

Повторимся, интерфейс у бабла большой и насыщенный. Чтобы разобраться и чувствовать себя в нём уверенно нужно — ожидаемо — просто работать с Bubble.io и делать это по возможности чаще.

4.Чётвёртая подборка того, что можно собрать на Bubble.io

Это раздел с видео—инструкциями по созданию клонов известных сервисов: Airbnb, Instagram, Netflix, Wikipedia, Udemy, Pinterest.

5.Наконец, пятое — сама платформа Bubble.io (витринный сайт) сделан на бабле. И это ещё один способ понять, как много бабл может.

Responsive Bubble.io

Отдельно надо рассказать о недавнем и очень важном обновлении Bubble.io.

Осенью 2021 года в режиме бета вышло обновление Responsive — оно должно было решить проблемы с адаптацией продуктов на разных платформах, которые, надо отметить, беспокоили многих.

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

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

Сильные стороны Bubble.io

• Для работы в Bubble.io — и для создания крутых веб-продуктов — не нужно учить языки программирования. Действительно, без технического бэкграунда можно сделать штуки по типу Airbnb, Twitter, Netflix, Ozon, Medium и многое другое.
• Быстрая скорость разработки по сравнению с классической разработкой.
• Много — реально много — обучающего материала. Это и внутренняя документация бабла, его внутренняя академия с видео-роликами и текстовыми инструкциями, всплывающие подсказки внутри конструктора (при наведении на элемент появляется мини-поп-ап «?See references», по клику на который можно посмотреть варианты использования элемента, внедрения функции и тп). На пользу новичку в бабле круто работают и внешние обучающие ресурсы — форумы, ролики в YouTube и статьи в блогах.
• Большое активное сообщество, которое поможет в решении почти любой проблемы. Если у вас при разработке возникает какой-то вопрос — поищите его на форуме Bubble.io. Скорее всего, его уже кто-то задавал. А если ещё нет — задайте вопрос. Ответ на него прилетит в течение нескольких часов, максимум нескольких дней.
• Отличная поддержка со стороны самого Bubble — компания любит своих пользователей и заботится о них.

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

• Нельзя создавать сложные игры.
• Нельзя создать нативные мобильные приложения, но можно сделать PWA (progressive web application). Это нормально для программы, которая изначально заточена на разработку веб-приложений.
• Зависимость от облачной платформы — в том числе от количества свободного пространства.

Тарифы Bubble.io

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

Где научиться работать с Bubble.io

• У Bubble.io есть своя онлайн-академия. Там много видео и материалов, которые послужат отличным введением для тех, кто только осваивает бабл. Сама платформа предлагает четыре варианта обучения — через видео, через чтение, через темплейты, через форум, где, в том числе, можно за плату договориться с наставником об индивидуальной помощи. Посмотреть обучающие видео, погружающие в работу бабла, советуется вообще всем. Минус такого способа — всё на английском языке.
• Сторонние ресурсы от сообщества — это курсы на Udemy, Buildcamp, Azkytech и другие. Ссылки на них бабл щедро собрал на странице своей академии.
• Если вы уже умеете работать с баблом, но у вас есть конкретный вопрос, ответ на которой вы не нашли — можно написать в поддержку платформы. Как мы уже писали, они готовы помогать всем своим пользователям.
• У нас в онлайн-университетена отдельном курсе по баблу. Всё на русском, менторство от профессиональных и практикующих ноукодеров, совместные брейнштормы надо проблемами и поисками решений в чате с другими студентами.

Обзор 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.io — пошаговое руководство

Недавно меня заинтересовали другие подходы к веб-разработке, помимо HTML, CSS и JavaScript.

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

Вы должны быть знакомы с некоторыми из наиболее известных платформ CMS, таких как WordPress, которые практически не содержат кода. Но если вы хотите создавать веб-приложения, такие платформы могут показаться ограничивающими.

Здесь я познакомлю вас с Bubble.io, мощным инструмент без кода который позволяет создавать веб-приложения, как никогда раньше.

Давайте изучим это подробно!

Что такое Bubble.io?

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

Пользователи могут использовать эти инструменты программирования для создания уникальных онлайн-приложений, изменения баз данных и процессов, добавления компонентов страницы (изображений, текста, форм ввода, карт) и разработки своих интерфейсов.

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

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

Это дает клиентам возможность создавать и персонализировать свои приложения с помощью удобного интерфейса и редактора «укажи и щелкни».

Вы можете использовать его в сочетании со службами, предоставляющими REST API, такими как Facebook, SQL, аналитические и платежные приложения. Это позволяет пользователям уделять время улучшению функциональности и внешнего вида своих приложений, чтобы они хорошо выглядели на планшетах и ​​мобильных устройствах.

Он подходит для всех размеров бизнеса, от малого до среднего и крупного; и доступен для Windows, Mac и Интернета.

Что такое визуальное программирование?

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

Пусть вас не вводит в заблуждение это краткое описание.

Это не похоже ни на одно другое готовое приложение или инструмент для создания веб-сайтов, с которыми вы сталкивались в Интернете. Большинство разработчиков приложений требуют, чтобы вы полагались на базовые шаблоны и имели крайне ограниченную функциональность; они позволяют вам разрабатывать только определенные виды приложений и ограничивают вашу персонализацию.

Хотя понятия «визуального программирования» и «перетаскивания» кажутся простыми в Bubble, они чрезвычайно эффективны.

Его среда визуального программирования не только позволяет перетаскивать на страницу такие объекты, как текст, графика, вводимые данные и т. д., но также позволяет настраивать действия этих элементов.

Что делает Бабл?

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

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

В обычной разработке требуется команда высококвалифицированных специалистов, работающих над определенными разделами создания, расширения и обслуживания приложения. Учти это.

Что требуется для каждого приложения?

• Безопасность, чтобы убедиться, что никто не имеет несанкционированного доступа к данным.
• База данных для хранения и извлечения информации, такой как элементы, статьи и обновления в социальных сетях.
• Масштабируемость, обеспечивающая беспрепятственное развитие пользовательской базы и объема данных.
• Приятный пользовательский интерфейс, делающий приложение привлекательным и простым в использовании.
• Интеграция с различными сервисами и системами.

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

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

Использование коннектора API для подключения Bubble к другим сервисам

Его API-коннектор, вероятно, является самым важным плагином на рынке. Как следует из названия, это позволяет вам подключаться к другим приложениям и службам для обмена действиями и данными.

Вместо того, чтобы углубляться в технические особенности того, как это работает, рассмотрите следующие примеры того, чего могут достичь API:

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

Использование плагинов для улучшения нативных функций

Технически он смешивает модули кода JavaScript, CSS и HTML в функциональный узел. Приложение, написанное на JS.JSON, служит основой для собственного языка.

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

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

Какие типы приложений вы можете разрабатывать?

Вы можете создавать широкий спектр приложений, некоторые из которых приведены ниже.

• Приложения для специализированных рынков с сообществом.
• Приложения для досок объявлений в различных секторах.
• Программное обеспечение для больничного персонала.
• Программное обеспечение для торговых точек для физических магазинов.
• Программное обеспечение для стоматологического кабинета с белой этикеткой.
• Программное обеспечение для инвентаризации личного бизнеса и обслуживания клиентов.
• Брокерские и клиентские приложения для агрегации недвижимости.
• Приложения для событий и курсов на рынке (и даже лодки).
• Профессиональные сертификаты требуют приложений для внутреннего тестирования.
• Приложения для первых респондентов.
• Программное обеспечение для управления персоналом для внутреннего использования.

Честно говоря, платформа не предназначена для всего. Это может быть не идеальным выбором, если вы разрабатываете игровое приложение со сложными визуальными эффектами и движением. Кроме того, если вы создаете собственное приложение (для магазинов приложений), вам необходимо интегрировать его с другим сторонним сервисом.

Ключевые характеристики

Bubble полон функций. Мы не сможем охватить их все здесь, но мы постараемся охватить самые важные из них.

1. Плагины

Это позволяет вам включать функциональные возможности многочисленных инструментов в Интернете в ваш веб-приложение. Например, если вы хотите, чтобы ваши пользователи входили в систему, используя свою учетную запись Facebook, вы можете использовать для этого плагин Facebook.

2. Разработать

Он позволяет создавать динамические многопользовательские приложения для настольных и мобильных веб-браузеров, а также все инструменты, необходимые для создания сайта, подобного Instagram или Airbnb.

3. Дизайн

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

4. Хостинг

Никогда не нужно снова и снова беспокоиться об обслуживании сервера, инфраструктуре или операциях.

Он позаботится о развертывании и размещении для вас безопасным и надежным образом. Количество пользователей, объем трафика и хранилище данных не ограничены.

Создание приложения с помощью Bubble (учебник)

Давайте теперь приступим к делу и рассмотрим, как вы можете создать новостное приложение на Bubble.

1. Начало работы

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

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

2. Настройка базы данных

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

В этом примере мы установим два разных типа данных для каждой новости. Один тип данных будет содержать основные факты истории (такие как заголовок, избранное изображение и издатель), а другой тип данных будет содержать более крупные файлы контента, такие как само повествование.

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

Будут созданы следующие типы данных и поля:

Тип данных: Информация о пользователе

• Имя
• Следующие издатели представляют собой список издателей. Важное примечание. Создание поля в виде списка на основе отдельного типа данных позволяет без усилий включать все его основные поля данных без необходимости создавать дополнительные поля.

Тип данных: История

• Название
• Популярные изображения
• писатель
• Категории
• Publisher
• Содержание истории

Тип данных: Содержание истории

• Содержание истории

Тип данных: Publisher

3. Построение рабочих процессов

Теперь, когда вы организовали дизайн своего приложения и базу данных, пришло время собрать все вместе и заставить его работать.

Рабочие процессы являются основным методом для достижения этого в Bubble.

Каждый рабочий процесс возникает, когда происходит событие (например, пользователь нажимает кнопку), а затем в ответ выполняет последовательность «действий» (например, «зарегистрировать пользователя», «внести изменения в базу данных» и т. д.). .

4. Создание новости

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

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

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

При настройке этого раскрывающегося меню мы выберем тип параметров, чтобы быть издателем.

После этого наш источник данных просканирует нашу базу данных и вернет список всех текущих публикаций. Наконец, мы изменим заголовок источника, включив в него имя издателя.

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

Затем в своей базе данных вы создадите новую вещь с описательным типом данных.

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

Во-первых, мы создадим тип контента рассказа, который, наконец, будет связан с самим рассказом.

Далее мы добавим к этой процедуре еще один этап, сгенерировав что-то еще — на этот раз саму сказку.

Эти данные можно легко интегрировать в вашу платформу, интегрировав первый повествовательный материал, который мы разработали для этой истории.

Каждый раз при активации этой процедуры будет создаваться новая история.

5. Отображение динамического контента в ленте

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

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

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

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

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

Просто заполните верхнюю строку соответствующим материалом, который вы хотите отобразить, и этот мощный элемент заполнит оставшиеся столбцы данными из вашей текущей базы данных.

6. Отправка данных между страницами

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

На главной странице нашего новостного приложения просто отображается предварительный просмотр каждой истории, включая издателя, избранное изображение и название истории.

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

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

Используйте событие навигации для перехода пользователя на другую страницу при разработке этого процесса.

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

Информация, которую вам нужно предоставить, исходит из текущей истории клеток.

7. Отображение динамического контента на странице истории

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

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

Он может просто извлекать и доставлять соответствующие данные из существующих источников, классифицируя тип контента на странице.

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

8. Отображение статьи издательства

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

На этой странице нам нужно начать с установки типа страницы для издателя.

Затем скопируйте повторяющуюся группу с домашней страницы и отредактируйте настройки.

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

9. Подписка на издателей

Третья фундаментальная функция, которую мы создадим для нашего MVP, — это возможность следить за издателем на платформе. Мы добавим кнопку подписки на страницу издателя. Щелкнув по этому значку, мы запустим новый процесс, который что-то изменяет.

Добавление текущего издателя страницы в их список следующих публикаций изменит текущего пользователя.

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

10. Дополнительные функции, которые вы можете добавить

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

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

11. Результат

Ваше окончательное приложение будет выглядеть примерно так.

Плюсы

• Возможность подключения ко многим API и плагинам.
• Простое в использовании приложение без кода.
• Это будет полезно людям без опыта программирования.
• Инструменты проектирования, которые являются одновременно универсальными и мощными.
• Быстрая обработка запросов.

Минусы

• Повышенная надежность.
• Скорость обработки данных низкая.
• Производительность ограничена.

Цены

Бесплатный план позволяет вам узнать о платформе и разработать свое приложение.

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

• Личный — 25 долларов в месяц (оплачивается ежегодно) или 29 долларов в месяц (оплачивается ежемесячно).
• Профессиональный — 115 долларов в месяц (оплачивается ежегодно) или 129 долларов в месяц (оплачивается ежемесячно).
• Производство — 475 долларов в месяц (оплачивается ежегодно) или 529 долларов в месяц (оплачивается ежемесячно).

Заключение

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

Он довольно прост в использовании, а учебные пособия, предоставляемые Bubble, чрезвычайно полезны. Это визуальный онлайн-редактор, который позволяет создавать веб-приложения на основе ваших предпочтений.

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

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

Итак, что вы думаете о возможностях Bubble?

Дайте нам знать в комментариях!