【Bubble x AWS】Bubble API Connector + AWS Lambda + Amazon API Gatewayで連携

# はじめに
本記事はBubbleとAWSを連携させるために実施した作業内容を記載しています。

具体的には、Bubbleのプラグイン「API Connector」を使ってAWSのAPI Gatewayにリクエストを投げ、API Gatewayに統合されたLambda関数を実行します。

実装した処理の内容は、Bubble上に設置した入力項目の値をLambdaで受け取り、そのまま値を返してBubble上の表示項目に表示させるという簡単なものです。

# AWSの設定

まずはLambda関数の作成です。次の通りに設定して［関数の作成］ボタンをクリックします。

- オプション: 位置から作成
- 関数名: 任意の名前（今回は`test`）
- ランタイム: 使用するプログラムのランタイム（今回は`Node.js 12.x`）

![APIConnect01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/4305ccde-33b8-4f3a-16f1-600c923ce263.png)

作成されると、次の画面になるので［トリガーを追加］ボタンをクリックします。
![APIConnect02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/9394263d-eb19-69cc-a12f-2deb3b9236b7.png)

トリガーを「API Gateway」にして、次の通りに設定して［追加］ボタンをクリックします。

- API: 新規APIの作成
- テンプレート: HTTP API

![APIConnect03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/10bcde48-387b-0b7d-5ebe-781f10957e33.png)


元の画面に戻るので、API Gatewayの「API エンドポイント」をクリップボード等にコピーしておきます。（BubbleのAPI Connectorの設定時に使用）

![APIConnect04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/1c8c655f-2806-69d0-b1b6-ac1c82b8f30b.png)


次はLambdaのコーディングを行いますので、Lambda functionをクリックします。

![APIConnect05.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/a68e861e-e6b0-f103-5f53-69becadef2ab.png)

画面下部にコーディングの為の画面が表示されるので、次の内容をコーディング。
内容は受け取ったパラメーターの値を返すものです。

```node.js
exports.handler = async (event, context) => {
    const result = event.queryStringParameters;
    return result;
};
```

コーディングが終わったら画面右上の［保存］をクリック。
![APIConnect06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/51f0b696-a934-ca0f-a720-b808884ed533.png)


## 補足
Bubbleから送られたパラメーターは、`"queryStringParameters"`として送信されます。（Amazon CloudWatchで確認）

これらは、Lambdaの`exports.handler = async (event, context) => {...}`の`event`引数に格納されますので、`event.queryStringParameters`でBubbleから送付されたパラメーターを取得しています。

```json
{
    ...: {...},
    "queryStringParameters": {
        "key01-bubble": "value01-bubble",
        "key02-bubble": "value02-bubble"
    },
    ...: {...},
}
```

# Bubbleの設定

## API Connectorのインストール・設定

［Plugins］-［+Add plugins］ボタンをクリック

![APIConnect07.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/938c489d-e249-e954-afe6-1d09c6ded8fb.png)

画面左上の検索窓に「API Connector」と入力し、表示された「API Connector」の［Install］ボタンをクリック。

インストールが始まるので、完了後に［DONE］ボタンをクリック
![APIConnect08.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/688aebea-19fa-b184-56a1-9a53802dc031.png)


元の画面に自動的に戻ったら、API Connectorの設定画面が表示されます。
設定画面右上の［expand］ボタンをクリックします。

![APIConnect09.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/aa18d647-9bdf-809c-c835-10b69e0f3683.png)

画面が展開され、他の項目が設定可能になります。
まずは［API Name］を自分が理解しやすい任意の名前にします。（今回は`Lambda API`）
名前の入力が終わったら、その右側にある［expand］ボタンをクリックします。
![APIConnect10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/a5c40760-d433-33f0-a902-f8661ee3a8b3.png)

更に画面が展開され、他の項目が設定可能になりますので、次の通りに設定します。

- Name: 自分が理解しやすい任意の名前（今回は`Call test`）
- Use as: Action
- APIエンドポイント(上から２行目の赤枠部分): API Gatewayの「API エンドポイント」
- Headers
    - Key: Content-type
    - value: application/json
- Parameters
    - １行目
        - Key: データを表す任意の値（今回は`key01-bubble`）
        - value: データの値（任意でよい。今回は`value01-bubble`）
        - Private: チェックを外す
    - ２行目
        - Key: データを表す任意の値（今回は`key02-bubble`）
        - value: データの値（任意でよい。今回は`value02-bubble`））
        - Private: チェックを外す

設定が完了したら［initialize call］ボタンをクリック。
![APIConnect11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/4bd0a93d-12a1-aa05-ebce-45bd7db86080.png)


Parametersで設定した値が、そのまま返ってきているのが確認できます。
返ってきた値に対してデータタイプを設定する必要があるので、値の右にあるドロップダウンメニューで設定して［SAVE］ボタンをクリックします。
（返ってきた値の生データを見たい場合は［Show raw data］をクリックすれば生データが表示されます）
![APIConnect12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/a4cb7a05-ffac-5713-197d-4d98c30108fb.png)

SAVEが正常に完了して初めて、このAPIが設定可能になるので必ずここまで設定しましょう。後で設定するBubbleの［Type of content］等に作成したAPIが表示されない場合はSAVEを忘れている可能性大です。

これで通信の確認が出来ました。

## UIの作成

Input elementに入力した値が、Button element押下時にLambdaに渡されて、その値をLambdaがBubbleに返してText elementに表示させるというものを作りますので、その為に必要なelementを設置します。

次のelementを画面に設置します。

- Group（Lambdaから返ってきた値の受皿用）
- Input（value01-bubble入力用）
- Input（value02-bubble入力用）
- Button（AWS Lambda実行用）
- Text（Lambdaから帰ってきたvalue01-bubble表示用）
- Text（Lambdaから帰ってきたvalue02-bubble表示用）

![APIConnect13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/36a583d9-7ce8-04c4-a88e-958dda4f995b.png)

elementの設置が終わった後はGroup elementの設定です。次のとおりに設定します。

- element名: 任意の名前（今回は`Group Call test`）
- Type of content: API Connectorの［Name］に設定した値（今回は`Call test`）

![APIConnect13b.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/c8ca3813-13c7-f78d-0c4e-9d1387bbdcef.png)


必須作業ではありませんが、先ほどのGroup elementと同様に、他の各elementにも判別しやすい任意のelement名をつけます。
今回は次の通りです。

- Group（Lambdaから返ってきた値の受皿用）: Group Call test
- Input（value01-bubble入力用）: Input key1's value
- Input（value02-bubble入力用）: Input key2's value
- Button（AWS Lambda実行用）: Button Request to AWS
- Text（Lambdaから帰ってきたvalue01-bubble表示用）: Text key1's value
- Text（Lambdaから帰ってきたvalue02-bubble表示用）: Text key2's value

次にWorkflowを設定します。Button elementを押下した際にLambdaにRequestする処理の設定です。
Button elementのプロパティから［Start\Edit workflow］ボタンをクリック。
![APIConnect15.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/41775942-af24-9da2-2263-0faa09450391.png)

Workflowの画面に遷移した後は、［Click here to add an action...］をクリックして、表示されるメニューから［Plugins］-［Lambda API - Call test］をクリック。
![APIConnect16.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/98d365dd-2c87-3ebe-f315-59d9a369e6a5.png)

プロパティ画面が出現するので次の通りに設定します。
これで、パラメーターのvalueがInput elementに入力された値になります。

- (param.)key01-bubbl: Input key1's value's value（Insert dynamic dataを使用して設定する事）
- (param.)key02-bubbl: Input key2's value's value（Insert dynamic dataを使用して設定する事）

![APIConnect17.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/0c19be35-5b78-f7b6-33ab-b3b54a7f1130.png)

補足すると`Input key1's value's value`は「element名の（Input key1's value's）値（value）」という意味です。element名次第で今回の様に紛らわしい値になりますね、反省...。

LambdaにRequestした後は、Lambdaから返ってくる値を受け取らなければいけません。
その為のActionを設定します。［Click here to add an action...］をクリックして、表示されるメニューから［Element Actions］-［Display data］をクリック。
![APIConnect18.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/0e4e130f-24ab-1b83-1ad4-65c62ecec612.png)

プロパティ画面が出現するので次の通りに設定します。
これは［Element］に［Data to display］をセットする設定です。
今回の例で言うと、Group Call testと名付けたGroup elementにstep1（Lambda API - Call test）の結果（Lambdaが返す値）をセットします。
![APIConnect19.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/93ee216b-dc1c-281c-aab8-53a55f790e19.png)

次はText elementにLambdaから返ってきた値を表示させるように設定します。

Designの画面に戻ってText key1's valueと名付けたText elementのプロパティ画面を表示し、次の通りに設定します。（Insert dynamic dataを使用して設定する事）
![APIConnect20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/69c6bd67-c987-666a-6b2e-ad6dcfa020e2.png)

Text key2's valueも同様に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/ba063b76-e8f7-4421-6b30-9f6a0c4c2309.png)

以上で設定は完了です。

# 動作確認

最後にプレビュー機能で動作確認してみましょう。

次の様に入力してボタンをクリックして、
![APIConnect22.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/8c2a8f2b-94f6-25c6-e26a-b42256760212.png)

次の様になれば完成です。お疲れ様でした。
![APIConnect23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/42dcec13-343b-beea-2a61-4ac528b2bcb9.png)