How To Integrate A Bubble App With A Backendless Backend
Tags: tutorial, devops, codenewbie, database
Published: 2022-03-21 15:47:29

Bubble.io 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](https://backendless.com/what-is-app-scaling-and-why-it-matters/), and much more.

Building a mobile or web app used to be an enormous undertaking. Creating apps, or digital products as they are sometimes called, required lots of technical knowledge and many months – even years – of dedicated development time.

The no-code movement has changed that. Now, with no-code tools like Backendless and Bubble.io, non-technical builders can learn and build apps in months or even weeks. Those with technical knowledge can turn a six month project into a six _week_ project.

In this article, we are going to briefly introduce you to Bubble.io, a leading no-code development platform that provides a robust toolkit for building apps visually. Then, we will describe how to add a powerful and scalable Backendless backend to complement a Bubble frontend.

**Contents**

[1\. What is Bubble.io?](#what-is-bubble)

[2\. Frontend vs backend development – and why it matters](#frontend-vs-backend)

[3\. Benefits of adding a Backendless backend and database](#backendless-benefits)

[4\. How to integrate a Bubble app with a Backendless backend](#integrate-with-bubble)

[4.1 Bubble app user registration and authentication via Backendless](#registration)

[4.2 User login in Bubble via Backendless](#login)

[4.3 Saving data from Bubble into Backendless Database](#save-data)

[4.4 Querying Backendless Database from Bubble](#query)

[5\. Conclusion](#conclusion)

<a id="what-is-bubble"><a/>What is Bubble.io?
------------------

[Bubble.io](https://bubble.io/), previously bubble.is, is a platform for building web apps visually using a drag-and-drop interface and workflow builder. Bubble offers wide user interface design capabilities without code, and comes complete with its own database.

Bubble provides an excellent toolkit for building relatively simple applications, and thus greatly appeals to new developers with little or no coding experience. With the platform, users can build functioning apps very quickly and easily iterate with new features over time.

Because of these capabilities, Bubble is a popular choice for so-called “citizen developers”. Many such users include non-technical entrepreneurs with app-based business ideas and technical startup founders seeking to quickly build a minimum viable product (MVP).

Bubble’s simplicity can be easily complemented with it’s variety of integrations. Users can develop their early project with Bubble, then add additional tools to increase their app’s capabilities.

<a id="frontend-vs-backend"><a/>Frontend vs backend development – and why it matters
----------------------------------------------------

From a high-level perspective, an application’s frontend is what the end user or customer will interact with. This may be an app on their mobile device, an interactive website, or a piece of software. The backend of an application is where long-term data is stored and much of the “heavy lifting” occurs.

An application’s speed and usability, and thus the user experience, is dependent on the processing power of the device where computations occur. Apps built with a beautiful frontend will get little traction if the app is painfully slow.

That is why it is recommended that as much of the logic as possible be stored on the backend. A typical server – include Cloud servers – contains far more processing power than a typical mobile phone, tablet, or laptop.

Similarly, the capabilities of the backend will be essential to growth and scale. Developers should be careful to disregard backend development because that is where the bulk of user experience failures occur.

A solid backend should not only include a database, but should offer the ability to create backend logic, build and access APIs, provide ample storage for files, images, and videos, and support messaging and notification systems.

<a id="backendless-benefits"><a/>Benefits of adding a Backendless backend and database
-----------------------------------------------------

We’ve now established that a successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers (hosting), 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.io](https://bubble.io/?utm_source=backendless) 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. The database is build for simplicity, not scalability, and will commonly slow down as the number of records being processed increases.

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

To make up for these shortcomings, Bubble offers an API Connector plugin to facilitate working with a third-party backend and database.

### That’s where Backendless 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.

For developers looking to build a long-term product, Backendless is critical. 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/).

From a feature standpoint, Backendless provides the most complete no-code backend capabilities on the market. In this article, we will discuss some of the basics – user authentication (registration and login) and database manipulation. However, that merely scratches the surface of what Backendless has to offer.

Other features your Bubble app will benefit from include:

*   [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 support](https://backendless.com/features/user-engagement/email-marketing),
*   [Push notification support](https://backendless.com/features/user-engagement/push-notifications),
*   [Pub/sub messaging support](https://backendless.com/features/backendless-core/pub-sub-messaging),
*   [Team-driven development](https://backendless.com/features/build-faster/team-driven-development),
*   and [much more](https://backendless.com/features/#backendless-core).

<a id="integrate-with-bubble"><a/>How to integrate a Bubble app with a Backendless backend
--------------------------------------------------------

From this point on, we will be demonstrating how to integrate Bubble with Backendless. In this article, we’re going to walk you through the process of integrating several basic backend functions into your Bubble app (click to jump to each section):

*   [User Registration](#registration)
*   [User Login](#login)
*   [Save Data](#save-data)
*   [Query Your Database](#query)

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)).

_**Note:** The simplest way to access Backendless’ robust backend features is to build your frontend with Backendless as well. Be sure to [check out our no-code UI Builder](https://backendless.com/how-to-build-a-no-code-app-with-ui-builder/) to see how it stacks up to Bubble._

<a id="registration"><a/>Bubble app user registration and authentication via Backendless
---------------------------------------------------------------

User registration, authentication and login are critical components of any app seeking to personalize its user’s experience. In addition to a registration API, Backendless offers a wide array of third-party login options such as Google, Facebook, Twitter, and many others. [You can read more about our OAuth 2.0 login support here.](https://backendless.com/secure-oauth-2-login-support/)

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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-01.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-02.png)

[![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-03-1200x1118.png)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-03.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-04.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-05.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-06.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-07.png)

Our workflow consists of 4 steps:

[![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-08-1200x234.png)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-08.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-09.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-10.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-12.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-13.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-14.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)](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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-16.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-17.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.

<a id="login"><a/>User login in Bubble via 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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-18.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-19.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-20.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-21.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-22.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-23.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-443x600.png)](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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-25.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-26.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-27.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-28.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-29.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-30.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-31.png)

<a id="save-data"><a/>Saving data from Bubble into Backendless Database
-------------------------------------------------

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](#query).) 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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-32.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-33.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-34.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-35.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-36.png)

Once more, our workflow consists of 4 steps:

[![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-37-600x578.png)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-37.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-38.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-39.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-40.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-41.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-42.png)

<a id="query"><a/>Querying Backendless Database from Bubble
-----------------------------------------

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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-43.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-44.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-45.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-46.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-47.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-48.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-49.png)

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

[![](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-50-600x316.png)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-50.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-51.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-52.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-53.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-54.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-55.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)](https://backendless.com/wp-content/uploads/2020/10/Bubble-Integration-With-Backendless-56.png)

* * *

<a id="conclusion"><a/>Conclusion
----------

You should now have a basic handle on how to interact with a Backendless 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 and infinite scalability.

With Bubble’s easy frontend interface and Backendless’ feature-rich backend and 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!

* * *

*This article was first published on [backendless.com](https://backendless.com/how-to-integrate-bubble-io-with-backendless/) on December 2, 2021.