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:

  1. 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)
  2. Nos campos (body) login e (body) password é necessário especificar os valores dos campos de entrada correspondentes
  3. 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


Was this article helpful?

AppMaster.io 101 Curso de Crash

10 Módulos
2 Semanas

Não sabe por onde começar? Avance com o nosso curso intensivo para principiantes e explore o AppMaster de A a Z.

Iniciar curso
Development it’s so easy with AppMaster!

Precisa de mais ajuda?

Resolva qualquer problema com a ajuda de nossos especialistas. Economize tempo e concentre-se na criação de seus aplicativos.

headphones

Entre em contato com o suporte

Conte-nos sobre o seu problema, e nós encontraremos uma solução para você.

message

Bate-papo da comunidade

Discuta perguntas com outros usuários em nosso chat.

Junte-se à comunidade