Save 37% off PRO during our Black Friday Sale! »

KASHIKOIHAKO

Cb88f765dd38cd942c39aacb5abbea06?s=47 ufoo68
October 16, 2021

 KASHIKOIHAKO

Cb88f765dd38cd942c39aacb5abbea06?s=128

ufoo68

October 16, 2021
Tweet

Transcript

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

  2. 自己紹介 • SNSでの名前 ◦ ufoo68(@ufoo_yuta) • 出身 ◦ 温泉じゃない方の草津 •

    すきなこと ◦ シンプルなものづくり
  3. ある日のこと こんな景品をもらいました

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

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

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

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

  8. スマートボックスとは • 箱の開閉をスマートに制御できる ◦ PC・スマホのアプリを用いた開閉制御 ◦ 箱の開閉者の認証 • 箱の状態管理ができる ◦

    GPSを使った位置情報のトラッキング ◦ 内包物の状態の確認 つまりは、より賢い(KASHIKOI)ことができる箱のことをいう
  9. イメージ図(つくりたいもの) スマホを用いた認証機能で開く箱 1. スマホアプリでログイン 2. 箱のロック解除 認証されたユーザー以外は箱を開くこ とができない

  10. 最初にやったこと • ロック機構の実装 ◦ サーボモータを使用 • セキュアな通信 ◦ M5Stack Core2

    for AWSに内蔵されたセキュア通信の機能を使用 ◦ MQTT + TLSでAWS IoT coreと通信
  11. サーボモータの動かし方 PWMの波形の形がサーボモータの角度と連動する https://monoist.atmarkit.co.jp/mn/articles/0708/22/news116.html

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

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

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

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

  16. Cognitoとはなにか • AWSが提供する認証サービス • Apple、Facebook、Google、Amazon などのソーシャル ID プロバイダー、SAML 2.0 および

    OpenID Connect によるエンタープライズ ID プロバイダーを使用した サインインをサポート • 早い話がログインとかパスワード管理とかの機能を作りたいときに使うサービス
  17. AWS IoTと連携する 1. Cognitoでユーザーを作成する 2. 以下のコマンドを実行する aws iot attach-policy --policy-name

    {{policy name}} --target {{cognito identity id}} policyは証明書を持ったデバイスが持つ権限。Cognitoのユーザーをpolicyにア タッチすることで、証明書と同じ権限をユーザーが持つことができる。
  18. 具体的な実装内容は こちらのQiita記事を参照してください

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

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

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

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

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

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

    { "boxStatus": "open" } } desired: { “boxStatus”: “open” } reported: { “boxStatus”: “open” }
  25. デモ動画 使用技術 • ハードウェア ◦ M5Stack Core2 for AWS ◦

    Free RTOS • バックエンド ◦ AWS Cognito ◦ AWS IoT • フロントエンド ◦ Amplify ◦ React ◦ Material UI
  26. おまけにやったこと アプリをPWAに対応してみた WEBマニフェストを記述してスタートアイコンを作り、 ネイティブアプリのように起動させてみた。

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

  28. さいごに • まとめ ◦ AWS IoTとAmplifyを組み合わせることで、手軽に IoTのウェブアプリケーションをつくることができた ◦ M5Stack core2

    for AWSを使うと手軽にデバイスと AWS IoTとの連携が実現できる(ただし FreeRTOSでの開発となる) ◦ PWAを導入することでネイティブアプリのような動きを実装できた • 今後やってみたいこと ◦ プッシュ通知をなにかに活かしたい ◦ 箱をもう少しかっこよくしたい ◦ ロック機構とかも本格的なものを作ってみたい
  29. というわけで より賢いスマートボックス、 KASHIKOIHAKOの製作を今年はやっていきたいと思っています