KASHIKOIHAKO - Speaker Deck

Slide 1

Slide 1 text

KASHIKOIHAKO PWAで作るIoTアプリケーション

Slide 2

Slide 2 text

自己紹介 ● SNSでの名前 ○ ufoo68（@ufoo_yuta） ● 出身 ○ 温泉じゃない方の草津 ● すきなこと ○ シンプルなものづくり

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

それでつくったものこれをスマートボックスのプロトタイプと勝手に定義した１８０度回転するサーボアームサーボアームが回転すると箱がロックされる

Slide 8

Slide 8 text

スマートボックスとは ● 箱の開閉をスマートに制御できる ○ PC・スマホのアプリを用いた開閉制御 ○ 箱の開閉者の認証 ● 箱の状態管理ができる ○ GPSを使った位置情報のトラッキング ○ 内包物の状態の確認つまりは、より賢い(KASHIKOI)ことができる箱のことをいう

Slide 9

Slide 9 text

イメージ図（つくりたいもの）スマホを用いた認証機能で開く箱 1. スマホアプリでログイン 2. 箱のロック解除認証されたユーザー以外は箱を開くことができない

Slide 10

Slide 10 text

最初にやったこと ● ロック機構の実装 ○ サーボモータを使用 ● セキュアな通信 ○ M5Stack Core2 for AWSに内蔵されたセキュア通信の機能を使用 ○ MQTT + TLSでAWS IoT coreと通信

Slide 11

Slide 11 text

サーボモータの動かし方 PWMの波形の形がサーボモータの角度と連動する https://monoist.atmarkit.co.jp/mn/articles/0708/22/news116.html

Slide 12

Slide 12 text

セキュアな通信 X.509を使用した証明書認証をデバイスとAWS IoTの間で行うデバイス AWS IoT core 認証された（証明書を持っている）デバイス以外は通信できない

Slide 13

Slide 13 text

MQTT over TLSを用いた通信 openとcloseのトピックをサブスクライブする

Slide 14

Slide 14 text

次にやったこと ● ユーザー認証との連携 ○ CognitoとIoT Coreを組み合わせる ● UIの実装 ○ AmplifyライブラリでAWSリソースと連携

Slide 15

Slide 15 text

ユーザー認証との連携やりたいことのイメージ

Slide 16

Slide 16 text

Cognitoとはなにか ● AWSが提供する認証サービス ● Apple、Facebook、Google、Amazon などのソーシャル ID プロバイダー、SAML 2.0 および OpenID Connect によるエンタープライズ ID プロバイダーを使用したサインインをサポート ● 早い話がログインとかパスワード管理とかの機能を作りたいときに使うサービス

Slide 17

Slide 17 text

AWS IoTと連携する 1. Cognitoでユーザーを作成する 2. 以下のコマンドを実行する aws iot attach-policy --policy-name {{policy name}} --target {{cognito identity id}} policyは証明書を持ったデバイスが持つ権限。Cognitoのユーザーをpolicyにアタッチすることで、証明書と同じ権限をユーザーが持つことができる。

Slide 18

Slide 18 text

具体的な実装内容はこちらのQiita記事を参照してください

Slide 19

Slide 19 text

UIをつくる Amplifyを使えば認証機能を楽々実装できる

Slide 20

Slide 20 text

その次にやったこと AWS IoTのデバイスシャドウを使って、箱の開閉状態を管理してみた

Slide 21

Slide 21 text

今までの課題例えば箱の開閉を操作するとき、目の前に箱があるときは「開」「閉」のどちらを押せばいいのかがわかる

Slide 22

Slide 22 text

今までの課題しかし、箱が目の前にないときは「開」「閉」のどちらを押せばいいのかがわからない（これはあまりかしこくない）

Slide 23

Slide 23 text

そして考えたこと箱とアプリの間で箱の開閉状態を管理するものを立ててみる？

Slide 24

Slide 24 text

デバイスシャドウを使ってみたデバイスの状態を管理するためのAWS IoTの機能 { "desired": { "boxStatus": "open" }, "reported": { "boxStatus": "open" } } desired: { “boxStatus”: “open” } reported: { “boxStatus”: “open” }

Slide 25

Slide 25 text

デモ動画使用技術 ● ハードウェア ○ M5Stack Core2 for AWS ○ Free RTOS ● バックエンド ○ AWS Cognito ○ AWS IoT ● フロントエンド ○ Amplify ○ React ○ Material UI

Slide 26

Slide 26 text

おまけにやったことアプリをPWAに対応してみた WEBマニフェストを記述してスタートアイコンを作り、ネイティブアプリのように起動させてみた。

Slide 27

Slide 27 text

ソースコード https://github.com/ufoo68/kashikoihako-ui https://github.com/ufoo68/kashikoihako-device デバイス側アプリ側

Slide 28

Slide 28 text

さいごに ● まとめ ○ AWS IoTとAmplifyを組み合わせることで、手軽に IoTのウェブアプリケーションをつくることができた ○ M5Stack core2 for AWSを使うと手軽にデバイスと AWS IoTとの連携が実現できる（ただし FreeRTOSでの開発となる） ○ PWAを導入することでネイティブアプリのような動きを実装できた ● 今後やってみたいこと ○ プッシュ通知をなにかに活かしたい ○ 箱をもう少しかっこよくしたい ○ ロック機構とかも本格的なものを作ってみたい

Slide 29

Slide 29 text

というわけでより賢いスマートボックス、 KASHIKOIHAKOの製作を今年はやっていきたいと思っています