Integration with Notion

[00:00:00]
>> We are going to actually start saving this information, so we're going to start handling Notion. So this is a Notion database. The way that this works is that it's got a whole bunch of cool features for managing and sharing data. You can do different views and everything.

[00:00:21]
What we are gonna use it for is just this kinda limited set of, we want items that have a few details in them, who submitted it, what the status is, what the spice level is, and we wanna show those in a progress board. So to do in progress and complete.

[00:00:42]
This is set up to be sharable, and what we're going to do then is we need to create a Notion app. So we need an app here so that we can read and write from this database. So to do that, we go to notion.com/my-integrations, and this allows you to create integration.

[00:01:10]
So as we did before, I'm gonna delete this one and we'll start from scratch. First, we're gonna choose the right workspace. We are going to use the, I created one called Frontend Masters ChatOps. If you created a new workspace, make sure you actually select that. Then we are gonna call it Food Fight.

[00:01:27]
And then we will run this image command here, or we will use the image from the starter repo. Submit, and then next, we wanna go to capabilities and make sure that our bot can do all the things that it needs to do. So we're gonna make sure that it can read, update, and insert content.

[00:01:43]
These are the only pieces we really care about. We're not gonna be doing anything comments, and again, we're not gonna be trying to sync users based on email or anything, so we don't need any user information. That is always something you can add later, so feel free to kinda go with the minimum set of permissions to start, so we can save that.

[00:02:02]
And now when we go over here and refresh the page, and up in the top right, there's this context menu. Click that, go to Add connections, and search for your connection. There it is, and it's gonna have access to this and all child pages. We wanna be able to manage this database, so that's what we want, so we can confirm.

[00:02:28]
Now we need to get our Notion credentials into the environment variables. So to do that, we're going to head into our integrations again, get our secrets, and this is going to, I'm gonna copy this and go back into my code here. And we'll open up the .env and we're gonna add a new one called NOTION_SECRET and drop that in there.

[00:02:59]
And then we also are gonna need the NOTION_DATABASE_ID. And the way that these work is that if you look at the URL of your, make this bigger. If you look at the URL of a database, it's gonna have two hashy-looking numbers. The first one here, that's your database ID.

[00:03:22]
And then this query string here, v, that's not the piece you need. So just copy this, and then you can head back into your .env and put that in, save it, and close it. So then what I'm gonna do is stop and restart this again. Because we've changed the environment, so we need to make sure that all of our environment variables are being loaded.

[00:03:50]
That gives us a new hash for the live, so I'm gonna go update that in Slack. And that has to be updated in two places now. So we're gonna update this one and save. And then we're gonna go into our slash commands, edit the food fight, And change that one and save.

[00:04:15]
So now when we make calls to the Notion API, they're going to have the proper permissions, we're gonna be able to do that. And because we changed our local dev, that changes the hash, we have to update those URLs. Next up, we are going to create a Notion helper function.

[00:04:37]
And this is gonna be very similar to the Slack utils that we put together. In this case, it will be for Notion. So this src > util > notion is already stubbed out, so you can just open up that file and we will put everything in here. And this one is going to export async function notionApi.

[00:05:02]
And that's gonna have an endpoint, and that's gonna be a string. And then it's gonna have a body, and that's gonna be an object by default. Next, we're gonna set up our response that's going to await a fetch call. And that goes to https, api.notion.com is the base, and then /v1 for the version of the API that we're using, and then we pass in the endpoint.

[00:05:39]
It's going to be sent as a post, and then we've got some headers. The headers that we need to include are an accept header so that we get back JSON. Then we wanna set up our authorization, and that is also going to be a bearer token just like we did with Slack, except this time we're using process.env.NOTION_SECRET.

[00:06:05]
Then we want the Notion version. This is a required header from Notion to let us know what version of API we're requesting. The latest, I believe, that they show is this 22-06-28. And finally, we're gonna send the content type to let Notion know that we are sending in JSON as well, so application/json.

[00:06:31]
And the body will be stringified JSON. And if something goes wrong, we'll just catch that and throw it out to console.error. Otherwise, we're gonna check if there's no res or res.ok is false, then we're gonna console.log the error as well, or the whole response. And finally, we'll grab that data and await res.json.

[00:07:10]
And we're just gonna, because it might be undefined, we'll do one of these, then we're gonna return our data. So this is how we will get data out of Notion, and this gives us the ability to send and receive data, so we'll be able to create new entries as well as reading data from the databases.