Tutorial: How To Integrate A Bubble App With A Backendless Backend
Tags: beginners, tutorial, startup, programming
Published: 2021-11-22 18:16:57

[Bubble.io](https://bubble.io/?utm_source=backendless) is one of the most popular no-code app builders on the market. When you integrate a feature-rich no-code Backendless backend with your Bubble app, you get a [visual relational database](https://backendless.com/features/backendless-core/backendless-database), [user management](https://backendless.com/features/backendless-core/user-management), [bulletproof security](https://backendless.com/features/backendless-core/security), highly-scalable serverless hosting, and much more.

A successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers, data storage, user management, and in many cases, logic.

The more capable an app’s backend, the more effective the app and the better the user experience.

Bubble has taken the no-code development world by storm, but for all the strengths the platform offers on the frontend, it’s backend capabilities are lacking.

Bubble apps come with a built-in database that is adequate for an early stage business, but will struggle mightily if you intend to scale. To make up for this shortcoming, Bubble offers an API Connector plugin to facilitate working with a third-party backend and database.

When it comes to server-side logic, a Bubble backend will likely leave you wanting as well.

**That’s where [Backendless](https://backendless.com/) comes in.**

With a powerful visual database, [huge assortment of pre-built APIs](https://backendless.com/docs/rest/index.html) and the capability to [build your own codeless APIs](https://backendless.com/features/api-services/codeless), Backendless easily fills in all the backend gaps in your Bubble app.

Backendless scales infinitely out of the box, meaning you never need to worry about your server infrastructure holding up under heavy traffic. Additionally, you can [host your app on Backendless’ cloud servers](https://backendless.com/pricing/backendless-cloud/) in the United States or European Union ([perfect for GDPR compliance](https://backendless.com/european-union-hosting-cluster/)) or [on your own on-premise servers](https://backendless.com/pricing/backendless-pro/).

[Learn more about how serverless hosting works here.](https://backendless.com/what-is-serverless-computing/)

##The Bubble-Backendless Stack
In this article, we’re going to walk you through the process of integrating several basic backend functions into your Bubble app:

* User Registration
* User Login
* Save Data
* Query Your Database

The above items merely scratch the surface of the benefits of connecting your Bubble app to Backendless. You will also gain access to no-code features such as:

* [A large pre-built API collection,](https://backendless.com/docs/rest/index.html)
* [Serverless hosting,](https://backendless.com/what-is-serverless-computing/)
* [Codeless logic builder,](https://backendless.com/features/backendless-core/codeless)
* [Cloud Code, timers, and event handlers,](https://backendless.com/features/backendless-core/cloud-code/)
* [Email and push notification support,](https://backendless.com/features/#user-engagement)
* [Team-driven development,](https://backendless.com/features/build-faster/team-driven-development)
* and much more.

To get started, you will need a [Bubble account](https://bubble.io/) as well as a [Backendless account](https://develop.backendless.com/login) ([register here for free](https://develop.backendless.com/registration)).

##User Registration In A Bubble App With Backendless
User registration and login are critical components of any app seeking to personalize its user’s experience.

User login opens up the entire set of [user management](https://backendless.com/features/backendless-core/user-management) functions in Backendless. These include session management, password management, user roles, and relating user to other data objects.

User registration also opens up user engagement opportunities such as [email messaging](https://backendless.com/features/user-engagement/email-marketing), [push notifications](https://backendless.com/features/user-engagement/email-marketing), and [in-app messaging](https://backendless.com/features/backendless-core/pub-sub-messaging).

Let’s dive in. To get started, we are going to connect user registration in our Bubble app with our Backendless Database. Users registered by API will appear in the `Users` table.

First, let’s create a registration page. We will need two Input components with identifiers `Input Email` (content format: Email) and `Input Password` (content format: Password), a button with ID `Button Register User` and an Alert with ID `Registration Result Alert`:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-01-600x360.png)

For integration between the platforms, we will use REST requests, which we will create using the API Connector plugin.

You can install this plugin immediately after creating a new application, or later through the Assistant. To add a connector, go to the **Plugins** -> **Add plugins** tab and add the **API Connector**:

![Bubble app plugins](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-02-1200x421.png)

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-03-1200x1118.png)

Let’s create an API called Backendless and add the `RegisterUser` method with the url required for registration (`https://api.backendless.com/APP_ID/REST_API_KEY/users/register`). **NOTE:** Be sure to add your own APP_ID and REST_API_KEY. Both can be found on your Backendless dashboard.

We also need the email and password parameters ([read the user registration API docs here](https://backendless.com/docs/rest/users_user_registration.html)).

We specified the parameters `email`: `test@test.com` and `password`: `111` as test data. Press **Initialize** / **Reinitialize** call to verify the request:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-04-1200x977.png)

If everything is correct, we will get a response from Backendless with a registered user object:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-05-932x1200.png)

Click **Save** to save the `RegisterUser` method, and then clear the values ​​of the `email` and `password` parameters from the corresponding inputs:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-06-600x77.png)

Let’s return to the register page in order to add some more logic. Select the button **Register User** -> **Start / Edit Workflow**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-07-513x600.png)

Our workflow consists of 4 steps:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-08-1200x234.png)

###1. Verify that the user entered values ​​in the email and password fields
Otherwise, we will display a message that these fields must be filled.

To do this, choose **Click here to add an action**, select **Element Actions** -> **Show Message**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-09-600x575.png)

Next, select **Registration Result Alert** as the displayed element, enter an error message and put a filter that will trigger this action only when one or both of the input fields is not filled:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-10-447x600.png)

###2. Call the Backendless user registration method directly
Click **Click here to add an action** -> **Plugins** -> **Backendless – RegisterUser**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-11-600x574.png)

We indicate that the data for the parameters of the `RegisterUser` method must be taken from the `Input Email` and `Input Password` fields. The call should only be triggered if the values ​​of these fields are not empty:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-12-600x407.png)

###3. Display a message about successful registration
Once the request returns successfully in Step 2, we move to displaying a message. To do this, similar to the first step, add a **Registration Result Alert** call and configure it as follows:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-13-452x600.png)

Select **Registration Result Alert** as the displayed element and enter a message about successful registration. Then, use the **Insert Dynamic Data** button to send the registered user’s email received in step 2.

We display this message only if we have a field in the response in step 2 `objectId` for the user.

###4. Clear the Input Login and Input Password values
To do this, click **Click here to add action**, select **Element Actions** -> **Reset inputs**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-14-600x571.png)

The logic is ready. In the upper right corner, click on the Preview button, enter the email and password of the new user and click **Register User**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-15.png)

If registration was successful, we will receive a message about successful registration:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-16-600x396.png)

If an error occurs during registration (for example, user tries to register an already-registered email address), then we will receive the following notification:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-17-600x298.png)

