Amplify 101

Amplify Boost Up #02 にて実施した Amplify 101 (入門) です。

Web アプリケーションの課題から始まり、それが AWS Amplify でどのように解決されるのか、Amplify CLI・Amplify Libraries・Amplify Hosting・Amplify Studio の 4 つのコンポーネントについて触れながら説明していきます。

Transcript

1. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify 101 原 拓也 アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト
2. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⾃⼰紹介 原 拓也 Solutions Architect • Amplify & CodeCatalyst ⼤好きです • Ask an Expert @Startup Loft Tokyo 運営中です • 最近 Twitter を始めました @_haratk
3. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. この 20 分でお話しすること • Web アプリケーション開発の課題 • AWS Amplify とは何か・どんな課題を解決できるのか
4. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Web アプリケーション 開発の課題
5. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. あなたは、Web アプリケーションを 1 から開発することになりました どんなことを考えなくてはならないでしょうか︖
6. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Web アプリケーションの構成例 .js .html .css クライアント
7. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Social media Ride hailing Media streaming Dating • セキュリティ • 継続的デリバリー • コスト • 開発期間 • フレームワーク • 品質 • パフォーマンス • などなど… 考慮すべきことはたくさん
8. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify
9. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify ス ケ ー ル す る フ ル ス タ ッ ク な W E B と モ バ イ ル ア プ リ ケ ー シ ョ ン を 最 速 で 開 発 す る ⽅ 法 市場の投⼊をより早く UI コンポーネント群 ライブラリ群 ユースケースによる抽象化 付属したバックエンドコード スケール グローバル対応 信頼性 セキュア スケーラブル 新規開発に集中 豊富な機能 拡張性のあるテスト 素早い開発サイクル 最適なユーザ体験
10. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify とは何か どんな課題を解決できるのか
11. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント Amplify CLI Web やモバイルアプリケーションを⼀般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中⼼のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境
12. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4 つのコンポーネントの役割 .js .html .css クライアント
13. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4 つのコンポーネントの役割 クライアント Amplify CLI Amplify Libraries Amplify Hosting .js .html .css Amplify Studio
14. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント Amplify CLI Web やモバイルアプリケーションを⼀般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中⼼のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境
15. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI の役割 クライアント Amplify CLI .js .html .css
16. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI • AWS に詳しくなくてもユースケース から各種コンポーネントの構築を⽀援 • コマンドを実⾏し、対話的に質問に 答えていくとバックエンドが構築 • バックエンドとの接続に必要な 設定ファイルやソースコードの⼀部を ⾃動で⽣成
17. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント Amplify CLI Web やモバイルアプリケーションを⼀般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中⼼のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境
18. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Libraries の役割 クライアント Amplify Libraries .js .html .css
19. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Libraries • AWS バックエンドと簡単に 統合できるクライアントアプリ⽤の ライブラリ • React、Vue、Angular といった JavaScript ライブラリや iOS、 Android そして Flutter に対応 • ユースケースベースで直感的な実装 ができるインターフェース iOS Android Angular React Vue
20. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL API アクセスの例
21. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Analytics ユーザーセッション、カ スタムユーザー属性、ア プリ内メトリクスの追跡 API リアルタイムデータをサ ポートする REST および GraphQL を使⽤した API Authentication あらかじめ構築された UI コンポーネントを持 つ認証 API DataStore アプリとクラウド間で データを⾃動的に同期す るデバイスストレージ XR AR（拡張現実）や VR（ 仮想現実）のコンテンツ をアプリで活⽤する PubSub クラウド上のメッセージ 指向なミドルウェアにア プリを接続 Notifications キャンペーン分析と ターゲティングが可 能なプッシュ通知 Predictions クラウドサービスを利⽤ したアプリへの AI/ML の 追加 Interactions 深層学習技術を活⽤した 会話型ボット Storage ユーザーのコンテンツを パブリックおよびプライ ベートなストレージで安 全に管理 Geo Amazon Location Service を利⽤した位置 認識機能と地図 Extensibility 175 以上の AWS サー ビスで Amplify を拡張 Amplify Libraries の豊富な機能カテゴリ群
22. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authentication 機能カテゴリ • アプリケーションに認証認可の機能 を簡単に実装するためのカテゴリ • Amazon Cognito を利⽤して構築 • 他の機能カテゴリと連携し、ユー ザー認証による制御を追加できる • Amplify UI コンポーネントで簡単に 組み込み
23. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント Amplify CLI Web やモバイルアプリケーションを⼀般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中⼼のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境
24. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4 つのコンポーネントの役割 クライアント Amplify Hosting .js .html .css
25. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify Hosting • ウェブアプリや静的ウェブサイトの ためのフルマネージドな ホスティングサービス • 簡単なカスタムドメイン設定も可能 継続的デプロイメント • Amplify CLI で Infrastructure as Code（IaC）を⽣成 • Amplify CLI やコンソールからの デプロイ AWS Amplify CLI AWS Amplify Hosting
26. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Hosting の利⽤⽅法
27. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Hosting の主な機能 グローバルで利⽤可能 プルリクエストプレビュー カスタムドメインの簡単設定 シンプルな 継続的ワークフロー パスワード保護
28. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント Amplify CLI Web やモバイルアプリケーションを⼀般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中⼼のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境
29. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4 つのコンポーネントの役割 クライアント .js .html .css Amplify Studio
30. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio ビ ジ ュ ア ル に バ ッ ク エ ン ド を 構 築 し 、 A W S A M P L I F Y C L I で 拡 張 す る フルスタックなアプリ開発のための 新しいビジュアル開発環境 認証・認可の設定 AWS アカウントが無くても チームでコラボレーション CLI ツールチェーンで 機能やストレージなどを追加して拡張可能 > npm install -g @aws-amplify/cli > amplify add function
31. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio 数 ク リ ッ ク で バ ッ ク エ ン ド 設 定
32. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio ビ ジ ュ ア ル に フ ロ ン ト エ ン ド U I を 作 成 コーディングの⼿間を省き時間を節約 フルカスタマイズ可能 UX デザインを Figma から ソースコードとして取り込む デザイナーと開発者の コラボレーションの向上 少ないコーディングでデザインを実現 コードを⾃在にコントロール 数⼗種類の UI コンポーネント から選択可能
33. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio • 構築済みのコンポーネントライブラリ • デザインテーマの設定 • デザインのカスタマイズ性 • コンポーネントとデータの結合 作 成 済 み の コ ン ポ ー ネ ン ト を 使 ⽤ 可 能
34. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio • Figma から UI コンポーネント・ デザインをインポート • UXデザイナーとシームレスな連携 • クリーンな React コードに変換 F I G M A - T O - C O D E プ ラ グ イ ン で フ ロ ン ト エ ン ド の U I 作 成
35. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio • Figma から UI コンポーネント・ デザインをインポート • UXデザイナーとシームレスな連携 • クリーンな React コードに変換 F I G M A - T O - C O D E プ ラ グ イ ン で フ ロ ン ト エ ン ド の U I 作 成
36. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio の利⽤⽅法
37. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio の利⽤⽅法 サ ン ド ボ ッ ク ス * に ア ク セ ス し ユ ー ス ケ ー ス を 選 択 *サンドボックス環境: https://sandbox.amplifyapp.com/getting-started
38. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio の利⽤⽅法 デ ー タ モ デ ル と ロ ー カ ル 環 境 の 設 定
39. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio の利⽤⽅法 ス テ ー ジ ン グ 環 境 の デ プ ロ イ
40. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio のサンドボックス環境 こちらから今すぐご利⽤いただけます︕ https://sandbox.amplifyapp.com/getting- started
41. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ
42. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify ス ケ ー ル す る フ ル ス タ ッ ク な W E B と モ バ イ ル ア プ リ ケ ー シ ョ ン を 最 速 で 開 発 す る ⽅ 法 市場の投⼊をより早く UI コンポーネント群 ライブラリ群 ユースケースによる抽象化 付属したバックエンドコード スケール グローバル対応 信頼性 セキュア スケーラブル 新規開発に集中 豊富な機能 拡張性のあるテスト 素早い開発サイクル 最適なユーザ体験
43. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify の 4 つのコンポーネント クライアント Amplify CLI Amplify Libraries Amplify Hosting .js .html .css Amplify Studio
44. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify をもっと知るために • JP Contents Hub -> Front-end Web & Mobile https://aws-samples.github.io/jp-contents-hub/#front-end-web-mobile • Amplify SNS Workshop︓Amplify を使って 3 ⽇で SNS を作る (特におすすめです) • Amplify Japan User Group • Amplify の知⾒、課題のやりとり、イベントなど https://aws-amplify-jp.github.io/ • 本⽇の Amplify Boost Up #02 のプログラム
45. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you! 原 拓也 @_haratk