Overview
Learn how to work with the Notion API using JavaScript in this comprehensive beginner's tutorial.
🔽 EXPAND TO SEE TIMESTAMPS AND RESOURCES 🔽
📝 WRITTEN VERSION (contains much more detailed explanations and resource links for everything):
https://thomasjfrank.com/notion-api-crash-course/
🔗 PROJECT RESOURCES
Notion Pokédex Template: https://thomasfrank.notion.site/Notion-Pok-dex-Template-4fc48e2918944e859e30d387279a311b
Glitch project: https://glitch.com/edit/#!/notion-pokedex
PokéAPI: https://pokeapi.co/
Notion API: https://developers.notion.com/reference/intro
Notion property values: https://developers.notion.com/reference/property-value-object
🧠 ULTIMATE BRAIN (Full Second-Brain Template - use LETSGO2023 at checkout):
https://thomasjfrank.com/brain/
📚 NOTION FUNDAMENTALS (Free & Complete Notion Beginner's Course)
https://thomasjfrank.com/fundamentals/
🎥 CREATOR'S COMPANION (The Best Template for Content Creators - use LETSGO2023 at checkout):
https://thomasjfrank.com/creators-companion/
🛠 MORE COURSES AND RESOURCES:
https://thomasjfrank.com/templates/
https://thomasjfrank.com/courses/
💪GET STARTED WITH NOTION:
https://thomasjfrank.com/usenotion/ - (this is my referral link)
🔗 More Video Links:
Notion Formula Guide: http://notionformulaguide.com/
Axios docs: https://axios-http.com/docs/intro
MDN Web Docs: https://developer.mozilla.org/en-US/
Notion Databases: https://www.youtube.com/watch?v=mAJOpO73d8Y
Send YouTube Stats to Notion (no-code): https://www.youtube.com/watch?v=VUeFtATlIDY
🐦Connect with me:
Twitter ➔ https://twitter.com/tomfrankly (best way to interact with me)
Instagram ➔ https://instagram.com/tomfrankly
Music ➔ @ThomasFrankMusic
-----
⏱ TIMESTAMPS:
00:00 - Introduction
01:50 - Project wverview
03:12 - JavaScript prerequisites (or lack thereof)
04:15 - Companion blog post
04:59 - Pokedex project spec
06:07 - Pokedex template link
07:10 - PokeAPI Introduction
07:30 - What is an API?
08:10 - Script flow overview
08:26 - PokeAPI response example
10:25 - Script flow whiteboard diagram
Build Start
12:30 - Glitch.com introduction
13:35 - Create a Node.JS starter app
14:19 - Starter project tour
15:03 - Create index.js
Prepare Notion
15:38 - Create a Notion API integration
16:58 - Get your internal integration token
17:24 - Create a .env file and add environmental variables
18:13 - Get your Notion database ID
19:40 - Add you integration to your database
Get Data from PokeAPI
20:49 - PokeAPI docs
22:09 - Axios library introduction
22:40 - Add Axios to package.json
23:23 - Side note: Dealing with broken npm packages
24:44 - Add the Notion SDK to package.json
25:50 - Add require statements to index.js
27:08 - Make your first call to PokeAPI
30:52 - Get response from PokeAPI
31:54 - Log a Pokemon's name
33:46 - Create an object definition to contain Pokemon stats
38:55 - Log the pokeData object
Send Data to Notion
39:17 - Add the pokeData object to your array
40:36 - Build the createNotionPage() function
41:36 - Notion API reference overview
43:53 - Create the response variable
46:12 - Side Note: Notion API page property values change
47:01 - Notion API page property reference
47:59 - Title property object structure
48:30 - Continue constructing the response variable
52:35 - Call the createNotionPage() function
53:25 - Add logging to the script
54:32 - Run the script and send your first call to Notion
Create Multiple Pages at Once
56:15 - Fetch multiple Pokemon at once with a loop
58:02 - API commands overview (GET, POST, etc.)
58:56 - Run the script again and fetch multiple records
Refine Your Data
01:00:13 - Start refining your data
01:01:35 - Get sprits and artwork from PokeAPI
01:03:33 - Overview of additional information to get from PokeAPI
01:04:06 - Refine the sprite variable
01:06:25 - Create the Pokemon types array
01:09:25 - Create the Bulbapedia URL
01:11:55 - Process and format each Pokemon's name
01:14:40 - MDN Web Docs introduction
01:15:49 - Regular expression references
01:25:43 - Send the refined/additional information to Notion
01:27:55 - Set the Notion page cover and icon
01:29:55 - Add child blocks to each Notion page
01:31:18 - Create a bookmark block for the Bulbapedia URL
01:32:00 - Send another batch of test pages to Notion
Add Flavor Text, Generation, and Category
01:34:00 - Add missing pieces of information (flavor text, generation, etc.)
01:34:44 - PokeAPI pokemon-species endpoint overview
01:35:35 - Create another loop to call pokemon-species
01:38:00 - My #1 tip for learning programming and APIs
01:39:23 - Get the English-language flavor text
01:47:30 - Add formatted flavor text to the pokeData object
01:48:13 - Add the category and generation info to the pokeData object
01:52:35 - Add the new information to the Notion API call
01:58:31 - Test the finished script!
Tutorial Wrap-Up
02:00:50 - Source code and additional resources
02:04:20 - More Notion resources and templates
-----
🎞 SPECIAL THANKS
Select video clips supplied by Getty Images
From the same author
Want to level up your Notion skills?
We explore and write about all things Notion. From useful tips and tricks, to hand-curated lists of templates and tools, we cover everything for you.
Blog
Deep dive into Notion.
Read our best articles, including templates roundups and Notion tutorials.
Notion World
Get your directory of the best 150+ resources and tools to master the world of Notion.