В этом уроке подробно разберемся с тем, как можно выполнить интеграцию Bubble и AppMaster. Предположим, что фронтенд разрабатываемого приложения сделан в Bubble, но его возможностей для работы с бэкендом оказалось недостаточно и хочется использовать функционал AppMaster.
Разберемся с тем как:
- Использовать AppMaster в качестве базы данных для Bubble
- Отправлять API-запросы к Appmaster
- Выполнить аутентификацию пользователя
- Использовать токен авторизации в заголовках запросов
Настройка API Connector
Прежде всего необходимо создать саму возможность отправки внешних API запросов из Bubble. Для этого необходимо добавить плагин API Connector.
Сразу же настроим его для отправки запроса на аутентификацию в AppMaster. Нашей задачей является отправка логина и пароля для получения токена авторизации в ответ. Будем использовать стандартный эндпойнт, который создается в каждом проекте по умолчанию - POST /auth/ (Auth: Authentication). Полную информацию о нем, с точным адресом для запроса в вашем проекте, можно получить в Swagger.
Для настройки API Connector необходимо нажать на кнопку Add Another API и установить параметры запроса для использования. Ключевыми параметрами являются:
- Метод запроса. POST
- URL. Совпадает с Request URL из Swagger
- Use as. Data. В ответ необходимо получить данные токена авторизации
- Data type. JSON
- Body. Самая важная настройка, в ней необходимо указать данные, которые будут отправлены на сервер AppMaster. При этом в <> находятся динамические значения, которые необходимо будет получить из соответствующих полей ввода.
{
"login": "<login>",
"password": "<password>"
}
По заполнению необходимо указать данные для тестового запроса (заполнить значения логина и пароля в Body parameters), инициализировать запрос и убедиться, что он работает корректно, ответ действительно приходит.
Настройка полей ввода
Следующий шаг - создание интерфейса для приложения. Ограничимся необходимым минимумом. Нам понадобится создать 3 поля ввода:
- Логин
- Пароль
- Токен авторизации
С первыми двумя вопросов быть не должно. В них будет указываться логин и пароль пользователя для прохождения аутентификации. Наибольший интерес представляет третье поле - поле токена. Значение токена можно ввести и вручную, но наша задача сделать так, чтобы можно было получить данные с бэкенда AppMaster и отобразить там.
Для этого необходимо настроить содержимое Initial content:
- Get data from an External API с выбором созданного ранее запроса в API Connector (в данном примере его название AppMaster Auth Call)
- В полях (body) login и (body) password нужно указать значения из соответствующих полей ввода
- Выбрать значение token (в ответе на запрос приходит много различных данных, но в данном примере интерес представляет только token)
Результат уже можно тестировать в деле. При вводе данных в поля логина и пароля будет автоматически производиться запрос к бэкенду AppMaster. Когда данные будут указаны правильно и запрос выдаст успешный результат, в третьем поле появится полученный токен авторизации.
GET запрос к базе данных
Следующий шаг - создание нового API запроса. На этот раз задачей будет получить данные из базы. При этом ситуация усложняется тем, что эти данные не находятся в свободном доступе, а доступны только авторизованным пользователям.
Для этого к запросу необходимо будет добавить специальный заголовок (Header). Он должен называться Authorization, а его значением должен быть “Bearer” и ключ авторизации, который был получен ранее.
Сделаем это на практике. Нужно вернуться к плагину API Connector и создать новый запрос API. В примере на скриншоте это обращение к базе данных ресторана для получения списка блюд и формирования меню.
Важным отличием от предыдущего запроса является то, что вместо параметров (хотя их тоже можно добавить) используется заголовок:
- Key = Authorization
- Value = Bearer {authorization token} (для инициализации запроса нужно сразу указать реальный токен, который получили ранее)
Обратите внимание на то, что в настройках заголовка нужно обязательно убрать отметку Private, в противном случае его нельзя будет формировать динамически. В завершение не забудьте инициализировать запрос и убедиться в его работоспособности.
Настройка Repeating Group
Теперь следует вернуться к дизайнеру, добавить новый элемент Repeating Group и настроить его:
- Type of content - данные из запроса AppMaster Get Data.
- Data source - важно правильно указать заголовок Authorization. Он состоит из двух частей. Первая постоянная - “Bearer ”. Вторая переменная - в ней должен быть токен авторизации и его необходимо взять из соответствующего поля ввода.
Если все сделано правильно, то данные будут получены и остается лишь последний шаг - необходимо отобразить их. Для этого в Repeating Group можно добавить два текстовых поля и настроить их. Одно будет показывать название блюда, а второе его цену.
Можно открыть полученное приложение и убедиться, что интеграция Bubble и AppMaster выполнена успешно. Фронтенд сделан в Bubble.io, а все, что к относится к бэкенду работает на AppMaster.io:
- Выполняется аутентификация пользователя
- Отображается полученный токен авторизации
- Осуществляется работа с базой данных
- Выводятся данные, которые доступны только авторизованным пользователям
