CData Software Blog

クラウド連携のCData Software の技術ブログです。

ローコードアプリ開発プラットフォーム Retool で API 連携アプリを作成:CData API Server

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/retool_create.gif

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

今回は最近話題にあがるようになってきたローコードアプリ開発プラットフォーム「Retool」で REST API を使った一覧や登録画面の作成方法を紹介したいと思います!

また、Retool の使い方だけでなく、API自動生成ツール「CData API Server」を使った APIの構築と併せてお送りします。

Retool とは?

Retoolは前述の通り、ローコードベースでWebベースの業務アプリケーションを構築できるクラウドサービスです。

retool.com

f:id:sugimomoto:20210312195804p:plain

以下の動画のように、必要なUIコンポーネントをさくさくと配置して、Webアプリケーションが作成できます。

f:id:sugimomoto:20210312195825g:plain

また、個人的な感触としてはノーコードというよりは、APISQL などをうまく活用できる仕組みが整っていることが特徴かなと思います。

インテグレーション機能として、各種RDBAPIをリソースとして登録し、柔軟にUIから呼び出し、マッピング、リクエストを行うことができるようになっていますし、それらが直感的に扱いやすい開発画面になっているなという印象的です。

retool.com

f:id:sugimomoto:20210312195843p:plain

UIは現在英語のみですが、国内でも事例が出ており、三越伊勢丹ITグループ会社が利用していたりします。

https://prtimes.jp/main/html/rd/p/000000002.000074910.html

今回は一番ベーシックな使い方として、REST APIを用いた簡単なアプリケーションの作成方法を紹介したいと思います。

シナリオ

作成するアプリケーションは API から取得したデータを表示する一覧画面、そしてそのAPIに対してデータを登録するフォーム画面です。

f:id:sugimomoto:20210312195850p:plain

以下のような感じで動かすことができます。

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/retool_demo.gif

APIの仕様

接続している APIAmazon RDS 上に PostgreSQL をデータソースとして開発します。

f:id:sugimomoto:20210312195915p:plain

ただ、開発といってもプログラミングなどは実施せず、こちらもローコードでAPIが自動生成できる製品である「CData API Server」を使います。

www.cdata.com

f:id:sugimomoto:20210312195924p:plain

API Server を利用することで、様々なRDB・データソースから使いやすいREST API(OData・OpenAPI)を自動生成することができます。

これによりビジネスリソースを手軽にAPI化して、クラウドサービス等から接続して利用できるようになります。

f:id:sugimomoto:20210312201703p:plain

今回構成した APIAWS EC2にホスティングされていて、Amazon RDSのPsotgreSQLから顧客情報(Contact)テーブルにアクセスできるようになっています。

以下のように GET でデータを取得したり

f:id:sugimomoto:20210312195930p:plain

POST や PUT・DELETE メソッドを利用することで、データの登録・更新・削除を行うことも可能です。

f:id:sugimomoto:20210312195937p:plain

また、データの取得は様々なパラメータをサポートしており、カラムの選択から柔軟なフィルター条件、並び替えまで実施することができます。

cdn.cdata.com

手順

それでは、実際にAPI Serverを使ってAPIを構築し、Retoolから接続する手順を解説していきます。

API Server の構築手順

まずは CData API Server を使ってAPIを構築しましょう。

API Server の環境準備

API Server 任意のAzure・AWSGCPなどの任意のクラウドサービス上にホスティングできます。

今回はAWS EC2に構築しました。構築方法については書き手順を参考にしてみてください。

www.cdatablog.jp

また、AWS AMIのイメージとして、サクッと構築することも可能です。

aws.amazon.com

API Server 構築後、対象のURLにアクセスしログインを行います。

f:id:sugimomoto:20210312195943p:plain

接続情報の構成

API Server でAPIを作成する場合は、まず接続先となるデータソースを指定します。

「設定」→「接続」から任意のデータソースを指定します。今回はAmazon RDSのPsotgreSQLに接続するので、「PostgreSQL」を選択しました。

f:id:sugimomoto:20210312195952p:plain

接続設定画面にて、必要な接続情報を入力します。

PostgreSQLの場合は「Server」「Port」「Database」「User」「Password」を指定します。

f:id:sugimomoto:20210312200015p:plain

API リソースの定義

接続情報を作成後、API 化するテーブルをリソースとして定義します。

「設定」→「リソース」から「リソースを追加」をクリックし

f:id:sugimomoto:20210312200023p:plain

先程作成した接続情報を選択

f:id:sugimomoto:20210312200029p:plain

API化の対象となるテーブルを選択します。

今回は顧客情報を管理しているContactテーブルを選択しました。

f:id:sugimomoto:20210312200035p:plain

最後にこのAPIリソースに対して許可されるメソッド、(GET:データの取得、POST:データの登録、PUT:データの更新、DELETE:データの削除)および公開するカラム情報を指定します。

これでAPIの作成は完了です。

f:id:sugimomoto:20210312200041p:plain

ユーザーの追加

最後にAPIに接続するためのユーザーを登録します。「設定」→「ユーザー」から「追加」ボタンをクリックします。

f:id:sugimomoto:20210312200114p:plain

ユーザー名と必要な権限を付与して作成します。作成後、認証用のTokenが表示されるので、控えておきましょう。

f:id:sugimomoto:20210312200049p:plain

