Cover graphic for How To Create a Native Mobile App For Your Backendless Back-End with Draftbit and Backendless logos

In this tutorial, I’ll show you how to build a mobile app front-end from scratch using a Backendless real-time database back-end and Backendless API services. Backendless is one of many back-ends that you can connect to Draftbit. It allows you to create apps without server coding. It uses the implementation of API to make various services available such as user management, relational data, and more. It also provides programmable services that supply standard server functions. Draftbit ships a preconfigured Backendless integration — see what’s included before you start. If you are using other alternatives such as Supabase, Contentful, or Xano, please refer to the guides here.

Introduction

To follow this tutorial, you need to have a Backendless back-end already. I’ll show you what API endpoints are returned from Backendless, but you have to create those endpoints in Backendless for your data.

In a nutshell, here what is covered in this post:

Connect Backendless to Draftbit
GET: Populate a list of text with data from Backendless
GET: Populate a text component with single-record from Backendless
POST: Create a new record in a Backendless database
PUT: Update data in a Backendless database
DELETE: Delete data in a Backendless database

Set up your application & API

If you don’t have a Backendless account, create one here. Once you have a Backendless account, you need to create a new application. To do that, you need to do the following:

Click on the button Create new app.
Enter the name of the app.
Click the button Create to create the new app.

Animation of creating a new Gadget app in the Backendless Create New App dialog and opening its dashboard

After the app configuration, you must have a custom datatable or configure one in Backendless. We are using a custom data table called Gadget with pre-populated custom data.

Backendless Data Browser showing the Gadget table with Nokia, Apple, Motorola, and Samsung rows

Great! Now that we’ve got a table with some data in it. You need the Base URL to perform read and write operations on Backendless. The Base URL will be in the syntax :

https://api.Backendless.com/\/<REST-api-key>/data

You are required to pass in your application ID and your REST API key. To get your Backendless application ID and REST API key, you need to:

Navigate to Manage.
Copy the <application-id> and <REST-api-key> by click the copy icon

Animation of copying the Application ID and REST API key from Backendless App Settings

Connect Backendless to Draftbit

You need to add the Backendless Base URL in your Draftbit app. To do that, simply follow the instructions below:

Navigate to Data from the left navbar.
From the Connect a Service menu, click on Backendless.
Enter a name for your REST API and paste the Base URL you copied before into the Base URL input field.
Save your progress by clicking the save button.

Animation of adding a Backendless REST API service with a name and Base URL in Draftbit

Populate a list with multiple records from Backendless

Before populating a list with multiple records from Backendless, you need to add some components to a blank screen in Draftbit so that your Layout Tree looks like the snapshot below.

Draftbit Layout tree with a View holding a Text Input and Add Brand, and a Fetch wrapping a List and Text

To populate a list with multiple records, you need to add GET Endpoint.

Navigate to Data from the left-hand navbar.
Select Backendless Base service and Add Endpoint.
Name your endpoint. And Make sure to select GET as the HTTP method.
Add the base name path: /{{table_name}} to the URL path. The basename path is the name of the data table you initially created in Backendless. (in our case, it is going to be Gadget).
Click the Test button to verify the response coming from the Backendless Base.

You should get a 200 OK JSON response identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.

Save your progress by hitting Save.

Animation of creating a GET endpoint for the Backendless service and testing it in Draftbit

Now, we need to map the GET request’s response to the components on your screen in Draftbit.

First, select the Fetch component in the Layout Tree.
From the Data tab of the Properties panel, select the name of the Backendless and GET endpoint you have just created in the service section.
In the Configuration section, enter the name of the table where the data is stored in Backendless. You should see the same JSON response in the Fetch Preview that you saw when testing the GET endpoint in the Data modal.
Next, add the List component in the Layout Tree and then go to the Data tab, select the Top-level Response for its Data field.
Select each component in your Fetch-List (e.g. Text, Image, Video, Button).
Map data variables to the components from their respective Data tabs. For example, we typed the data variable into the Text component: {{listName}} and then mapped the field value name to the data variable.

Populate a single component with a single record from Backendless

Populate a single component with a single record from Backendless has a similar Endpoint with the tutorial above. After adding a new Endpoint and select GET as the HTTP method. You need to:

Add the /{{table_name}}/{{id}} to URL path (in our case, it is going to be Gadget) and then add a Test value for the {{id}}.
To verify the response from the Backendless Base, click the Test button.

If you don’t get a 200 OK JSON response that matches your schema in Backendless Base, make sure you copied and pasted your Base URL and Table Name paths correctly, and then save your progress by clicking Save.

