Бэкенд для FlutterFlow за 10 минут

Рассмотрим, как подключить к вашему приложению во FlutterFlow быстрый бэкенд в виде базы данных Конструктора Интеграл.

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

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

Стандартно FlutterFlow использует Firebase, однако с ним есть такие ограничения:

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

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

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

Для начала мы регистрируемся в Интеграле в один клик через Гугл:

и получаем свою личную базу данных:

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

Идем в меню Загрузка и выбираем вариант загрузки – Создать таблицу из файла:

Копируем сюда содержимое нашего экселя (Ctrl+A, Ctrl+C, Ctrl+V) и нажимаем синюю кнопку Проверить:

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

Мы проверим данные и поправим колонку Stars – она должна быть числом с точкой (Signed), о чем загрузчик не догадался:

Теперь мы нажимаем кнопку загрузить и подтверждаем это действие:

Через 2-3 секунды все наши данные оказываются в Интеграле и мы видим небольшой отчет об этом:

Теперь в меню Таблицы нашего Интеграла мы видим ярлычок таблицы Prompt:

Сама таблица промптов выглядит так, здесь можно добавлять, редактировать, фильтровать, сортировать данные, а также перемещаться между связанными таблицами в любом направлении (drill-down):

Пока всё выглядит как в экселе, Airtable или в том же Firebase. А сейчас мы применим средство, которого нет в этих и им подобным инструментах – конструктор запросов.

Запрос в Интеграле – это некое подобие инструкции, какие данные и как нужно выбрать из системы. Конструктор можно назвать инструментом для написания SQL-запросов без кода и без знания синтаксиса этого языка.

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

В меню Запросы мы создаем новый запрос, назовем его Prompts – вводим имя и нажимаем Создать:

Изначально запрос пустой, и мы можем добавить в него колонки из любых таблиц в нашей системе – выберем из выпадающего списка всех доступных таблиц таблицу Prompt и её первую колонку – Prompt:

Наш запрос вернул единственную колонку с названиями из каталога:

Аналогично добавим остальные колонки в наш запрос, наблюдая как перестраивается отчет:

В итоге мы получаем ту же самую таблицу, но уже в виде отчета:

Для ограничения количества строк в отчете мы используем поле LIMIT (аналог такого же ключа у программистов SQL) – отчет будет выдаваться страницами по 15 записей, если мы вобьем туда число 15:

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

Здесь мы можем скопировать ссылку на этот отчет, чтобы использовать её для получения данных во FlutterFlow – ссылка выделена красным.

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

Чтобы дать доступ к этому запросу, мы создадим пользователя для обращения к нему извне – из FlutterFlow. Идем в меню Пользователи и видим там пока единственного пользователя – это мы:

Нажимаем кнопку Добавить и вводим имя пользователя для доступа по API из FlutterFlow – назовем его ff:

В открывшейся форме можно заполнить свойства этого пользователя – для доступа по API достаточно будет заполнить Роль и Пароль (password).

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

И заполним поле пароль каким-то секретным значением:

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

Идем в меню Таблицы, чтобы настроить роль этому пользователю. Выбираем таблицу Роль:

В таблице Роль мы видим нашу роль api, а в её колонке Объекты – 0 записей. Эта колонка показывает, сколько этой роли задано доступных таблиц и полей. Кликнем этот 0.

В таблице объектов пусто. Здесь для каждой таблицы или её поля можно задать уровень доступа этой роли – просмотр, изменение или запрет.

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

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

Вот такой получился состав таблиц (объектов) роли api:

На этом конфигурирование Интеграла для использования API завершено, и теперь мы начнем использовать всё это из FlutterFlow.

Во FlutterFlow создаем интеграцию и задаем её основные параметры:

Теперь мы сохраняем эти настройки и можем попробовать получить отчет по ним, вот такой результат – мы видим наши данные в формате, понятном FlutterFlow:

Если нам нужно отфильтровать наш отчет, то мы используем параметры фильтров. Например, чтобы вернуть записи с ценой от 3 до 4 долларов мы задаем диапазон цен таким образом, с помощью префиксов FR_ и TO_ у имени колонки Price:

Отчет будет отфильтрован:

Если нам нужен фильтр по вхождению текста в названии промпта, то мы используем фильтр по маске, заменяя знаком % любое количество любых символов, например, чтобы найти записи, содержащие слово nut, добавим такой параметр:

Результат запроса будет такой:

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

Например, 3-я страница по 15 записей будет как два числа: 30,15. Здесь 30 – это смещение на 30 записей (2 страницы по 15) от начала отчета:

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

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

Мануал по Интегралу: https://help.ideav.online/

Что ещё можно делать запросами: https://www.youtube.com/watch?v=K7RpGL35k_4