Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Amplify + Amazon Location Service を React で...

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

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

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

Kihara, Takuya

July 17, 2021
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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. AWS Amplify • バックエンドをすばやく構成 • フロントエンドとのシームレスな接続 • 数クリックでデプロイ • 容易なコンテンツ管理

    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 5 https://aws.amazon.com/jp/amplify/
  4. React で AWS Amplify + Amazon Location Service AWSの基礎を学ぼう 特別編

    最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 7
  5. 準備⼿順 (超概略版) npx create-react-app react-amplify-location cd react-amplify-location amplify init amplify

    add auth amplify push ここから実装を頑張る AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 8
  6. 認証(Cognito)のリソース • Amplify CLI で追加した Cognito を Amazon Location Service

    でも使える。(設定が少し楽) • 作成済みの Role に Policy を追加するだけ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 12
  7. リアルタイムな情報連携 • Amplify CLI で追加できる API (GraphQL) の裏側は AppSync •

    AppSync の Subscription を使うことで、 地図へのリアルタイムな反映もやりやすい。 準備が間に合わなかったので、今回はお話しだけ。。。 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 15
  8. その他モロモロ • IoT Core は Amplify PubSub ライブラリで連携可能 • UI

    Component で認証画⾯など作りやすい • Webだと React / Vue.js / Angular 対応 • Hosting 機能があるからデプロイ簡単 (Basic認証もできる!) • Webアプリケーションに地図機能を組み込みたい、という時に AWS Amplify + Amazon Location Service は相性ピッタリ!! AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 16
  9. 参考情報 • 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