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, user management, bulletproof 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 comes in.
With a powerful visual database, huge assortment of pre-built APIs and the capability to build your own codeless APIs, 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 in the United States or European Union (perfect for GDPR compliance) or on your own on-premise servers.
Learn more about how serverless hosting works here.
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,
- Serverless hosting,
- Codeless logic builder,
- Cloud Code, timers, and event handlers,
- Email and push notification support,
- Team-driven development,
- and much more.
To get started, you will need a Bubble account as well as a Backendless account (register here for free).
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 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, push notifications, and in-app 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:
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:
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).
We specified the parameters email: test@test.com and password: 111 as test data. Press Initialize / Reinitialize call to verify the request:
If everything is correct, we will get a response from Backendless with a registered user object:
Click Save to save the RegisterUser method, and then clear the values of the email and password parameters from the corresponding inputs:
Let’s return to the register page in order to add some more logic. Select the button Register User -> Start / Edit Workflow:
Our workflow consists of 4 steps:
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:
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:
2. Call the Backendless user registration method directly
Click Click here to add an action -> Plugins -> Backendless – RegisterUser:
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:
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:
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:
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:
If registration was successful, we will receive a message about successful registration:
If an error occurs during registration (for example, user tries to register an already-registered email address), then we will receive the following notification:
You can use the list of response error codes 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:
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, 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:
If everything is correct, we will get a response from Backendless with a logged-in user object:
Click Save to save the Login method, after which we clear the values of the login and password parameters from the corresponding inputs:
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:
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:
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:
2. Calling the user’s login method directly in Backendless
Click Click here to add an action -> Plugins -> Backendless – Login:
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:
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:
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:
The logic is now ready. In the upper right corner, click on the Preview button, enter the user login and password, and click Login:
If the login was successful, we will receive a message about a successful login:
If an error occurred during registration (for example, the user does not exist), then we will receive the following notification:
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 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 and JSON objects) 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:
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, 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:
If everything is correct, we will get a response from Backendless with a saved object:
Click Save to save the SaveObject method, after which we clear the values of the name and age parameters from the corresponding inputs:
Let’s return to the main page to add more logic. Select the Save object -> Start / Edit Workflow button.
Once more, our workflow consists of 4 steps:
1. Calling the method for saving a new object in Backendless
Click Click here to add an action -> Plugins -> Backendless – SaveObject:
We indicate that the data for the parameters of the SaveObject method must be taken from the Input Name and Input Age fields:
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:
Finally, the logic is ready. In the upper right corner, click on the Preview button, enter name and age and click Save object:
If the save is successful, we will receive the message:
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:
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).
Press Initialize / Reinitialize call to validate the request:
If everything is correct, we will get a response from Backendless with an array of selected objects:
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:
1. Calling the method for fetching objects from Backendless
Click Click here to add an action -> Plugins -> Backendless – Find:
The data for the where parameter of the Find method should be taken from the Input Where Clause field:
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.
Next, select the element Find Result Repeating Group:
3. Transfer the data obtained in step 1 to Find Result Repeating Group
Let’s return to the main screen to complete the settings. Let’s configure Find Result Repeating Group as follows:
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:
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:
The logic is now ready. Click on the Preview button, then optionally enter a where clause and click Find:
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:
Closing
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.
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!
Top comments (1)
hey,
how to store user session after successfully login via backendless, or maybe our own authentication api?