Slide 1

Slide 1 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Japan Startup Solutions Architect じゃが (永⼭⼤輔) AWS Amplify の概要 について簡単なおさらい

Slide 2

Slide 2 text

© 2021, Amazon Web Services, Inc. or its Affiliates. じゃが (永⼭⼤輔) @jagaimogmog Startup Solutions Architect Amazon Web Service Japan K.K. > Health Care Startupでエンジニア・事業開発 > AWSでStartupの技術⽀援・アプリ開発者⽀援 Amazon Chime SDK AWS Amplify AWS App Runner

Slide 3

Slide 3 text

© 2021, Amazon Web Services, Inc. or its Affiliates. アジェンダ • Web・モバイルアプリ開発と Amplify の⽬指す価値 • Amplify について • Amplify CLI と Amplify Libraries • Amplify Console • Amplify Admin UI • まとめ

Slide 4

Slide 4 text

© 2021, Amazon Web Services, Inc. or its Affiliates. ウェブ・モバイルアプリ開発 と Amplify の⽬指す価値

Slide 5

Slide 5 text

© 2021, Amazon Web Services, Inc. or its Affiliates. 開発者がやりたいことは何か アプリケーション エンジニア サーバーを構築したい︖ サーバーを運⽤・監視したい︖ バックエンドの ネットワーク設定をしたい︖ APNs, FCMにアクセスする コードを書きたい︖ ログの出⼒⽅法を セットアップしたい︖ ミドルウェアをインストール、 チューニングしたい︖

Slide 6

Slide 6 text

© 2021, Amazon Web Services, Inc. or its Affiliates. APNs, FCMにアクセスする コードを書きたい︖ ユーザーに通知を送りたい (Push, Email, SMS) サーバーを運⽤・監視したい︖ サーバーを構築したい︖ バックエンドの ネットワーク設定をしたい︖ ログの出⼒⽅法を セットアップしたい︖ ミドルウェアをインストール、 チューニングしたい︖ バックエンドのAPIを さくっと作りたい フロントエンドの アプリを書きたい ユーザーの⾏動を 把握、分析したい バックエンドのロジックを さくっと書きたい Web コンテンツを 配信したい 開発者がやりたいことは何か アプリケーション エンジニア 「ユーザーに価値を届けたい」

Slide 7

Slide 7 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify

Slide 8

Slide 8 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 9

Slide 9 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 10

Slide 10 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify の各コンポーネントの役割 - SPA を例に - .js .html .css Web Browser

Slide 11

Slide 11 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify の各コンポーネントの役割 - SPA を例に - .js .html .css Web Browser

Slide 12

Slide 12 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Web Browser Amplify の各コンポーネントの役割 - SPA を例に - .js .html .css

Slide 13

Slide 13 text

© 2021, Amazon Web Services, Inc. or its Affiliates. .js .html .css Web Browser Amplify の各コンポーネントの役割 - SPA を例に -

Slide 14

Slide 14 text

© 2021, Amazon Web Services, Inc. or its Affiliates. .js .html .css Web Browser Amplify の各コンポーネントの役割 - SPA を例に -

Slide 15

Slide 15 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Web Browser .js .html .css Amplify の各コンポーネントの役割 - SPA を例に -

Slide 16

Slide 16 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI/Libraries で実装できる 機能群(カテゴリ) Storage Authentication GraphQL API DataStore REST API Analytics Push Notification XR PubSub Interactions AI / ML Predictions Geo New!

Slide 17

Slide 17 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Authentication カテゴリ • アプリケーションに認証認可の機能を簡単に実装するためのカテゴリ • Amazon Cognito を利⽤して構築 • 他の機能カテゴリと連携し、ユーザー認証による制御を追加することが可能 Authentication

Slide 18

Slide 18 text

© 2021, Amazon Web Services, Inc. or its Affiliates. API カテゴリ • アプリケーションに API を簡単に実装するためのカテゴリ REST API GraphQL REST API GraphQL API

Slide 19

Slide 19 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AI / ML Predictions カテゴリ • AWS が提供する AI/ML サービス を簡単に活⽤するためのカテゴリ • テキスト翻訳、⽂字読み上げ、物体検出、⽂章のネガポジ判定といった機能 を簡単に Web・モバイルアプリに実装できる Amazon Rekognition Amazon Textract Amazon Transcribe Amazon Polly Amazon Translate Amazon Comprehend Amazon Lex AI / ML Predictions

Slide 20

Slide 20 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 21

Slide 21 text

© 2021, Amazon Web Services, Inc. or its Affiliates. .js .html .css Web Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に -

Slide 22

Slide 22 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI • AWS に詳しくなくても「ユースケース(やりた いこと)」から各種コンポーネントの構築を⽀援 • コマンドを実⾏し、対話的に質問に答えていく とバックエンドが構築 AWS でサーバーレスなバックエンドを構築・管理するための CLI ツールチェーン

