What is Backendless?

Backendless is a cloud backend platform that enables developers to create apps without server coding. It provides programmable services that supply standard server functions.

It supports features such as user management, relational data, push notifications, publish/subscribe messaging, geolocation, video/audio recording, and live streaming on the server, file service etc. Backendless makes these services available through the implementation of API.

Integrating Draftbit & Backendless

Setup steps in Backendless

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 window.
• Click the button Create to create the new app.

After the app configuration, you must have a custom data table or you can configure one in Backendless. For example, we are using a custom data table called Teams with pre-populated custom data.

Get your REST API URL

To perform read and write operations on Backendless, you need to have a Base URL of the following 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.
• Click on the App ID and API Keys section, copy the <application-id> and <REST-api-key>.

Setup steps in Draftbit

To connect Backendless Base URL to your Draftbit app:

• Click the API & Cloud Services tab on the top navbar in the Draftbit dashboard.
• From the Connect a Service menu, click on Backendless.
• Enter a name for your REST API.
• Copy your Base URL (from the previous section) and paste it into the Base URL input field.
• Click Save.

Using Backendless with Draftbit

Fetch all records

In this section, let's populate a Fetch component with all the data from the Backendless and then display it in a List component.

For reference, here is a how the Components tree looks like for this screen:

The next step is to create an endpoint. Let's fetch the data using a GET HTTP request. Open the Data modal, select the Backendless service, and then:

• Click Add endpoint.
• In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
• In Step 2: add the base name path: /{{table_name}}. This is the name of the data table you initially created in Backendless. For our case, it is going to be Teams.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Backendless.
• Click Save.

On app screen:

• Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
• For Service, select the name of the Backendless Service.
• For Endpoint, select the endpoint you want to fetch the data from.
• In Configuration for table_name, enter the name of the table where the data is stored in Backendless.
• Select the List component in the Components tree and go to the Data tab from Properties Panel.
• In Data, select Top-level response from the dropdown menu.
• Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
• Add a {{varName}} value (inside the curly braces) to represent a data field from the Backendless. For example, we add {{name}} to represent the column name from the Backendless.

Fetch a single record

In this section, let's populate a Fetch component with a single record from Backendless. To fetch a single post, you'll have to specify a record id that is coming from the navigation parameters.

Data is fetched using a GET HTTP request. Open the API & Cloud Services modal from the top navbar, select the Backendless service, and then:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint. Under the method, select GET.
• In Step 2: add the /{{table_name}}/{{id}} variable. Then, add a Test value for the {{id}}.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Backendless.
• Click Save.

On app screen:

• Select the Fetch component in the Components tree and go to the Data tab from Properties Panel
• For Service, select the name of the Backendless Service.
• For Endpoint, select the endpoint you want to fetch the data from.
• Set the value for the id in the Configuration > URL Structure section.

Submit new data

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using HTTP POST method.

Your component needs to have:

• accepts user input
• has a Field Name prop

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

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

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to POST.
• In Step 2: enter the base name as path: /{{table-name}}.
• In Step 3: add a valid 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.
• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Backendless.
• Click Save.

An example of how Body in a request will look like:

{
  "title": {{textInputValue}}
}

To submit data from within the app, you can use a Touchable/Button component to trigger the action API Request:

The textInputValue passed in the above example is the value of the Field Name property on the TextInput component:

Update data

The PUT request is used to update the single entry in the Backendless table. It accepts similar input components as mentioned in the POST request and the API Request is triggered using a Touchable/Button component.

Your component needs to have:

• accepts user input
• has a Field Name prop to update data using an API Request

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

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

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to PUT.
• In Step 2: enter the base name as path: //{{table-name}}/{{id}}.
• In Step 3: add a valid Body structure to submit a PUT request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Backendless.
• Click Save.

Similar to POST request, you can use a Touchable/Button component to trigger the action API Request.

Delete data

