Integromatによるプログラミングレス/サーバーレスwebAPI作成 その2(Create/Update編)

# Webhookを作成する。
さて、まずは簡単なWebhookを作成してみましょう。
メニューから"Scenarios"を選択し、"Create a new scenario"をクリックします。

![scenario.png](https://qiita-image-store.s3.amazonaws.com/0/211743/6019dbe9-4bed-1ad9-3107-29448e3c6d24.png)
こんな感じの画面が出ますが、今回は"Skip"を押してさっさとシナリオの作成に移ります。

![hatena.png](https://qiita-image-store.s3.amazonaws.com/0/211743/10529ef4-7416-622b-f5a7-7d96686c55e0.png)
こんな感じで空のシナリオが作成されます。ここで作るシナリオが実際のロジックになります。
まずは"?"マークをクリックし、出てきたメニューから「Webhooks」- 「Custome Webhook」を選択します。
![custom.png](https://qiita-image-store.s3.amazonaws.com/0/211743/ab7c89ab-4f09-20f9-3bba-d8fc7b30828b.png)

そうすると、Webhookがこのシナリオのトリガとして設定されます。
作成されたWebhookをクリックし、出てきたポップアップで"Add"をクリックすると、Webhookの定義ができます。
Webhookの定義画面では、名前と使用するデータ型を設定します。
今回はその1で作成した"Book API"型を使用しましょう。
設定が終わったら"Save"を押します。
![hook.png](https://qiita-image-store.s3.amazonaws.com/0/211743/f5894af4-a634-c962-08a9-d5d829479a2f.png)

そうすると、無事Webhookの定義がされ、赤枠の通りURLが発行されます。
![URL.png](https://qiita-image-store.s3.amazonaws.com/0/211743/6f3e5c95-ea1f-b4a7-e9c9-58ba31896df4.png)

これでWebhookを叩けるようにはなっていますが、せっかくなのでWebhookが呼ばれたときのレスポンスも定義します。

画面下のFAVORITESから「Webhook」のアイコンをクリックし、今度は「Webhook Response」を選択してみましょう。
WebhookResponseが作成されます。ポップアップが出ますが、今回は何も設定せずOKを押し、
最初に作った「Custom Webhook」に繋げます。
その後、「Run onse」を押して、このシナリオを実行状態にします。
![once.png](https://qiita-image-store.s3.amazonaws.com/0/211743/bb274101-6858-c48a-41c7-f760be5001b1.png)

適当なRESTクライアントツールで、先程Webhookの作成時に発行されたAPIにPOSTすると、200OKが帰ってきます。
![rest.png](https://qiita-image-store.s3.amazonaws.com/0/211743/00bb9b5f-c203-504b-269c-3351d6c06c6b.png)

これでWebhookの作成は完了です。

# Webhookの中身を実装する(Create編)
ここからWebhookの中身の実装に移って行きます。
まずシナリオ画面のFAVORITESの「+」アイコンから、「Data store」を選択します。
どのアクションを使うか聞かれるので、今回は「Add/replace a record」を選択します。
![add.png](https://qiita-image-store.s3.amazonaws.com/0/211743/b3bbf03b-35e0-fe5e-12b3-c0791784b055.png)

そうすると「Data store」が作成されるので、Data storeがWebhookとWebhook Responseの間に入るよう配置します。Data storeは「Books」を選択します。
![datastore.png](https://qiita-image-store.s3.amazonaws.com/0/211743/1136d43e-5061-e751-2c9b-c5d34cd6fc4d.png)

「Record」にはデータストアで定義しているデータ型に従った入力フォームが表示されます。
今回はWebhookで受け取った「Title」と「Author」の値をそれぞれのレコードに設定します。また、新規のレコード追加なので、Keyについては空で設定します。
![dsset.png](https://qiita-image-store.s3.amazonaws.com/0/211743/485becfb-5b0d-96b8-cb1d-7d7ac7782769.png)

これでCreateAPIは完成です。
試しに「Run once」を押してシナリオ実行状態にした上で、先ほどと同様、
適当なRESTクライアントツールで、先程Webhookの作成時に発行されたAPIにデータをPOSTします。
![rest.png](https://qiita-image-store.s3.amazonaws.com/0/211743/00bb9b5f-c203-504b-269c-3351d6c06c6b.png)

これで要求どおりにデータストアにデータが保存されているはずです。
データストアにデータが保存されたかどうかはメニューから"Data Stores"を選択し、Browseをクリックする事で確認できます。
![stored.png](https://qiita-image-store.s3.amazonaws.com/0/211743/f0875923-e2c1-8e90-2cad-90733012b9ca.png)

これでCreate APIは完成です。

# Webhookの中身を実装する(Update編)
今度はUpdate用のAPIを作成します。
基本的にCreate編と同じようにシナリオを作っていきます。
WebhookはCreateのときに作ったものを流用するのではなく、新規に作る必要があることに注意が必要です。

Create編と違うのは、データストアへのデータ格納時にKeyを指定するところです。
KeyとしてはWebhookで受け取った「Id」パラメータを指定します。
また、「Overwrite an existing record」にチェックを入れます。
![update.png](https://qiita-image-store.s3.amazonaws.com/0/211743/9e699b9f-6298-7752-facf-9c50c2433c2a.png)

これで作成したシナリオを実行し、今度はIdを指定してAPIにデータをPOSTします。
![u.png](https://qiita-image-store.s3.amazonaws.com/0/211743/59dd399e-9c6e-bd48-79a1-5ee07b6ed6f0.png)

メニューから"Data Stores"を選択し、Browseをクリックする事で、データがアップデートされたかどうかを確認できます。

これでUpdate用のAPIも作成できました。

次回(https://qiita.com/nendocode/items/f71982042018ddb8c74a)
はRead/Delete編です。

# 記事一覧
その1(https://qiita.com/nendocode/items/756b59b33d3e0cab4108)
その2(https://qiita.com/nendocode/items/c0d2f9fd1e812ea3e3bd)
その3(https://qiita.com/nendocode/items/f71982042018ddb8c74a)