How to Create and Connect a Sheety API to Draftbit

How to Create and Connect a Sheety API to Draftbit

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.

image

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:

image

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 16pt top 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.

image

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.

image

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.

image

Next, select the List component and change its Mapped Data Value to data.list in the Data tab.

image

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!

image