The DELETE request is sent with an item's id to remove that particular record from the table.

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to DELETE.
• In Step 2: add /{{table-name}}/{{id} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record, for example, as a navigation parameter.
• In Step 4: click the Test button next to the Endpoint input to verify the response from the Backendless.
• Click Save.

Using a Touchable/Button component, you can add the API Request action to trigger the DELETE request.

Authentication

Authentication is the way for the backend to handle app user registration and login and allows them access to certain areas or endpoints of the app. The process of authenticating a user typically needs the following steps in a mobile app:

• Sign Up: Provide a form for a user to enter credentials to create a new account.
• Log In: Provide a form for a user to enter credentials to authenticate their identity and login into the app.
• Save the Authentication Token when a user's credential verifies with the backend service. Authentication Token is received as a response from the REST API service.
• Making authenticated API requests.
• Log Out: An action to reset authentication and return the client to an unauthenticated state.

📘

Implementing Authentication in a Draftbit app requires familiarity with features like Global Variables, Stacking Actions, Navigation Params, etc.

Learn more at what are the requirements when implementing a user authentication process in a Draftbit app at Intro to Authentication.

Backendless provides a User Registration API that creates a user account in your application. A registration request must provide a user object as a collection of key/value properties.

The collection must have one property marked as identity to identify the primary field for the authentication. For example, in the collection representation below, email is marked as identity.

When defining up Global Variables, make sure to define the following:

• ERROR_MESSAGE: To handle and display error messages on form screens. Define it as an App Variable.
• USER_TOKEN: To obtain and save the value of user-token from Backendless. This identifies the user session initiated by the Login operation in Backendless. Define it as a Device Variable.
• USER_OBJECT_ID: To obtain and save the value of objectId from Backendless. This is a unique identifier assigned by Backendless to the user account. Define it as a Device Variable.

Note: Both user-token and objectId are required to update for updating a user in the Backendless database.

📘

Before implementing endpoints for authentication (from the sections below), refer to the documentation on how to add Global Variables for saving the auth token and error messages

Sign up

To implement the signup process with the Backendless REST API service, you need to add the endpoint:

/users/register

Open the Backendless service you have previously created and follow the steps below to add the endpoint:

• Click Add Endpoint.
• In Step 1: enter a name for the endpoint and select the Method to POST.
• In Step 2: enter the base name as path: /users/register.
• In Step 3: define the structure of the Body object that will be sent through the POST request. It's a JSON object that requires a key and a value. There are built-in user properties in the Backendless collection, such as email, name and password. For the sign-up route, here is how we have defined the body structure for this POST request:

{ 
  "name": {{signupName}},
  "email": {{signupEmail}}, 
  "password": {{signupPassword}} 
}

In the above snippet, using {{variable}} names to test the endpoint before using it in the rest of the app. You can provide test values for each of the {{variable}}. The more fields you have while signing up a new user in your app design, the more key and value pairs you can add to the Body structure.

Once you have created the body structure, click on the Body Preview to verify if the structure you have defined is valid to be sent with the POST request or not.

• In Step 5: click the button Test. On success, the Backendless service will return an object with details related to the record.
• Click Save.

A typical Signup screen (see the image below) will have a Button/Touchable component in its Components tree to send the API request.

Stacking Actions

When sending an API request to signup a user using the endpoint created in the previous step, you will need to stack the following actions on a Button/Touchable.

Following actions will be stacked on the Signup screen.

• To add an action, select the Button/Touchable component from the Components tree.
• Then, in the Properties Panel, go to the Interactions tab.
• Click the + (plus) button to add an action.

Here is the description of each action:

1. API Request

This API request comes back with an object in the response that contains the detail of the newly created user object.

• Select the Service name.
• Select the Endpoint. In this case, it's Signup.
• Add a variable to store the Result Name. The variable assigned here will enable it to be used by subsequent actions.
• In the Body, select the appropriate Field name property for each variable defined in the Body when setting up the endpoint, from the dropdown menu.

2. Parse JSON

This action is chained with the API Request action to parse the result from it with .json(). In the action:

• Select the *Result Name from the previous action as the value of Response to parse**.
• Assign a new Result Name variable. For example, signupResponseJson.

3. Extract Key: error message

In the action:

• Select the value of the Input to be Result Name of the previous action. For example, signupResponseJson.
• Add the Path value: .message.
• Add the Result Name: message.

4. Set Global Variable: Error Message

In the action:

• In the Variable, select the Global Variable assigned for Error Message from the dropdown menu.
• In the Value, select the Action Result message extracted from the previous action.

5. Conditional Stop

This action will stop the execution of any actions defined after it. It will check message field is present in the signupResponseJson. If it is, then the execution of the action will stop here. If it is not, the next action in the stack will be triggered. In the action:

• In Check value, select message from the dropdown.

6. Navigate

This action helps to navigate to a screen for the user to enter their login credentials(for example, a Login screen). In the action:

• In Destination, select the screen name from the dropdown menu.

Log in

To implement the signup process with Backendless REST API service, you need to add the endpoint:

/users/login

Open the Backendless service you have previously created in the Draftbit app and follow the steps below:

• Click Add Endpoint.
• In Step 1: enter a name for the endpoint and select the Method to POST.
• In Step 2: enter the base name as path: /users/login.
• In Step 3: define the structure of the Body object that will be sent through the POST request. It's a JSON object that requires a key and a value. The key should associate with the name of the field in the Backendless database. For the login route, here is how we have defined the body structure for this POST request:

{
  "login": {{loginEmail}},
  "password": {{loginPassword}}
}

In the above snippet, using {{variable}} names to test the endpoint before using it in the rest of the app. You can provide test values for each of the {{variable}}. The more fields you have while signing up a new user in your app design, the more key and value pairs you can add to the Body structure.

Once you have created the body structure, click on the Body Preview to verify if the structure you have defined is valid to be sent with the POST request or not.

• In Step 5: click the button Test. On success, the Backendless service will return an encoded user-token. Using the value of this token you can make the authenticated API requests.
• Click Save.

A typical Log in screen (see the image below) will have a Button/Touchable component in its Components tree to send the API request.

Stacking Actions

When sending an API request to log in a user using the endpoint created in the earlier step, you will need to stack the following actions on a Button/Touchable.

Following actions will be stacked on the Login screen.

• To add an action, select the Button/Touchable component from the Components tree.
• Then, in the Properties Panel, go to the Interactions tab.
• Click the + (plus) button to add an action.

Here is the description of each action:

1. API Request

API Request is used to send the POST request to the endpoint users/login. It comes back with a user-token, objectId, and other user-related data from the Backendless REST API service. In the action:

• Select the Service name.
• Select the Endpoint. In this case, it's Login.
• Add a variable to store the Result Name. The variable assigned here will enable it to be used by subsequent actions.
• In the Body, select the appropriate Field name property for each variable defined in the Body when setting up the endpoint, from the dropdown menu.

2. Parse JSON

This action is chained with the API Request action to parse the result from it with .json(). In the action:

• Select the *Result Name from the previous action as the value of Response to parse**.
• Assign a new Result Name variable. For example, loginResponseJson.

3. Extract Key: userToken

Using the loginResponseJson value from the previous action, let's extract the userToken. In the action:

• Select the value of the Input to be Result Name of the previous action.
• Add the Path value: ["user-token"].
• Add the Result Name: userToken.

4. Extract Key: objectId

Using the loginResponseJson value from the previous action, let's extract the objectId. In the action:

• Select the value of the Input to be Result Name of the previous action.
• Add the Path value: .objectId.
• Add the Result Name: objectId.

5. Extract Key: error message

In the action:

• Select the value of the Input to be Result Name of the previous action. For example, loginResponseJson.
• Add the Path value: .message.
• Add the Result Name: message.

6. Set Global Variable: Error Message

In the action:

• In the Variable, select the Global Variable assigned for Error Message from the dropdown menu.
• In the Value, select the Action Result message extracted from the previous action.

7. Conditional Stop

This action will stop the execution of any actions defined after it. It will check if the userToken value is present or not and if not, the action will stop the execution. Useful to implement after handling errors. In the action:

• In Check value, select userToken from the dropdown and a transform function negate.

8. Set Global Variable: User Token

In the action:

• In the Variable, select the Global Variable assigned for User Token from the dropdown menu.
• In the Value, select the Action Result userToken extracted from the previous action.

9. Set Global Variable: Object Id

In the action:

• In the Variable, select the Global Variable assigned for Object Id from the dropdown menu.
• In the Value, select the Action Result objectId extracted from the previous action. We will use this value of the objectId in the Home screen to fetch the authenticated user's data from the Backendless database. It will be passed as a query parameter.

10. Navigate

This action helps an authenticated user (when the API request is successful) to navigate to a screen that is only visible to authenticated users (for example, a Home screen). In the action:

• In Destination, select the screen name from the dropdown menu.

Authenticated API Requests: Fetching Logged-in User's Data

Authenticated API requests are those requests where your app sends a unique identifier to fetch the data from the REST API's database. In Backendless, to fetch a logged-in user's data, one way is to make an API request on the Fetch component and providing the objectId as a query parameter.

If you have followed the documentation so far, you must have saved the objectId in a Global Variable from the previous step (when implementing the process of login).

To make an API request, the initial step is to add an endpoint to the API service.

• Click Add Endpoint.
• In Step 1: enter a name for the endpoint and select the Method to GET.
• In Step 2: enter the base name as path: /users/{{objectId}}. Then manually add the value of the {{objectId}} variable from the Backendless database for testing and saving this endpoint.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from the API service and then click Save.

In the example below, an API request of method type GET is constructed to get the logged-in user's data.

Using the Fetch component on the logged-in screen the above endpoint can be used to display the information.

• Select the Fetch component from the Components tree.
• In the Properties Panel of the Fetch component, select the Service name and then select the Endpoint to fetch the user's data.
• Then in the URL Structure, for the value of objectId, select the Global Variable from the dropdown menu.

Here is an example of a user logging into the app. After being logged in, their data from the Backendless database is displayed on the screen.

Log out

To implement the logout process with Backendless REST API service, you need to add the endpoint:

/users/logout

Open the Backendless service you have previously created and follow the steps below:

• Click Add Endpoint.
• In Step 1: enter a name for the endpoint and select the Method to GET.
• In Step 2: enter the base name as path: /users/logout.
• In Step 3: add a Header with the key user-token and the value as the Global Variable that stored the value of the user token.
• In Step 4: click the button Test and click Save.

When sending an API request to log in a user using the endpoint created in the earlier step, you will need to stack the following actions on a Button/Touchable.

Here is how the Components tree for the Home screen looks like:

Stacking Actions

Following actions will be stacked on the Logout Button.

• To add an action, select the Button/Touchable component from the Components tree.
• Then, in the Properties Panel, go to the Interactions tab.
• Click the + (plus) button to add an action.

Here is the description of each action:

1. API Request

API Request is used to send the GET request to the endpoint users/logout. In the action:

• Select the Service name.
• Select the Endpoint. In this case, it's Logout.

2: Set Global Variable: User Token

In the action:

• In the Variable, select the Global Variable assigned for user-token from the dropdown menu.
• In the Value, add an empty string "".

3: Set Global Variable: ObjectId

In the action:

• In the Variable, select the Global Variable assigned for objectId from the dropdown menu.
• In the Value, add an empty string "".

4. Navigate

This action redirects the user (when the API request is successful) to navigate to a screen that is only visible to non-authenticated users (for example, a Login screen). In the action:

• In Destination, select the screen name from the dropdown menu.

Additional resources

• To get familiar with Backendless, check out their REST API guide
• Learn more about Backendless User Registration and Login API here
• Overview of Authentication in Draftbit