KASHIKOIHAKO計画その4
View Slide
自己紹介● SNSでの名前○ ufoo68(@ufoo_yuta)● 本名○ まつながゆうた● やってること○ スポーツTechLT主催● 今季のおすすめアニメ○ ひぐらしのなく頃に卒
いままでのあらすじ1スマートボックスをつくった180度回転するサーボアームサーボアームが回転すると箱がロックされる
いままでのあらすじ2ユーザー認証と連携した1. スマホアプリでログイン2. 箱のロック解除認証されたユーザー以外は箱を開くことができない
いままでのあらすじ3デバイスの状態を管理を実装してみた{"desired": {"boxStatus": "open"},"reported": {"boxStatus": "open"}}desired: {“boxStatus”: “open”}reported: {“boxStatus”: “open”}
動画使用技術● ハードウェア○ M5Stack Core2 for AWS○ Free RTOS● バックエンド○ AWS Cognito○ AWS IoT● フロントエンド○ Amplify○ React○ Material UI
スマートボックスとは● 箱の開閉をスマートに制御できる○ PC・スマホのアプリを用いた開閉制御○ 箱の開閉者の認証● 箱の状態管理ができる○ GPSを使った位置情報のトラッキング○ 内包物の状態の確認つまりは、KASHIKOIHAKOのことをいう
今回のテーマアプリをPWAに対応してみた
PWAとはプログレッシブウェブアプリProgressive web apps (PWA) は、ウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。主に2つの要素でPWAを実現します。● サービスワーカー● ウェブマニフェスト
サービスワーカーブラウザ上でウェブページとは別にバックグラウンドで実行されるJavaScriptファイル。以下のような機能を実現することができる。● バックグラウンドでのキャッシュの更新● プッシュ通知● 特定の日付・時刻に対する反応● 特定の地理的範囲へ入った事を検知
ウェブマニフェストウェブマニフェストはウェブアプリをネイティブアプリのように見せるために必要な情報が書かれたJSONファイル。たとえば以下のような情報を記述する。● ホーム画面上に表示するアイコン● アプリの表示名● アプリ起動時にアクセスするURL● 背景・テーマの色詳細はこちら
PWAに対応してみた
ソースコードhttps://github.com/ufoo68/kashikoihako-uihttps://github.com/ufoo68/kashikoihako-deviceデバイス側 アプリ側
まとめ● PWAに対応した○ GPSの情報をバックグラウンドでとりAmazon Locationとの連携とかもやってみたい● 状態管理についての発展課題○ センサを使った開閉の管理● その他の手つかずの課題○ 箱をもっといい感じにする○ SORACOMのSIMを使って外でも通信できるようにする
というわけでより賢いスマートボックス、KASHIKOIHAKOの製作を今年はやっていきたいと思っています