KASHIKOIHAKO計画その4

Transcript

1. KASHIKOIHAKO計画
   その4
   

   View Slide

2. 自己紹介
   ● SNSでの名前
   ○ ufoo68（@ufoo_yuta）
   ● 本名
   ○ まつながゆうた
   ● やってること
   ○ スポーツTechLT主催
   ● 今季のおすすめアニメ
   ○ ひぐらしのなく頃に卒
   

   View Slide

3. いままでのあらすじ１
   スマートボックスをつくった
   １８０度回転するサー
   ボアーム
   サーボアームが回転すると
   箱がロックされる
   

   View Slide

4. いままでのあらすじ２
   ユーザー認証と連携した
   1. スマホアプリでログイン
   2. 箱のロック解除
   認証されたユーザー以外は箱を開くこ
   とができない
   

   View Slide

5. いままでのあらすじ３
   デバイスの状態を管理を実装してみた
   {
   "desired": {
   "boxStatus": "open"
   },
   "reported": {
   "boxStatus": "open"
   }
   }
   desired: {
   “boxStatus”: “open”
   }
   reported: {
   “boxStatus”: “open”
   }
   

   View Slide

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

   View Slide

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

   View Slide

8. 今回のテーマ
   アプリをPWAに対応してみた
   

   View Slide

9. PWAとは
   プログレッシブウェブアプリProgressive web apps (PWA) は、ウェブアプリケーション
   にネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。
   主に２つの要素でPWAを実現します。
   ● サービスワーカー
   ● ウェブマニフェスト
   

   View Slide

10. サービスワーカー
    ブラウザ上でウェブページとは別にバックグラウンドで実行されるJavaScriptファイル。
    以下のような機能を実現することができる。
    ● バックグラウンドでのキャッシュの更新
    ● プッシュ通知
    ● 特定の日付・時刻に対する反応
    ● 特定の地理的範囲へ入った事を検知
    

    View Slide

11. ウェブマニフェスト
    ウェブマニフェストはウェブアプリをネイティブアプリのように見せるために必要な情報が
    書かれたJSONファイル。たとえば以下のような情報を記述する。
    ● ホーム画面上に表示するアイコン
    ● アプリの表示名
    ● アプリ起動時にアクセスするURL
    ● 背景・テーマの色
    詳細はこちら
    

    View Slide

12. PWAに対応してみた
    

    View Slide

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

    View Slide

14. まとめ
    ● PWAに対応した
    ○ GPSの情報をバックグラウンドでとりAmazon Locationとの連携とかもやってみたい
    ● 状態管理についての発展課題
    ○ センサを使った開閉の管理
    ● その他の手つかずの課題
    ○ 箱をもっといい感じにする
    ○ SORACOMのSIMを使って外でも通信できるようにする
    

    View Slide

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

    View Slide