【App BUilder】Square 連携用のAPI をノーコードで作ってApp Builder で使う方法

杉本和也
リードエンジニア

App Builder でSquareバックエンドAPI接続でお困りですか？CData API Serverでローコード開発、データ連携API構築を短時間実現。無償トライアルですぐにスタート。

App Builder はインフラジスティックス社が提供している「ドラッグアンドドロップで迅速なアプリケーション開発作成を可能にする」ローコードツールです。この記事では、CData API Server を使ってApp Builder から Square に接続してデータを取得する方法を説明します。

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなSquare OData サービスを作成していきましょう。

Square への接続

App Builder からSquare のデータを操作するには、まずSquare への接続を作成・設定します。

API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Square」を選択します。
事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >>
それでは、Square への接続設定を行っていきましょう！
Square OAuth 認証標準を使用します。OAuth を使用して認証するには、Square にアプリを登録してOAuthClientId、OAuthClientSecret、CallbackURL を入手します。OAuth の使用方法については、ヘルプドキュメントの「はじめに」セクションをご覧ください。

追加でLocationId を指定する必要がある場合があります。Locations テーブルをクエリすることでLocations のId を取得できます。または、クエリの検索項目にLocationId を設定することもできます。
接続情報の入力が完了したら、「保存およびテスト」をクリックします。

Square OAuth 認証標準を使用します。OAuth を使用して認証するには、Square にアプリを登録してOAuthClientId、OAuthClientSecret、CallbackURL を入手します。OAuth の使用方法については、ヘルプドキュメントの「はじめに」セクションをご覧ください。

追加でLocationId を指定する必要がある場合があります。Locations テーブルをクエリすることでLocations のId を取得できます。または、クエリの検索項目にLocationId を設定することもできます。

API Server のユーザー設定

次に、API Server 経由でSquare にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Square 用のAPI エンドポイントの作成

ユーザーを作成したら、Square のデータ用のAPI エンドポイントを作成していきます。

まず、「API」ページに移動し、「テーブルを追加」をクリックします。
アクセスしたい接続を選択し、次へをクリックします。
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でSquare への接続を設定してユーザーを作成し、API Server でSquare データのAPI を追加しました。これで、OData 形式のSquare データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

オンプレミスDB やファイルからのAPI Server 使用（オプション）

オンプレミスRDB やExcel/CSV などのファイルのデータを使用する場合には、API Server のCloug Gateway / SSH ポートフォワーディングが便利です。是非、Cloud Gatway の設定方法記事を参考にしてください。

App Builder でプロジェクトを作成する

Web API の準備ができたら、App Builder で作業を進めていきます。

App Builder を立ち上げて「＋新しいアプリ」をクリックします。

テンプレートから任意のものを選択します。

これでアプリを作成するための下準備が整いました。

データソースの追加

前述の通りApp Builder ではREST API に接続したアプリを手軽に作成することができます。API 接続部分はあらかじめデータソースとして定義しておくことで、簡単にUI とバインドすることができるようになるので、まずはこのデータソースの準備を進めます。

画面左の「データ」タブに移動し新しく「REST API」を追加します。

「REST API データソースの設定」で任意の名称を入力し、ソースとして「OpenAPI」または「URL の追加」を選択します。今回はOpenAPI の手順で解説します。OpenAPI を使わない場合は「URL の追加」で手動で設定します。

ここでは先程CData Connect AI からダウンロードしておいたOpenAPI の定義を使用するので「定義のアップロード」をクリックします。

アップロードが完了したら「エンドポイントの設定」をクリックします。

「エンドポイントの設定」ではOpenAPI で定義されているエンドポイントの一覧の中から利用するものを選択し、App Builder で利用するデータソースとして定義します。今回はデータの一覧が取得できるGET エンドポイントを指定し、事前に作成したユーザーID・トークンを使って必要な認証情報を入力します。
「送信」をクリックして「200OK」を受け取ったら接続はOKです。