Notion DBにPower PlatformからデータをPOSTしてみた！

# はじめに
アドベントカレンダー楽しい🐟
以前、 **「[Power AppsでGoogle Books APIを使ったバーコードリーダーを作ってみた](https://qiita.com/DEmodoriGatsuO/private/29f7b3e145b1215e5bb8)」** のタイトルで
記事を書かせていただきました。

https://qiita.com/DEmodoriGatsuO/private/29f7b3e145b1215e5bb8

**Google Books APIで取得した情報を、Notionに追加する仕組み**ができたので紹介させてください。

https://twitter.com/i/status/1600484532352086018

# Notion API
NotionにはAPIが用意されています。

https://developers.notion.com/

`Get started`をクリック。

All English・・・
1. [https://www.notion.com/my-integrations](https://www.notion.com/my-integrations) にアクセスします。
1. ログインメニューが出るのでログインしましょう。
1. 下記の画面から`+ 新しいインテグレーション`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/01e11d4a-e24b-e71a-2e99-2f630239bceb.png)
1. インテグレーションの設定、APIで実行できる範囲を設定できます。
1. 完了すると**シークレット** = **トークン** が発行されます。APIキーですね。

こちらを使えばNotionのデータベースに連携することが可能です。

## APIによる編集を実装するためには
1. 実際に**APIによる編集等を行うNotionのページにアクセスします。**
[・・・]画面右上の三点リーダーをクリックし、`コネクタ`にて自分で名前を付けたインテグレーションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/b9ef3963-80e2-363d-439b-cc519e5f82a2.png)

**こちらで事前準備は完了です！**

# フロー
今回のテーマは**Notionの特定のDBにデータをPOSTする**ことです。
これを**Power Automate**で実現します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/81af5f92-9518-4ef7-57e9-6f0d22618481.png)

検証のためにGoogle Apps ScriptとPythonでもチャレンジしたのでコードを載せておきます。

### Google Apps Script
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/1aecd787-7694-8e72-77a2-cff432a9bc2f.png)

```JavaScript:sample.gs
function postNotionDB() {
  const dbId   = '***databaseID***';
  const token  = '***secretキー***';
  const url = 'https://api.notion.com/v1/pages';

  const json = {
    parent: {
      database_id: dbId,
    },
    properties: {
      "Name": {
        "title": [{
          "text": {
            "content": "GAS"
          }
        }]
      },
      "Tag": {
        "rich_text": [{
          "text": {
            "content": "Success"
          }
        }]
      }
    }
  }

  const options = {
    "method": "POST",
    "headers": {
      "Content-type": "application/json",
      "Authorization": "Bearer " + token,
      "Notion-Version": '2022-06-28',
    },
    "payload": JSON.stringify(json),
  };

  UrlFetchApp.fetch(url, options);
}
```
 - **Result**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/4a74c9bd-6b65-6706-6db4-c5049bfa72ce.png)

### Python

```python:sample.py
import os
import yaml
import requests

## yamlにdatabaseのId、トークンを格納

dir_path = os.path.dirname(__file__)
conf_path = os.path.join(dir_path,'__config__.yaml')

with open(conf_path, encoding='utf-8') as f:
	   config = yaml.safe_load(f)

url = 'https://api.notion.com/v1/pages'
headers = {
        'Content-Type'  : 'application/json',
        'Authorization' :'Bearer ' + config['notion_parameter']['secret_key'],
        'Notion-Version': '2022-06-28',
        }

json = {
    'parent': {
      'database_id': config['notion_parameter']['test_database_id']
    },
    'properties': {
      'Name': {
        'title': [
        {
            'text': {
            'content': 'Python'
            }
            }
        ],
      },
      'Tag': {
        'rich_text': [
        {
            'text': {
            'content': 'success API'
            }
            }
        ],
      }
    }
  }

res = requests.post(url, json=json, headers=headers)
print(res.text)
```
 - **Result**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/51714395-ab4a-f8e7-0aaf-8b168ad04cf1.png)
***
## Power Automate
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/70f169bf-1f73-595c-adb3-26c97dacb4c0.png)

アクセストークンとデータベースIDは変数で設定しています。

 - **Result**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/074d69e7-2f15-e692-a7e4-b946e89df857.png)

## bodyに格納するJSON Formatを確認するためには
上記で作法はわかりましたが、実際にPOSTする際のFormatを調べる方法はどうすればいいだろう？
となった際には下記の`HTTP request`を**POST**します。GETではなく**POST**です。

1. こちらのHTTP requestを実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ae3b3d1e-90d4-689b-7751-1d648a7264a4.png)

2. 長い**JSON**が返ってきます。"parent"を含めてで**databaseの行**の情報が大体わかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e1b645c4-4c16-c4a3-adaf-e3a056136506.png)

 返ってきた`JSON`に合わせてオブジェクトの型を構成することでAPI連携が実現できます。

```JSON
{
  "parent": {
    "database_id": "database-id"
  },
  "properties": {
    "Name": {
      "title": [
        {
          "text": {
            "content": "##入力したい情報 NAME列##"
          }
        }
      ]
    },
    "Tag": {
      "rich_text": [
        {
          "text": {
            "content": "##入力したい情報 Tag列##"
          }
        }
      ]
    }
  }
}
```
colorやidといった部分は特に必要がない部分ですので、削って問題ありません。

***
## Power Appsでデータの受け渡しを設定する
1. Power Automateでフローを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/9f402109-81a3-ae63-1f7f-4a32da4795a5.png)
1. HTTPにてデータベースに合わせたJSONを定義し、本文に入れ込みます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/f6d89843-68ac-1f97-87a1-a8754ce6bc73.png)

## Power Appsに設定！
1. Submitに当たるボタンのOnSelectプロパティに下記の様な式を設定します。

```PowerFx
UpdateContext({_code:PostToNotionBooksDB.Run(results.thumbnail,inpTitle.Text,inpAuthors.Text,inpPublisher.Text)});
```

2. UpdateContext変数にてフローから戻り値が設定できます。`HTTPの状態コード`から失敗した場合や成功した場合の定義ができるので、いろいろテストしてみてください。

# 最後に
今回は`Notion DB`に`Power Apps`の情報を、`Power Automate`の`HTTP`アクションにて、`Notion API`を活用することによって実現することが出来ました。
**バーコードによる入力簡素化ができて、筆者はスーパーハッピーです！**

Power Platformは兎に角、いろいろなつながりを活かして自分が欲しいものを欲しい時に作れる！そういった魅力があります！
是非ビジネスを中心に自分の周りの「あれしたい」「こうしたい」を実現してみていただければと思います！

**良いPower Lifeを！アディオス！**