AWS App Studio を触ってみよう！ API 連携してみよう！ 2024/10/12 JAWS FESTA 2024 in 広島 CData Software Japan / Seiji Akatsuka 本セッション用の検証時点の情報に基づいた資料です

2 Who I am • Seiji Akatsuka • Job • CData Software Japan Senior Partner Success Engineer • Community • JAWS-UG Tohoku / Yamagata • SNS：@seijiakatsuka

3 アジェンダ • About CData • AWS App Studio についておさらい • AWS App Studio を触ってみよう！ • API 連携してみよう！ • 参考資料

4 本社：US (NC州), オフィス：日本 / 欧州 / インド / 中国 エンタープライズ・開発者・データサイエンティスト向けの “real-time data connectivity” ソフトウェアのリーダー 日本法人 : CData Software Japan 合同会社 本社：宮城県仙台市 設立：2016/06 〜 © 2024 CData Software Inc CData Software EMPLOYEES 400+ ACTIVE CUSTOMERS 10,000+ OEM PARTNERS 180+ About CData

5 データのレプリカを作成、最新データ を維持することで、任意のデータベー ス、アプリケーション、または分析 ツールからアクセスできるようにしま す。 ノーコードのドラッグ&ドロップ操作 でのワークフローデザイナーを使用し て、異種データソース間のデータ連携 を促進します。 DATA INTEGRATION B2B INTEGRATION オンプレミスでもクラウドでも、250 を超えるクラウド アプリケーション、 データベース、API、サービスにリアル タイムに簡単に接続できます。 REAL-TIME CONNECTIVITY © 2024 CData Software Inc CData のセルフサービスで利用可能なデータ接続 ソリューションは、270を超える主要なオンプレ ミスおよびクラウドアプリケーションへの統一的 なリアルタイムデータアクセスを提供します。 CData is the real-time data connectivity company CData Drivers CData Sync CData Arc ライブラリ サービス ｱﾌﾟﾘｹｰｼｮﾝ ｱﾌﾟﾘｹｰｼｮﾝ ｱﾌﾟﾘｹｰｼｮﾝ ｱﾌﾟﾘｹｰｼｮﾝ CData DBAmp CData API Server CData Connect Cloud

AWS App Studio

7 生成人工知能 (AI) を活用した統合開発環境（IDE） ソフトウェア開発スキルのない技術者 (IT プロジェクトマネージャー、データエンジニア、エンタープ ライズアーキテクトなど) に対してアプリケーション開発への道 が開かれ、ビジネスアプリケーションを迅速に構築できるよう になることで、運用に関する専門知識が不要。 https://aws.amazon.com/jp/about-aws/whats-new/2024/07/aws-app-studio-preview/ App Studio での構築は無料 公開済みのアプリケーションを使用した時間に対してのみ課金、 他のローコード製品と比較して最大 80% のコスト削減が可能。

8 re:Invent でも人気みたい！

AWS App Studio を触ってみよう！

10 チュートリアルで Hello World! https://aws.amazon.com/jp/blogs/news/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview/

11 App Studio の有効化 (オレゴンリージョン) • IAM Identity Center インスタンスがない • アカウントインスタンスが自動で作られる • すでに組織インスタンスがある • 既存のIAM Identity Centerグループを選 択し、App Studioへのアクセスできるよ うにする • すでにアカウントインスタンスがあるが権限 が不足している • App Studio の利用不可。管理者に依頼 今回は検証用に新規にAWS アカウントを作成

12 CodeCatalyst との統合 • AWS によるフルマネージドなIDE • リポジトリ管理 • CI/CD パイプライン管理 • Visual Studio とも連携可能

13 アクセスポータルからのログインが有効化

14 APP Studio のダッシュボード • Admimn hub • Admin / Builder などのRole管理 • Connector (DBやAPI連携) • 全てのアプリケーション • Builder hub • アプリケーションの作成と共有

15 生成AI によるアプリケーションの生成

16 生成されたアプリケーション Pages タブでフロントエンドの実装 Automations タブでロジックの実装

API 連携してみよう！

18 REST API経由 で取得した顧客情報の一覧表示ページ

19 データベースにREST API で連携 • オンプレの基幹システムのデータをクラウドから活用 • 公共性のある情報をオープンデータとして活用 ※今回の検証ではEC2 上の MariaDB で代用

