Directual

What is Directual

Directual is a no-code platform for building scalable and sophisticated apps in an intuitive visual interface. It provides a cloud-hosted NoSQL database that lets you easily store and sync data and files for your apps. You can also create RESTful API for your app using Directual API-builder.

Integrating Draftbit & Directual

Setup steps in Directual

If you do not have a Directual account, create one here.

  • After logging in, you will be welcomed by the Dashboard screen.

Before you start in Draftbit, make sure you have a Directual app created. To create a new app in Directual:

  • From the Dashboard screen, click the button Create a blank app.
  • Add a System name for your Directual app.
  • Choose from either Create a blank app or Use template.
  • Click the Create app button to initialize the new app.

For this guide, we will use a custom Directual Database with some pre-populated data. Here is how the example Database looks like:

11721172

The Database above has multiple objects. Each object has fields name, id, rating etc. We recommend you to go through their documentation on how to set up API endpoints here.

Get your Base URL & API Key

To send HTTP requests to the API endpoint of your Directual app, you will need the APP ID key.

  • Go to your Directual Dashboard.
  • Click the API button in the top menu and under the API options side menu, click API keys.
  • Copy the key under APP_ID field.

The Base URL in a Directual app is of the format:

https://api.directual.com/good/api/v5/data/your-data-structure-name/your-method-name

Setup steps in Draftbit

Add Directual Base URL in Draftbit

  • Open the Data tab from the left menu to open API & Cloud Services.
  • From the Connect a service menu, click on REST API.
  • In Step 1: Enter a name for your REST API. Then, paste your Base URL (from the previous section) into the Base URL field.
  • Click Save.
12841284

❗️

Directual requires you to pass appID as a query parameter with each request. In Draftbit, when creating a service, you cannot pass query parameters in a service Base URL. Hence, you will have to pass the query param ?appID=xxxxxxin Path and Parameters step for each endpoint.

Using Directual with Draftbit

GET request to fetch all records

In this section, let's populate a Fetch component with all the data from a Directual endpoint and then display the data fetched from its database in a List component.

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

350350

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

  • Click Add endpoint.
  • In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
  • Set the Role to Get many as the endpoint is used to create a new record. Set the Object Type to books for this example.
  • In Step 2: pass the query parameter for appID as /?appID=your-app-id-value.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Directual service.
  • Click Save.

On app screen:

  • Select the Fetch component in the Layout and go to the Data tab from Properties Panel.
  • For Service, select the name of the Directual Service.
  • For Endpoint, select the endpoint you want to fetch the data from.
  • Select the List component in the Layout and go to the Data tab from Properties Panel.
  • In Data, select payload from the dropdown menu.
  • Then, select the Text component in the Layout 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 Directual. For example, we add {{name}} to represent the field name from the Directual.
14401440

POST request to 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:

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

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • Set the Role to Create as the endpoint is used to create a new record. Set the Object Type to books for this example.
  • In Step 2: pass the query parameter for appID as /?appID=your-app-id-value.
  • 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.
  • An example of how Body in a request will look like:
{
  "key": {{textInputValue}}
}
  • The key for the example is called name.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Directual.
  • Click Save.

Using a Touchable/Button component, you can trigger the action API Request to submit the data to the endpoint.

14221422

POST request to update existing data

The POST request is used to update the single entry in the Directual record. It accepts similar input components as mentioned in the previous section 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:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • Set the Role to Create as the endpoint is used to create a new record. Set the Object Type to books for this example.
  • In Step 2: pass the query parameter for appID as /?appID=your-app-id-value.
  • 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.
  • An example of how Body in a request will look like:
{
  "key": {{textInputValue}}
}
  • For this example, you will have to pass the name and id of the record to update.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Directual.
  • Click Save.

Using a Touchable/Button component, you can trigger the action API Request to update the data to the endpoint.

14221422

POST request to delete existing data

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

For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Directual REST API service. In the new endpoint you'll need to:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • Set the Role to Create as the endpoint is used to create a new record. Set the Object Type to books for this example.
  • In Step 2: pass the query parameter for appID as /?appID=your-app-id-value.
  • 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.
  • An example of how Body in a request will look like:
{
  "key": {{textInputValue}}
}
  • For this example, you will have to pass the name, isHidden with a value true and id of the record to delete.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Directual.
  • Click Save.

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

14221422

Did this page help you?