You can use the [list of response error codes](https://backendless.com/docs/rest/backendless_error_codes.html) to set up specific error messages for your users, or simply display the error message received from the backend.

##Login with Backendless
Now that we have registration set up, let’s build our Login page.

On the page, we will need two Input components with identifiers `Input Login` (content format: Text) and `Input Password` (content format: Password), a button `Button Login` and Alert `Login Result Alert`:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-18-600x409.png)

In the API call to Backendless, add the Login method with the url required for the login `https://api.backendless.com/APP_ID/REST_API_KEY/users/login` (replace with your own `APP_ID` and `REST_API_KEY`).

[Per the docs](https://backendless.com/docs/rest/users_login.html), we will need the login and password parameters. As test data, we specified the parameters `login`: `test@test.com` and `password`: `111`. Press **Initialize / Reinitialize** call to verify the request:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-19-1200x879.png)

If everything is correct, we will get a response from Backendless with a logged-in user object:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-20-884x1200.png)

Click **Save** to save the `Login` method, after which we clear the values ​​of the `login` and `password` parameters from the corresponding inputs:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-21-600x83.png)

Let’s return to the main page in order to write some additional logic. Select the **Login** -> **Start / Edit Workflow** button.

Again, our workflow consists of 4 steps:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-22-1200x204.png)

###1. Verify that the user has entered values ​​in the Bubble app’s login and password fields
Otherwise, we will display a message that these fields must be filled.

