Example Data
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:
- Click the Data tab 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 totodos
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 oflimit
being10
. - 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 totodos
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:
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 totodos
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:
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 totodos
for this example. - In Step 2: add
/{{id}
whereid
is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass theid
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 totodos
for this example. - In Step 2: add
/{{id}
whereid
is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass theid
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.
Updated 5 months ago