20 CData API Server でREST API をノーコードで生成 • ノーコードでREST API を生成 • 300 以上のデータソースに対応 • OpenAPI Spec も取得可能 • API のドキュメントも自動生成 • オンプレ/クラウド対応 CData API Server とは

21 App Studio のコネクターの種類 分類 用途 特徴 データコネクター DB と連携するコネクター データベース側のテーブルとア プリケーションのデータモデル は自動でマッピングされる オートメーションコネクター API など上記以外のコネクター (いまのところ) オートメー ションのInvoke API アクショ ンなどを使ってマニュアルでフ ロントエンド側とやり取りする 必要あり

22 API コネクターの種類 分類 用途 API コネクター Slack などサードパーティとの連携 OpenAPI コネクター OpenAPI 形式に対応したコネクター Salesforce 用API コネクター Salesforce に特化

23 OpenAPI コネクターを作成 • Admin のコネクター管理画面で新規作成 • 認証情報の登録 • OpenAPI Spec ファイルを登録

24 Automation にAPI との連携処理を追加 Automation にアクションを追加 作成しておいたOpenAPI コネクタを選択

25 Pages で一覧表示の実装 ページに一覧表示を追加 カラムごとにデータをマッピング

26 モックデータでプレビュー body 要素内にテストデータを記述 { body: { /* Insert your API's response data here */ }, /* * Checkout the MDN docs for more info: * https://developer.mozilla.org/en-US/docs/Glossary/Response_header */ responseHeaders: { // key1: 'json', // key2: 'value2' }, /* * Checkout the HTTP RFC for more info: * https://www.rfc-editor.org/rfc/rfc9110#name-status-codes */ statusCode: 200 }

27 モックデータのつくり方 Postman やブラウザで出力を確認 { "body": { "value": [ { "customer_id": 1, "active": 1, "address_id": 5, "create_date": "2006-02-14T22:04:36.000Z", "email": "[email protected]", "first_name": "MARY", "last_name": "SMITH", "last_update": "2006-02-15T04:57:20.000Z", "store_id": 1 } ], }, /* * Checkout the HTTP RFC for more info: * https://www.rfc-editor.org/rfc/rfc9110#name-status-codes */ statusCode: 200, } モックデータ

28 プレビューで表示を確認

29 開発環境からテスト環境へのデプロイ

30 API連携で一覧表示できた！

31 AWS Summit での公開事例 (ASCII.jp より) ゼネコン現場社員が3年でここまで開発、戸田建設の内製化は「外部頼みでいいのか」から始まった https://ascii.jp/elem/000/004/212/4212397/2/ フロントエンド部分にApp Studio が追加されるイメージ

32 AI を地元で活用しよう！

参考

34 こまった時にやったこと • やみくもにいじり倒す • ドキュメントやブログを読み漁る • デベロッパー向けのSlack に参加してみ る

35 例：コネクターの種類の情報

36 例：データの取り扱い方やモックデータの構造

37 参考資料 • 公式プレスリリース : AWS App Studio プレビュー版のお知らせ) https://aws.amazon.com/jp/about-aws/whats-new/2024/07/aws-app-studio-preview/ • AWS App Studio を使用して、自然言語でエンタープライズグレードのアプリケーションを構築 (プレビュー) https://aws.amazon.com/jp/blogs/news/build-custom-business-applications-without-cloud- expertise-using-aws-app-studio-preview/ • Connect to third-party services https://docs.aws.amazon.com/appstudio/latest/userguide/add-connector-third-party.html • 公式ドキュメント : What is AWS App Studio? https://docs.aws.amazon.com/appstudio/latest/userguide/welcome.html • 公式ドキュメント : Connect to services with OpenAPI https://docs.aws.amazon.com/appstudio/latest/userguide/connectors-openapi.html • OpenAI の公式ドキュメント https://platform.openai.com/docs/api-reference/making-requests • オンプレミスの RDB から REST API を自動生成・API Server Cloud Gateway 経由でインターネットに公開 https://www.cdata.com/jp/blog/apiservercloudgateway • CData API Server ハンズオン資料 https://www.cdata.com/jp/blog/cdataapiserver-handson-2023 • ゼネコン現場社員が3年でここまで開発、戸田建設の内製化は「外部頼みでいいのか」から始まった https://ascii.jp/elem/000/004/212/4212397/2/

Thank You