AWS Amplify + Amazon Location Service を React でやってみる #awsbasics

AWSの基礎を学ぼう 特別編　最新サービスをみんなで触ってみる はじめての位置情報サービス
https://awsbasics.connpass.com/event/215185/

サンプルコード
https://github.com/tacck/react-amplify-location

Transcript

1. AWS Amplify + Amazon Location Service を React でやってみる 2021年7⽉18⽇ tacck 1 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics
2. 名前 ⽊原 卓也 / @tacck 所属 ⽣活協同組合コープさっぽろ デジタル推進本部 システム部 主催コミュニティ ゆるWeb勉強会@札幌 スマートスピーカーで遊ぼう会@札幌 運営メンバー Amplify Japan User Group 好きな フィギュアスケートの技 スプレッド・イーグル 誰 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 2
3. 先に宣伝 / Amplify Boost Up AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 3 https://aws-amplify-jp.connpass.com/event/217715/
4. 今⽇のテーマ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 4
5. AWS Amplify • バックエンドをすばやく構成 • フロントエンドとのシームレスな接続 • 数クリックでデプロイ • 容易なコンテンツ管理 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 5 https://aws.amazon.com/jp/amplify/
6. 機能は盛りだくさん AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 6
7. React で AWS Amplify + Amazon Location Service AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 7
8. 準備⼿順 (超概略版) npx create-react-app react-amplify-location cd react-amplify-location amplify init amplify add auth amplify push ここから実装を頑張る AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 8
9. デモ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 9
10. 画⾯ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 10
11. AWS Amplify を使って 楽になるところ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 11
12. 認証(Cognito)のリソース • Amplify CLI で追加した Cognito を Amazon Location Service でも使える。(設定が少し楽) • 作成済みの Role に Policy を追加するだけ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 12
13. AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 13
14. 認証(Cognito)のリソース • 将来的には AWS Amplify でここまで⾯倒みてくれる...気がする。 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 14
15. リアルタイムな情報連携 • Amplify CLI で追加できる API (GraphQL) の裏側は AppSync • AppSync の Subscription を使うことで、 地図へのリアルタイムな反映もやりやすい。 準備が間に合わなかったので、今回はお話しだけ。。。 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 15
16. その他モロモロ • IoT Core は Amplify PubSub ライブラリで連携可能 • UI Component で認証画⾯など作りやすい • Webだと React / Vue.js / Angular 対応 • Hosting 機能があるからデプロイ簡単 (Basic認証もできる!) • Webアプリケーションに地図機能を組み込みたい、という時に AWS Amplify + Amazon Location Service は相性ピッタリ!! AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 16
17. 参考情報 • AWS Amplify https://docs.amplify.aws/ • Using MapLibre GL JS with Amazon Location Service https://docs.aws.amazon.com/location/latest/developerguide/t utorial-maplibre-gl-js.html • Vue.js での AWS Amplify + Amazon Location Service の例 https://dev.to/aws-builders/take-a-journey-with-your-own- map-service-by-aws-amplify-and-amazon-location-service- 1nj6 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 17
18. Amplify Japan User Group AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 18 https://github.com/aws-amplify-jp/awesome-aws-amplify-ja
19. Amplify Boost Up AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 19 https://aws-amplify-jp.connpass.com/event/217715/