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

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

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

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

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

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

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

Цель: простое приложение

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

Готовим структуру и данные

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

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

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

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

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

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

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

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

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

Конструктор запросов

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

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

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

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

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

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

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

https://ideav.pro/bub/report/348

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

Получаем параметры API

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

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

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

https://ideav.pro/bub/_m_new/316 t316=Test t360=22.01.2022 t318=22.01.2022 t319=Test memo

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

Организация доступа

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

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

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

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

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

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

API Connector Bubble

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

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

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

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

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

Мы используем метод вызова POST, чтобы скрыть от посторонних наше секретное слово.

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

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

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

Вывод данных на форме Bubble

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

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

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

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

Запрос на изменение данных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работаете ли вы с Bubble?
Да
Нет
Не работал, но собираюсь начать
Раньше работал, ушёл
А что такое Bubble?
Показать результаты
Переголосовать
Проголосовать
0
12 комментариев
Написать комментарий...
DmitryK

А говорят no-code это просто и для непрограммистов 🤔

Ответить
Развернуть ветку
Андрей Рыбников

Застрял на этапе добавления API CreateTasks в WorkFlow. У меня просто нет этого в выпадающем списке доступных API

Ответить
Развернуть ветку
Alexey Sidorov
Автор

Так вы создайте панель в АПИ, как выше показано

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alexey Sidorov
Автор

Да, это особая эстетика ноукода. Обычно всё ещё более брутально, надо писать буквы и много думать, как здесь:
https://vc.ru/dev/221141-svyazyvayu-bazu-dannyh-i-konstruktor-mobilnyh-prilozheniy-cherez-integromat-chast-i

Ответить
Развернуть ветку
Arseniy Maslov

А зачем так сложно-то? SQL Database connector (Bubble.io) + MySQL (облако Я или VC). Несколько таблиц, хранимок, триггеров и view. Профит! Зачем ТАК забивать гвозди микроскопом?

Ответить
Развернуть ветку
Alexey Sidorov
Автор

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

+ облако стоит денег и нуждается в настройке, которую только спец осилит.

Ответить
Развернуть ветку
Артур Пак-Вартанян

Круто!

Ответить
Развернуть ветку
Alexey Sidorov
Автор

Тут можно спрашивать, поможем

Ответить
Развернуть ветку
Дмитрий Придатко

Алексей, спасибо за гайд. Возник такой вопрос , у вас в посте выше указана ссылка https://ideav.pro/bub/_m_new/316 .
У меня нигде нет пути /name/_m_new/316 . Как я понял _m_new это что-то связанное с токеном CSRF. Я все сделал как в гайде, ошибок мне не выдало, но и данные не сохраняются в таблицу после ввода. Ввел сперва ссылку /name/report/id - не сохранило, затем ввел вместо /report/ токен _xsrf - тоже не помогло ( ошибок не выдаёт ) . В чем может быть проблема ?

Ответить
Развернуть ветку
Alexey Sidorov
Автор

Здравствуйте!
_m_new - это команда апи, которая создаёт запись в базе. Пока мало данных для ответа.
Приходите, пожалуйста, к нам в чат со скриншотом, где всё сделано и нет ошибки, там подскажут:
https://t.me/ideavr

Ответить
Развернуть ветку
Павел Стрелков

well well

Ответить
Развернуть ветку
Читать все 12 комментариев
null