ノーコードアプリ開発プラットフォーム bubble でPonparemall にアクセス
CData Connect Server を使ってPonparemall データのOData API エンドポイントを作成して、bubble からPonparemall データを使ったアプリを作成する方法。
杉本和也
リードエンジニア
最終更新日:2021-11-15
こんにちは!リードエンジニアの杉本です。
bubble はプログラミングを行わずにWebアプリケーションを開発できるクラウドサービスです。この記事では、CData Connect Server を経由して bubble からPonparemall に連携する方法を説明します。
CData Connect Server は、Ponparemall データのクラウド to クラウドの仮想OData インターフェースを提供し、bubble からリアルタイムにPonparemall データへ連携することができます。
Ponparemall の仮想OData API エンドポイントを作成
まずCData Connect Server でデータソースへの接続およびOData API エンドポイント作成を行います。
- CData Connect Server にログインして、Databases をクリックします。
- 利用できるデータソースアイコンから"Ponparemall" を選択します。
-
Ponparemall に接続するために必要なプロパティを入力します。
Ponparemall
に接続するには、ShopUrl、InventoryUserId、InventoryPassword、OrderUserId、OrderPassword、PaymentUserId、およびPaymentPassword
が必要です。
Ponparemall へのアクセスの設定
Ponparemall には各API のId とPassword が必要です。取得するには、以下の手順に従ってください。
- Ponparemall Manager にログインし、メニューの「各種申請」の「WebAPI利用申請」をクリックします。
- Web API メニューの「WebAPIサービス利用申請」をクリックし、利用申請を行います。
- 後日、Ponparemall から必要なId とPassword が送られてきます。
Ponparemall アカウントの認証
次の接続プロパティを設定して接続します。
- ShopUrl:接続先のPonparemall Shop URL
を設定。「http://storetst4.ponparemall.com/sample/」に含まれる「sample」の部分を入力します。
- InventoryUserId:「在庫API」のユーザID を設定。このプロパティは、Inventory テーブルにアクセスする場合に必要です。
- InventoryPassword:「在庫API」のパスワードを設定。このプロパティは、Inventory テーブルにアクセスする場合に必要です。
- OrderUserId:「受注API」のユーザID を設定。このプロパティは、Orders テーブルにアクセスする場合に必要です。
- OrderPassword:「受注API」のパスワードを設定。このプロパティは、Orders テーブルにアクセスする場合に必要です。
- PaymentUserId:「決済API」のユーザID を設定。このプロパティは、Payments テーブルにアクセスする場合に必要です。
- PaymentPassword:「決済API」のパスワードを設定。このプロパティは、Payments テーブルにアクセスする場合に必要です。
-
Test Database をクリックします。
-
Permission -> Add をクリックして、新しいユーザーを追加し、適切な権限を指定します。
-
API タブをクリックして OData API エンドポイントが生成されていることを確認します。
bubble API Connector の構成
それでは bubble側でCData Connect Server に連携するための API Connector を構成します。
- まず、bubble の Pluginsタブに移動して「Add Pluings」をクリックします。
- 一覧の中から「API Connector」を検索し、インストールしてください。
- インストール後、連携設定の画面が出てくるので、任意の名称を入力し、Header情報に「x-cdata-authtoken」と予め取得したCData Connect Server のTokenを設定します。
- 続いて、Ponparemallのエンドポイントを呼び出す定義を追加します。「GET」リクエストで、CData Connect Server で定義したAPIエンドポイントのURLを入力してください。
- 最後に「Initialize call」を行い、データ項目の型情報を調整します。
- 特に変更がなければデフォルトのままでOKです。以上で bubble から CData Connect Server への連携設定は完了です。
UIを構成する
それではbubble でPonparemall のデータを呼び出してみましょう。今回はExcel Likeなテーブルを表示できるUIコンポーネントでデータを呼び出してみます。
- Add Pluingsで「Excel-like HandsonTable」を追加します。
- あとは、このUIコンポーネントを配置して、CData Connect Server のPluginをバインドするだけでOKです。
- テーブルにバインドする配列要素はvalue 要素を指定してみてください。
- プレビュー画面に移動することで、Ponparemall からデータを取得した一覧画面が確認できます。
このように、CData Connect Serverを経由することで、API 側の複雑な仕様を意識せずにAPI 連携をしたウェブアプリをbubble で開発できます。他にも多くのデータソースに対応するCData Connect Server の詳細をこちらからご覧ください。