Amplify 101 - Speaker Deck

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ⾃⼰紹介原拓也 Solutions Architect ● Amplify & CodeCatalyst ⼤好きです ● Ask an Expert @Startup Loft Tokyo 運営中です ● 最近 Twitter を始めました @_haratk

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Social media Ride hailing Media streaming Dating ● セキュリティ ● 継続的デリバリー ● コスト ● 開発期間 ● フレームワーク ● 品質 ● パフォーマンス ● などなど… 考慮すべきことはたくさん

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify スケールするフルスタックな W E B とモバイルアプリケーションを最速で開発する⽅法市場の投⼊をより早く UI コンポーネント群ライブラリ群ユースケースによる抽象化付属したバックエンドコードスケールグローバル対応信頼性セキュアスケーラブル新規開発に集中豊富な機能拡張性のあるテスト素早い開発サイクル最適なユーザ体験

Slide 10

Slide 10 text

Slide 11

Slide 11 text

© 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 上に最⼩限のコーディングでフロントからバックまでのアプリケーションを作成できるビジュアルな開発環境

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 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 の豊富な機能カテゴリ群

Slide 22

Slide 22 text

© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authentication 機能カテゴリ ● アプリケーションに認証認可の機能を簡単に実装するためのカテゴリ ● Amazon Cognito を利⽤して構築 ● 他の機能カテゴリと連携し、ユーザー認証による制御を追加できる ● Amplify UI コンポーネントで簡単に組み込み

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

© 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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

© 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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio ビジュアルにフロントエンド U I を作成コーディングの⼿間を省き時間を節約フルカスタマイズ可能 UX デザインを Figma からソースコードとして取り込むデザイナーと開発者のコラボレーションの向上少ないコーディングでデザインを実現コードを⾃在にコントロール数⼗種類の UI コンポーネントから選択可能

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© 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 作成

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

© 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 のプログラム

Slide 45

Slide 45 text