노션 사용자의 98%가 이 기능을 모르고 있다!?

if you don't know what it is it's a wonderful tool that allows us to basically organize our life we can use it to write down our notes create task force to do lists wikis documentation pages calendars collaborate on themes among many other things but what many people actually don't know is that notion has a really sweet api that we can use to access notion with our code thanks to this api we can use notion as our cms or content management system and even as a database for our data basically we can use the notion website to input the data and later we can use the notion api to consume this data and display it however we want to and that is exactly what we're going to do today on today's video we are going to see how we can use notion and its api as our admin panel and database for a web application to get started we are going to go to notion and after creating an account or logging in we are going to create a table database we are going to choose a name for our database and then we're going to get started entering the data what we're building today is a web app that we can use to find good places to work from in seoul for this we're going to add three columns to our notion database the name of the place the address of the place and then a link to either the website of the place or maybe the map url after that is done we're going to head to notion that so slash my integrations to get an api key we will click on create new integration and after giving it a name and pressing submit we will see our api key now we need to copy this key because we're going to need it later after that is done we're going to go back to our notion database and we're going to click on share we're going to share the database with the integration we just created and that is it now our api key has access to that database so we are now ready to call the notion api but before we do that we have to know that we cannot call the notion api from a browser this is of course for security reasons so this is why we need to call it from a server if we go to the notion api documentation we can see a list of all the actions we can perform we will click on the one that we are interested on and that is query a database if we look at the documentation we are going to see that there are two options on how we can call this api route one is with the official notion javascript sdk and the other one is with a simple http call with authorization and notion version headers all we need for this request is the api secret that we received before and the id of our database the id of the database is on the url bar when you are in the database page in the notion website to call this api like we said you need a server and as a server you can use whatever you want but today we're going to use klausler workers which is in my opinion one of the easiest ways to create a serverless api and the code is also very easy to understand as well for this video we are not going to be using the sdk of notion because i want you to be able to do this in whatever language you want maybe you have a server on python or in java so for this we're going to use the rest api of notion which is just a url that we have to hit the code of the cluster workers is going to be on javascript which is very easy to understand and the way it works is like this when our api receives a get request we will hit the notion api with the id of our page and we will send the headers with our secret token and the notion api version when we receive this data from the notion api we're going to send it back to the user that is calling our api so now let's take a look at the data that we receive from notion now all the rows in our notion database are actually a page in notion so what we receive when we query our database is an array or a list of pages as you can see each page has the columns that we defined before now all we have to do is paint this data in our ui for this step we can use any framework we want i in my case i'm going to use next.js with tailwind css but whatever you use is completely fine and we are done as you can see the data that we wrote in our notion database is now being displayed in our custom made ui all we had to do was write a tiny little server code and the rest was just css our users won't be able to even imagine that what they are looking at is a page powered by notion as a backend to finish with a bank what i want to do now is allow the users to upload data to the notion database but from my website if we go back to the notion documentation we will see that there is a rest api endpoint that we can use to create a page and we can also link that page to our notion database now all we have to do is make a form for people to submit a place to our database and push that data all the way to the notion api this is because remember we cannot call the notion api from our browser we have to call it from our api the code to send the data to the notion api is very similar to the one that we used when we wanted to get data from the notion api we have to hit a notion api url with the authentication headers and we need to specify the parent of the page which will be the id of the database and then the properties which are the name of the columns in our database and now it's the moment of truth let's go back to our application and submit the form after we do that let's go back to our notion database and see if the data was uploaded and as you can see it's there we are using notion as our database and our admin panel how cool is that this makes the prototyping of projects so much easier and because of notions super cool team collaboration features we can invite non-developers to this notion database and they can input the data there without touching a single line of code this notion api unlocks a lot of new possibilities this current stack will take us very far away i believe but one thing to notice is that notion api has a limit of 3 requests per second if the project that we built today grew bigger than that we would have to start thinking about adding a caching layer in front of our api still this is more than enough to get our side projects up and running in record time thank you so much to notion for sponsoring this video we absolutely love notion here at nomad colors and now with this api i'm already thinking of all the cool things that i want to build thank you for watching as always let me know what do you think of this video in the comments i'm going to be looking at them right now stay healthy stay free stay happy eat kimchi see you in the next one bye

Channel: 노마드 코더 Nomad Coders

Views: 158,966

Keywords: 코딩, 프로그래밍

Id: XCAwSBdeejU

Length: 7min 29sec (449 seconds)

Published: Wed Jul 20 2022