Animation of adding a second GET endpoint with an id path variable and testing it in Draftbit

We need to map the GET request’s response to the components on your screen in Draftbit.

Select the Fetch component in the Layout Tree.
Select the name of the Backendless and GET endpoint you have just created in the service section from the Data tab of the Properties panel.
In the configuration section, enter the id that you copy from Backendless.

You should see the same JSON response in the Fetch Preview that you saw when testing the GET endpoint in the Data modal.

You may now map data variables to components.

Select each component in your Fetch-List (e.g., Text, Image, Video, Button).
Map data variables to the components from their respective Data tabs. For example, we typed the data variable into the Text component: {{fetchName}} and then mapped the field value name to the data variable.

Animation of fetching one Backendless record by objectId and binding its name to a Text in Draftbit

Create a new record in a Backendless database

We have learned to populate data from Backendless to the front-end of our mobile app. Now let’s try making a new record.

For this section, you need to use at least one component:

Accepts user input
Has a Field Name prop to PUT data using Backendless REST API

Examples of these include:

You also need a Touchable component such as a Button to submit data from within the app.

With the components in place, let’s create our POST endpoint.

Open the data menu and select Backendless Base service.
Add endpoint and name your endpoint. Please ensure to select POST as the HTTP method.
Add the /{{table_name}} to URL path (in our case, it is going to be /Gadget).
We need JSON body structure to submit a POST request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.

For our example, the Body Structure will look like this:

{
  "title": {{textInputValue}}
}

Click the Test button to verify the response coming from the Backendless Base.
You should get a 200 OK JSON response that is identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.
Save your progress by hitting Save.

Animation of creating a POST endpoint with a JSON body and testing it against Backendless

Now that we have a POST request working. Let’s attach some components to your Draftbit app’s screen.

First, for your Input component, make sure you have set the Field Name to a unique value.
Next to your Button component, go to the Interactions tab (on your right side).
Configure a new Action with select API Request.
Select Backendless service and POST endpoint.
Map the field names of your Input component to the data variable in the POST request.

Animation of setting a Button Solid API Request action to the Add-gadget POST endpoint and mapping fields

Now you’re ready to test!

Put your app into Browser Preview or Live Preview mode.
Enter some values into your Input components.
Tap your Touchable to POST the data to Backendless.

Animation of adding an API Request action to the Add Gadget button's On Press trigger in Draftbit

If you have any trouble, the most common reasons are typos in data variables or field names. Make sure you double-check those!

Update data in a Backendless database

This section uses a similar PUT request as when we create a new record in a Backendless database. Please refer to the previous section for the prerequisite. To update your data, please follow the steps below:

Navigate to Data from the left-hand navbar.
Select your Backendless Base service.
Name your endpoint.
For the method section, you can select PUT as the HTTP method.
Add the /{{table_name}}/{{id}} to URL path (in our case, it is going to be Gadget)
Add a Test value for the {{id}}.
Add a {{variable}} for test values.
Click Body Preview to validate the structure of the Body in the request.

For our example, the Body Structure will look like this:

{
  "name": {{textInputValue}}
}

Click the Test button to verify the response coming from the Backendless Base.

Please make sure that you get a 200 OK JSON response identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.

Lastly, save your progress by hitting Save.

Animation of creating an update endpoint with table name and id path variables and a JSON name body

Animation of testing and saving the update-gadget PUT endpoint, then checking the row in Backendless

Delete data in a Backendless database

We have learned to update data in the Backendless base record. In this final section, let’s try to delete a record from the table.

Select your Backendless Base service and add Endpoint.
Give your endpoint a name.
Select DELETE as the HTTP method.
Add the /{{table_name}}/{{id}} to URL path (in our case, it is going to be Gadget) and then add a Test value for the {{id}}.
You can skip HTTP Headers and click the Test button to verify the response coming from the Backendless Base.

If you don’t get a 200 OK JSON response identical to your schema in Backendless Base, please double check your base URL and Table Name paths. Please ensure that it has been correctly copied and inserted.

Finally, you can save your progress by hitting Save.

Animation of creating and testing a delete endpoint, then refreshing the Backendless Gadget table

Wrapping up

The foundation of client-server interactions in mobile apps is sending data to and receiving data from the Backendless. The above tutorial demonstrated how to GET list items and single items from Backendless in Draftbit and POST an item from Draftbit into Backendless. We also showed how to PUT and DELETE data in Backendless from Drafbit in the preceding tutorial.

In future tutorials, we’ll also show you how to authenticate Draftbit app users with Email/Password and make authenticated server requests in a future tutorial.

How to Create a Native Mobile App For Your Backendless Back-End