Create a list & detail page from Google Sheets + Sheety
📖

Create a list & detail page from Google Sheets + Sheety

Bravo Studio enables you to connect your design prototype with real-time data coming from your favorite 3rd party software. Any data changes that happen externally will reflect live in your app, just like the real thing.

image

Outline

In this tutorial, you will learn:

What is a REST API?

An API means application programming interface. It is a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service.

Simply put, API is like a software intermediary that allows two applications to talk to each other.

A REST API is an application program interface that uses HTTP requests to GET, PUT, POST and DELETE data. REST stands for representation state transfer.

How does a REST API works?

REST APIs allows you to build any kind of application having all possible CRUD operations.

CRUD is an acronym for Create, Read, Update, delete operations.

Rest API uses HTTP methods such as GET, PUT, POST, DELETE. It uses GET to retrieve or call data from a source, PUT to change or replace the format of data, POST to create data and DELETE to remove data from its source.

Bravo Studio API features is so powerful that it allows you to use any Rest API ranging from Contentful, WordPress, Webflow CMS, and so on.

Building a Tourist Guide App with Bravo Studio

In this section, you will learn how to build a tourist guide app with data from a Rest API built with Google Sheet & Sheety.co and how to connect your design to the data in Bravo Studio.

Step 1: Sign up to Sheety.co with your Google account and grant Sheety the permission to read data from your Google Drive.

Step 2: Create a new project to build your first API from a Google Sheet.

image

Step 3: Enter the project name you wish to use for the API and paste the spreadsheet URL in the necessary field.

image

Step 4: The Rest API has been created, API endpoints are automatically generated from the sheets (the tabs) inside your spreadsheet. Copy the API Endpoint URL to make the API call.

image

Step 5: Set up your design in the supported design tool. Below is a sample Figma file if you are using Figma. https://www.figma.com/file/KK5ZTPaWk82uxgqelXzKrH/News-App?node-id=0%3A1

image

Step 6: Add container to each element in the app pages.

image
💡

Learn more about the containers concept here:

Step 7: In Bravo Studio, click New Project, and create a new app project based on which design tool you are using.

image

Step 8: Create new data collection in Bravo Studio, name the collection with a description and hit save.

image

Step 9: Copy the API endpoint URL from Sheety.co, paste it into the GET request URL field. Click send to fetch the data from the API endpoint and select the necessary data from the API response including the id.

image

Step 10: Create a new request for the details screen data, add /{id} at the end of the API endpoint to create a generic parameter that will allow the detail screen to correspond to each data in the home (list) screen. Click on the parameter tab to input the id received from the API response and click the send button to fetch the data. Select the necessary data from the API response including the id as indicated below.

image

Step 11: Go the project tab, select the app and bind each screen with the data from the API response.

image

Step 12: Select the home screen tab, bind the collections to the Tourist Guide collection you have created earlier. Set the request to the GET request. Click Add Content to select the layers from your design and bind them to the data contents from the API response.

image

Step 13: Select the details screen tab, bind the collections to the Tourist Guide collection you have created earlier. Set the request to the GET request and add the data contents from the selected API response corresponding to the layout of the app.

image

Step 14: See the results with 👏Bravo Vision Android: Download

iOS: Download

Demo of the app!

image

Conclusion

In this tutorial, you have learned about the principles and ways to use Rest APIs with Bravo Studio and how to connect the data from a Rest API with your design prototype in Bravo Studio.

With Bravo Studio, prototypes just got real. You can now turn design prototypes into native iOS & Android apps instantly without writing code.

Useful Links