How to fetch data from a REST API in an app UI using Draftbit

11
 min read
React Native
No Code
Low Code
Mobile App Development
Aman Mittal
Sep 7, 2021

In the first tutorial in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit’s Builder offer and how to implement them to create mobile app screens. In this tutorial, let’s apply this knowledge and learn how to use real-time data in the screens when building an application.

To fetch real-time data in an app, Draftbit Builder supports integrating REST APIs. You can connect nearly any third-party Service that exposes its REST API endpoints to a Draftbit app. We have a list of REST API integrations here that are officially supported. For the current example, let’s build the Discover Books screen using Example Data API.

Here is what we are building

Discover Books Screen

What is Example Data API?

Example Data API 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 to help you make better design decisions along the way. Data is gleaned from several open or creative commons sources. There are different data resources to satisfy specific use cases such as Books, Articles, Products, Orders, Podcasts, Product Reviews, People, etc.

Create Discover Books screen

The screen we are building in this tutorial is called Discover Books. It is going to be composed of two main elements. The first element is to fetch the data from a third-party REST API service. The second element contains introduction new UI components such as ScrollView, Fetch, and List to organize display the data fetched from the API service.

The Layout of this screen is quite long, thus, to understand, let’s breakdown it into sections as we go. The requirements to build the first section is to create the following:

  • Add an image background and a <code-inline>ScrollView<code-inline>
  • The first section of the <code-inline>ScrollView<code-inline> contains a header and a "Book of the day" sub-section.
  • The “Book of the Day” further includes a section title, a cover image of a book item, the title of the book, the author’s name, and a View More button with an icon. These details are going to fetch from the REST API.

Add a scrolling view

Let’ start by building the user interface of the screen first using components from the Builder.

  • Open the workspace in the Draftbit Builder, then open the app you are building.
  • Add a new <code-inline>Blank<code-inline> screen using the plus icon button in the left panel and call it Discover Books.
  • Add a background Image using <code-inline>ImageBackground<code-inline> Media component and use the same <code-inline>Source<code-inline> for it from the <code-inline>Configs<code-inline> tab of the Properties panel on the right side.
  • The contents of this screen are going to be wrapped inside a scrollable view. Add <code-inline>ScrollView<code-inline> from the Layout component.

The default scrolling orientation of the <code-inline>ScrollView<code-inline> component is vertical. For this particular screen, let's use the default orientation. To change it, you can go to the <code-inline>Configs<code-inline> tab:

Build a custom header

  • Add a padding-bottom of <code-inline>34<code-inline> to the ScrollView from the Styles tab.
  • To create the custom header, add a <code-inline>View<code-inline> component and a <code-inline>Text<code-inline> component as its child. Set the <code-inline>Align<code-inline> and <code-inline>Justify<code-inline> property of the <code-inline>View<code-inline> to <code-inline>center<code-inline>. Then, add the padding-top of <code-inline>24<code-inline>, padding-bottom of <code-inline>28<code-inline>, and a margin-bottom of <code-inline>14<code-inline>.
  • Set the background color for the <code-inline>View<code-inline> to the value of <code-inline>Primary<code-inline>, which is one of the pre-defined color values Draftbit Builder offers.
  • Set the styles for the <code-inline>Text<code-inline> in the Styles tab. The <code-inline>Font<code-inline> will have the value of the <code-inline>Headline3<code-inline> and the <code-inline>Color<code-inline> of the value <code-inline>Surface<code-inline>. In the Data tab, set its value to <code-inline>Discover Books<code-inline>.

Create an endpoint to get “Book of the Day”

In this section, let’s add a REST API endpoint to fetch the book item for the “Book of the Day” section.

  • To enable using a REST API, go to the Data tab from the left navbar. It will open a modal called Data & Services.
  • Under the Add a service menu, click the REST API.
  • Enter a name for the REST API service. It is going to represent the name of the Service to be displayed in the menu.
  • Paste the <code-inline>Base URL<code-inline> <code-inline>https://example-data.draftbit.com<code-inline> into the Base URL field. Make sure that there is no / at the end of the <code-inline>Base URL<code-inline>.
  • By default, <code-inline>Accept: application/json<code-inline> and <code-inline>Content-Type: application/json<code-inline> are the default HTTP headers in each REST API configuration. You can also add any Global Variables you've saved by clicking the '+' in the top right corner, giving the Header a name, and selecting your Global Variable from the dropdown. For this example, we do not require to add any other HTTP Header.
  • Click <code-inline>Save<code-inline>.

