Enviar pesquisa
Carregar
React + Amplifyで アプリ開発
•
2 gostaram
•
5,410 visualizações
虎の穴 開発室
Seguir
https://rakus.connpass.com/event/214484/ フロントエンドLT会 - vol.3での発表資料になります
Leia menos
Leia mais
Apresentações e oratória
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 30
Baixar agora
Baixar para ler offline
Recomendados
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
アジャイル開発のストーリーをGherkin記法で作成
アジャイル開発のストーリーをGherkin記法で作成
Shinya Nakajima
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
Recomendados
FastAPIのテンプレートプロジェクトがいい感じだった話
FastAPIのテンプレートプロジェクトがいい感じだった話
NipponAlgorithm
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
アジャイル開発のストーリーをGherkin記法で作成
アジャイル開発のストーリーをGherkin記法で作成
Shinya Nakajima
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
インフラCICDの勘所
インフラCICDの勘所
Toru Makabe
GitLabのAutoDevOpsを試してみた
GitLabのAutoDevOpsを試してみた
富士通クラウドテクノロジーズ株式会社
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線
Motonori Shindo
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
Dockerの事例紹介
Dockerの事例紹介
Hiroki Endo
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
NTT DATA OSS Professional Services
はじめての datadog
はじめての datadog
Naoya Nakazawa
イベント・ソーシングを知る
イベント・ソーシングを知る
Shuhei Fujita
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
Tokoroten Nakayama
Amplify Studioを使ってみた
Amplify Studioを使ってみた
虎の穴 開発室
AWSとReactで始めるShopifyアプリ開発
AWSとReactで始めるShopifyアプリ開発
Takaaki Kurasawa
Mais conteúdo relacionado
Mais procurados
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
インフラCICDの勘所
インフラCICDの勘所
Toru Makabe
GitLabのAutoDevOpsを試してみた
GitLabのAutoDevOpsを試してみた
富士通クラウドテクノロジーズ株式会社
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線
Motonori Shindo
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
Dockerの事例紹介
Dockerの事例紹介
Hiroki Endo
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
NTT DATA OSS Professional Services
はじめての datadog
はじめての datadog
Naoya Nakazawa
イベント・ソーシングを知る
イベント・ソーシングを知る
Shuhei Fujita
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
Tokoroten Nakayama
Mais procurados
(20)
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
インフラCICDの勘所
インフラCICDの勘所
GitLabのAutoDevOpsを試してみた
GitLabのAutoDevOpsを試してみた
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
コンテナネットワーキング(CNI)最前線
コンテナネットワーキング(CNI)最前線
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Dockerの事例紹介
Dockerの事例紹介
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
テストコードの DRY と DAMP
テストコードの DRY と DAMP
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
Apache Sparkに手を出してヤケドしないための基本 ~「Apache Spark入門より」~ (デブサミ 2016 講演資料)
はじめての datadog
はじめての datadog
イベント・ソーシングを知る
イベント・ソーシングを知る
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
Semelhante a React + Amplifyで アプリ開発
Amplify Studioを使ってみた
Amplify Studioを使ってみた
虎の穴 開発室
AWSとReactで始めるShopifyアプリ開発
AWSとReactで始めるShopifyアプリ開発
Takaaki Kurasawa
Deno で始めるフロントエンド
Deno で始めるフロントエンド
虎の穴 開発室
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
Amazon Web Services Japan
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
Satoshi Takano
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
Makoto Haruyama
JAWS-UG 初心者支部 #31 監視編 サーバーのモニタリングの基本を学ぼう
JAWS-UG 初心者支部 #31 監視編 サーバーのモニタリングの基本を学ぼう
Hiroki Uchida
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
AWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS Amplify
Amazon Web Services Japan
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
Amazon Web Services Japan
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
Eiji KOMINAMI
SPAを選択した理由とその結果 ~Reactを添えて~
SPAを選択した理由とその結果 ~Reactを添えて~
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
Amazon Web Services Japan
AngularJSとバックエンドサービスAppPotで作る業務システムハンズオン
AngularJSとバックエンドサービスAppPotで作る業務システムハンズオン
Takuya Kitamura
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
natsumo
Googleアシスタントアプリ実際のところ
Googleアシスタントアプリ実際のところ
Yahoo!デベロッパーネットワーク
Swiftアプリにプッシュ通知を組み込もう!
Swiftアプリにプッシュ通知を組み込もう!
natsumo
アメブロの大規模システム刷新とそれを支えるSpring.
アメブロの大規模システム刷新とそれを支えるSpring.
Masaki Mukai
Semelhante a React + Amplifyで アプリ開発
(20)
Amplify Studioを使ってみた
Amplify Studioを使ってみた
AWSとReactで始めるShopifyアプリ開発
AWSとReactで始めるShopifyアプリ開発
Deno で始めるフロントエンド
Deno で始めるフロントエンド
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
JAWS-UG 初心者支部 #31 監視編 サーバーのモニタリングの基本を学ぼう
JAWS-UG 初心者支部 #31 監視編 サーバーのモニタリングの基本を学ぼう
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
AWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS Amplify
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
AWSのインフラはプログラミングコードで構築!AWS Cloud Development Kit 入門
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
SPAを選択した理由とその結果 ~Reactを添えて~
SPAを選択した理由とその結果 ~Reactを添えて~
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
AngularJSとバックエンドサービスAppPotで作る業務システムハンズオン
AngularJSとバックエンドサービスAppPotで作る業務システムハンズオン
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
【Monaca×mobile backend】 プッシュ通知をカンタン実装! スピード感ある開発をしよう!
Googleアシスタントアプリ実際のところ
Googleアシスタントアプリ実際のところ
Swiftアプリにプッシュ通知を組み込もう!
Swiftアプリにプッシュ通知を組み込もう!
アメブロの大規模システム刷新とそれを支えるSpring.
アメブロの大規模システム刷新とそれを支えるSpring.
Mais de 虎の穴 開発室
FizzBuzzで学ぶJavaの進化
FizzBuzzで学ぶJavaの進化
虎の穴 開発室
Railsのデバッグ どうやるかを改めて確認する
Railsのデバッグ どうやるかを改めて確認する
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴 開発室
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
虎の穴 開発室
toranoana.deno #6 アジェンダ 採用説明
toranoana.deno #6 アジェンダ 採用説明
虎の穴 開発室
Deno 向け WEB 開発用のツールを作ったので 紹介します
Deno 向け WEB 開発用のツールを作ったので 紹介します
虎の穴 開発室
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
虎の穴 開発室
GitHub APIとfreshで遊ぼう
GitHub APIとfreshで遊ぼう
虎の穴 開発室
通販開発部の西田さん「通販開発マネジメントの5ルール」
通販開発部の西田さん「通販開発マネジメントの5ルール」
虎の穴 開発室
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
虎の穴 開発室
セキュリティを強化しよう!CloudArmorの機能解説
セキュリティを強化しよう!CloudArmorの機能解説
虎の穴 開発室
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
虎の穴 開発室
いいテスト会 (スプリントレビュー) をやろう!
いいテスト会 (スプリントレビュー) をやろう!
虎の穴 開発室
【Saitama.js】Denoのすすめ
【Saitama.js】Denoのすすめ
虎の穴 開発室
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴 開発室
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
虎の穴 開発室
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴 開発室
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
虎の穴 開発室
【20220120 toranoana.deno#4】denoでffiの続き
【20220120 toranoana.deno#4】denoでffiの続き
虎の穴 開発室
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボ エンジニア採用説明資料
虎の穴 開発室
Mais de 虎の穴 開発室
(20)
FizzBuzzで学ぶJavaの進化
FizzBuzzで学ぶJavaの進化
Railsのデバッグ どうやるかを改めて確認する
Railsのデバッグ どうやるかを改めて確認する
虎の穴ラボ エンジニア採用説明資料 .pdf
虎の穴ラボ エンジニア採用説明資料 .pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
toranoana.deno #6 アジェンダ 採用説明
toranoana.deno #6 アジェンダ 採用説明
Deno 向け WEB 開発用のツールを作ったので 紹介します
Deno 向け WEB 開発用のツールを作ったので 紹介します
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
【エンジニアの勉強法ハックLT- vol.7】ゲームから学んだ勉強のこと
GitHub APIとfreshで遊ぼう
GitHub APIとfreshで遊ぼう
通販開発部の西田さん「通販開発マネジメントの5ルール」
通販開発部の西田さん「通販開発マネジメントの5ルール」
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
社内DX推進!非エンジニア向けにプログラミング講座を実施してみた!
セキュリティを強化しよう!CloudArmorの機能解説
セキュリティを強化しよう!CloudArmorの機能解説
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
JavaScript LT会 〜 React.js Node.js歓迎 〜 Deno で やってみるweb開発
いいテスト会 (スプリントレビュー) をやろう!
いいテスト会 (スプリントレビュー) をやろう!
【Saitama.js】Denoのすすめ
【Saitama.js】Denoのすすめ
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
虎の穴ラボ Tech day#3 チームで戦う!とらのあな通販冬の大感謝祭でのフロント開発について
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
【とらのあなラボ Tech Day #3】新規システムにおける技術選定〜GoとgRPCを採用した話〜
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
虎の穴ラボ TechDay#3 フルリモート率100%!リモートワークを可能にするマネージメント
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】deno を使って「ログイン」するサービスを作る
【20220120 toranoana.deno#4】denoでffiの続き
【20220120 toranoana.deno#4】denoでffiの続き
虎の穴ラボ エンジニア採用説明資料
虎の穴ラボ エンジニア採用説明資料
React + Amplifyで アプリ開発
1.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. React + AWS Amplifyで アプリ開発 虎の穴ラボ株式会社 西志村友基 1
2.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 自己紹介 西志村 友基 ● 所属:虎の穴ラボ株式会社 ● 担当:Fantiaなど ● 入社理由: ○ BtoCサービスに関わりたい ○ 一生に一度はオタク業界に関わりたい ● 趣味:アニメ鑑賞、ゲーム 競馬 ← New 2
3.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 話すこと 1. 開発の課題とAWS Amplifyの魅力 2. React + Amplifyでアプリ開発の流れ 3. Amplify Admin UI によるアプリケーションの管理 4. まとめ 3
4.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 話すこと 1. 開発の課題とAWS Amplifyの魅力 2. React + Amplifyでアプリ開発の流れ 3. Amplify Admin UI によるアプリケーションの管理 4. まとめ 4
5.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 開発の課題 ● 本当はアプリケーションの本質的な開発だけに集中したいけど... ○ ユーザー認証 ○ データ登録 ○ セキュリティ → 結局バックエンドも書かないといけない → 覚えることいっぱいで辛い 5 誰かに丸投げしたい
6.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. それ、AWS Amplifyならできます 6
7.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. AWS Amplifyの魅力 1. 数分でバックエンドを構成 2. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可 能 3. 対話形式で各種設定を行うことができる 4. 数クリックでアプリを公開できる 5. Amplify Admin UIによる容易なコンテンツ管理 7
8.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 話すこと 1. 開発の課題とAWS Amplifyの魅力 2. React + Amplifyでアプリ開発の流れ 3. Amplify Admin UI によるアプリケーションの管理 4. まとめ 8
9.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 今回開発したアプリ 9 【仕様】 ● 画面から ○ 名前 ○ スキル ○ 説明 という値を受け取る ● DBに保存して表示 ● 管理画面も作る
10.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Node.jsのインストール Amplifyのインストール Reactアプリの作成 Amplifyの初期設定を実施 フロー 10 React用のライブラリをインストール APIの作成 Amplifyでデプロイ ホスティング設定 アプリ公開!!!
11.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Node.jsのインストール ・・・コマンド打つだけ Amplifyのインストール ・・・コマンド打つだけ Reactアプリの作成 ・・・コマンド打つだけ Amplifyの初期設定を実施 ・・・コマンド+対話形式 フロー 11
12.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. React用のライブラリをインストール ・・・コマンド+tsxの修正 APIの作成 ・・・コマンド+対話形式 Amplifyでデプロイ ・・・コマンド+対話形式 ホスティング設定 ・・・コマンド+対話形式 アプリ公開 ・・・コマンド打つだけ フロー 12
13.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 【APIの設定】 ● GraphQLを使用 ● スキーマテンプレートとしてToDoを使用 【デプロイの設定】 ● TypeScript使用 ● GraphQLのコード自動生成ON 今回作成したAPI、デプロイの設定 13
14.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Amplifyのインストール (Node.jsがインストールされている前提です) amplifyの設定(以下のコマンドを実行) # リージョンの選択、IAMの作成(アクセスキー、シークレットキーの入力)などが求められ ます $ npm install -g @aws-amplify/cli $ amplify configure 14
15.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. React アプリにAmplifyを設定① $ cd uma_note $ amplify init $ npx create-react-app --template typescript uma_note 15 Reactアプリケーションを新規作成 Amplifyの初期設定を実施
16.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 16
17.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. React アプリにAmplifyを設定② 17 import Amplify from "aws-amplify"; import awsExports from "./aws-exports"; Amplify.configure(awsExports); $ npm install aws-amplify @aws-amplify/ui-react React用のライブラリをインストール 生成されたindex.tsxに以下を追記
18.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. APIの作成 $ amplify add api 18 対話形式で設定
19.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Amplifyでデプロイ $ amplify push 19 Graphqlのソースを自動生成してくれます
20.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Amplify でアプリを公開 ホスティング設定 以下のコマンドでアプリが公開されます $ amplify add hosting $ amplify publish 20 たったこれだけ!!
21.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. スキーマを変更したい場合 type Todo @model @auth(rules: [{allow: public}]) { id: ID! name: String! description: String } type Uma @model @auth(rules: [{allow: public}]) { id: ID! name: String! skill: String description: String } amplify/backend/api/umanote/ schema.graphql を書き換える $ amplify push 21
22.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. あとはアプリ開発に集中(TypeScript) 22 const umaData = await API.graphql(graphqlOperation(listUmas)) await API.graphql(graphqlOperation(createUma, {input: uma})) リストの取得 データ登録 自動生成されたものを呼 び出すだけ
23.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 話すこと 1. 開発の課題とAWS Amplifyの魅力 2. React + Amplifyでアプリ開発の流れ(Vueじゃないのかよ) 3. Amplify Admin UI によるアプリケーションの管理 4. まとめ 23
24.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. Admin UIを有効にする 24
25.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 管理画面からデータ登録 25
26.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 画面に表示されています 26
27.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. ユーザー画面から入力 27
28.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 管理画面で確認します すこしタイムラグあります 28
29.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. 話すこと 1. 開発の課題とAWS Amplifyの魅力 2. React + Amplifyでアプリ開発の流れ 3. Amplify Admin UI によるアプリケーションの管理 4. まとめ 29
30.
Copyright (C) 2021
Toranoana Inc. All Rights Reserved. まとめ ● APIが自動生成できたり管理画面の実装の手間を省ける →フロントのロジックの開発に集中できる! ● AWSのサービスに馴染みがある人は特におすすめ ● GraphQLを使った気になれた ● 自分のトレーニングを記録して振り返れるアプリにしたい 30
Baixar agora