What is Sheety?

Sheety allows you to use Google spreadsheets as a database and use the information stored in the spreadsheet as a REST API. The API can be used to create prototypes and apps. For Sheety to serve your spreadsheet as an API, it needs to be in a particular format. With a few tweaks to your spreadsheet, you can make it compatible with Sheety.

Integrating Draftbit & Sheety

Setup steps in Sheety

If you don't have a Sheety account, create on here. To get familiar with Sheety, check out their getting started guide.

Before you start with Draftbit, make sure you have a Google apreadsheet created. To create a new spreadsheet:

  • From docs.google.com/spreadsheets, under the Start a new spreadsheet section, click on the Blank template.
  • You can start from scratch or start from an existing template (in this case, make sure to follow Sheety guidelines to format data in the spreadsheet).

For this guide, we will use a Google Spreadsheet created from scratch.

Get your REST API URL

  • From the Sheety dashboard, click on the New Project drop-down menu and select From Google Sheet.
  • Paste the Google Sheet URL
  • On success, it will read the Sheet name. This gives you chance to verify that the data to be used is coming from the correct sheet in the spreadsheet
  • Click Create Project to generate a Sheety API project.
  • On creating a new project, API documentation is generated as well as the REST API endpoint.
  • After fetching the API URL, enable the REST endpoints you want to include or use in your Draftbit app.
  • Each endpoint such as POST, PUT, and DELETE are disabled by default.
  • You will have to enable each one of them by the toggle button next to each endpoint.

Get Authentication Token

Sheety allows you to generate your Authentication token. It is required to access the API.

  • From the API tab, go to the Authentication tab.
  • From the left-sidebar that says Type, select the authentication type to Bearer (Token).
  • Then add a custom Token in the input field and save the Authorization Header value which is to be used in the next section.
  • Click Save Changes from the left-sidebar.

📘

This step is optional. If you want to create an API using Sheety with public access, you do not need an authentication token.

Setup steps in Draftbit

Save Bearer token key as Authorization Header

To access the API in the Draftbit app, you need the pass the Authentication token as the value for the Authorization header and define the header as the global variable.

  • Open the Settings tab from the top navbar menu.
  • In Project Settings, navigate to App Variables.
  • Enter a name to access the API Key and the value for it. For example, Authorization_Header.
  • The value of this key requires you to enter an authorization token that starts with syntax is Bearer <your-token> (the space between Bearer and ` is required).
  • In place of paste your own ` (from the previous section) and then click Add.
  • Click Save.

Add the Sheety API URL in the Draftbit app

  • Open the API & Cloud Services tab on top navbar.
  • From the Add a service menu, click on Rest API.
  • Enter a name for your REST API.
  • Paste your REST API URL into the Base URL input field.
  • Click the + from the Headers section to add a new Header.
  • Type Authorization for the Key.
  • Select the Global Variable for Authorization_Header (from the previous section).
  • Click Save.

Using Sheety with Draftbit

Fetch all records

In this section, let's populate a Fetch component with all the data from a simple Google spreadsheet and then display the data fetched from the Sheety API 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 try fetching the data using a GET HTTP request. Open the Data modal, select the API service, and then:

  • Click Add endpoint.
  • In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Google spreadsheet.
  • 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 Sheety API Service.
  • For Endpoint, select the endpoint you want to fetch the data from.
  • Select the List component in the Components tree and go to the Data tab from Properties Panel.
  • For Data, select records 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 Google spreadsheet. For example, we add {{title}} to represent the column name from the Google spreadsheet.
  • Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

Fetch a single record

In this section, let's populate a Fetch component with a single record from the Google spreadsheet. For reference, here is a how the Components tree looks like for this screen:

Also, from the List screen, we are sending the id of each list item as a navigation parameter when an action is triggered on the Touchable/Button component. This action will let you navigate to the screen where a single record is fetched and its details are shown.

To fetch a single post from a Google spreadsheet, 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 API & Cloud Services modal from the top menu, select the Sheety API service, and then:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint.
  • 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 Google spreadsheet.
  • 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 Sheety 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 to Navigation > id.
  • 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 the data field from the Google spreadsheet. For example, we add {{title}} to represent the field and value from the Google spreadsheet.
  • Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

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 Field Name prop

You can use any component that contains a Field Name 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 Sheety service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • 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.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Google spreadsheet.
  • Click Save.

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.

{
  "sheet1": {
    "title": {{textInputValue}}
  }
}

Using a Touchable/Button component, you can trigger the action API Request to submit the data to the endpoint.

Update data

The PUT request is used to update the single entry in the Google spreadsheet. 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 Field Name prop to update data using an API Request

You can use any component that contains a Field Name 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 Sheety API service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to PUT.
  • In Step 2: add the /{{id}} variable. Then, add a Test value for the {{id}}.
  • In Step 3: add a valid Body structure to submit a PUT 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 Google spreadsheet.
  • Click Save.

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.

{
  "sheet1": {
    "title": {{textInputValue}}
  }
}

Using a Touchable/Button component, you can trigger the action API Request to update the data to the endpoint.

Delete data

The DELETE request is sent with an item's id to remove that particular record from the table.

For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Sheety API service. In the new endpoint you'll need to:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to DELETE.
  • In Step 2: add /{{id}} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id 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 Google spreadsheet.
  • Click Save.

Using a Touchable/Button component or an Icon Button, you can add the API Request action to trigger the DELETE request.


Did this page help you?