If you've seen previous tutorials, you're probably familiar with connecting Example Data and Airtable to your app in Draftbit. In this tutorial, we'll show you how to turn a Google Sheet into a REST API with a different tool called Sheety. Then, we'll show you how to connect your Sheety API to your app in Draftbit.
To get started, make sure you have:
- a Sheety account
- a Google Sheet to connect to the service
- an app in Draftbit
If you don't have a Google Sheet you'd like to use, but would like to still learn how to connect a Sheety API to Draftbit, you can still follow along. An example Sheety API will be provided to you later in the tutorial.
If you don't have a Sheety account already, you can sign up on the site by connecting your Google account. Once you have an account, you can begin by clicking the 'New Project' button in the top right.
Enter a Project Name, paste the URL of your Google Sheet, and click 'Create'. Once your project is created, click the 'Sync' button next to the API Endpoints header on the left-hand side to generate the endpoint for your project.
If you click the name of your endpoint, you'll be taken to Endpoint Settings page where you'll be able to see the:
- Endpoint URL
- HTTP Methods (you can enable/disable)
- Endpoint Schema
If you click the Authentication tab, you'll see options for enabling/disabling authentication.
It's best to enable authentication on an API endpoint especially if you have POST, PUT, and DELETE methods enabled. However, for example purposes, we'll leave this endpoint open.
Go back to the Endpoint Settings page, copy the Endpoint URL, and open your app in Draftbit.
Setting up Your Screen
Add components to your App so that it matches the Layer Tree as pictured in the screenshot below:
We're only going to make a few basic changes on this screen.
On the First Text component change:
- Font to
Headline4 - Text Align to
Center - Text to the title of your List (I used
Favorite Albums) - Add
16pttop Margin
On the Second Text component change:
- Text Align to
Center
Next, we'll connect and configure the endpoint.
Setting up the Service
Click the Data button on the left-hand side of the Builder and add a new REST API. Give you API a name (I used Sheety) and copy https://v2-api.sheety.co/60b719662d5f6bd627d6a8fd3422f574 into the Base URL endpoint so it matches the picture below.
Click "Save" and then click "Create new endpoint". Give your endpoint a name (I used Albums) and copy 2020Albums/list into the "Add Path & Params" input. Click "Test" to make sure you're successfully hitting the endpoint, then save exit the window.
Mapping the Data
Select the Fetch component in the Layer Tree and go to the Data tab. Select the Sheety service from the Service dropdown and your Albums endpoint should automatically populate.
Next, select the List component and change its Mapped Data Value to data.list in the Data tab.
The last step is to map the data to the Text component so the list appears on the screen. Select the Text component in the Layer Tree, and select album from the Text dropdown. Once you've selected that, you'll see the list of albums appear on your screen!
