Neste tutorial, veremos mais de perto como se pode integrar Bubble e AppMaster. Suponha que o front-end da aplicação a ser desenvolvida é feito em Bubble, mas as suas capacidades para trabalhar com o back-end revelaram-se insuficientes, e pretende utilizar a funcionalidade AppMaster.
Vamos descobrir como:
- Use AppMaster como uma base de dados para Bubble
- Enviar pedidos de API para Appmaster
- Efectuar autenticação do utilizador
- Usar o código de autorização nos cabeçalhos dos pedidos
Configuração API Connector
Em primeiro lugar, é preciso criar a própria possibilidade de enviar pedidos API externos a partir de Bubble. Para o fazer, é preciso acrescentar a API Connector plugin.
Vamos configurá-lo imediatamente para enviar um pedido de autenticação para AppMaster. A nossa tarefa é enviar um login e uma senha para receber um token de autorização em resposta. Utilizaremos o endpoint padrão que é criado em cada projecto por defeito - POST /auth/ (Auth: Authentication). Informações completas sobre o mesmo, com o endereço exacto a solicitar no seu projecto, podem ser obtidas junto da Swagger.
Para configurar o API Connector, clique no botão Add Another API e definir os parâmetros de pedido a serem utilizados. Os parâmetros-chave são:
- Método de pedido. POST
- URL. O mesmo que Request URL de Swagger
- Use as. Data. Em resposta, é necessário receber dados do símbolo de autorização.
- Data type. JSON
- Body. A configuração mais importante é que precisa de especificar os dados que serão enviados para o servidor AppMaster. Ao mesmo tempo, <> contém valores dinâmicos que terão de ser obtidos a partir dos campos de entrada correspondentes.
{
"login": "<login>",
"password": "<password>"
}
Ao preencher, é necessário especificar os dados para o pedido de teste (preencher os valores de login e senha no Body parameters), inicializar o pedido, e certificar-se de que funciona correctamente e a resposta vem realmente.
Configuração dos campos de entrada
O passo seguinte é criar uma interface para a aplicação. Limitamo-nos ao mínimo necessário. Vamos precisar de criar 3 campos de entrada:
- Login
- Senha
- Ficha de autorização
Os dois primeiros são bastante óbvios. Eles indicarão o nome de utilizador e a palavra-passe do utilizador para autenticação. De maior interesse é o terceiro campo - o campo do token. O valor do token também pode ser introduzido manualmente, mas a nossa tarefa é tornar possível receber dados do backend AppMaster e exibi-los lá.
Para tal, é necessário configurar o valor do conteúdo inicial:
- Get data from an External API com a selecção do pedido previamente criado no API Connector (neste exemplo, o seu nome é AppMaster Auth Call)
- Nos campos (body) login e (body) password é necessário especificar os valores dos campos de entrada correspondentes
- Seleccione o valor token (muitos dados diferentes vêm em resposta ao pedido, mas neste exemplo apenas token é interessante)
O resultado pode ser testado. Ao introduzir dados nos campos de login e senha, um pedido será automaticamente feito para o backend AppMaster. Quando os dados forem introduzidos correctamente, e o pedido devolver um resultado bem sucedido, o código de autorização recebido aparecerá no terceiro campo.
GET pedido à base de dados
O passo seguinte é criar um novo pedido de API. Desta vez a tarefa será a de obter os dados da base de dados. Ao mesmo tempo, a situação é complicada pelo facto de estes dados não estarem livremente disponíveis, mas estarem disponíveis apenas para utilizadores autorizados.
Para o fazer, será necessário adicionar um cabeçalho especial ao pedido. Deve chamar-se Authorization e o seu valor deve ser "Bearer" e a chave de autorização que foi obtida anteriormente.
Façamo-lo na prática. É necessário voltar ao plugin API Connector e criar um novo pedido de API. No exemplo na imagem do ecrã, esta é uma chamada para a base de dados do restaurante para obter uma lista de pratos e criar um menu.
Uma diferença importante em relação ao pedido anterior é que em vez de parâmetros (embora também possam ser adicionados), é utilizado um cabeçalho:
- Key = Authorization
- Value = Bearer {authorization token} (para inicializar o pedido, deve especificar imediatamente o símbolo real que recebeu anteriormente)
Note que nas definições do cabeçalho, é necessário desmarcar a caixa de verificação Private; caso contrário, não será possível gerá-lo dinamicamente. Finalmente, não se esqueça de inicializar o pedido e certificar-se de que funciona.
Repeating Group definições
Agora devemos voltar ao designer, adicionar um novo elemento de Grupo de Repetição, e criá-lo:
- Type of content - dados do pedido AppMaster Get Data.
- Data source - é importante especificar o Authorization cabeçalho correctamente. É composto por duas partes. A primeira constante é "Bearer." A segunda variável deve conter um código de autorização e ser retirada do campo de entrada correspondente.
Se tudo for feito correctamente, então os dados serão recebidos, e só resta o último passo - é necessário exibi-los. Para o fazer, pode adicionar dois campos de texto ao Repeating Group e personalizá-los. Um mostrará o nome do prato, e o segundo mostrará o seu preço.
Pode abrir a aplicação resultante e verificar que a integração em Bubble e AppMaster foi bem sucedida. O frontend é feito em Bubble.io, e tudo relacionado com o backend é alimentado por AppMaster.io:
- A autenticação do utilizador está a ser realizada
- O token de autorização recebido é afixado
- O trabalho com a base de dados é levado a cabo
- Os dados que estão disponíveis apenas para utilizadores autorizados são exibidos