To do this, click **Click here to add an action**, select **Element Actions** -> **Show Message**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-23-600x575.png)

Next, select **Login Result Alert** as the displayed element and enter an error message. Put a filter that will trigger this action only when one or both of the input fields is not filled:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-24.png)

###2. Calling the user’s login method directly in Backendless
Click **Click here to add an action** -> **Plugins** -> **Backendless – Login**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-25-600x578.png)

We indicate that the data for the parameters of the `Login` method must be taken from the `Input Login` and `Input Password` fields, and the call should be triggered only if the values ​​of these fields are not empty:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-26-600x482.png)

###3. Display a message about a successful login
Once we’ve gotten a successful result in step 2, we can move on to this step. To display the message, similarly to the first step, add a **Login Result Alert** call and configure it as follows:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-27-451x600.png)

Select **Login Result Alert** as the displayed element and enter a message about a successful login. Then, use the **Insert Dynamic Data** button to send the email of the logged in user received in step 2.

We display this message only if we receive the logged-in user’s `objectId` field in the response from step 2.

###4. Clear the Login Input and Password Input values
To do this, click **Click here to add an action**, select **Element Actions** -> **Reset inputs**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-28-600x571.png)

The logic is now ready. In the upper right corner, click on the **Preview** button, enter the user login and password, and click **Login**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-29-600x396.png)

If the login was successful, we will receive a message about a successful login:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-30-600x393.png)

If an error occurred during registration (for example, the user does not exist), then we will receive the following notification:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-31-600x279.png)

##Save Bubble App Data in the Backend
Bubble offers a built-in database that can be adequate for simple projects or MVP-level applications. When it comes time to scale, and you have tens of thousands of records to store and retrieve, a Bubble database can become a liability.

[Backendless Database](https://backendless.com/features/backendless-core/backendless-database) is what sets Backendless apart from every other no-code platform out there. Your database can store a wide range of data types (including [spatial/geo data](https://backendless.com/new-release-featuring-spatial-data-and-console-visibility-controls/) and [JSON objects](https://backendless.com/how-to-add-json-objects-in-backendless-database/)) and makes it trivially easy to create relations between objects. Plus, a Backendless database can scale infinitely out of the box.

Backendless Database uses a SQL-based querying system. (We will touch on that more in the next section.) This approach allows you to easily query your data and display exactly what you want the user to see.

To start working with our data, let’s first take a look at how to save data into our Backendless Database from our Bubble app. Let’s build a simple new page to try it out.

On the page, we will need two Input components with identifiers `Input Name` (content format: Text) and `Input Age` (content format: Text (numbers only)), a button `Button Save` and an alert `Save Result Alert`:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-32-600x382.png)

We will save a new object to a table called `Person`.

In the API call to Backendless, add the `SaveObject` method with the url required to save the object `https://api.backendless.com/APP_ID/REST_API_KEY/data/Person` (replace with your own `APP_ID` and `REST_API_KEY`).

[Per the docs](https://backendless.com/docs/rest/data_single_object_create.html), we’ll also need the `name` and `age` parameters. Let’s specify the parameters `name`: `Bob` and `age`: `30` as test data. Press **Initialize / Reinitialize** call to verify the request:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-33-1200x872.png)

If everything is correct, we will get a response from Backendless with a saved object:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-34-1200x1171.png)

Click **Save** to save the `SaveObject` method, after which we clear the values ​​of the name and age parameters from the corresponding inputs:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-35-600x78.png)

Let’s return to the main page to add more logic. Select the **Save object** -> **Start / Edit Workflow button**.

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-36-600x200.png)

Once more, our workflow consists of 4 steps:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-37-600x578.png)

###1. Calling the method for saving a new object in Backendless
Click **Click here to add an action** -> **Plugins** -> **Backendless – SaveObject**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-38-600x380.png)

We indicate that the data for the parameters of the `SaveObject` method must be taken from the `Input Name` and `Input Age` fields:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-39-442x600.png)

Once we’ve confirmed that this executed properly, we can move on to the next step.

