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.

Connecting 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 tab from the left menu.
• In the API & Cloud Services modal > Add your custom API , click Rest API.
• Step 1: Under Name, enter the name of your REST API service.
• Then, Paste your Base URL: https://example-data.draftbit.com.
• 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

GET all records

This recipe will show you how to:

• Create a simple Fetch-List in Draftbit
• Populate that Fetch-List with data from a simple Example Data API resource

Inside a screen in Draftbit, add:

• Fetch
• List
• Text

The Layout of the screen may look:

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 GET request:

• Click Create new endpoint.
• Enter the name of the Endpoint.
• Click the 'Test' button next to the Endpoint input to make sure you've successfully connected to your Base.
• 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 item 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 entry from Example Data API, you'll have to specify the item's ID which is found when fetching data in the Preview mode.

• Click Create new endpoint.
• Enter a name for this endpoint.
• Add the /{{ID}} in Add Path & Params.
• Add a Test value for the {{ID}}.
• Click the Test button next to the Endpoint input.
• 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 ID in the Configuration 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:

1. accepts user input and
2. has a Field Name prop to POST data using Example Data API.

Examples of these include:

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

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

In the new endpoint you'll need to:

• Enter a name for the Endpoint.
• Change the Method to POST using the dropdown.
• 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 the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
• In the Body tab you can provide a Test 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 the Body 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. You're able to add multiple fields to a request, just make sure you include a comma after each field.

{
  "id": {{ID}},
  "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 the Action tab and select the option Submit Data.
• Setup the Submit Data by selecting the Service and the Endpoint.
• 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 fields in a single item. 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 the Action tab and select the option Navigate.
• 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 Example Data API service. 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 {{ID}} of the entry to update in the Add Path & Params input.
• Add a Test Value for the ID to test the Endpoint.
• 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 the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
• In the Body tab you can provide a Test 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 Example Data API with an item's ID to remove that particular record from the table.

You'll need to create a new endpoint in your Example Data API 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 {{ID}} of the entity to delete in the Add Path & Params input.
• Add a Test Value for the ID to test the Endpoint.
• Click the Test next to the Endpoint to test if the endpoint is working correctly.
• Click Save.