AWS re:Invent 2024 Build an app using AWS App Studio

Slide 1

Slide 1 text

AWS re:Invent 2024 Build an app using AWS App Studio 2024/12/14 [JAWS-UG 山形]re invent re-cap AND 2024年振返り Seiji Akatsuka 本セッション用の検証時点の情報に基づいた資料です

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 アジェンダ • re:Invent について • AWS App Studio について • Build an app using AWS App Studio ワークショップの紹介 • 参考資料

Slide 4

Slide 4 text

re:Invent について

Slide 5

Slide 5 text

5 re:Invent 2024 の概要 • 2012年から行われている AWS 最大の学習型イベント • 開催地：ラスベガス • 開催期間 : 12/1 – 6 • 参加者 : 60,000人 (うち日本人2,000人) ※AWS Summit Japan 2024 で25,000人, Cybozu Days で6,500人 • セッション数 : 1,900 (スピーカー3,500人) ※AWS Summit Japan 2024 で150セッション

Slide 6

Slide 6 text

6 re:Invent 2024 の概要

Slide 7

Slide 7 text

7 re:Invent 2024 の概要

Slide 8

Slide 8 text

8 re:Invent 2024 の概要

Slide 9

Slide 9 text

9 re:Invent 2024 の概要

Slide 10

Slide 10 text

10 re:Invent 2024 の概要

Slide 11

Slide 11 text

AWS App Studio

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

チュートリアルをやってみよう！

Slide 19

Slide 19 text

19 App Studio Workshop • URL : https://catalog.workshops.aws/build-apps/en-US • 必要なもの : AWS アカウント (無料枠でOK) • 所要時間 : 2時間程度 (慣れている方は1時間以内でできそう) • 良かったところ : • 日本では行われていないワークショップに参加できた • 他の参加者からの質問も参考になった (チャットボット作れるの？とか) • App Studio 以外のサービスの設定も触れた

Slide 20

Slide 20 text

20 インストラクション • コネクターを使用して他のサービスに接続し、そのリソースやAPI コールをアプリケーションで使用 • エンティティを使用してアプリケーションのデータモデルを構成し、アプリケーションと外部データソースを接続 • ページとコンポーネントを使用して、アプリケーションのユーザーインターフェース（UI）を構築 • オートメーションとアクションを使用して、アプリケーションのロジックや動作を実装 • アプリケーション開発ライフサイクルは（ビルド・テスト・公開） App Studio を使ってアプリケーションを構築する際に、理解しておくべきコンセプト

Slide 21

Slide 21 text

21 参加したワークショップで作成したアプリマーケティング用のプロモーションキャンペーンを作成・管理するためのアプリケーション • 作成するシナリオ • 顧客情報の一覧/詳細表示 • LLMを使用した販売メールの生成 • 機能 • 企業アカウント（業種、メールアドレスなどの詳細）を表示 • メールキャンペーンの作成（業種、カテゴリー、ステータス、会社名） • データ入力

Slide 22

Slide 22 text

22 スムーズに進めるためのポイントチュートリアル内の「2. Prerequisites」で行う事前準備だけきちんとできればスムーズにできます。 • 2.1 AWS Account Setup AWS が提供するワークショップ以外でトライする場合は「2.1.2 Using a personal AWS Account」を選択 • 2.3 IAM Role Setup • IAM Role の設定は自動ではできないので手動で行うこと • 手順「2.2 App Studio Setup」の13番目にある手順を参考にApp Studio のAccount Settings ページにあるTEAM ID を確認してスニペットにある「"sts:ExternalId": "TEAM_ID"」の TEAM_ID はApp Studio の設定画面で確認して置き換えること • 2.4 Update Browser Settings Google Chrome 以外で作業を行う場合は手順に従ってクロスサイトトラッキングに関連する特定の設定またはCookie を更新

Slide 23

Slide 23 text

参考

Slide 24

Slide 24 text

24 チュートリアルで Hello World! https://aws.amazon.com/jp/blogs/news/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview/ いちばん簡単なチュートリアル

Slide 25

Slide 25 text

25 過去の記事もご参考に！ • CData Connect Cloud を使ってAWS App Studio からGoogle スプレッドシートに接続 https://www.cdata.com/jp/blog/connectcloud-appstudio2spreadsheet • AWS App Studio でAPI 連携してみた！ https://www.cdata.com/jp/blog/restapi_with_app_studio • [JAWS FESTA 広島] AWS App Studio を触ってみよう！ API 連携してみよう！ https://speakerdeck.com/cdataj/aws-app-studio-wohong-tutemiyou-api-lian-xi- sitemiyou

Slide 26

Slide 26 text

Thank You