The New Notion API | Node.js Video Schedule Project

[Music] what's going on guys so last week i was experimenting with the new notion api and if you don't know what notion is it's a productivity tool that you can use for just about anything it's great for project management i use it to plan out youtube videos and courses and some other things and this api i think it was released last week it's very new and it allows us to fetch data from our notion account so i thought this would make for a good video and this is something i actually plan on doing so within notion we're going to create a calendar database and you can create all different types of things but we're going to create this upcoming youtube videos calendar and basically just manage videos like you can see we have three listed here a react crash course it has a date some tags in the description and then we want to use the api along with this sdk for javascript so we're going to be using a little bit of node.js to fetch the data and then we're going to create our own custom endpoint to fetch that data and put it in a web page like this all right so this page here you'll see if i reload it's going to fetch the data from notion and it goes through a node.js back end and through this sdk all right so you'll see if i come over here in notion and let's say i want to add a video here i'll just call it test video and it's just say test for tags and test for description so i'll add that in notion and then if i go to my website and reload that's going to show up here and again this is something i plan on doing when i revamp my website so i can show all my upcoming videos and you could create anything at all just a task list or a job board whatever there's different templates you can use in notion so i thought it was a good idea and hopefully you guys enjoy it so let's get into it all right so the first thing we need to do is log in if you don't have a notion account just click on sign up and create a free account and then we'll go ahead and log in i have an account that i'm using just for this tutorial so this is pretty much a brand new account and if you have used notion before this will look very familiar but basically you have on the side here all your different pages lists whatever you want to create there's a task list these are here by default task list journal reading list i did create this job board but what we want to do is add a page and we're going to call this upcoming we'll say upcoming youtube videos and there's a whole bunch of different templates we can select under here you see database you can create like a basic database table a board or list i'm going to create a calendar which is going to give us this nice ui where we can just select a date and add a new item all right so what i'm going to do is just click on a random date here and add new item and let's create a video so we'll say this is when i'm going to release the react crash course and it already has the date here that i selected it has a tags field or they're called properties in notion but this is a multi-select by default i'm just going to change it to text and then we'll just add javascript and react as the tags and then i'm going to add another property of description and then that's going to be a text field and i'll just say this is the react crash course obviously if this were real it would be a little more descriptive but that will add a video on the 25th so now i'm going to go down here i'm going to add another one let's say view crash course and tags and it'll remember the tag the properties that you create and the type so for this let's say javascript and view and then description all right so that's two let's add one more say laravel and tags we'll do php laravel and then description okay so now we have three videos so we essentially just we would just manage our videos here we can edit them and delete them and now we want to start to work with the api so this is developers.notion.com and this is where you can find all of the documentation if we look at api reference on the side here you'll see we can deal with databases we can retrieve query and list databases we can also work with pages blocks and users so i'm going to click on list databases and ultimately we're going to be using the sdk here but we can just make a simple get request to this right here this is to list out your databases so i'm going to go ahead and open up postman and create a new tab and if you're following along you can use postman or you can use some other http client let's make a get request to that and naturally we're going to get some kind of unauthorized right because it doesn't know who we are doesn't know what account we're using so we have to authenticate so if we look at authentication uh actually this just shows us the code that we're going to be using but we do need to create an access token and the way that we do that is through an integration so up here you'll see it says my integrations i'm just going to open that in a new tab and you'll want to just create a new integration i have one here called notion one that's what i'm using but you want to create one and you can name it whatever you want and just make sure you keep the internal integration checked here and then you're going to see your token or your secret right here okay so what i'm going to do is copy that and then go to postman and i'm going to add that as a bearer authorization so under authorization i'm going to choose bearer token and paste that in and send and you'll see i no longer get a 401 i i get this 200 response which means everything's okay however we don't see our database in results it's empty and the reason for that is when you want to add a database you have to share it with the integration so i'll go back to my calendar here and click share and you'll see it says add people emails groups or integrations if i click that i'll be able to select my notion one integration okay so now i'm sharing it with that integration so now if i send this again i'm going to see all my databases which i just have this one it shows me the database id which we're going to need to query it shows me like the the name here inside title which is an array of objects we have the name the different properties and so on it's not going to show me the values that's that's querying which we'll get to in a little bit but that's what we need to authenticate is that token so now that we know we can actually access the database we're going to jump into vs code and i just have a completely empty folder here called notion youtube schedule and from here i'm going to open up a integrated terminal and let's go ahead and create a package.json with npm init and i'm just going to throw in dash y okay and then we want to install a couple packages here so the first one is going to be the notion sdk which is going to be at notion it's notion hq slash client i believe let me just double check that yeah so notion h2 slash client and then i'm also going to install dot e and v so that we can have environment variables inside of a dot env file and then also express we don't really need express but it's i'm just installing it so that we can easily create an end point and a static folder for our front end so let's go ahead and install those and you should see those show up here in your package.json and then i'm just going to create a script to run the index file that we're going to create so let's call this start and let's get rid of this here and this is just going to run node index so it'll run index js which i'm going to create right now okay and then in here let's just do a console log one two three and just make sure that this runs so if we say npm start you should just see one two three all right so let's get started up here by just bringing in what we need so first of all i'm gonna bring in dot e and v because i want to be able to create some environment variables so we want to require dot env and then you just want to add on to this dot config which is a method so add parentheses and then we'll be able to basically store environment variables in a dot env file so let's just save that and create a dot env and in here we're going to have our notion underscore token i'm also going to have my notion underscore database underscore id that we want to work with so the token we can get we already saw where we can get that that's within the integration so i'm going to copy that and let's just put that in there and then the id i can get from postman so it's going to be this database id right here it's the only database i have i'm also going to show you how we can get the database id through the sdk as well just in case you didn't do the postman thing so let's just save that and close that up now we're going to bring in the client from the sdk so cons client is going to equal require and that's going to be at notion hq slash client okay then we want to initialize a client so we do that by creating a variable we'll call it notion and set that to a new client and inside here we just pass in an object with an auth and that value is going to be our token which we can get from process dot env dot notion underscore token okay now to list out our databases we don't actually need to do this for the project but i'm just going to show you how to do it we'll create a function here called list databases if i can spell so list databases and let's make that an async function now we're making it async because the methods that we use with this this client they're going to return a promise so we're going to be using a sync away and in here let's just go ahead and say const res and to make the request we can await notion.databases and then dot list so we can call this list method and then i'm just going to console.log here red so we can see what that gives us and then we'll just call that list databases okay so we'll run this here let's run npm start and see what we get okay and we should get just the same thing we basically got from postman which is this results which will have all of our different databases um in the console it's not going to show us like the actual array and objects unless we specifically uh ask for that but you can see it gives us the id which is what you need so that's going to match you know whatever we have in this right here okay now we don't actually need to list out our databases i just wanted to show you how to do that so i'm gonna we'll just uh yeah we'll just get rid of this so the actual thing we want to do is fetch our videos from notion so let's create a function here i'm gonna call this get videos and this is going to be a sync and the method that we want to call is going to be notion.request so i'm going to create a variable here so this will be our data and we want to await notion.request and that's going to take in an object or a payload i'm actually going to put that in a separate variable here we'll just call this oops payload and what this is going to have in it is the path so we're going to use some back ticks here now the path we want if we look at the the docs here and we go to query a database you can see the path you can ignore this right here we don't need this since we're using this client but it's going to be databases slash and then the id and then query so i can just copy that and we'll put that in here but we want to replace this with the database id and we have that in our dot env file so what i'll do is just create a variable here called database we'll call it database id and say process dot env dot and what i call it notion database id i think yeah so that will put that in that variable and then we'll replace this right here actually we'll just wrap this in money sign and curly braces and that should put the database id variable in there now another thing we want to add here is the method and the method is going to be a post request if we look at the docs you'll see this is a post request and what this gives us is this right here an object that has this results array within it so what we can do is just destructure instead of just calling this data we can destructure it and just get the results array and then we could even just console.log results here and then call this and we can try that out so we'll go ahead and clear this up npm uh what's this cannot destructure path of undefined oh i didn't put the payload so you want to make sure you pass that payload object in all right so this is what it gives us it gives us three different uh objects each one is a separate video and it has the id it has a created time and then it has the properties with the values which are which are objects so we don't we can't see them right here but it does get the data so we know we're actually fetching the data and what i want to do is loop through these results and basically just kind of construct our own object from it right so let's get rid of this console log and let's create uh and there's a lot of ways we could do this we could just loop through it and create it i'm going to use map and put the results into a variable called videos so we'll set this to results and we're going to map through we'll say for each page because that's essentially what it is it's a object of page so for each one i'm going to want to re actually let's just let's console.log just so we can see what this gives us which is pretty much going to be the same thing we just saw but we can see in properties we have these objects here for date tags description and name the values we actually want for instance for our description is going to be in this rich text array so we have to kind of dig into this a little bit so page dot properties and then we could do like dot description and then what rich text let's see rich underscore text which is an array and we want the first value let's see what that gives us okay so so it's giving us all of the descriptions inside rich text in that array we have a text object so we have to kind of dig in to get get what we want we have text and then content that's where this the text is we want so it would be dot text dot content all right so if i run this again it should just show us all the different descriptions so that's how we kind of how we have to structure this and it depends on the type of property this is for a text field for date it's going to be a little different so what i'm going to do is return an object the id is right in the page so we can just do page dot id but for like the title i'm just going to grab this right here the title is a little different too because that's the actual name so it's going to be instead of description it's going to be name and then that has a property or an array actually called title we want the first value in there and then we want the text content all right and we're going to add some other fields here but just for now let's go under the map and just return videos and then we'll just console.log well let's let's put this in a variable we'll say const say end videos for notion videos i'm not going to keep this code it's just to run this and check it out so we'll do a console log of n videos okay let's see what we get here oh since it's a promise because we are returning a promise here so what we could do is just run this in an iffy so we need an async function here so we'll say async and then yeah we'll do that and then we'll just grab this this isn't going to stay here it's just to run this and we have to await get videos all right so let's run that and if we take a look now we've constructed this object here that has the id and it has the title of each video so there's a couple other things we're going to want i'm going to copy this down we want the date so i'm going to call this date and to get that we want page.properties and then the field is called date now we don't have a title or anything like that so we want to get rid of this and it's just lowercase date and then start start that's how we can get the date and then for let's see we have the tags which is going to be similar to actually similar to this for the description so i'm just going to grab that because it's a text field so it's going to be rich text actually we'll keep that here and call this description and then for tags let's uh copy that and change this to tags and this to uppercase t tags and then that should work rich text because it is a text field all right so let's save that and then we should get an object with all the different values so id title date tags and description and that's ultimately what we want to return from our own api so that we can hit that from the front end and then display it on a web page okay so now that we can get the data from the api using this client using the sdk i want to create an endpoint so i'm going to be using express and i don't want to keep all this code here i want to just move this so everything here except where we called it i'm going to cut that and i'm going to create a new folder called the uh call this services actually and let's create a new file here i'll call it notion.js and we'll paste this in and all we really want to do here is export this get videos so let's say module dot export um you know what i'm actually going to make this a regular async function so we can just get rid of this module exports equals async function all right so now we should be able to bring this get videos in to our index.js and call it just like we did here so let's say const get videos we want to require that from dot slash services slash notion and then i'm going to save this and run it we should see the same thing except now we have it all that code in a different file good so now let's get rid of this right here and let's just set up a simple express server so we'll say const express and let's require express and then we'll define a port as well so let's say port set that to process env.port and if there is no environment variable set then we'll use 5000 and then we want to initialize our app variable with express and then let's listen on that port and then we'll just do a console log let's do a console log of server started on port and then whatever that port is which in our case in my case will be 5000 so let's just make sure that this runs so npm start should now run your express server i'm going to just cut it off and let's uh let's create a route now for our videos so we'll go right here and let's say app.get so we'll make a get request to slash videos then we have our function which is going to be async because get videos returns a promise and we need our request response uh what did i do here there we go all right so in here we're just going to create a variable called videos and set that to a weight get videos just like we did earlier and then we're just going to respond with jason from this route we're going to respond with those videos so we'll save that let's run our server and then i'm going to open up postman and let's hit http localhost i have it here let's do localhost 5000 and slash videos and there we go so now we're able to fetch those fetch these objects the exact data that we want for our front end so as far as the front end goes like i said earlier you could use react view whatever you want i'm just going to create a simple we're just going to use vanilla javascript with some simple little html and css now to do this i mean we could we could create the site anywhere the front end anywhere but i'm going to use a static folder from within express so we can just add a piece of middleware here and just say app.use and then express dot static and we'll call this the static folder public so that's where our front end will go and then let's go over here let's create a new folder called public and inside public let's create a file called index.html and we'll just put some boilerplate in here i'm just going to say traversing media and actually in the body we'll just put hello so if i restart the server now and you can install nodemon if you want well actually from now on we're just working in the front end so you don't have to restart the server but let's go ahead and visit now let's see we'll go like right here and just go to http localhost 5000 and you should just see hello so it's loading that that index page statically so now let's work on the front end here so the html is actually really simple let's uh you know what we can view these on the same screen here all right so we'll create our css and stuff after let's just do the html so in the body let's have a header and in the header we'll have an h1 say traversing media and then let's have an h3 and we'll say upcoming videos and then underneath actually i'll just save that all right and then underneath the header we're going to have a main tag and i'm going to have a loader like a a gif that shows a loading you know a spinner before it loads so let's have a div with the id of loading and in here i'm going to have i'm going to have an image i'm going to put in my public folder here so i'll have a folder called images and i'm going to bring over the image i'm going to use which you can get from the github repository if you're following along so it's just a spinner and i'm going to show that by default and then what we'll do is when we fetch the data we'll make it go away but let's for now put an image tag in here that goes to slash images slash and then loading dot gif so if i save that and reload my browser i should see it it's pretty big but we're going to fix that with css and i'm just going to comment it out for now so we don't have to look at it and then underneath that we just need an id with videos which is going to be where we output all our videos okay and that's it for the html actually let's link in our style sheet and javascript file which we haven't created yet so let's add a link here rel stylesheet and this is going to go to css style.css and then down here above the ending body tag let's add a script source and js slash main.js and now we have to create those so inside public let's create css folder and then style.css now this the css i'm just going to paste in this isn't you know i don't want to have to type all this out and you can just grab this from the uh from the repo so just styling each video class the loader the header using the montserrat font so i'm going to save that if i reload we should see the style change and we also want to create in public a folder called js and inside js let's create a main.js and this is where we want to have our front-end javascript to fetch from our api so the first thing i'm going to do here is bring in the videos call this videos l for videos element and we'll use document.query selector and we want the id of videos we also want the loader or loading so we'll call this loading element and then let's create actually this is going to be let because loading is going to change depending on the state so let's make this false by default and then i'm going to do this in a pretty simple way we're going to have two functions one is going to get is going to be to get the videos from the back end one is going to be to add the videos to the dom okay so very simple and again i think i said this like three times already you could use react or something if you want so let's create a function called get videos from back end and it's going to be async and we'll use it i'm just using an ad you don't have to use an arrow function here if you don't want to just make sure it's async and then let's set loading let's see we'll set loading to true because we're going to start to fetch we'll create uh res and we're going to await and then use the fetch api to hit the http localhost 5000 so our server but we want to hit slash videos okay and then let's uh get the data so we want to await here res.json and then we're going to set loading let's set that equal to false because it's been loaded and then finally we just want to return our data so that's going to get the videos from the back end and then we want to add them to the dom so let's create another function we'll say add videos to dom and here we want to create a variable called videos and then set that to a weight get videos from back end all right we can actually just console.log videos here and then we'll call add videos to dom and now if i go over here and reload and we open up our console we should see an array with the three objects with the data okay so we know that we're getting the data now we want to think about adding it to the adding it to the dom here so let's get rid of the console log for the loader we want to make sure let's say if not loading so if it's not loading then let's take our loading element and set the inner html we're going to set that to nothing if it's not loading so i'm actually going to save that and then uncomment in the index.html i'm going to uncomment the image here or the div with the idea of loading so now if i reload you'll see the spinner for a second and when it's done fetching from our api it'll go away so that's good let's go underneath that if statement now and we're going to take videos which is an array of our you know video objects and i'm going to use for each here and loop through so we'll say for each video i want to construct a div so we'll say div we'll set this to document dot create element and we're going to create a div element and i want i wanted to have a class of video because just for styling so we'll say div dot not add class class name and we'll set that to video okay so create a div it'll add the class then let's take the div and let's add in our html set that to a template literal and we'll just put the rest of the stuff in here so we'll have an h3 for instance and we have access to you know video so each video and then any fields on that such as the title so we'll put the eight the title in an h3 then we'll have a ul sometimes emmit doesn't work in here so a ul with a list item and inside here we're just going to have a label for the release date and then the date itself the label i'm going to put in a strong tag so in here we'll say release date and after the strong tag here we'll have the actual video dot date and then i'll just copy this down we're also going to have the description and then underneath the ul i'm going to have a div here so this is going to be the tags and i'm going to give this a class of let's give it a class of tags and then we'll put in here our video dot tags so now we're outputting all the different fields and then finally we want to take the videos element and we want to append child because we want to take we want to take that div and put it inside of the videos element oops we don't want quotes there we want the div which is this here so we create the element add a class to it add the inner html and then add it to the videos element and it should output so let's save that let's reload and there we go all right so we see the loader fetches the data then it shows it and that should do it and now whenever i want to manage my video schedule you know if i want to add another video here for instance and just say test test and i go back so i added the video if i go back to my website and reload there it is and obviously you could be much more creative with this you could have you know filtering or whatever you can add whatever kind of user interface you want but the point is we're able to get the data from our notion account using the api and using this sdk which you don't really have to use you could just use you know fetch or node fetch or something like that but the this client this this sdk client makes it easier all right so hopefully you guys enjoyed this i think this is something that's that's pretty nice mostly because it's something that i'm i plan on actually using when i revamp my website and of course you know if you don't create youtube videos you could make this anything and it doesn't have to be a calendar you could create a regular table a gallery timeline there's just all different things you can do within notion but that's it guys thanks for watching and i'll see you in the next one

Channel: Traversy Media

Views: 65,862

Rating: 4.9704218 out of 5

Keywords: javascript, notion, notion api

Id: 9JdP-S3crt8

Length: 35min 23sec (2123 seconds)

Published: Wed May 19 2021