What is Backendless?
Backendless is a cloud backend platform that enables developers to create apps without server coding by utilizing programmable services that supply standard server functions. The following supported features are user management, relational data, push notifications, publish/subscribe messaging, geolocation, video/audio recording, and live streaming on the server, file service. The functions and services are available through the API.
Connect Backendless to Draftbit
If you don't have a Backendless account, create one here.
The initial step is to create a new application.
- Click on the button
Create new app
. - Enter the name of the app in the modal.
- Click button
Create
to create the new app.


After setting up the app, you must have a custom data table and a data type field. For example, we are using a custom data table called Books
with our own custom data inserted.


Get your REST API URL:
To perform read and write operations on a Backendless is done via the Base URL: https://api.backendless.com/<application-id>/<REST-api-key>/data
. This Base URL requires you to specify the application ID and the REST API Key. To access these values:
- Go to
Manage
. - In the section
App ID and API Keys
, copy the<application-id>
and<REST-api-key>
.


Setup steps in Draftbit
To add the Backendless Base URL to your Draftbit app:
- Open the
Data
tab on left-navbar. - From the
Add
a service menu, click onRest API
. - Enter a name for your REST API.
- Paste your Base URL (from the previous section) into the
Base URL
input field. - Click
Save
.


Available Backendless recipes for Draftbit
Fetch all data into a List in Draftbit
To a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:


Inside of the View component, you can place as many Text you would like to be rendered for each entry in your data set.
The next step is to create an endpoint. Let's try fetching the data using the GET
request:
- Click
Create new endpoint
. - Enter a name for this endpoint.
- Add the
/{{TABLE_NAME}}
inAdd Path & Params
. - Add a Test value for the
{{TABLE_NAME}}
. This value is going to be the name of the data table you initially created. - Click the
Test
button next to the Endpoint input to make sure you've successfully connected to your Backendless. - Once everything looks right, click
Save
to close the modal.


- Select the Fetch component in the Layer Tree and select the Service you have created.
- Select the Endpoint you want to fetch the data from.
- Select the List component in the Layer Tree.
- Change its Mapped Value to
data
under the Data Tab. - Now you can configure a Mapped Value on each Text component to
title
you have inside the View of your Fetch component. - Here is also a
Preview
mode is shown on how the data is fetched from the service API.


Fetch single entry into a Draftbit app
To a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:


To fetch a single data entry from Backendless, you'll have to specify the unique object-id
for the data entry which is found when fetching data in the Preview mode.
- Click
Create new endpoint
. - Enter a name for this endpoint.
- Add the
/{{TABLE_NAME}}/{{ID}}
inAdd Path & Params
. - Add a Test value for the
{{TABLE_NAME}}
. This value is going to be the name of the data table you initially created. - Add a Test value for the
{{ID}}
. - Click the
Test
button next to the Endpoint input to make sure you've successfully connected to your Backendless service. - Once everything looks right, click
Save
to close the modal.


- Select the Fetch component in the Layer Tree and select the Service you have created.
- Select the Endpoint you want to fetch the data from.
- Add the value for the
TABLE_NAME
andID
in theConfiguration
section. This value is used to fetch the single record. - Now you can configure a Mapped Value on each Text component to
title
you have inside the View of your Fetch component. - Here is also a
Preview
mode is shown on how the data is fetched from the service API.


Add new data from a Draftbit app
You need to use a component that:
- accepts user input and
- has a
Field Name
prop to POST data using Backendless.
Examples of these include:
Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Backendless service.
In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to POST using the dropdown.
- Add the
/{{TABLE_NAME}}/{{ID}}
inAdd Path & Params
. - Add a Test value for the
{{TABLE_NAME}}
. - Add a Test value for the
{{ID}}
. - On the right-hand side of the modal, click the
Body Structure
tab and insert the request of the body. - The value of the field is going to be the value of the
Field Name
prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in theBody Structure
, it needs to be inside the double curly braces as:{{FIELD_NAME_PROP_VALUE}}
. The information regarding this is also given in theBody
tab. - In the
Body
tab you can provide aTest Value
for{{FIELD_NAME_PROP_VALUE}}
. A Test value is a temporary value that can be used for variables during development. - In the
Body Preview
tab you verify that theBody Structure
has a valid structure. - Click the
Test
next to the Endpoint to test if the endpoint is working correctly. - Click
Save
.


Below is a general breakdown of what the request will look like.
{
"title": {{textInputValue}}
}
You can add the POST endpoint to submit the data entered in the Draftbit using the TextInput component and Touchable component.
- On the Touchable component go to the
Interactions
tab (the last tab). - Click the
+
to open a drop-down menu in theAction
tab and select the optionSubmit Data
. - Setup the
Submit Data
by selecting theService
and theEndpoint
. - Then add the configuration for body request to be sent by selecting the value for
textInputValue
.


Now you can make a POST request to add new data from the Draftbit app.


Update data from a Draftbit app
The PUT request is used to update the single data entity. It accepts similar input components as mentioned in POST request and the request is triggered using a Touchable component.
To navigate from the main screen of the app to the screen where the updated value is entered and then eventually the PUT request Endpoint is triggered, the initial step is to create a new screen with a TextInput component, a Touchable component, and a Text component.
- Select the Touchable component that is specified for updating a value in-app screen.
- Go to the
Interactions
tab. - Click the
+
to open a drop-down menu in theAction
tab and select the optionNavigate
. - Set the
Destination
option to point to a new screen where the value can be updated. - In the
Pass Data
option, click the+
to add a key-value pair. - Add the
ID
as the key and then select its value to be passed to the navigation screen.


You'll need to create a new endpoint in your Backendless. In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to PUT using the drop-down.
- Add the
/{{TABLE_NAME}}/{{ID}}
inAdd Path & Params
. - Add a Test value for the
{{TABLE_NAME}}
. This value is going to be the name of the data table you initially created. - Add a Test value for the
{{ID}}
. - On the right-hand side of the modal, click the
Body Structure
tab and insert the request of the body. - The value of the field is going to be the value of the
Field Name
prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in theBody Structure
, it needs to be inside the double curly braces as:{{FIELD_NAME_PROP_VALUE}}
. The information regarding this is also given in theBody
tab. - In the
Body
tab you can provide aTest Value
for{{FIELD_NAME_PROP_VALUE}}
. - Click the
Test
next to the Endpoint to test if the endpoint is working correctly. - Click
Save
.


Delete data from a Draftbit app
The DELETE request is to the Backendless with a data entry's ID to remove that particular record from the table.
You'll need to create a new endpoint in your Backendless service. In the new endpoint you'll need to:
- Enter a name for the Endpoint.
- Change the Method to DELETE using the dropdown.
- Add the
/{{TABLE_NAME}}/{{ID}}
inAdd Path & Params
. - Add a Test value for the
{{TABLE_NAME}}
. This value is going to be the name of the data table you initially created. - Add a Test value for the
{{ID}}
. - Click the
Test
next to the Endpoint to test if the endpoint is working correctly. - Click
Save
.


Updated about a month ago