Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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の製作を今年はやっていきたいと思っています