After you have created a new Service, you’ll be prompted to add new Endpoints for your service.

  • To fetch the book item, create a new REST API endpoint. An API endpoint is point of entry between an API and a server. The endpoint defines what information you are accessing from your API.
  • Under the Endpoints menu, click the <code-inline>Create new endpoint<code-inline> button.
  • Enter a name for this endpoint.
  • Add the <code-inline>/books/{{ID}}<code-inline> in Add Path & Params. The <code-inline>/books<code-inline> here is a required path to query one or many book items from the Example Data API. Add Path & Params allows appending a Base URL by adding parameters to fetch specific data from a REST API.
  • Add a Test value for the <code-inline>{{ID}}<code-inline>. The value of it could be anything that exists in the database using the API endpoint.
  • Click the <code-inline>Test<code-inline> button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click <code-inline>Save<code-inline> to save endpoint and click <code-inline>Done<code-inline> to close the modal.

Use Fetch component to display data on the screen

In this section, let’s display the book item fetched in the Draftbit app.

  • Add a <code-inline>View<code-inline> component adjacent to the previous one inside the <code-inline>ScrollView<code-inline>. Add padding-top and bottom of value <code-inline>34<code-inline>.
  • Add a <code-inline>Text<code-inline> component to this View as a child. In the Styles tab, modify its <code-inline>Font<code-inline> to <code-inline>Headline4<code-inline>, Color to <code-inline>Custom<code-inline> and <code-inline>Align<code-inline> to <code-inline>center<code-inline>. Also, add a margin-bottom of <code-inline>18<code-inline>. Then, add the text <code-inline>Book of the Day<code-inline> in the Data tab.

  • Select the <code-inline>Fetch<code-inline> component from the Lists & Data component menu that contains elements specific to be used to pull data from an external resource. Add it as a direct child to the <code-inline>View<code-inline>.
  • Go to the Configs tab of the Properties panel and select the <code-inline>Service<code-inline> as the REST API service created in the previous section.
  • Select the endpoint to be used to pull the data.
  • In the <code-inline>URL Structure<code-inline>, pass the value of <code-inline>1<code-inline> for the <code-inline>id<code-inline>.
  • The <code-inline>Fetch<code-inline> component here allows previewing the data fetched from the API endpoint before consuming it in the app.

