Slide 1

Slide 1 text

KASHIKOIHAKO計画 その4

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

PWAに対応してみた

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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