What is Example Data Service?

Example Data Service is a REST API service provided by Draftbit to start building a data-driven app without having to create a backend. It uses real (or real-looking) data that can help you make better design decisions along the way. Data is gleaned from a number of open or creative commons sources. There are different resources of data to build a prototype or a Minimum Viable Product (MVP) using any of the resources: Books, Articles, Products, Orders, Podcasts, Product Reviews, People, etc.

Setup steps in Example Data Service

You do not need to create an account to use Example Data Service. It is open and available to be used as a REST API from any REST client or tool like Draftbit.

Setup steps in Draftbit

To add the Example Data Service to your Draftbit app:

• Open the Data modal from the left menu.
• In the API & Cloud Services modal, click Rest API button.
• Step 1: under Name, enter the name of the REST API service.
• Then, add the Base URL: https://example-data.draftbit.com/base-name.
• For Example Data Service, you do not have to modify configuration under Step 2 and Step 3.
• Click Save.

📘

The Example-Data Service does not require authentication

No need to touch Global Variables for this integration!

Using Example Data API with Draftbit

Fetch all records

In this section, let's populate a Fetch component with all the data from the API Service 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 Example Data 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: optionally, add the base name path: /your-base-name. Example Data Service has different resources that can be used as a base name. You can also add the query parameters here such as /?limit={{value}}.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from the API service.
• 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 API Service.
• For Endpoint, select the endpoint you want to fetch the data from.
• In Configuration add a value for the query parameter defined during the configuration of the endpoint.
• 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 API service. For example, we add {{propertyName}} to display the name of properties.

Fetch a single record

In this section, let's populate a Fetch component with a single record from Example Data. 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 Data modal from the left menu, select the Example Data 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 /{{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 API service.
• 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 API 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 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 API service.
• Click Save.

Below is a general breakdown of what the request will look like. You're able to add multiple fields to a request, just make sure you include a comma after each field.

{
  "id": {{idValue}},
  "name":  {{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 PATCH request is used to update the single entry in the API Service record. 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 PATCH.
• In Step 2: add /{{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 3: add a valid Body structure to submit a PATCH 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 API service.
• 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 used 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 /{{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 API service.
• Click Save.