NoCode бэкенд для bubble.io — пошаговое руководство

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

В конце статьи будет ссылка на это приложение и небольшой опрос.

План
1. Цель: простое приложение
2. Готовим структуру и данные
3. Конструктор запросов
4. Получаем параметры API
5. Организация доступа
6. API Connector Bubble
7. Вывод данных на форме Bubble
8. Запрос на изменение данных
9. Опрос

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

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

Объединив эти два инструмента, вы можете решить проблему производительности базы данных в Bubble, затратив минимум усилий и средств.

Мы будем использовать плагин API Connector в Bubble — его не нужно там покупать и он прост в использовании.

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

У нас есть список задач в экселе, который мы изначально хотим импортировать в это приложение, вот он:

Для начала мы создадим этот список в ideav (далее будем называть его Интеграл, так он больше знаком русскоязычной публике). После регистрации в сервисе мы запустим меню Загрузка — это универсальный загрузчик данных, который импортирует нашу таблицу в Интеграл.

Мы выбираем опцию Создать новый тип из файла и копируем содержимое экселя в окно анализа данных:

Когда мы нажмём Проверить, загрузчик разберёт файл и предложит нам загрузить его как структуру и данные в таблицу Интеграла, выдав примерно такую картину:

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

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

Нажимаем Загрузить, и наши данные оказываются в таблицах Интеграла, мы можем их видеть в меню Словарь -> Bubble task:

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

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

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

Не более чем через полминуты у нас получится такой отчет по нашему запросу:

Для простоты мы пока проигнорировали статусы задач.

Кликнем название запроса в конструкторе и получим соответствующий отчет в новой закладке браузера:

Здесь нам интересен адрес этого отчета для доступа извне, вот он, в строке адреса браузера, копируем его:

Итак, мы можем получать список задач по этой ссылке. Однако, нам требуется сохранять в таблицу новые задачи. Для этого мы будем использовать плагин API Connector Bubble, который будет обращаться к API Интеграла.

Чтобы создать запись для задачи с её реквизитами, нам нужно вызвать команду API и передать в ней все значения в виде параметров запроса. У каждого параметра есть свой системный номер, и нам нужно их узнать, чтобы указывать их в Bubble. Номера параметров мы можем увидеть в таблице:

• у первой колонки это будет номер в адресной строке — 316
  
• у остальных — это номер, который отображается внизу при наведении курсора на имя колонки, для Даты это будет 360

Для того чтобы добавить задачу Test с датой 22.01.2022, сроком 22.01.2022 и описанием Test memo, нам следует послать из Bubble такой запрос:

Скопируем эти номера — они нам понадобятся в Bubble.

Бэкенд почти готов, и нам осталось только выдать доступ внешнему пользователю, под которым Bubble будет ходить в нашу базу.

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

В меню Пользователи мы видим нашего пользователя, которому мы зададим секретное слово, под которым он сможет авторизовываться:

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

Сохраняем это изменение.

Всё! На этом наш бэкенд полностью готов, хотя мы потратили на него не более 10 минут. Теперь мы пойдем настраивать Bubble на работу с ним.

Мы добавим три API в Bubble API Connector для таких вызовов:

• получение списка задач
• получение токена межсайтовой безопасности
  
• создание задачи
  

Добавляем плагин и создаем панель ideavAPI:

Начнём с получения списка задач из Интеграла — раскроем панель и добавим интеграцию синей кнопкой внизу:

Настроим вызов API точно как показано на картинке, используя ссылку на отчет, ключ JSON_KV и секретное слово пользователя:

Если инициализировать его синей кнопкой внизу формы, то мы получим ответ от Интеграла с нашим списком задач в формате JSON:

Если всё прошло нормально, то мы сохраняем интеграцию.

Если же что-то пошло не так, то мы увидим сообщение об ошибке и сможем исправить её:

Мы можем использовать этот вызов API для вывода задач на форме Bubble, создав на форме группу записей (Repeating group) и задав ей в качестве источника имя нашего вызова:

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

Запустив приложение, получаем примерно такую таблицу Bubble с данными из Интеграла:

Теперь нам нужно организовать форму добавления задач в список. Сначала мы создадим вызов API Интеграла для запроса токена безопасности по известному нам секретному слову. Настроим этот вызов точно как изображено на картинке:

Инициализируем его синей кнопкой внизу формы и получим ответ от Интеграла с нашей авторизационной информацией, включая токен XSRF:

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

Теперь мы кладем в произвольном месте формы текстовое поле ввода, называем его xsrf и настраиваем его значение по умолчанию (Initial content) как результат вызова нашего API:

Указываем, что в запросе нам интересно именно значение _xsrf:

Не забудьте сделать это поле невидимым, убрав галку, как справа внизу на картинке.

Теперь создадим команду на создание записи в Интеграле. Первые 3 параметра фиксированные, а остальные мы будем собирать с формы — название задачи и её свойства. Параметры мы назовем, прибавив букву t к системному номеру колонки, который мы узнали выше.

Инициализируем и сохраним этот запрос, хотя он выдаст нам ошибку о неправильном токене CSRF — это нормально, потому что токена у нас ещё нет.

Создадим в дизайнере Bubble форму добавления задач, задав каждому полю понятные нам имена:

На кнопку добавления задачи повесим процесс (Workflow), чтобы по нажатию кнопки вызывать наш API:

Зададим параметры, которые будут переданы в этот API — каждое поле попадёт в один из пронумерованных параметров:

Добавим действие Refresh — обновить страницу после добавления задачи.

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

Если какой-то из пунктов интересует вас подробнее, то пишите об этом в комментариях, я детальнее освещу тему в отдельной заметке.
Спасибо!

#bubble #ideav #nocode #lowcode