Build an app from your Notion

Notion is an application that provides components such as notes, databases, kanban boards, wikis, calendars and reminders. It’s a powerful tool to store content, and it has recently released its beta API access.

The Notion API allows us to connect with Bravo Studio and use this tool as a simple backend. ‍

Turn your Notion into a mobile app

We'll show you how to use Notion as a backend with Bravo. We'll connect two Notion tables to Bravo. The tables contain a list of videos and a list of podcasts from TED.

In order to follow the tutorial, access the Notion page below and duplicate it to your own Notion workspace.

Configure the Notion API

First of all, we need to add an integration to our Notion workspace. This will provide us an API key, which we can use to access the content we want to expose via API. This is done by following the first two steps indicated here. When creating the integration, select Internal Integration as shown below.

You should copy the Internal Integration Token and keep it somewhere safe.

After creating the integration, you need to give it access to our two tables. On our Notion page, we have two tables: one with a list of videos, and another one with a list of podcasts. For each of the tables, click on Open as page, and then share the page with the integration, as shown in step 2 here. Share the main page containing the two tables with the integration as well.

Now the two Notion tables are accessible via API! Let's jump into Bravo Studio and set up the requests in the Data Library.

Create the requests in the Data Library

After configuring Notion to allow for API calls targeting our tables, let's create requests in the Data Library.

Before creating the requests, we need to get the Database ID of the two tables we have. That's the string indicated below.

After copying those values, go to the Data Library in Bravo Studio, and create a new Data Collection. All the requests in the collection need to be authenticated. For that, you need to include the following header in all the requests, replacing API_KEY in the screenshot for the Internal Integration Token of your Notion integration.

The Notion API is versioned, so you need to add another header (shown below) indicating the version. You should check what the current version is here.

Choose between Retrieve and Query to obtain table data

Notion API offers two possibilities to obtain the table data: Retrieve and Query.

• The Retrieve option is performed via a GET request and returns all the data stored in the table.
• The Query option also returns the table data, but allows for sorting and filtering. It's performed via a POST request, as additional information needs to be sent in the request body. Feel free to explore all the options available in the Notion API reference

First we’ll obtain data via Retrieve

We'll now get the data in the Podcasts table via a Retrieve request. In order to do that, create a new GET request and use the following URL, with the Database ID for that table.

https://api.notion.com/v1/databases/DATABASE_ID

That request will return all the table data, together with all its properties. The data will come as a list of items, one item per table record.

Now, we’ll create a Query request

Now, we'll create a Query request for the Talks table. It will be a POST request. In this case, we want to get all the records of that table, sorted by the Importance field.

We'll use the following URL and JSON body:

https://api.notion.com/v1/databases/DATABASE_ID/query

{

  "sorts": [

    {

      "property": "Importance",

      "direction": "ascending"

    }

  ]

}

As you can see below, we'll get all the data in the Talks table, sorted by importance.

https://3338342343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mj4t98AM8ZTxmMzsBpl%2F-Mj4v9j-Shnv5iSjIeBM%2FPodcasts_Table.gif?alt=media&token=8f797bbb-91ae-4d92-a3a8-fef089ecc2b7

Explore all of Notion API possibilities

Now, we have two requests to get the data stored in our tables. In case you want to explore all the options the Notion API offers, you can check out the API documentation here.

Now you have the Notion data in Bravo, you can continue with data binding and connect the data to your app UI.

Bravo: the best tool to create an app from your Notion

Start building your no-code app with Bravo today! Design your wireframes using Figma or Adobe XD, connect Bravo with your database, test your app and publish to the App Store and Google Play. Access a ton of free resources for building your no-code app in our Bravo Academy. Happy Bravorizing!