Slide 23

Slide 23 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI がない場合 CloudFormation テンプレート 記述して構築︖ マネジメントコンソールから クリックして構築︖

Slide 24

Slide 24 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify CLI を利⽤する場合 「API を追加したい」とユースケースに基づいたコマンドを実⾏し、 対話的に質問に答えるだけで バックエンドを構築 詳しい設定は任意回答のため、最⼩限の操作でセットアップ可能 インフラの開発効率を⾼めることで、ビジネスロジックの開発に集中︕ AWS Account AWS AppSync Amazon DynamoDB AWS Amplify

Slide 25

Slide 25 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 26

Slide 26 text

© 2021, Amazon Web Services, Inc. or its Affiliates. .js .html .css Web Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に -

Slide 27

Slide 27 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Libraries • AWS バックエンドと簡単に統合できるクライアントアプリ⽤のライブラリ • React/Vue/Angular といった JavaScript ライブラリや iOS/Android、Flutter に対応 • ユースケースベースで直感的な実装ができるインターフェース

Slide 28

Slide 28 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Libraries がない場合 AWS Mobile SDK を利⽤して実装 AWSのサービスを意識したAPIを用いて、例外処理なども考慮しながら実装

Slide 29

Slide 29 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Libraries を利⽤する場合 直感的なインターフェースを⽤いてサクッと実装 Storage にデータを PUT したい ファイル名、アップロードするデータ、オプションを指定

Slide 30

Slide 30 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify UI コンポーネント UI 構築のための JavaScript ライブラリ向けの UI コンポーネントライブラリ 少ないコードで開発工数を削減できる! =本質的な作業に集中できる!

Slide 31

Slide 31 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 32

Slide 32 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Web Browser Amplify の各コンポーネントの役割 (再掲) - SPA を例に - .js .html .css

Slide 33

Slide 33 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Console の利⽤フロー

Slide 34

Slide 34 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Hosting 利用フロー (1) リポジトリの接続

Slide 35

Slide 35 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Hosting 利用フロー (1) リポジトリの接続

Slide 36

Slide 36 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Hosting 利用フロー (2) ビルド設定

Slide 37

Slide 37 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify Hosting 利用フロー (3) デプロイ!

Slide 38

Slide 38 text

© 2021, Amazon Web Services, Inc. or its Affiliates. アプリ作成後のコンソール画面 ソースコードが変更されるたび自動でビルドからデプロイまで実行

Slide 39

Slide 39 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 40

Slide 40 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Web Browser .js .html .css Amplify の各コンポーネントの役割 (再掲) - SPA を例に -

Slide 41

Slide 41 text

© 2021, Amazon Web Services, Inc. or its Affiliates. ⼿軽にセットアップできる管理⽤GUIツール 1. メンバーの招待 2. Admin UI へログイン 3. ユーザーと コンテンツの管理 Amplify Admin UI

Slide 42

Slide 42 text

© 2021, Amazon Web Services, Inc. or its Affiliates. ユーザー管理 • ユーザーの作成、管理 • グループへのユーザー追加、管理 コンテンツ管理 • サービス内コンテンツの作成、管理が可能 例)ブログの記事作成 EC サイトにおける商品の管理 • マークダウン形式もサポート ユーザーとコンテンツの管理 Amplify Admin UI

Slide 43

Slide 43 text

© 2021, Amazon Web Services, Inc. or its Affiliates. まとめ

Slide 44

Slide 44 text

© 2021, Amazon Web Services, Inc. or its Affiliates. AWS Amplify とは︖ Amplify CLI Web・モバイルアプリのバックエンドをインタラクティブに 作成・管理するための OSS ツールチェーン Amplify Libraries Web・モバイルアプリと AWS を統合するための OSS ライブラリ Amplify Console フルスタックサーバーレス Web アプリをビルド、テスト、 デプロイ、ホスティングするための AWS サービス Amplify Admin UI Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール バックエンドを強く意識することなく Web アプリケーションの 実装、インフラの構築、 アプリケーションのデプロイが可能なプラットフォーム

Slide 45

Slide 45 text

© 2021, Amazon Web Services, Inc. or its Affiliates. もっと AWS Amplify を知りたい方へ 公式ドキュメント https://docs.amplify.aws AWS Summit 2021 資料 Web・モバイルアプリ開発を加速させる AWS Amplify https://d1.awsstatic.com/events/jp/2021/summit-online/AWS- 47_AWS_Summit_Online_2021_FWM01.pdf ワークショップ https://amplify-sns.workshop.aws/ja/ Amplify 学習リソース集 https://aws-amplify-jp.github.io/resources Amplify Japan User Group Slack https://github.com/aws-amplify-jp/awesome-aws-amplify-ja#slack

Slide 46

Slide 46 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Thank you !