📝

誰よりも早く NotionAPI 入門してみた

2021/05/14に公開

2件

API

Notion

tech

我らが Notion.待ちわびた API.
翻訳ではないですが,自分が触った感じで,触り方と感想を書いていきます.
公式はこちら
https://developers.notion.com/
※現在は Beta 版

 公式から入門するなによりも胸躍るGet Started
最初にcurlコマンドが使えるようにと,Integrationを作るようにと言ってます.
Integrationはこちらから作成
https://www.notion.so/my-integrations
New integrationを押します
Name を決める
Logo がアップデート可能
紐付ける自分の Workspace を選択
Submitすると Secrets にInternal Integration Tokenが表示される
Showを押すとコピーできる
Integration type を選択
Public はレビューが必要となることがあるそうです.いろいろと情報を入力する必要もあり,面倒なので,今回は Internal にします.
Save changesを押す
卍 超 ★ 絶 ★ 簡 ★ 単 卍

 Integration と Notion のデータベースを紐付ける今回は API を使用するページを新しく作成します.既存の Database でも OK ですが,いろいろ試してみてからのほうがいいかも.
Notion アプリでさっき Integration と紐付けた Workspace 内で新しくページを作成し,右上のShareからInviteを押すと先程のIntegrationが表示れされています.
クリックしてしっかりと招待してあげます.
次に,このページにデータベースのテーブルを inline で作っておきます.（FullScreen でも OK）
そして,この Database のブロックの Copy link を取得して,この URL をブラウザで表示し,このDatabaseのIDを取得しておきます.
!ここで正しい ID を取得しないと動かない.Database のブロックの︙を右クリックしてDatabaseのIDを取得すること！
例えば,https://www.notion.so/nob-space/882c1faffcda4sfa650889c0f4dcf3a98?v=19a9778da7870adadb21dafaed7793d5b29という URL だったとした,?v=の前の882c1faffcda4sfa650889c0f4dcf3a98の部分がこのDatabaseのIDになります.

 API を叩いて Database にデータを追加するそんで,以下の curl コマンドを叩くとこのページにコンテンツが追加されるようです.
curl -X POST https://api.notion.com/v1/pages \
  -H "Authorization: Bearer {MY_NOTION_TOKEN}" \
  -H "Content-Type: application/json" \
  -H "Notion-Version: 2021-05-13" \
  --data '{
    "parent": { "database_id": "{DATABASE_ID}" },
    "properties": {
      "Name": {
        "title": [
          {
            "text": {
              "content": "これであなたもNotion API"
            }
          }
        ]
      }
    }
  }'
{MY_NOTION_TOKEN}と{DATABASE_ID}は上記で取得したInternal Integration TokenとDatabaseのIDにすり替える. ※{}ごと
今回は Database にタイトルのみのデータが追加されているかと思います.
ようは,Integrationを招待した箇所のDatabase の IDであればなんでもできるかと思います.
ここまでが,入門の内容です！
その他の操作に関してはこれから学習して,React のアプリで,Notion の Database に投稿するものを作ってみたいと思います！
めっちゃ楽しみ！
感動のあまり,動画貼る

https://youtu.be/GOxB5UUF3Wg

Discussion

Knob/のまど先生

現在ReactやNext.jsなどのフロントではnotion-sdkが使用できないようです.バックエンドの処理にAPIを書いて試してます.ReactやNext.jsでできたよって人いましたら報告していただけると嬉しいです！

Knob/のまど先生

Next.jsのAPIでできた.

const { Client } = require('@notionhq/client');

const notion = new Client({ auth: process.env.INTEGRATION_TOKEN });

export default async () => {
  try {
    const response = await notion.pages.create({
      parent: {
        database_id: process.env.DATABASE_ID,
      },
      properties: {
        Name: {
          title: [
            {
              text: {
                content: "new title yeah!!"
              }
            }
          ]
        }
      }
    });
    console.log(response);
    return response;
  } catch (error) {
    return error;
  }
};