The New Notion API | Node.js Video Schedule Project

Поделиться
HTML-код
  • Опубликовано: 9 июл 2024
  • In this video, we will create a Notion calendar database and use the API and SDK/client to fetch the data and display it on a web page
    Code:
    github.com/bradtraversy/notio...
    Notion Developers/API Website:
    developers.notion.com/
    Notion JS SDK:
    github.com/makenotion/notion-...
    Udemy Courses:
    traversymedia.com
    💖 Support The Channel!
    / traversymedia
    Timestamps:
    0:00 - Intro
    1:55 - Add Video Data in Notion
    4:25 - Explore API & Create Integration
    7:03 - Using the SDK/Client
    11:47 - Fetch Video Data & Construct Object
    21:22 - Create Endpoint with Express
    23:50 - Creating the Frontend
  • НаукаНаука

Комментарии • 151

  • @mmbower1
    @mmbower1 3 года назад +11

    For those getting stuck on 400 bad request:
    Add 'Notion-Version: 2021-05-13' to the headers in postman to go along with the bearer.
    'Notion-Version' is the key, '2021-05-13' is the value.

    • @scoria4988
      @scoria4988 2 года назад +1

      Yeah but how do you pass it in the JS code?

    • @Eznus1
      @Eznus1 2 года назад

      Thanks

  • @Aaronmoreno
    @Aaronmoreno 3 года назад +5

    Notion is one of my favorite tools. So glad this API integration exists. Thank you Brad for sharing

  • @ladywebber1726
    @ladywebber1726 3 года назад +8

    dont u just love when you get a notification from Brad :)

  • @salimsuleiman7984
    @salimsuleiman7984 3 года назад +59

    Once I see Brad post new video. The excitement is unexplainable 😇

  • @JMuks
    @JMuks 3 года назад +5

    Love your videos, I'm nearly done with your Node js API masterclass with express and Mongo DB, you are literally the most down to the point Udemy instructor. You are the only one that could teach me Backend JavaScript thanks so much

  • @dpklabs
    @dpklabs 3 года назад +1

    Great video as always! I'm excited to start integrating notion with more of my projects!

  • @novailoveyou
    @novailoveyou 3 года назад

    Thanks, Brad!
    Such a pleasure doing your tutorials as always

  • @delvorin1841
    @delvorin1841 3 года назад +1

    Thanks for the video, Brad. While I don't see myself having a need for this API, it did show me the existence of Notion and I was actually looking for something like this.

  • @jasonshen
    @jasonshen 3 года назад

    This is awesome stuff brad, will actually might do this for my site, cheers for the tut man

  • @attracdev
    @attracdev 3 года назад +1

    So looking forward to see all the cool things that can be done with this API. I know people have been waiting for a while for it’s release.

  • @kieran2347
    @kieran2347 3 года назад +2

    I found out about this just yesterday and was wondering how I could use it to build something good and my wish came true. Thanks, Brad.
    You make everything seem easy!
    I aslo wanted to say, your videos are very relaxing to watch, especially your voice, very soothing for my brain and I'm not the only one, many folks in my bootcamp (Learn with Leon on Twitch) say the same thing. We watched your Reach Crash Course!

  • @innoc32
    @innoc32 Год назад

    Took me forever to get around to doing this tutorial but glad I finally did - thanks!

  • @vrlassiter
    @vrlassiter 3 года назад +3

    The Man, the Myth, the Master! Brad will be a legend for generations!

  • @kartikmishra1958
    @kartikmishra1958 3 года назад +4

    Brad always brings happiness ❣️❣️❣️

  • @RyanHemlock
    @RyanHemlock 6 месяцев назад

    Fantastic breakdown!

  • @alaninnovates6353
    @alaninnovates6353 3 года назад

    This seems interesting... always the fresh content!

  • @cadudecastroalves2712
    @cadudecastroalves2712 2 года назад

    Amazing tutorial as always! Thanks!

  • @melfordbirakor
    @melfordbirakor 3 года назад

    Another massive content! 💯

  • @godfreyndiritu9062
    @godfreyndiritu9062 3 года назад

    It's only on this channel where you can get this kind of content. Brad is a trend setter, he leads others follow

  • @shivShaktitech
    @shivShaktitech 3 года назад

    thanx brad for fresh content ! stay safe master

  • @EddyVinck
    @EddyVinck 3 года назад +1

    That was fast! this API just released!

  • @meltdown2169
    @meltdown2169 3 года назад

    I like your content sir... u inspired me alot not only in programming tutorials .. I'm talking about self improvement

  • @ClevergunsYT
    @ClevergunsYT 3 года назад +1

    yow! another great content

  • @nro337
    @nro337 3 года назад

    Awesome video!!

  • @Eznus1
    @Eznus1 2 года назад +5

    In minute 11:00 use this instead, this because the code is deprecated
    const { Client } = require('@notionhq/client');
    const notion = new Client({ auth: process.env.NOTION_API_KEY });
    (async () => {
    const response = await notion.search({
    filter: {
    property: 'object',
    value: 'database',
    },
    });
    console.log(response);
    })();

  • @kirant9339
    @kirant9339 3 года назад +2

    Awesome Video thanks for giving this video and your time for giving this information.

  • @cristianrodriguez7808
    @cristianrodriguez7808 Год назад

    AMAAAZING!

  • @brownlion2559
    @brownlion2559 3 года назад

    I like your video because I learned some important stuffs from your videos.

  • @garya.schrock1196
    @garya.schrock1196 3 года назад +1

    sometimes i just leave traversy media running in the background just for the vibe... am i the only one doing this??

  • @hingsli7245
    @hingsli7245 3 года назад

    Nice work!!!

  • @suleimandubow5145
    @suleimandubow5145 3 года назад

    This is awesome. I must try it

  • @PlotTwists
    @PlotTwists 3 года назад

    Thanks for introducing me to this gem of a tool, the api is cool too i guess

  • @henrywalton4616
    @henrywalton4616 2 года назад

    this is a fantastic video

  • @awaisraza2285
    @awaisraza2285 3 года назад

    Another great video

  • @mikiasketema3410
    @mikiasketema3410 3 года назад +2

    As always, awesome content. Been a while since u post MEAN stack, would be very useful since lots of things have changed

    • @TraversyMedia
      @TraversyMedia  3 года назад +4

      Yeah, I just started getting back into Angular, so it may be a while, but it is on my list

    • @mikiasketema3410
      @mikiasketema3410 3 года назад +1

      @@TraversyMediaThat sounds great Brother!!!

  • @sahilm3301
    @sahilm3301 3 года назад +6

    I was just messing around with notion API and saw your video notification LOL

  • @74Bagas
    @74Bagas 3 года назад

    Love Notion, love Traversy... Wombo Combo definitely

  • @erikbaer4472
    @erikbaer4472 3 года назад

    I`ve got no idea about notion, what it is or what to use it for ... But I will very soon :) When the man who jumpstarted my career discusses a new topic, it is going to be a great time, for sure ! :) Much love from Germany to the legend himself!

  • @ellelle
    @ellelle 2 года назад

    Wow thank you so much!

  • @hidayat_pcd
    @hidayat_pcd 3 года назад

    Great, now I can make a database without dealing with another storage service. I hope I can make my frontend as good as Notion.

  • @anirudhpanda4843
    @anirudhpanda4843 3 года назад +1

    Man!!! I was just configuring my Notion workspace. We love brad💯

  • @TheShubham67
    @TheShubham67 3 года назад

    man you are awesome!

  • @MunimChoudhary
    @MunimChoudhary 3 года назад

    Now I'll learn something new ❤

  • @HASEEBAhmeddontmesswithme
    @HASEEBAhmeddontmesswithme 3 года назад

    Excellent

  • @coding_ss632
    @coding_ss632 3 года назад

    6:07 thank you for this :)

  • @prahiprahi5285
    @prahiprahi5285 3 года назад

    Brad is awesome

  • @DodaGarcia
    @DodaGarcia 2 года назад

    Omg they finally released an API?? That was the only reason I stopped using it at the time because the app looked great.
    I’ll definitely check it out again now.

  • @TheRn35
    @TheRn35 3 года назад +3

    Can you please make a video to create a website using Next JS/Gatsby + Netlify + Notion as CMS?

  • @jitendramishra9989
    @jitendramishra9989 3 года назад +1

    There are many channels but traversy is best

  • @sheikhrashed1242
    @sheikhrashed1242 3 года назад

    I have seen your repo yesterday in github, and i cloned from your repo and waiting for your tutorial

  • @josephjoey3904
    @josephjoey3904 3 года назад

    Brad, good to hear your voice again sir. Is there a way to listen constantly for new data instead of having to refresh the page all the time? Thanks

  • @mklmo831
    @mklmo831 3 года назад +3

    Thank you so much. Brad, will you do a course on "Data Structure and Algorithm with Javascript." And also on laravel?

  • @sergiugelustoica6569
    @sergiugelustoica6569 3 года назад

    NOTION BABY ❤

  • @rangabharath4253
    @rangabharath4253 3 года назад

    Awesome

  • @md.siddiq7165
    @md.siddiq7165 3 года назад

    Awesome content as always. ❤️

  • @its_magnetic
    @its_magnetic 3 года назад +1

    we would love to see Brad and BuckyRobert #thenewboston in one frame.

  • @greenboy7807
    @greenboy7807 3 года назад

    im learning frontend now but just clicked the video to like it

  • @franthor
    @franthor 3 года назад +1

    Hi Brad and guys, as you said (for a bigger project) it would be possible to develop your front in Vue/React or other, would you just keep them together and put the "dist" folder instead of that "public" folder, and therefore have back and front in the same ... place, server, service whatever, like netlify or heroku or ...? or would you have them in different place/server/address? My concern is that the backend remains "exposed" to anyone that finds out the route if they want to access. If you didn't want that (imagine you can edit the content and not just read), how would you protect the frontend-to-backend data transfers? Sorry may be an obvious question but I am trying to define the architecture of a fullstack app I need to create, wondering how is it best to implement it.

  • @valabrd3032
    @valabrd3032 3 года назад

    I love you brad and also your tutorials, would you please make projects in react.js?

  • @mymarginalia8349
    @mymarginalia8349 3 года назад +1

    This is amazing are there any limits on how many requests we can make? I've used notion for about two years and stopped doing so last year after creating my own wiki, but this excited me to no end

  • @ahmadarwani4061
    @ahmadarwani4061 3 года назад

    @brad 🎉🎉

  • @RichnouRichnou
    @RichnouRichnou 3 года назад

    Really interesting as usual 😀
    But just a question : why don’t call notion api directly from the client part ? Protect the api key ?

  • @renujadecosta6408
    @renujadecosta6408 3 года назад

    Awesome video Brad, It would be awesome if you could do a REACT NATIVE PROJECT sometime later 💎

  • @mdyeasin1573
    @mdyeasin1573 3 года назад

    It seems notion to be more easier than other databases.
    Hope so it gonna achieve more fam

  • @manuelh7625
    @manuelh7625 3 года назад

    A very smart way to use notion! Does this only work with a paid notion plan? What about setting / save data in notion?

  • @MikeNugget
    @MikeNugget 3 года назад

    Finally.. they released API in beta. Let's wait few more years for production release 😬
    Despite that Notion is overhyped and looks too silly against i.e. Microsoft Teams it is very interesting video, thanks!

  • @user-ot5mj8em6k
    @user-ot5mj8em6k 7 месяцев назад

    Is there a way that you could do this the other way around, like, user could input data from a page and the data gets updated to a Notion database

  • @ruchajoshi5671
    @ruchajoshi5671 2 года назад

    for those who are struggling to get a response with a status 200 OK. what I noticed in my case, It's only working if you are using Notion predefined templet pages, it's not working with pages in which we change format according to us. not sure but in my case it looks like that.

  • @abdouett3676
    @abdouett3676 3 года назад

    Really nice work! Thank you

  • @tejas8417
    @tejas8417 3 года назад +1

    LETS GOOOO BRAD. NEVER CLICKED FASTER IN MY LIFE

  • @vijayu707
    @vijayu707 3 года назад

    Elegant

  • @matthewao
    @matthewao 3 года назад +28

    Wait... Doesn't this mean you can use Notion as a no-code, user friendly CMS?

    • @pharmokan
      @pharmokan 2 года назад +1

      yep [/step brothers]

  • @jayashreepadmanabhan9874
    @jayashreepadmanabhan9874 Год назад

    I am only able to access the id property of each object found under properties when querying the database. How can this be fixed?

  • @shaan8729
    @shaan8729 3 года назад +3

    Informative video!! Btw can someone tell me which theme Brad uses in this video ?

    • @TraversyMedia
      @TraversyMedia  3 года назад +6

      The VSCode theme is Github Dark :)

  • @buggsbunny4990
    @buggsbunny4990 Год назад +1

    It is showing could not find database with id: database_id, I've put all my api key and database id correctly. Can somebody tell me what's the issue? thanks

  • @medaminelmokni1840
    @medaminelmokni1840 3 года назад

    i have a problem where i added the integration , but when i make a request to list databases the list is empty when i m sure it s not

  • @shivashankar6043
    @shivashankar6043 3 года назад +3

    Brad pls do a crash course for react with typescript 🙏

  • @sushilbalami
    @sushilbalami 3 года назад

    It's like airtable then?

  • @trafficface
    @trafficface Год назад

    I’m organising my wedding using this

  • @CarlitoProductions
    @CarlitoProductions 3 года назад

    i can't find it anywhere, but does Notion accept post requests or only get tasks from Notion?

  • @TonyW86
    @TonyW86 3 года назад

    Great job! How do I hide a page behind login?

  • @thetr1xik
    @thetr1xik 2 года назад

    can you explain pls about this error - "message": "Notion-Version header failed validation: Notion-Version header should be defined, instead was `undefined`."
    integration is included6 token is entered
    but "status": 400

  • @sidheshwartiwari9834
    @sidheshwartiwari9834 3 года назад +1

    Hi, Brad!
    Regular viewer here. You could have implemented some optimisations too, for e.g., What's the need to make a request from the backend for every request from the front-end (just think how many requests your backend will make if you stick to it, 1 request for every visit to the upcoming videos page on your website).
    Anyways, you are doing great work. Respect.

    • @prafed
      @prafed 2 года назад

      You need the backend to connect to the Notion API because you need to authenticate. If you do it in the frontend you will be exposing your token which can be used malisciously.

    • @sidheshwartiwari9834
      @sidheshwartiwari9834 2 года назад +1

      @@prafed I meant that he should optimise it a little, what's wrong in caching data and loading once in a while instead of every request.

  • @MotM200
    @MotM200 3 года назад

    Hey! This project is great of course but whenever I send a request through postman it replies with a status of 400 Bad Request saying that I need to pass Headers. What headers do I need to pass?

  • @ragavendravignesh1028
    @ragavendravignesh1028 3 года назад

    Thanks Brad, Can you make an udemy course about covering Css in depth.

  • @MikeNugget
    @MikeNugget 2 года назад

    So, the only option to automate my page with an api is to share this page with my integration manually, right?
    Why I can't just get any required page with api request?

  • @akshay3028
    @akshay3028 3 года назад +1

    Great video Brad! I am wondering if we can use notion files in portfolio website instead of .mdx files.

  • @enfoldedmedia3458
    @enfoldedmedia3458 3 года назад

    Are the courses like the "React Crash Course" real and will be released next week?

  • @shloimiminkowicz4188
    @shloimiminkowicz4188 3 года назад

    Excellent video Brad !! Would you make such a project In React.js

  • @NotesNNotes
    @NotesNNotes 2 года назад

    just tried this out, omg what a bitch it was to get those objects within objects (as they changed a few things)
    but man, awesome project and super useful
    thank you, Brad!

    • @pancartegravier
      @pancartegravier 2 года назад

      how did you do, my "API token is invalid" and i don't know why, can you help ?

  • @PankajKumar-ry9xj
    @PankajKumar-ry9xj 3 года назад

    really stuck at Cannot read property '0' of undefined , help mate

  • @shishirkumarsky
    @shishirkumarsky 3 года назад

    This is cool for mobile apps and SPA web apps but how about pricing

  • @singh7374
    @singh7374 3 года назад +3

    Do this if you get this error
    Error 400 version not found
    Create Key Value pair under Header in Postman As
    Key: Notion-Version
    Value: 2021-05-13

  • @divanshmahajan1769
    @divanshmahajan1769 3 года назад +1

    can you make a custom music player project?

  • @kondzio2003
    @kondzio2003 3 года назад

    maybe now a video about notion powered blog with gatsby?

  • @dharmangchadotra5714
    @dharmangchadotra5714 3 года назад

    Can’t read property text of undefined

  • @revellen
    @revellen 3 года назад

    Would there be a way to make a Notion to Discord bot via node.js?

  • @avi12
    @avi12 3 года назад

    Hasn't Google _just_ released a competitor, Smart Canvas?

  • @ayushlal2370
    @ayushlal2370 3 года назад

    what theme is that??

  • @alexinho2708
    @alexinho2708 3 года назад +1

    My first video where I actually comment first