To display the data, let’s set up the Layout of the section first. Here is what we are looking to build in terms of the components tree:

  • Add a <code-inline>View<code-inline> component under <code-inline>Fetch<code-inline>.
  • Set its <code-inline>Align<code-inline> property to <code-inline>center<code-inline> and add two children <code-inline>View<code-inline> components.
  • In the first child <code-inline>View<code-inline> component, add <code-inline>Container<code-inline> and give it a property of margin-bottom of <code-inline>14<code-inline> in Styles tab. Also, set the <code-inline>Overflow<code-inline> to <code-inline>Hidden<code-inline> and <code-inline>Radius<code-inline> to <code-inline>Global<code-inline>.
  • Add an <code-inline>Image<code-inline> with a <code-inline>width<code-inline> of <code-inline>150<code-inline> and a height of <code-inline>220<code-inline> in the Styles tab. In the Data tab, set the <code-inline>Source<code-inline> type to <code-inline>Data<code-inline> since the book item's image is being fetched from an external resource. This resource type here is the REST API endpoint. Set the value of <code-inline>Source<code-inline> to <code-inline>image_url<code-inline>.

  • For the second <code-inline>View<code-inline> component, set the value for <code-inline>Align<code-inline> property to <code-inline>center<code-inline>.
  • Add a <code-inline>Text<code-inline> component. In the Styles tab, set its <code-inline>Font<code-inline> to <code-inline>Headline5<code-inline>, <code-inline>Color<code-inline> to <code-inline>custom<code-inline>, margin-bottom to <code-inline>2<code-inline>. In the Data tab, select the <code-inline>Source<code-inline> type of <code-inline>Data<code-inline> and set the <code-inline>Value<code-inline> to <code-inline>title<code-inline>.
  • Add another adjacent <code-inline>Text<code-inline> component. In the Styles tab, set its <code-inline>Font<code-inline> to <code-inline>Subtitle2<code-inline>, <code-inline>Color<code-inline> to <code-inline>Medium<code-inline>, margin-bottom to <code-inline>2<code-inline>. In the Data tab, select the <code-inline>Source<code-inline> type of <code-inline>Data<code-inline> and set the <code-inline>Value<code-inline> to <code-inline>authors<code-inline>.
  • Add an adjacent <code-inline>Touchable<code-inline> component. In the Styles tab, set a margin-top of <code-inline>12<code-inline>.
  • Add a <code-inline>View<code-inline> component as its child. In the Styles tab, set the <code-inline>Direction<code-inline> to <code-inline>row<code-inline>, <code-inline>Align<code-inline> and <code-inline>Justify<code-inline> to <code-inline>center<code-inline>.
  • Add a <code-inline>Text<code-inline> component to the <code-inline>View<code-inline>. In the Styles tab, set its <code-inline>Color<code-inline> to <code-inline>Primary<code-inline> and give it a margin-right of <code-inline>6<code-inline>. In the <code-inline>Data<code-inline> tab, set the value to <code-inline>View<code-inline>.
  • Add an <code-inline>Icon<code-inline> component adjacent to the <code-inline>Text<code-inline>. In the Configs tab, set the <code-inline>Name<code-inline> of the icon to <code-inline>chevron-right-circle<code-inline>, the Color to <code-inline>Primary<code-inline>, and <code-inline>Size<code-inline> to <code-inline>18<code-inline>.

Create Endpoints to display data in horizontal lists

Over the next two sections in this tutorial, the focus will be on creating two horizontal lists in the Discover Books screen. These lists are going to display multiple book items. In this section, let’s start by making these two endpoints.

  • Open the Data modal from the left navbar.
  • Click on the <code-inline>Draftbit Example API<code-inline> under the Connected menu or the name you have given previously when connecting the REST API.
  • Under the Endpoints menu, click the <code-inline>Create new endpoint<code-inline> button.
  • Enter a name for this endpoint.
  • The first endpoint is going to fetch the books by a parameter called <code-inline>rating_count<code-inline>. This parameter orders the list of book items according to their rating. Using the query parameter <code-inline>_sort<code-inline>, pass the <code-inline>rating_count<code-inline> as its value. Then, let's set the <code-inline>_limit<code-inline> of the book items to fetch to <code-inline>10<code-inline>. Lastly, pass the query parameter <code-inline>_order<code-inline> with a value of <code-inline>desc<code-inline> to order the book items in descending order.
  • Append the Base URL by adding <code-inline>/books?_sort=rating_count&_limit=10&_order=desc<code-inline> in Add Path & Params.
  • Click the <code-inline>Test<code-inline> button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click <code-inline>Save<code-inline> to save endpoint and click <code-inline>Done<code-inline> to close the modal.

  • Under the Endpoints menu, click the Create <code-inline>new endpoint<code-inline> button.
  • Enter a name for this endpoint.
  • This endpoint is going to fetch the book items listed on page 1. The pagination when using Example Data API requires to use a query parameter called <code-inline>_page<code-inline>.
  • Append the Base URL by adding <code-inline>books?_page=1<code-inline> in Add Path & Params.
  • Click the <code-inline>Test<code-inline> button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click Save to save endpoint and click Done to close the modal.

Create horizontal lists

