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

📘

Dev & Prod URLS

The Base URL parameter has been updated to give you the ability to set separate base URLs for Development and Production. When you publish your app, you can set which base URL to use, Dev or Prod. Read more about Environments

Using Example Data API with Draftbit

GET request to 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 API and Cloud Services modal from the top menu bar, select the Example Data service, and then:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint and set the Method to GET.
• Set the Role to Get Many as the endpoint is fetching a list of items. Set the Object Type to todos for this example.
• In Step 2: optionally, add the base name path: /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}}.
• For this example, we're using /?_limit={limit}} endpoint with the value of limit being 10.
• 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.

GET request to 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 the Name for the endpoint and set the Method to GET.
• Set the Role to Get One as the endpoint is fetching a single item. Set the Object Type to todos for this example.
• 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.

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 Data Source prop

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

• Text Input
• Text Area
• Styled 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 set the Method to POST.
• Set the Role to Create as the endpoint is used to create a new record. Set the Object Type to todos for this example.
• 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.
• 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": {{id}},
  "title":  {{title}}
}

• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the API service.
• Click Save.

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 Data Source property on the Text Input 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 Data Source prop to update data using an API Request

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

• Text Input
• Text Area
• Styled 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 set the Method to PATCH.
• Set the Role to Update. Set the Object Type to todos for this example.
• 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 set the Method to DELETE.
• Set the Role to Delete. Set the Object Type to todos for this example.
• 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.