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

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.

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/<application-id>/<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 

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.

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.

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. 

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.

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.

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:

• Text Input
• Text Area/Text Field
• Checkbox
• Slider
• Radio Button Group
• Radio Button

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.

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.

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. 

If you have any trouble, the most common reasons are typos in data variables or field names. Make sure you double-check those! If you’re still struggling, talk to us in the Draftbit Community.

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.

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.

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.