NoCode backend for bubble.io - a step by step tutorial

Bubble users know how diffucult it is to make simple actions like summing up the values in its internal database. Connection of external services sometimes leads to all sorts of kludges, moreover you need to connect several services. I will show how to build a powerful backend in just one NoCode system - Ideav.

1. Purpose: a simple app.

2. Build structure and data

3. Query builder

4. API parameters

5. Access arrangement

6. API Connector Bubble

7. Outputting data from a Bubble form

8. Query to modify data

The strength of bubble.io is that it is a well-promoted product with a large audience of adepts. Here you can quickly build the interface and simple workflows, connect plugins.

A useful feature of ideav.pro is probably the most powerful database engine among NoCode platforms. Only here there is a full-fledged query builder and the ability to work with hundreds of millions of records.

By combining these two tools, you can solve the problem with database performance in Bubble with a minimum of effort and cost.

We'll use the API Connector plugin - it's free and easy to use.

Let's create, step by step, a simple task keeping application: an add form and a list of all tasks. Finally in Bubble it will look something like this:

We have a list of tasks in excel that we want to import into this application, here it is:

To start with, we will create this list in ideav (hereinafter we will call it Integral, so it is more familiar to the Russian-speaking public). After signing up in the service, we will select Upload in the menu - it is a universal data loader that imports our table into Integral.

We select Create new table from file, copy content from the excel and paste it into the data analysis window:

When we click Check, the loader parses the file and offers us to load it as a structure and data into the Integral table, giving us something like this:

As we can see, the loader recognized field separators and data types, and also showed how the table will look like in the constructor. We will make a couple of changes: let's specify that Task Status will be a reference - press on the link icon, and Description will be a multiline input field - select data type Memo.

Clicking the Validate button again, we will see the final view of our future task manager:

Click Upload, and our data appears in the Integral tables, we can see them in the menu Catalog -> Bubble task:

This is how the new table looks like in our backend - the data was imported, and a task status manager was created, which was immediately filled with all the found statuses:

We are not going to call the table directly from the outside, but create a query in the query builder of Integral - it will take less than a minute. In the Queries menu, create a new query, named BubbleAPI.

Initially it's empty, but we'll fill it with columns from the drop-down list in the upper right corner - just add them one by one.

For simplicity, we will ignore the task statuses for now.

In no more than half a minute we will have such a report for our query.

Click on the name of the query BubbleAPI and you will get the relevant report in a new browser tab:

We are interested in the url address of this report for external access, here it is, in the address bar of the browser, copy it:

So, we can get the list of tasks from this link. However, we need to save new tasks to the table. To do this, we will use the plugin API Connector Bubble, which will call the Integral API.

To create a new task with its details, we need to call the API and send all the values in the query parameters. Each parameter has its own system number and we need to know them in order to specify them in Bubble. We can see the parameter numbers in the table:

• For the first column it will be the number in the address line - 316
• For the others it`s the number that is shown at the bottom when you hover on the column name, for Date it will be 360

To add a Test task with date 22.01.2022, deadline 22.01.2022 and Test memo description, we should send this request from Bubble:

Let's copy these numbers - we'll need them in Bubble.

The backend is almost ready and all we have to do is to give access to the external user for Bubble access to our database.
Warning. Now we will make the simplest possible authorization, it is not perfect in terms of security, but allows us to test the solution quickly.
In the Users menu we see our user, who we assign a secret word for authorization:

Click the username and fill in the Secret field with random string that we'll keep secret - we'll enter that key later when we`ll set up the connection in the Bubble API Connector.

Save this change.
Done! At this point our backend is completely ready, although we have spent less than 10 minutes on it. Now we'll go and set up Bubble to work with it.

We will add three APIs to the Bubble API Connector for these calls:

• Get task list
• Get cross-site security token
• Create a task

Let's add a plugin and create an ideavAPI panel:

Let's start with getting the task list from Integral - expand the panel and add the integration by clicking on the Add another call:

Let's set up the API call exactly as shown in the screenshot, using the link to the report, the JSON_KV key and the user's secret word:

If we initialize it, we will get a response from Integral with our task list in JSON format:

If everything is fine, we save the integration.

If something goes wrong, we'll see an error message and can fix it:

We can use this API call to display tasks in Bubble by creating a Repeating group and setting data source name of our call:

We add text fields to the row and associate them with the relevant fields from the API call result:

Preview the application, we get roughly such a Bubble table with data from Integral:

Now we need to create a form for adding tasks to the list. To begin with, we will create a call to Integral's API to request a security token by a secret word we know. Let's set up this call exactly as shown on the picture:

Initialize call and we'll get a response from Integral with our authorization information, including the XSRF token:

We'll save this token in private field on the Bubble form and use it in a request to change data in Integral - this is a standard protection against cross-browser attacks. You don't have to figure out how that works, you just have to get that token once and use it in all your change requests.

Now we place a text input field somewhere on the page, named it xsrf and set its default value (Initial content) as a result of our API call:

Select the value of _xsrf in the API query:

Don't forget to make this field invisible by unchecking the box:
Now let's create a request to create a record in Integral. The first 3 parameters are fixed, and the rest we will collect from the form - the name of the task and its properties. We will name the parameters by adding the letter t to the system column number that we discovered before.

Initialize and save this request, although it will return an error about the wrong CSRF token - this is normal, because we don't have the token yet.
Let's create a form for adding tasks in the Bubble, naming each field in a way we can understand:

On the adding task button we will set up a workflow to call our API:

Let's set the parameters that will be sent to this API - each field will go into one of the numbered parameters:

Let's add the Refresh action - refresh the page after adding a task.

Done! We have a very simple database application with a lot of features. It looks like the one shown at the beginning of the article, and you can watch it live in debug mode here.

If you want to know more about any of the points, feel free to write me in the comments, and I will go into details in a new article.Thank you!