The first horizontal list is going to display the books that are trending.

  • Add the child <code-inline>View<code-inline> component to the <code-inline>ScrollView<code-inline> with a padding-top and bottom of <code-inline>34<code-inline> in the Styles tab.
  • Add a <code-inline>Text<code-inline> component to this View to display a section title.
  • In the Styles tab, set its Font to <code-inline>Headline4<code-inline>, <code-inline>Color<code-inline> to <code-inline>Custom<code-inline>, and <code-inline>Align<code-inline> to <code-inline>Center<code-inline>.
  • Also, set the value of margin-bottom to <code-inline>18<code-inline>. In the <code-inline>Data<code-inline> tab, set the title to <code-inline>Trending<code-inline>.

  • Select the <code-inline>Fetch<code-inline> component from the Lists & Data component menu that contains components specific to be used to pull data from an external resource. Add it as a direct child to the <code-inline>View<code-inline>.
  • Go to the Configs tab of the Properties panel and select the <code-inline>Service<code-inline> as the REST API service created in the previous section.
  • Select the endpoint to be used to pull the data.
  • The <code-inline>Fetch<code-inline> component here allows previewing the data fetched from the API endpoint before consuming it in the app.

  • Add <code-inline>List<code-inline> as a child component to the <code-inline>Fetch<code-inline> from Lists & Data.
  • In the Styles tab, set the <code-inline>Direction<code-inline> to <code-inline>Row<code-inline> and add padding-left of <code-inline>32<code-inline>.
  • In the Configs tab, make sure to select the <code-inline>Horizontal<code-inline> to true.
  • In the Data tab, set the value of <code-inline>Mapped data value<code-inline> to <code-inline>data<code-inline>.

  • Add <code-inline>View<code-inline> as a child component to <code-inline>List<code-inline>. It is going to represent an individual book item in the list. In the Styles tab, set the margin-right of <code-inline>32<code-inline>.
  • Add a <code-inline>Touchable<code-inline>.
  • Inside the <code-inline>Touchable<code-inline>, add another <code-inline>View<code-inline> component with a <code-inline>Container<code-inline> as its child.
  • In the Styles tab for <code-inline>Container<code-inline>, set the <code-inline>Width<code-inline> to <code-inline>80<code-inline> and <code-inline>Height<code-inline> to <code-inline>118<code-inline>. Also, set the <code-inline>Position<code-inline> > <code-inline>Overflow<code-inline> to <code-inline>Hidden<code-inline> and <code-inline>Border > Radius<code-inline> to <code-inline>Global<code-inline>.
  • In the Configs tab, set the <code-inline>Use gutter padding<code-inline> property to false. Set the <code-inline>Elevation<code-inline> to <code-inline>3<code-inline>.
  • Add <code-inline>Image<code-inline> to the <code-inline>Container<code-inline>. In Styles tab, set its <code-inline>Width<code-inline> to <code-inline>80<code-inline> and <code-inline>Height<code-inline> to <code-inline>118<code-inline>. In the Data tab, set the <code-inline>Source Type<code-inline> to <code-inline>Data<code-inline> and then select the <code-inline>Source<code-inline> to <code-inline>image_url<code-inline>.

  • Add another <code-inline>View<code-inline> component adjacent to <code-inline>Container<code-inline>. In the Styles tab, set the margin-top to <code-inline>10<code-inline> and the <code-inline>Width<code-inline> to <code-inline>80<code-inline>.
  • Add the <code-inline>Text<code-inline> component to represent the title of the book item.
  • In the Styles tab, set its <code-inline>Font<code-inline> to <code-inline>Subtitle2<code-inline>, <code-inline>Color<code-inline> to <code-inline>Custom<code-inline>.
  • In the Configs tab, set the value of the property <code-inline>Max number of lines<code-inline> to <code-inline>2<code-inline> such that the longer book titles are truncated.
  • In the Data tab, set the <code-inline>Source<code-inline> to <code-inline>Data<code-inline> and then set the <code-inline>Value<code-inline> to <code-inline>title<code-inline> that represents the actual title of the book item fetched from the REST API endpoint.

The second horizontal list is going to have the same UI elements we have just created. It differs only in the list title and data source.

You can use the option to Duplicate the whole custom block. Then, change its title and data source.

Here is the final output:

Resources

💜 We at Draftbit love our Community and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit.

Reach out to us on twitter/@draftbit for more questions.

Now in open beta!