Notion receives Immunization registration data from NodeJS
- Tram Ho
Today we will learn how to send data to Notion using API
Initialize the project
Here I use “Express application generator” to be able to quickly create Nodejs & Express projects
Steps:
1/ Install express-generator
1 2 | <span class="token function">npm</span> <span class="token function">install</span> -g express-generator |
2/ Initialize the project with the name InjectionRegistrationNotion
1 2 | express **--view<span class="token operator">=</span>ejs** **InjectionRegistrationNotion** |
1 2 3 | <span class="token builtin class-name">cd</span> InjectionRegistrationNotion <span class="token function">npm</span> <span class="token function">install</span> |
3/ Khởi chạy server bằng lệnh
1 2 | <span class="token function">npm</span> start // <span class="token keyword">for</span> start server this project |
Access localhost:3000
Project confirmation screen is active
Create an HTML form for vaccination registration
To make the interface I use ejs engin because it is similar to pure HTML so it is easy to access
In file index.jes in folder views
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span> <span class="token operator"><</span>html<span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span><span class="token operator"><</span>%<span class="token operator">=</span> title %<span class="token operator">></span><span class="token operator"><</span>/title<span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"</span> <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span><span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://use.fontawesome.com/releases/v5.5.0/css/all.css"</span><span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"./stylesheets/style.css"</span><span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"testbox"</span><span class="token operator">></span> <span class="token operator"><</span>form <span class="token assign-left variable">action</span><span class="token operator">=</span><span class="token string">"/"</span> <span class="token assign-left variable">method</span><span class="token operator">=</span><span class="token string">"post"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"banner"</span><span class="token operator">></span> <span class="token operator"><</span>h<span class="token operator"><span class="token file-descriptor important">1</span>></span><span class="token operator"><</span>%<span class="token operator">=</span> title %<span class="token operator">></span><span class="token operator"><</span>/h<span class="token operator"><span class="token file-descriptor important">1</span>></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Name<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"name-item"</span><span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"name"</span>/<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Email<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"email"</span>/<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Phone<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"phone"</span>/<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Address<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"address"</span>/<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"question"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Gender<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"question-answer"</span><span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"radio"</span> <span class="token assign-left variable">value</span><span class="token operator">=</span><span class="token string">"0"</span> <span class="token assign-left variable">id</span><span class="token operator">=</span><span class="token string">"radio_2"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"sex"</span>/<span class="token operator">></span> <span class="token operator"><</span>label <span class="token assign-left variable">for</span><span class="token operator">=</span><span class="token string">"radio_2"</span> <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"radio"</span><span class="token operator">></span><span class="token operator"><</span>span<span class="token operator">></span>Female<span class="token operator"><</span>/span<span class="token operator">></span><span class="token operator"><</span>/label<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"radio"</span> <span class="token assign-left variable">value</span><span class="token operator">=</span><span class="token string">"1"</span> <span class="token assign-left variable">id</span><span class="token operator">=</span><span class="token string">"radio_1"</span> <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"sex"</span>/<span class="token operator">></span> <span class="token operator"><</span>label <span class="token assign-left variable">for</span><span class="token operator">=</span><span class="token string">"radio_1"</span> <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"radio"</span><span class="token operator">></span><span class="token operator"><</span>span<span class="token operator">></span>Male<span class="token operator"><</span>/span<span class="token operator">></span><span class="token operator"><</span>/label<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Note<span class="token operator"><</span>/p<span class="token operator">></span> <span class="token operator"><</span>textarea <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"note"</span> <span class="token assign-left variable">rows</span><span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span><span class="token operator"><</span>/textarea<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"btn-block"</span><span class="token operator">></span> <span class="token operator"><</span>button <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"submit"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"/"</span><span class="token operator">></span>Send<span class="token operator"><</span>/button<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/form<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/body<span class="token operator">></span> <span class="token operator"><</span>/html<span class="token operator">></span> |
In file “public/stylesheets/style.css”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | html, body <span class="token punctuation">{</span> min-height: <span class="token number">100</span>%<span class="token punctuation">;</span> <span class="token punctuation">}</span> body, div, form, input, select, textarea, p <span class="token punctuation">{</span> padding: <span class="token number">0</span><span class="token punctuation">;</span> margin: <span class="token number">0</span><span class="token punctuation">;</span> outline: none<span class="token punctuation">;</span> font-family: Roboto, Arial, sans-serif<span class="token punctuation">;</span> font-size: 14px<span class="token punctuation">;</span> color: <span class="token comment">#666;</span> line-height: 22px<span class="token punctuation">;</span> <span class="token punctuation">}</span> h1 <span class="token punctuation">{</span> position: absolute<span class="token punctuation">;</span> margin: <span class="token number">0</span><span class="token punctuation">;</span> font-size: 36px<span class="token punctuation">;</span> color: <span class="token comment">#fff;</span> z-index: <span class="token number">2</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .testbox <span class="token punctuation">{</span> display: flex<span class="token punctuation">;</span> justify-content: center<span class="token punctuation">;</span> align-items: center<span class="token punctuation">;</span> height: inherit<span class="token punctuation">;</span> padding: 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> form <span class="token punctuation">{</span> width: <span class="token number">100</span>%<span class="token punctuation">;</span> padding: 20px<span class="token punctuation">;</span> border-radius: 6px<span class="token punctuation">;</span> background: <span class="token comment">#fff;</span> box-shadow: <span class="token number">0</span> <span class="token number">0</span> 20px <span class="token number">0</span> <span class="token comment">#333;</span> <span class="token punctuation">}</span> .banner <span class="token punctuation">{</span> position: relative<span class="token punctuation">;</span> height: 210px<span class="token punctuation">;</span> background-size: cover<span class="token punctuation">;</span> display: flex<span class="token punctuation">;</span> justify-content: center<span class="token punctuation">;</span> align-items: center<span class="token punctuation">;</span> text-align: center<span class="token punctuation">;</span> <span class="token punctuation">}</span> .banner::after <span class="token punctuation">{</span> content: <span class="token string">""</span><span class="token punctuation">;</span> background-color: rgba<span class="token punctuation">(</span><span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> position: absolute<span class="token punctuation">;</span> width: <span class="token number">100</span>%<span class="token punctuation">;</span> height: <span class="token number">100</span>%<span class="token punctuation">;</span> <span class="token punctuation">}</span> input, textarea, <span class="token keyword">select</span> <span class="token punctuation">{</span> margin-bottom: 10px<span class="token punctuation">;</span> border: 1px solid <span class="token comment">#ccc;</span> border-radius: 3px<span class="token punctuation">;</span> <span class="token punctuation">}</span> input <span class="token punctuation">{</span> width: calc<span class="token punctuation">(</span><span class="token number">100</span>% - 10px<span class="token punctuation">)</span><span class="token punctuation">;</span> padding: 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">select</span> <span class="token punctuation">{</span> width: <span class="token number">100</span>%<span class="token punctuation">;</span> padding: 7px <span class="token number">0</span><span class="token punctuation">;</span> background: transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> textarea <span class="token punctuation">{</span> width: calc<span class="token punctuation">(</span><span class="token number">100</span>% - 12px<span class="token punctuation">)</span><span class="token punctuation">;</span> padding: 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder <span class="token punctuation">{</span> color: <span class="token comment">#333;</span> <span class="token punctuation">}</span> .item input:hover, .item select:hover, .item textarea:hover <span class="token punctuation">{</span> border: 1px solid transparent<span class="token punctuation">;</span> box-shadow: <span class="token number">0</span> <span class="token number">0</span> 6px <span class="token number">0</span> <span class="token comment">#333;</span> color: <span class="token comment">#333;</span> <span class="token punctuation">}</span> .item <span class="token punctuation">{</span> position: relative<span class="token punctuation">;</span> margin: 10px <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"date"</span><span class="token punctuation">]</span>::-webkit-inner-spin-button <span class="token punctuation">{</span> display: none<span class="token punctuation">;</span> <span class="token punctuation">}</span> .item i, input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"date"</span><span class="token punctuation">]</span>::-webkit-calendar-picker-indicator <span class="token punctuation">{</span> position: absolute<span class="token punctuation">;</span> font-size: 20px<span class="token punctuation">;</span> color: <span class="token comment">#a9a9a9;</span> <span class="token punctuation">}</span> .item i <span class="token punctuation">{</span> right: <span class="token number">1</span>%<span class="token punctuation">;</span> top: 30px<span class="token punctuation">;</span> z-index: <span class="token number">1</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"date"</span><span class="token punctuation">]</span>::-webkit-calendar-picker-indicator <span class="token punctuation">{</span> right: <span class="token number">0</span><span class="token punctuation">;</span> z-index: <span class="token number">2</span><span class="token punctuation">;</span> opacity: <span class="token number">0</span><span class="token punctuation">;</span> cursor: pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"time"</span><span class="token punctuation">]</span>::-webkit-inner-spin-button <span class="token punctuation">{</span> margin: 2px 22px <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> input<span class="token punctuation">[</span>type<span class="token operator">=</span>radio<span class="token punctuation">]</span>, input.other <span class="token punctuation">{</span> display: none<span class="token punctuation">;</span> <span class="token punctuation">}</span> label.radio <span class="token punctuation">{</span> position: relative<span class="token punctuation">;</span> display: inline-block<span class="token punctuation">;</span> margin: 5px 20px 10px <span class="token number">0</span><span class="token punctuation">;</span> cursor: pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> .question span <span class="token punctuation">{</span> margin-left: 30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> label.radio:before <span class="token punctuation">{</span> content: <span class="token string">""</span><span class="token punctuation">;</span> position: absolute<span class="token punctuation">;</span> top: 2px<span class="token punctuation">;</span> left: <span class="token number">0</span><span class="token punctuation">;</span> width: 15px<span class="token punctuation">;</span> height: 15px<span class="token punctuation">;</span> border-radius: <span class="token number">50</span>%<span class="token punctuation">;</span> border: 2px solid <span class="token comment">#ccc;</span> <span class="token punctuation">}</span> <span class="token comment">#radio_5:checked ~ input.other {</span> display: block<span class="token punctuation">;</span> <span class="token punctuation">}</span> input<span class="token punctuation">[</span>type<span class="token operator">=</span>radio<span class="token punctuation">]</span>:checked + label.radio:before <span class="token punctuation">{</span> border: 2px solid <span class="token comment">#444;</span> background: <span class="token comment">#444;</span> <span class="token punctuation">}</span> label.radio:after <span class="token punctuation">{</span> content: <span class="token string">""</span><span class="token punctuation">;</span> position: absolute<span class="token punctuation">;</span> top: 7px<span class="token punctuation">;</span> left: 5px<span class="token punctuation">;</span> width: 7px<span class="token punctuation">;</span> height: 4px<span class="token punctuation">;</span> border: 3px solid <span class="token comment">#fff;</span> border-top: none<span class="token punctuation">;</span> border-right: none<span class="token punctuation">;</span> transform: rotate<span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> opacity: <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> input<span class="token punctuation">[</span>type<span class="token operator">=</span>radio<span class="token punctuation">]</span>:checked + label:after <span class="token punctuation">{</span> opacity: <span class="token number">1</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .btn-block <span class="token punctuation">{</span> margin-top: 10px<span class="token punctuation">;</span> text-align: center<span class="token punctuation">;</span> <span class="token punctuation">}</span> button <span class="token punctuation">{</span> width: 150px<span class="token punctuation">;</span> padding: 10px<span class="token punctuation">;</span> border: none<span class="token punctuation">;</span> border-radius: 5px<span class="token punctuation">;</span> background: <span class="token comment">#444;</span> font-size: 16px<span class="token punctuation">;</span> color: <span class="token comment">#fff;</span> cursor: pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> button:hover <span class="token punctuation">{</span> background: <span class="token comment">#666;</span> <span class="token punctuation">}</span> |
F5 back to the browser to see the results
Handling Server with Notion API
By the way this is a simple example. So I will write all the code in “routers/index.js” for easy tracking
We need to create a new route to receive the form submission
1 2 3 4 5 6 7 8 9 | router.post<span class="token punctuation">(</span><span class="token string">"/"</span>, async <span class="token keyword">function</span> <span class="token punctuation">(</span>req, res, next<span class="token punctuation">)</span> <span class="token punctuation">{</span> //To be get parameter before Form submit and send data to server. We can use const <span class="token punctuation">{</span>name, email, phone, address, sex, note<span class="token punctuation">}</span> <span class="token operator">=</span> req.body<span class="token punctuation">;</span> //Just <span class="token keyword">for</span> debug console.table<span class="token punctuation">(</span><span class="token punctuation">{</span>name, email, phone, address, sex, note<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> //Redirect to form when before submit res.redirect<span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Check submitted data
On the interface
On terminal after pressing “Send” button
Here we have successfully sent the data from the HTML Form to the Nodejs server
Send data to Notion using API
First, we usually install the package “@notionhq/client”
1 2 | <span class="token function">npm</span> i @notionhq/client |
Register to use package
1 2 3 4 5 6 7 | //Required package const <span class="token punctuation">{</span>Client<span class="token punctuation">}</span> <span class="token operator">=</span> require<span class="token punctuation">(</span><span class="token string">"@notionhq/client"</span><span class="token punctuation">)</span> //Setup config const notion <span class="token operator">=</span> new Client<span class="token punctuation">(</span><span class="token punctuation">{</span> auth: process.env.NOTION_TOKEN, <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Send data to Notion via API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | await notion.pages.create<span class="token punctuation">(</span><span class="token punctuation">{</span> parent: <span class="token punctuation">{</span> database_id: process.env.NOTION_DATABASE_ID, <span class="token punctuation">}</span>, properties: <span class="token punctuation">{</span> Name: <span class="token punctuation">{</span> title: <span class="token punctuation">[</span> <span class="token punctuation">{</span> text: <span class="token punctuation">{</span> content: name, <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token punctuation">]</span>, <span class="token punctuation">}</span>, Email: <span class="token punctuation">{</span> email: email, <span class="token punctuation">}</span>, PhoneNumber: <span class="token punctuation">{</span> rich_text: <span class="token punctuation">[</span> <span class="token punctuation">{</span> text: <span class="token punctuation">{</span> content: phone, <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token punctuation">]</span>, <span class="token punctuation">}</span>, Address: <span class="token punctuation">{</span> rich_text: <span class="token punctuation">[</span> <span class="token punctuation">{</span> text: <span class="token punctuation">{</span> content: address, <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token punctuation">]</span>, <span class="token punctuation">}</span>, Gender: <span class="token punctuation">{</span> select: <span class="token punctuation">{</span> name: gender <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, Note: <span class="token punctuation">{</span> rich_text: <span class="token punctuation">[</span> <span class="token punctuation">{</span> text: <span class="token punctuation">{</span> content: note, <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token punctuation">]</span>, <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Configure the .env file containing the Notion API registration information
1 2 3 | <span class="token assign-left variable">NOTION_TOKEN</span><span class="token operator">=</span>secret_heBrP3242423424322iHM8UzmjnALYvJ4WoeLA <span class="token assign-left variable">NOTION_DATABASE_ID</span><span class="token operator">=</span>ccfe5824942343224aa20ec85e1c2f7e |
After performing the above steps, you can check the results
Access http://localhost:3000/ Fill in the information and click “Send”
The results will be sent to Notion as shown below
End
Through this article, I have shown you the most basic way to interact with Notion through the API it provides.
Based on the above knowledge, you can learn more and apply it for your development purposes
Git repository
https://github.com/qt91/InjectionRegistrationNotion (Don’t forget to leave me 1* )