###2. Display a message about successful saving
To do this, add a **Save Result Alert** call and configure it as follows:

Select **Save Result Alert** as the displayed item and enter a message about successful saving. Use the **Insert Dynamic Data** button to transfer the `objectId` of the saved object obtained in step 1 to the message.

We will display this message only if we receive the `objectId` of the stored object in the request response.

###3. Clear the Input Name and Input Age values
To do this, click **Click here to add an action**, select **Element Actions** -> **Reset inputs**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-40-600x571.png)

Finally, the logic is ready. In the upper right corner, click on the **Preview** button, enter name and age and click **Save object**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-41-600x380.png)

If the save is successful, we will receive the message:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-42-600x399.png)

##Run a Query in Backendless
Finally, let’s walk through how to retrieve data from your database by running a query. We will again create a simple page for demonstration.

For this example, on the main page, we only need one Input component with the `Input Where Clause` identifier (content format: Text), a `Button Find` button, and a component called Repeating Group with ID `Find Result Repeating Group` to display the search results:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-43-600x408.png)

We will be querying our previously-created `Person` table.

In the API call to Backendless, add the `Find` method with the urls required for fetching `https://api.backendless.com/APP_ID/REST_API_KEY/data/Person` (replace with your own `APP_ID` and `REST_API_KEY`) and an optional `where` parameter ([read the docs](https://backendless.com/docs/rest/data_search_with_where_clause.html)).

Press **Initialize / Reinitialize** call to validate the request:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-44-1200x884.png)

If everything is correct, we will get a response from Backendless with an array of selected objects:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-45-831x1200.png)

Click **Save** to save the `Find` method and return to the main page where we’ll add further logic.

Let’s select the button **Find** -> **Start / Edit Workflow**.

In this case, our workflow consists of 3 steps:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-46-1200x383.png)

###1. Calling the method for fetching objects from Backendless
Click **Click here to add an action** -> **Plugins** -> **Backendless – Find**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-47-600x577.png)

The data for the where parameter of the Find method should be taken from the `Input Where Clause` field:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-48-600x338.png)

Once the request completes successfully, we can move on to step 2.

###2. Make the Find Result Repeating Group element visible
Select **Click here to add an action** -> **Show an element**.

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-49-600x264.png)

Next, select the element `Find Result Repeating Group`:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-50-600x316.png)

###3. Transfer the data obtained in step 1 to Find Result Repeating Group
![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-51-600x407.png)

Let’s return to the main screen to complete the settings. Let’s configure Find Result Repeating Group as follows:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-52-426x600.png)

Set the **Type of content** to `Find` – this component will display the data received as a result of a Find request. The **Layout style** will be `Full list` – the number of cells in the component will change dynamically depending on the number of objects received in the response.

**This element is visible on page load** should be left **unchecked** – when loading the page, we will not display the Repeatable Group component; we will display it only when we load data from the server.

Next, let’s add a Text component to the `Find Result Repeating Group` cell:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-53-1200x737.png)

Since we have specified the `Find Result Repeating Group` type as the result of the `Find` query, we can now configure it to display the name and age fields of objects retrieved from the `Person` table. To do this, use the **Insert dynamic data** button:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-54-483x600.png)

The logic is now ready. Click on the **Preview** button, then optionally enter a [where clause](https://backendless.com/docs/rest/data_search_with_where_clause.html) and click **Find**:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-55-600x518.png)

As a result of a query with the `whereClause` of `age> 25`, we receive a list of `Person` table objects with `age` greater than 25. If we execute a `Find` query without specifying a `whereClause`, we get a list of all objects:

![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-56-473x600.png)

##Closing
You should now have a basic handle on how to interact with a [Backendless](https://backendless.com/) backend via a Bubble app, but this is just the tip of the iceberg. Adding a Backendless backend and database to a Bubble app gives your app incredible flexibility.

With Bubble’s easy frontend interface and Backendless’ many pre-built APIs, your possibilities become endless.

In addition to managing users and data, Backendless gives you access to timers, event handlers, and whatever Codeless logic you can think of on the backend.

Your app is virtually limitless.

Thanks for reading and Happy Codeless Coding!