Bubble.ioでAPI Connectorを利用する

Bubble.ioでAPI Connectorを利用したときの個人メモ

---

API Connectorの準備

インストール

1. Pluginsにて「Add Plugins」を押下
2. 「API Connector」を検索し、「Instal」を押下

設定

1. 今回は郵便番号から住所を検索できるzipcloudを利用する
   以下を設定し、「Reinitialize call」を押下
   • API Name:Zipcode
   • Authentication:None or self-handled
   • Name:getAddress
   • Use as:Action
   • Data type:JSON
   • HTTP method:GET
   • URL:http://zipcloud.ibsnet.co.jp/api/search
   • Key:zipcode
   • Value:1110032
2. 設定したKey（今回はzipcode）、Value（今回は1110032）でリクエストされ、
   レスポンスが解析される
   内容が期待通りであれば、「SAVE」を押下

画面実装

• 完成イメージ
  

Group

• APIを紐づけるGroupを作成
  

Input

• 郵便を入力するInputをGroup上に作成
  

Button

1. APIを実行するButtonをGroup上に作成し、ワークフローを作成
   
2. 「Plugins」からAPI（今回はZipcode - getAddress）を選択
   
3. API呼び出し時のパラメータとしてInputの値を指定
   
4. レスポンスを保持する要素にGroupを指定
   
   
5. 最後にInputをリセットするアクションを追加（任意）
   
   

Text

• レスポンスを表示するTextをGroup上に作成
  　※「Make this element fixed-width」にチェックを入れる
  

動作確認

1. 郵便番号を入力し、検索ボタンを押下
   
2. 検索結果が出力される
   

感想

• APIのI/Fを自動的に定義してくれるため非常に楽
• 取得したレスポンスの保持についてもほぼ意識することなく出力できた