How to integrate Bubble and AppMaster platforms

In this tutorial, we will take a closer look at how you can integrate Bubble and AppMaster. Suppose that the front-end of the application being developed is made in Bubble, but its capabilities for working with the back-end turned out to be insufficient, and you want to use the AppMaster functionality.

Let's figure out how:

• Use AppMaster as a database for Bubble
• Send API requests to Appmaster
• Perform user authentication
• Use authorization token in request headers

Configuring API Connector

First of all, you need to create the very possibility of sending external API requests from Bubble. To do this, you need to add the API Connector plugin.

Let's immediately configure it to send an authentication request to AppMaster. Our task is to send a login and password to receive an authorization token in response. We will use the standard endpoint that is created in every project by default - POST /auth/ (Auth: Authentication). Full information about it, with the exact address to request in your project, can be obtained from Swagger.

To configure the API Connector, click on the Add Another API button and set the request parameters to be used. The key parameters are:

• Request method. POST
• URL. Same as Request URL from Swagger
• Use as. Data. In response, you need to receive authorization token data.
• Data type. JSON
• Body. The most important setting in it is that you need to specify the data that will be sent to the AppMaster server. At the same time, <> contains dynamic values that will need to be obtained from the corresponding input fields.

{

  "login": "<login>",

  "password": "<password>"

}

Upon filling, you must specify the data for the test request (fill in the login and password values in the Body parameters), initialize the request, and make sure that it works correctly and the answer really comes.

Input fields setup

The next step is to create an interface for the application. We restrict ourselves to the necessary minimum. We will need to create 3 input fields:

• Login
• Password
• Authorization token

The first two are pretty obvious. They will indicate the username and password of the user for authentication. Of greatest interest is the third field - the field of the token. The value of the token can also be entered manually, but our task is to make it possible to receive data from the AppMaster backend and display it there.

To do this need to configure Initial content value:

1. Get data from an External API with the selection of the previously created request in the API Connector (in this example, its name is AppMaster Auth Call)
2. In the fields (body) login and (body) password you need to specify the values from the corresponding input fields
3. Select the token value (a lot of different data comes in the response to the request, but in this example only token is of interest)

The result can be tested. When entering data in the login and password fields, a request will be automatically made to the AppMaster backend. When the data is entered correctly, and the request returns a successful result, the received authorization token will appear in the third field.

GET request to database

The next step is to create a new API request. This time the task will be to get the data from the database. At the same time, the situation is complicated by the fact that these data are not freely available but are available only to authorized users.

To do this, you will need to add a special header to the request. It should be called Authorization and its value should be "Bearer" and the authorization key that was obtained earlier.

Let's do it in practice. You need to go back to the API Connector plugin and create a new API request. In the example on the screenshot, this is a call to the restaurant database to get a list of dishes and create a menu.

An important difference from the previous request is that instead of parameters (although they can also be added), a header is used:

• Key = Authorization
• Value = Bearer {authorization token} (to initialize the request, you must immediately specify the real token that you received earlier)

Please note that in the header settings, you must uncheck the Private checkbox; otherwise, it will not be possible to generate it dynamically. Finally, don't forget to initialize the request and make sure it works.

Repeating Group settings

Now we should go back to the designer, add a new Repeating Group element, and set it up:

• Type of content - data of request AppMaster Get Data.
• Data source - it is important to specify the Authorization header correctly. It consists of two parts. The first constant is "Bearer." The second variable must contain an authorization token and be taken from the corresponding input field.

If everything is done correctly, then the data will be received, and only the last step remains - you need to display them. To do this, you can add two text fields to the Repeating Group and customize them. One will show the name of the dish, and the second will show its price.

You can open the resulting app and verify that the Bubble and AppMaster integration was successful. The frontend is made in Bubble.io, and everything related to the backend is powered by AppMaster.io:

• User authentication is being performed
• The received authorization token is displayed
• The work with the database is carried out
• The data that is available only to authorized users is displayed