LoginSignup
4

More than 1 year has passed since last update.

Bubble.ioでAPI Connectorを利用する

Posted at

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


API Connectorの準備

インストール

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

設定

  1. 今回は郵便番号から住所を検索できるzipcloudを利用する
    以下を設定し、「Reinitialize call」を押下
  2. 設定したKey(今回はzipcode)、Value(今回は1110032)でリクエストされ、
    レスポンスが解析される
    内容が期待通りであれば、「SAVE」を押下003.JPG

画面実装

  • 完成イメージ
    019.JPG

Group

  • APIを紐づけるGroupを作成
    004.JPG

Input

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

Button

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

Text

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

動作確認

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

感想

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

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
4