Мануал Bubble.io. Инструкция для понимания мощнейшего ноукод-инструмента

Элементы визуального редактора — всё, из чего будет состоять веб-проект. Они располагаются на боковой панели в разделе Design.

Раздел делится на 5 подразделов: визуальные элементы; контейнеры; формы для ввода; ре-используемые элементы; шаблонные элементы.

• Визуальные элементы: кнопка, текстовый блок, иконка, ссылка, изображение, векторная форма, оповещение, видео, вставка HTML-кода, карта.

• Контейнеры: группа, группа с выводом повторяющихся элементов, поп-ап, группа с фиксированным положением, фокус-группа.

• Формы для ввода: ввод краткого текста, ввод длинного текста, чек-бокс, радио-кнопка, инпут-слайдер, выбор времени и даты, загрузка изображения, загрузка файла.

• Ре-используемые элементы: их разработчик создаёт сам. Тут будут появляться элементы, созданные вами, для многократного использования на нескольких экранах.

• Шаблонные элементы: предсозданные на платформы элементы для быстрого доступа — готовая форма регистрации, к примеру.

Это серное окно настроек свойств каждого элемента. Редактор свойств открывается при клике на элемент поверх рабочей области. И это очень важное понятие — через него происходят все настройки.

Тут настраивается и внешний вид элемента — цвет, размер, положение — выравнивание) и внутренние настройки элемента — сценарии, условия для изменения состояния, реакция элемента на действия пользователя.

Настройка внешнего вида, или UI вашего проекта, происходит в разделе Style — это стили и настройка дизайна веб-приложения. Здесь можно настроить шрифты, цвета, стили кнопок, форм для ввода, цвет фона и так далее.

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

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

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

Responsive Engine позволяет настраивать минимальные и максимальные размеры элементов по умолчанию и относительно размеров экрана, поля и отступы, выравнивание, положение элементов. Настройка происходит через редактор свойств во вкладке Layout.

Давайте разберём, как это работает.

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

• Поля и отступы. Также отдельно для каждого контейнера задаются поля и отступы — margins и paddings, в дизайнерской среде прижились англицизмы марджины и паддинги. Они настраиваются в пикселях. Вы можете отдельно настраивать верхние и нижние, правые и левые поля и отступы. Правилам настройки отступов подчинятся все элементы в одном контейнере.

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

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

К примеру, пользователь проходит регистрацию. Это сценарий создания аккаунта. Он нажимает на кнопку «Зарегистрироваться» — первый триггер, который запускает сценарий вывода на экран формы для регистрации. Затем пользователь заполняет форму и данные отправляются в базу данных, а пользователю отправляется письмо с подтверждением создания аккаунта. Вот ещё два триггера.

Настройка воркфлоу — то, что делает приложение живым и интерактивным. То, что делает приложение приложением.

Настройка воркфлоу может начинаться по клику на элемент, когда в окне редактора свойств открывается кнопка «Start/Edit Workflow». Второй путь — через раздел Workflow в левой вкладке.

Конструктор сценариев в Bubble очень мощный — вам подвластно создание разнообразных сценариев по разным триггерам.

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

Ключевые понятия баз данных в Bubble

• Сущность. Это то, что составляет суть данных. Это единица данных. Например, товар, объект, заказ, пользователь.

• Атрибут сущности. Это то, что есть у сущности. Например, у товара есть изображение, описание, цена. У объекта — изображение, описание, адрес. У пользователя — имя, почта, телефон.

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

• Связи в базе данных. То, как данные связаны между собой. Например, сущность заказ сформируют данные от сущностей товар (что заказали) и пользователь (кто заказал). Две сущности связаны между собой через сущность заказ.

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

Вывод данных

• Вывод данных происходит через настройки элементов через функцию Incert dynamic data. Например, при совершении таких настроек над изображением при задании связи с базой данных элемент-пустышка будет выводить из базы данных конкретное изображение — такая настройка важна для настройки профиля пользователя, для каталога товаров и других условий: когда данные меняются в зависимости от условий или когда данных много и загружать вручную все невозможно.

• Ещё одно важное понятие — Repeating Group — «повторяющая группа». Она позволяет выводить сразу поток данных: на примере блога и онлайн-магазина это опять показательно — поток постов или каталог товаров. Эта функция нужна, когда надо вывести сразу много данных.

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

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

Настройки приватности в Bubble — это установка правил, при которых определённые (или все) пользователи могут видеть определённые (или все) данные. Настройка видимости того или иного контента происходит во вкладке Data.

Общее руководящее правило для настройки приватности звучит так: «Я хочу, чтобы пользователи получали доступ к этим данным, когда …» и подставить свои условия. Например, настроить доступ к информации только зарегистрированным юзерам или сделать так, чтобы пользователь видел только создаваемый им контент. Так, можно настроить доступ к данным как по правилам для отдельного пользователя, так и для всех пользователей.

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

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

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

В процессе поиска багов в Bubble также заключена суть красоты ноукода. Это просто и логично. Для этого есть два инструмента: Issue Checker и Debugger.

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

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

• Есть у Debugger ещё одна полезная кнопка — Inspect. В режиме инспект при наведении на каждый элемент видно заданные ему параметры, от цвета и размеров до привязанных к элементу событий воркфлоу. Можно проверить правила отображения по настройкам приватности, условия состояний, функции и этапы сценариев воркфлоу.