Dans ce tutoriel, nous allons voir de plus près comment vous pouvez intégrer Tilda et AppMaster. Supposons qu'un certain formulaire ait été créé dans Tilda, et que notre tâche consiste à faire en sorte que les données, une fois remplies, arrivent à AppMaster, y soient traitées et stockées dans la base de données.
Création d'un webhook dans AppMaster
Tilda envoie des données à des services tiers via un webhook. Il convient donc de commencer par la création du webhook nécessaire et, tout d'abord, de préparer le processus métier à son fonctionnement.
Une caractéristique de ce processus est que l'on ne sait pas à l'avance quelles données exactes seront obtenues. Le webhook fonctionne avec "raw" demandes qui doivent être traitées correctement. Pour ce faire, nous utiliserons le bloc Get Request Body bloc. Voyons quelles données proviennent généralement de Tilda, convertissons-les en String, écrivons-les dans le journal et affichons-les en réponse à la demande.
Dans la section endpoints, créons immédiatement un nouveau webhook. Il est important de noter que le type de requête doit être Raw car il n'a pas de paramètres d'entrée codés en dur et est prêt à accepter n'importe quelle donnée. Vous devez également désactiver Middleware Token Auth car pour remplir un formulaire dans Tilda, vous n'avez pas besoin de passer par l'autorisation dans AppMaster, et l'envoi de données est ouvert à tous.
Tilda Configuration du formulaire
L'étape suivante consiste à connecter Tilda au webhook créé. Pour ce faire, dans les paramètres des formulaires du site, il suffit de spécifier l'URL, bien que, si nécessaire, vous puissiez utiliser des options supplémentaires. Par exemple, pour une protection supplémentaire, passez également une clé spéciale, dans le corps de la requête ou dans l'en-tête.
Si tout est fait correctement, un message correspondant apparaîtra avec la possibilité de lier immédiatement ce webhook à tous les formulaires du site.
Il ne reste plus qu'à publier la page avec le formulaire et à le tester en action.
En ouvrant les logs d'AppMaster, vous pouvez vous assurer que les données du formulaire ont bien été reçues.
Message : “Email=test%40gmail.com&Name=John+Smith&Phone=%2B1-202-202-22-22&Comments=Hello%2C+world%21%0AThis+is+my+comment&tranid=6355139%3A3971256761&formid=form513738662”
Vous pouvez voir toutes les informations remplies dans le formulaire. Dans le même temps, il devient clair que les données sont reçues dans le format x-www-form-urlencoded respectivement, elles ne peuvent plus être traitées comme un ensemble de données brutes, mais comme une collection de champs individuels.
AppMaster modèle de base de données
Il ne reste plus qu'à faire le bon gestionnaire. Et il est préférable de commencer par un modèle de base de données où seront stockées toutes les informations.
Pour un formulaire standard, un modèle simple avec 4 champs est suffisant :
- Email (String)
- Name (String)
- Phone (String)
- Comments (Text)
Ensuite, il faut revenir au processus métier créé et le modifier en tenant compte des informations reçues sur la composition de la demande.
Les noms des champs du tableau à remplir seront utilisés comme paramètres d'entrée. Les données qu'ils contiennent seront utilisées pour créer un modèle (Make Tilda) et ensuite écrire dans la base de données (DB: Create Tilda).
La dernière chose à faire est de modifier le endpoint créé précédemment pour le webhook. Nous connaissons le format des données entrantes et les traitons, donc le point d'extrémité Request payload type Form. En même temps, il est nécessaire de faire correspondre les paramètres créés dans le processus métier avec les noms exacts des champs du formulaire rempli (nous les avons vus dans les journaux lorsque nous avons reçu les données de la requête en tant que données brutes). Dans cet exemple, ils sont presque les mêmes, mais diffèrent dans le cas du premier caractère.
Vous pouvez maintenant publier l'application créée et la tester en action. Si vous répétez le remplissage et la soumission du formulaire dans Tilda, alors les données seront envoyées à AppMaster, écrites dans la base de données, et ceci peut être vérifié en utilisant Swagger.