API の確認

生成されたAPIは「API」タブで仕様を確認できます。

f:id:sugimomoto:20210312200125p:plain

エンドポイントのリンクをクリックしてみると、JSON形式でデータを取得することができました。

f:id:sugimomoto:20210312200917p:plain

Retool の構築手順

それでは、API Server の構築が完了したので、今度はRetool側の手順を進めていきます。

Resourceの登録

Retool ではまず、構成したAPIにアクセスするためのリソース情報を登録します。

Retool にログインし、「Resouces」から「Create new」をクリックします。

f:id:sugimomoto:20210312200133p:plain

接続できるサービスの一覧が表示されるので「REST API」を選択します。

f:id:sugimomoto:20210312200139p:plain

REST APIの設定画面では以下の通り必要な情報を入力します。

プロパティ名 備考
Name 例)CData API Server 任意の名称を指定します。
Base URL 例)http://XXXX:8080/api.rsc/postgres_public_Contact/ 事前に作成したAPI のリソースエンドポイントを指定します。
Headers 例)x-cdata-authtoken: 1w8G2a0k8V3k4c3N2n0r 生成したユーザーの認証トークンを「x-cdata-authtoken」ヘッダーとして指定します。

f:id:sugimomoto:20210312200148p:plain

リソースを作成後、アプリの作成確認ダイアログが出てくるので、今回はこれで作成してしまいます。(もちろんテンプレートなどを使っても構いません。)

f:id:sugimomoto:20210312200155p:plain

任意の名称を指定してください。

f:id:sugimomoto:20210312200201p:plain

一覧画面の作成

それでは早速一覧画面を構成していきましょう。

まず、先程登録したAPIのコネクションを使って、データを取得するための「Query」を定義します。

すでに登録されているQueryの名前を「GetContact」に変更し

f:id:sugimomoto:20210312200207p:plain

内部のAPIを定義を調整します。

デフォルトで Action Type、つまりAPIリクエストのメソッドが「GET」なので、このままでもデータは取得できます。ただ、初期状態ではすべての項目を取得してしまうので、API Serverがサポートするクエリパラメータを使って、取得項目を指定します。

API Serverでは「$select」というパラメータを使って、取得したようの項目を定義できます。以下のようにURL parametersに指定しています。

http://XXXX:8080/api.rsc/postgres_public_Contact?$select=Id,FirstName,LastName,Email

f:id:sugimomoto:20210312200215p:plain

ほかにも$filterや$top、といった様々なクエリパラメータをサポートしています。

URL parmeters を記述したら、設定を保存して実行してみましょう。

以下のようにデータが取得できればOKです。

f:id:sugimomoto:20210312200220p:plain

あとはこのデータを画面に表示するための「Table」UIコンポーネントを画面に配置します。

f:id:sugimomoto:20210312200225p:plain

デフォルトえはJSON形式のサンプルデータが表示されているので、これを変更します。

f:id:sugimomoto:20210312200233p:plain

先程のクエリ名と対象のオブジェクト名を「{{GetContract.data.value}}」といった形で指定するだけでOKです。これだけで簡単に一覧画面が構成できました。

f:id:sugimomoto:20210312200240p:plain

入力フォームの追加

続いて入力フォームも作成しましょう。

まず入力用の「Text Input」を画面に配置します。

f:id:sugimomoto:20210312200249p:plain

「Inspect」という設定画面でUIコンポーネントのIDとLabelを以下のように指定します。

f:id:sugimomoto:20210312200255p:plain

同じような要領で、4つ項目を作成しました。

f:id:sugimomoto:20210312200314p:plain

続いて、データ登録のリクエストを行うためのQueryを登録します。画面右下の「New」→「Resource Query」で追加することができます。

f:id:sugimomoto:20210312200320p:plain

「AddContact」という名前で作成しました。

f:id:sugimomoto:20210312200325p:plain

API Serverでデータを登録する場合は、POSTメソッドを使うので、Action Typeで「POST」を選んでください。

リクエストのデータ・フォーマットはBodyにJSONオブジェクトを入力する形式なので、Bodyの要素で「JSON」を選択し、左の項目にリクエスト時のプロパティ名、右側にTextInputの値を参照するための設定をそれぞれ指定します。

f:id:sugimomoto:20210312200329p:plain

最後にこのQueryを呼び出すためのボタンを配置します。

f:id:sugimomoto:20210312200334p:plain

ボタンを配置したら「Inspect」の「On Click」で先程登録したQuery「AddContact」を指定すればOKです。

f:id:sugimomoto:20210312200341p:plain

プレビューモードで動作確認

それでは、作成した画面をプレビューモードで確認してみましょう。

以下のようにTextInputに必要な情報を入力して、Submitをクリックします。

f:id:sugimomoto:20210312200408p:plain

一覧画面を更新してみると、無事データが登録できていました。Retoolは素晴らしく簡単にREST APIがUIと併せて扱えてとてもいいですね!

f:id:sugimomoto:20210312200348p:plain

おわりに

同じような手順でデータを更新したり、削除したりも実施できます。

また、今回はPostgreSQLAPI Serverのリソースとしましたが、外にも様々なリソースをAPIとして自動生成して扱うことができます。

www.cdata.com

f:id:sugimomoto:20210312200416p:plain

Retoolと併せて、是非色々と活用してみてください。