ローコードアプリ開発プラットフォームRetool でe-Sales Manager 連携アプリを作成

こんにちは！リードエンジニアの杉本です。

Retool はローコードでWebベースの業務アプリケーションを構築できるクラウドサービスです。この記事では、CData Connect Server を経由して Retool からe-Sales Manager に連携するアプリを作成する方法を説明します。

CData Connect Server は、e-Sales Manager データのクラウド to クラウドの仮想OData インターフェースを提供し、Retool からリアルタイムにe-Sales Manager データへ連携することができます。

e-Sales Manager の仮想OData API エンドポイントを作成

まずCData Connect Server でデータソースへの接続およびOData API エンドポイント作成を行います。

1. CData Connect Server にログインして、Databases をクリックします。
2. 利用できるデータソースアイコンから"e-Sales Manager" を選択します。
3. e-Sales Manager に接続するために必要なプロパティを入力します。

   e セールスマネージャー Remix に接続するには、User、Passowrd、URL、TenantId パラメータが必要です。

   • User：API を実行するためのログインユーザーのユーザーID。
   • Password：API を実行するためのログインユーザーのユーザーパスワード
   。
   • URL：e-Sales Manager Remix エンドポイントへのURL。例：https://XXX.softbrain.co.jp
   • TenantId：e-Sales Manager Remix テナント名のTenantd。例：cdata
4. Test Database をクリックします。
5. Permission -> Add をクリックして、新しいユーザーを追加し、適切な権限を指定します。
6. API タブをクリックして OData API エンドポイントが生成されていることを確認します。

Resource の登録

続いてRetool 側の手順を進めていきます。Retool ではまず、構成したAPI にアクセスするためのリソース情報を登録します。

1. Retool にログインし、「Resouces」から「Create new」をクリックします。
2. 接続できるサービスの一覧が表示されるので「REST API」を選択します。
3. REST APIの設定画面では以下の通り必要な情報を入力します。Base URLには事前に作成したAPI のリソースエンドポイントを指定します。Headers には生成したユーザーの認証トークンを「x-cdata-authtoken」ヘッダーとして指定します。
4. リソースを作成後、アプリの作成確認ダイアログが出てくるので、今回はこれで作成してしまいます。（もちろんテンプレートなどを使っても構いません。）
5. 任意の名称を指定してください。

一覧画面の作成

リソースの登録が完了したら一覧画面を作成しましょう。

1. まず、先程登録したAPIのコネクションを使って、データを取得するための「Query」を定義します。すでに登録されているQueryの名前を変更し内部のAPIを定義を調整します。
2. デフォルトで Action Type、つまりAPIリクエストのメソッドが「GET」なので、このままでもデータは取得できます。ただ、初期状態ではすべての項目を取得してしまうので、API Serverがサポートするクエリパラメータを使って、取得項目やフィルター条件等を指定します。
3. URL parmeters を記述したら、設定を保存して実行してみましょう。以下のようにデータが取得できればOKです。
4. あとはこのデータを画面に表示するための「Table」UIコンポーネントを画面に配置します。
5. デフォルトえはJSON形式のサンプルデータが表示されているので、これを変更します。
6. 先程のクエリ名と対象のオブジェクト名を「{{QueryName.data.value}}」といった形で指定するだけでOKです。これだけで簡単に一覧画面が構成できました。
7. 作成した画面はプレビューモードで動作確認できます。

このように、CData Connect Serverを経由することで、API 側の複雑な仕様を意識せずにAPI 連携をしたアプリをRetool で開発できます。他にも多くのデータソースに対応するCData Connect Server の詳細をこちらからご覧ください。