Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

Bubble.ioでAPI Connectorを利用する

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を自動的に定義してくれるため非常に楽
  • 取得したレスポンスの保持についてもほぼ意識することなく出力できた
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?