Go to Qiita Advent Calendar 2024 Top
LoginSignup
22
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@takahiro-kato(Takahiro Kato)

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

Posted at

はじめに

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

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

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

AWSの設定

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

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

APIConnect01.PNG

作成されると、次の画面になるので［トリガーを追加］ボタンをクリックします。
APIConnect02.PNG

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

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

APIConnect03.PNG

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

APIConnect04.PNG

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

APIConnect05.PNG

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

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

コーディングが終わったら画面右上の［保存］をクリック。
APIConnect06.PNG

補足

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

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

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

Bubbleの設定

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

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

APIConnect07.PNG

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

インストールが始まるので、完了後に［DONE］ボタンをクリック
APIConnect08.PNG

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

APIConnect09.PNG

画面が展開され、他の項目が設定可能になります。
まずは［API Name］を自分が理解しやすい任意の名前にします。（今回はLambda API）
名前の入力が終わったら、その右側にある［expand］ボタンをクリックします。
APIConnect10.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

Parametersで設定した値が、そのまま返ってきているのが確認できます。
返ってきた値に対してデータタイプを設定する必要があるので、値の右にあるドロップダウンメニューで設定して［SAVE］ボタンをクリックします。
（返ってきた値の生データを見たい場合は［Show raw data］をクリックすれば生データが表示されます）
APIConnect12.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

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

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

APIConnect13b.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

Workflowの画面に遷移した後は、［Click here to add an action...］をクリックして、表示されるメニューから［Plugins］-［Lambda API - Call test］をクリック。
APIConnect16.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

補足すると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

プロパティ画面が出現するので次の通りに設定します。
これは［Element］に［Data to display］をセットする設定です。
今回の例で言うと、Group Call testと名付けたGroup elementにstep1（Lambda API - Call test）の結果（Lambdaが返す値）をセットします。
APIConnect19.PNG

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

Designの画面に戻ってText key1's valueと名付けたText elementのプロパティ画面を表示し、次の通りに設定します。（Insert dynamic dataを使用して設定する事）
APIConnect20.PNG

Text key2's valueも同様に設定します。
image.png

以上で設定は完了です。

動作確認

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

次の様に入力してボタンをクリックして、
APIConnect22.PNG

次の様になれば完成です。お疲れ様でした。
APIConnect23.PNG

22
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?