KASHIKOIHAKO

Transcript

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

   View Slide

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

   View Slide

3. ある日のこと
   こんな景品をもらいました
   

   View Slide

4. この箱なにかに使えそう
   

   View Slide

5. さらにある日のこと
   スイッチサイエンスにてあるものを購入した
   

   View Slide

6. これでなにか作れないだろうか
   ・・・・・・・・
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide