Dans ce tutoriel, nous allons examiner de plus près la manière dont vous pouvez intégrer Bubble et AppMaster. Supposons que le front-end de l'application en cours de développement soit réalisé en Bubble, mais que ses capacités de travail avec le back-end s'avèrent insuffisantes, et que vous souhaitiez utiliser la fonctionnalité AppMaster.
Voyons comment :
- Utiliser AppMaster comme base de données pour Bubble
- Envoyer des requêtes API à Appmaster
- Effectuer l'authentification de l'utilisateur
- Utiliser le jeton d'autorisation dans les en-têtes de la demande
Configuration de API Connector
Tout d'abord, vous devez créer la possibilité même d'envoyer des requêtes API externes depuis Bubble. Pour ce faire, vous devez ajouter le plugin API Connector plugin.
Configurons-le immédiatement pour envoyer une demande d'authentification à AppMaster. Notre tâche consiste à envoyer un login et un mot de passe pour recevoir un jeton d'autorisation en réponse. Nous utiliserons le point de terminaison standard qui est créé par défaut dans chaque projet : -. POST /auth/ (Auth: Authentication). Des informations complètes à son sujet, avec l'adresse exacte à demander dans votre projet, peuvent être obtenues sur Swagger.
Pour configurer le site API Connector, cliquez sur le bouton Add Another API et définissez les paramètres de la requête à utiliser. Les principaux paramètres sont les suivants :
- Méthode de requête. POST
- URL. Identique à Request URL de Swagger
- Use as. Data. En réponse, vous devez recevoir les données du jeton d'autorisation.
- Data type. JSON
- Body. Le paramètre le plus important est que vous devez spécifier les données qui seront envoyées au serveur AppMaster. En même temps, <> contient des valeurs dynamiques qui devront être obtenues à partir des champs de saisie correspondants.
{
"login": "<login>",
"password": "<password>"
}
Lors du remplissage, vous devez spécifier les données de la demande de test (remplir les valeurs du login et du mot de passe dans le Body parameters), initialiser la demande et vous assurer qu'elle fonctionne correctement et que la réponse arrive vraiment.
Configuration des champs de saisie
L'étape suivante consiste à créer une interface pour l'application. Nous nous limitons au minimum nécessaire. Nous devrons créer 3 champs de saisie :
- Login
- Mot de passe
- Jeton d'autorisation
Les deux premiers sont assez évidents. Ils indiqueront le nom d'utilisateur et le mot de passe de l'utilisateur pour l'authentification. Le plus intéressant est le troisième champ - le champ du jeton. La valeur du jeton peut également être saisie manuellement, mais notre tâche consiste à permettre de recevoir des données du backend AppMaster et de les afficher à cet endroit.
Pour ce faire, il faut configurer la valeur du contenu initial:
- Get data from an External API avec la sélection de la demande précédemment créée dans le API Connector (dans cet exemple, son nom est AppMaster Auth Call).
- Dans les champs (body) login et (body) password, vous devez spécifier les valeurs des champs de saisie correspondants.
- Sélectionnez la valeur token (la réponse à la demande contient de nombreuses données différentes, mais dans cet exemple, seule la valeur token présente un intérêt).
Le résultat peut être testé. Lors de la saisie des données dans les champs "login" et "mot de passe", une requête est automatiquement envoyée au backend AppMaster. Si les données sont saisies correctement et que la requête renvoie un résultat positif, le jeton d'autorisation reçu apparaîtra dans le troisième champ.
GET demande à la base de données
L'étape suivante consiste à créer une nouvelle requête API. Cette fois, la tâche consistera à obtenir les données de la base de données. En même temps, la situation est compliquée par le fait que ces données ne sont pas en accès libre mais sont disponibles uniquement pour les utilisateurs autorisés.
Pour ce faire, vous devrez ajouter un en-tête spécial à la requête. Il doit s'appeler Authorization et sa valeur doit être "Bearer" et la clé d'autorisation qui a été obtenue précédemment.
Mettons cela en pratique. Vous devez retourner au plugin API Connector et créer une nouvelle requête API. Dans l'exemple de la capture d'écran, il s'agit d'un appel à la base de données du restaurant pour obtenir une liste de plats et créer un menu.
Une différence importante par rapport à la demande précédente est qu'au lieu de paramètres (bien qu'ils puissent également être ajoutés), un en-tête est utilisé :
- Key = Authorization
- Value = Bearer {authorization token} (pour initialiser la requête, vous devez immédiatement spécifier le jeton réel que vous avez reçu précédemment)
Veuillez noter que dans les paramètres de l'en-tête, vous devez décocher la case Private; sinon, il ne sera pas possible de le générer dynamiquement. Enfin, n'oubliez pas d'initialiser la requête et de vous assurer qu'elle fonctionne.
Repeating Group paramètres
Nous devons maintenant retourner dans le concepteur, ajouter un nouvel élément Repeating Group et le configurer :
- Type of content - données de la demande AppMaster Get Data.
- Data source - il est important de spécifier correctement l'en-tête Authorization correctement. Il se compose de deux parties. La première constante est "Bearer." La deuxième variable doit contenir un jeton d'autorisation et provenir du champ de saisie correspondant.
Si tout est fait correctement, alors les données seront reçues, et il ne reste que la dernière étape - vous devez les afficher. Pour ce faire, vous pouvez ajouter deux champs de texte dans le champ Repeating Group et les personnaliser. L'un affichera le nom du plat, et le second son prix.
Vous pouvez ouvrir l'application résultante et vérifier que l'intégration de Bubble et AppMaster a réussi. Le frontend est réalisé en Bubble.io, et tout ce qui est lié au backend est propulsé par AppMaster.io:
- L'authentification de l'utilisateur est en cours
- Le jeton d'autorisation reçu est affiché
- Le travail avec la base de données est effectué
- Les données qui ne sont disponibles que pour les utilisateurs autorisés sont affichées.
