In this tutorial, we'll take a closer look at how you can integrate Tilda and AppMaster. Suppose that a certain form has been created in Tilda, and our task is to ensure that the data, when it is filled out is coming to AppMaster, processed there and stored in the database.
Creating webhook in AppMaster
Tilda sends data to third-party services via a webhook. Therefore, it is worth starting with the creation of the necessary webhook and, first of all, preparing the business process for its operation.
A feature of this process is that it is not known in advance what exact data will be obtained. The webhook will work with "raw" requests that need to be properly processed. To do this, we will use the Get Request Body block. Let's see what data generally comes from Tilda, convert it to String, write it to the log and display it in response to the request.
In the endpoints section, let's immediately create a new webhook. It is important to note that the request type must be Raw because it does not have any hard-coded input parameters and is ready to accept any data. You also need to disable Middleware Token Auth because to fill out a form in Tilda, you do not need to go through authorization in AppMaster, and sending data is open to everyone.
Tilda form setup
The next step is to connect Tilda to the created webhook. To do this, in the settings of the site forms, it is enough to specify the URL, although, if necessary, you can use additional options. For example, for additional protection, also pass a special key, in the body of the request or in the header.
If everything is done correctly, a corresponding message will appear with the ability to immediately link this webhook to all forms on the site.
It remains only to publish the page with the form and test it in action.
By opening the AppMaster logs, you can make sure that the data from the form was actually received.
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”
You can see all the information filled in the form. At the same time, it becomes clear that the data is received in the x-www-form-urlencoded format, respectively, they can no longer be processed as a set of raw data, but as a collection of individual fields.
AppMaster database model
It remains only to make the right handler. And it's best to start with a database model where all the information will be stored.
For a standard form, a simple model with 4 fields is sufficient:
- Email (String)
- Name (String)
- Phone (String)
- Comments (Text)
Next, you need to go back to the created business process and change it taking into account the information received about the composition of the request.
The names of the fields from the table to be filled in will be used as input parameters. The data from them will be used to create a model (Make Tilda) and then write to the database (DB: Create Tilda).
The last thing to do is to change the previously created endpoint for the webhook. We know the format of incoming data and process it, so the Request payload type must be Form. At the same time, it is necessary to match the parameters created in the business process with the exact names of the fields from the completed form (we saw them in the logs when we received data from the request as a raw data). In this example, they are almost the same, but differ in the case of the first character.
Now you can publish the created application and test it in action. If you repeat filling out and submitting the form in Tilda, then the data will be sent to AppMaster, written to the database, and this can be verified using Swagger.
