AWS App Studio (以下App Studio) は、生成AI を利用したアプリケーション開発が可能なAWS の新しいサービスで、このブログ執筆の時点ではプレビュー公開となっています。
App Studio の利用料金は基本的に公開されたアプリケーションにのみ発生し、開発環境は無料で使用できるためじっくり検証も可能です。
App Studio の基本的な利用方法については公式ページにわかりやすくまとまっていますのでこちらもぜひご参照ください。
今回はApp Studio が提供している外部連携のためのコネクターの一つ「OpenAPI コネクター」を使ってGoogle スプレッドシートと連携してみたいと思います。
構成
今回の構成は以下のとおりです。
CData Connect Cloud がApp Studio とGoogle スプレッドシートの間で相互の橋渡しを行い、ノーコードによるデータ連携が可能になっています。
CData Connect Cloud について
CData Connect Cloud は、App Studio のようなローコード / ノーコードツール、Google スプレッドシートやExcel 365 などのクラウド上のスプレッドシート、BIツールなどから100種類以上のSaaS にノーコードで接続可能なData Connectivity as a Service です。
各ツールとのインターフェースとしてREST API, OData, TDS（Virtual SQL Server）をサポートしており、この機能により異なるシステム間でのシームレスな連携を実現しています。
事前準備
CData Connect Cloud へのサインアップ
CData Connect Cloud のアカウントを持っていない場合は30日間の無料トライアルにサインアップしましょう。
App Studio からCData Connect Cloud に接続するためのアクセストークンを作成
アクセストークンの作成手順
- CData Connect Cloud の管理画面右上の歯車アイコンをクリックし、「Settings」ページにある「Access Tokens」タブを表示
- 「Create PAT」をクリックしてアクセストークンを作成し、「Your personal acces token is:」の内容を保存
一度表示されたアクセストークンは再表示できないので注意しましょう。
- 作成したアクセストークンの内容がわからなくなってしまったら該当するアクセストークンの右側にある更新ボタンで再生成します
Google アカウントにログイン後、スプレッドシートを追加
- スプレッドシート名：任意 (今回はAkatsuka AppStudio Demo)
- シートには任意の一覧情報を登録
以上で事前準備は完了です。
CData Connect Cloud側の設定
データソースとなるGoogle スプレッドシートとの接続を追加し、Virtual Dataset を作成すると、AWS App Studio から接続するためのインターフェースが自動で生成されます。
Connections にてGoogle スプレッドシート の接続設定を追加
CData Cnnect Cloud にログイン後、左側から「Connections」を選択後、「Add Connection」ボタンをクリックします。
接続情報の一覧から「Google Seets」を選択
接続に必要な情報を設定
各項目の設定内容
- Connection Name : 任意の名前 (今回はGoogleSheetsAkatsukaAppStudioDemo)
- Authentication : OAuth
- Spreadsheet : 事前準備で作成したスプレッドシート名
- Folder Name : スプレッドシートを保存したフォルダー名 (今回は空欄)
以上の設定でApp Studio はCData Connect Cloud に接続するだけでGoogle スプレッドシートにアクセス可能になりました。
Virtual Datasets の作成
つぎにVirtual Datasets を作成します
CData Connect Cloud の左側のメニューから「Virtual Datasets」を選択後、「Add」ボタンにてWorkspace (今回は AppStudioDemo) を追加
作成したWorkspace に移動後、「Add」ボタンをクリックして表示される「Add Asset」内の「Tables & Views」を選択
先ほど作成したGoogle スプレッドシートの接続 (今回はGoogleSheetsAkatsukaAppStudioDemo) を選択
Workspace に追加したGoogle スプレッドシートの接続をクリックし、「Preview」タブでスプレッドシートの情報が表示されていることを確認
Workspace のページに戻り、View Endpoints をクリック
OpenAPIのSpecification ファイルをVersion 3.0 形式でダウンロード
以上でCData Connect Cloud 側の準備ができました。
App Studio 側の設定
OpenAPI Connector の作成
OpenAPI Connector を作成するためにあらかじめ管理者権限でログインしておきましょう。
App Studio が外部のリソースと接続するためのコネクター には、Amazon Aurora、Amazon DynamoDB などのDB と連携するためのデータコネクターと、API などデータベース以外と連携するオートメーションコネクターの二種類が用意されています。
今回は後者のオートメーションコネクターのうち、API コネクターに分類される「OpenAPI Connector」を使用します。
API コネクターとして現在提供されているのは以下の三種類です。
App Studio のAdnin hub ダッシュボードにて、「Create Connector」をクリック
「Select a connector」ページにて「OpenAPI Connector」を選択
「OpenAPI Connector Configuration」ページにて必要な項目を設定して保存
- General
- Name : 任意の名前 (今回はAkatsuka_AppStudio_Demo)
- Deslription : 説明 (今回は空白)
- Credentials
- Base URL : OpenAPIのSpecificationファイルにて確認
- Authentication method : Basic
- HTTP basic credentials
- Username : CData Connect Cloud へのログインユーザー名 (メールアドレス)
- Password : 事前準備で作成したCData Connect Cloud のアクセストークン
- OpenAPI Spec File
- CData Connect Cloud のダウンロードしたOpenAPIのSpecificationファイルをドラッグ＆ドロップで追加
以上でコネクターの作成は完了です。
アプリケーションの新規作成
つぎにアプリケーションを新規します。
Builder hub にて「Create app」をクリック
「App name」 を設定し、今回はCRAD のフル機能ではなくシンプルな一覧ページのみ作成するため「Start from scratch」を選択
コネクタの選択画面スキップしてアプリケーションを作成します。
「Your app has been created」が表示されたら「Edit app」をクリック
それではさっそくアプリケーションの設定に進みましょう。
Automation の設定
データコネクターはDB とApp Studio 側のオプジェクトを自動でマッピングしてくれますが、オートメーションコネクターは手動で行う必要があるため、Automation でAPI リクエストの実行処理を設定し、表示を行うフロントエンド側でマッピングを行います。
アプリケーションの設定ページにある「Autonation」タブを開いたら、「Add automation」をクリック
右側メニューの「Actions」タブの中にある「Invoke API」をドラッグ＆ドロップして処理のフローに追加
右側メニューの「Properties」タブを開き、「Connector」の項目で先に作成しておいたコネクター (今回は Akatsuka_AppStudio_Demo) を選択
「Operation」の項目でGet メソッドなど呼び出したい処理が表示されないケースがあるようなので、次の「Configure API request」の設定で対応します。
確認したところ今回の設定ではコネクターの設定時点でOpenAPIのSpecification ファイルの内容が保存されていなかったため、原因が分かりましたらこちらに追記いたします。
参考までに、「Operation」の項目が表示される場合は以下のようになります。
Configure API request の設定
「Operation」の項目が選択可能な場合はあらかじめこちらの項目が設定済みになっていますが、今回は手動で入力しました。
OpenAPIのSpecificationファイルの内容を確認し、Google スプレッドシートの内容を一覧で取得するためのリクエストを設定します。
- Method : Get
- Path : Get に対応したパス (今回は/Akatsuka_AppStudio_Demo_Sheet1)
OpenAPIのSpecification ファイルの内容の例
プレビューで使用するモックデータを登録
プレビューでは実際のAPI リクエストは行われないため、モックデータを使って表示の確認を行います。
今回はMocked output に表示れているスケルトンに合わせてbody 要素配下にvalue 要素としてプレビュー用のデータを追加しています。
モックデータのサンプル
{
"body":
{
"value": [
{
"id": 2,
"month": 1,
"amount": 500000
},
{
"id": 3,
"month": 2,
"amount": 500000
},
{
"id": 4,
"month": 3,
"amount": 500000
}
],
},
/*
* Checkout the HTTP RFC for more info:
* https://www.rfc-editor.org/rfc/rfc9110#name-status-codes
*/
statusCode: 200,
}
Output の設定
右側メニューで「Automation」の設定に移動し、API リクエストで取得したデータを出力するための設定を追加します。
今回はbody 要素配下のvalue に格納されたデータを取得したいので、以下のように設定しています。
- フォーマット : {{results.API アクションの名前.body 要素?value 配下のデータ一式}}
- 今回の設定 : {{results.InvokeAPI1.body?.value}}
どのような構造でデータが取得できるかはPostman などで実際にリクエストしてみて確認するのが良さそうです。
以上でAPI リクエスト関連の設定が完了しました。
Pages の設定
最後にフロントエンド側の実装として、一覧表示を行うテーブルに対して列ごとの項目を設定していきます。
Pages タブを表示し、右側の「Conponents」から「Table」を選択
右側の「Properties」タブにて「Navigation label」を任意の名前で設定 (今回はgoogle sheets)
左側のメニューで「table1」を表示し、右側の「Content」の内容を設定
- Content
- Source : Automation
- Automation : Automation1(先ほど作成したもの)
- Clumns : カラムごとに APIからのレスポンスを追加
Columns の設定内容Value は {{currentRow:表示したい要素名}} のフォーマットになります。
プレビューでの動作確認
プレビューでは実際のAPI リクエストは行わず、先ほど作成したモックデータを使ってテストを行います。
左上の「Preview」をクリック
問題なく表示できることを確認
テスト環境での動作確認
プレビューでの動作確認ができたらテスト環境にデプロイしてみます。
右上の「Publish」メニューから「Publish Center」を選択
パイプラインの表示に従いテスト環境への「Publish」をクリック
しばらく待つとビルドが完了し、テスト環境のURL が表示されます。
テスト環境用のURL にアクセス
Google スプレッドシートのデータが表示されていることを確認できました！
Amount の表示がテキスト型になっているので、数値型に変換しても良いかもしれません。
以上でCData Connect Cloud を使ってApp Studio からGoogle スプレッドシートに接続できました。
他のブログではMariaDB からノーコードで生成したREST API と App Studio の連携も行っていますのでぜひご覧ください。
AWS App Studio でAPI 連携してみた！
関連コンテンツ
