えるざっぷの日記

えるざっぷの日記とか

Firebase で在室管理Web アプリを作った

CPS Lab アドベントカレンダー 12月3日(グリニッジ標準時) の記事です。 adventar.org

f:id:elzup:20181204001313p:plain

この研究室は「教員があっちこっち行く」「残留の民が多い」ということで在室管理の需要があったのでアプリを作りました。

成果物

メイン画面 f:id:elzup:20181204002134p:plain

設定画面 f:id:elzup:20181204002648p:plain

現在会社のオフィスと研究室・院生室に設置しています。

PWA 対応(アイコンとCRA標準)しました。別プロジェクトで Cloud Messaging 通知を使ったのでこのアプリにもつけたいです。 f:id:elzup:20181204001012p:plain

ソースコード

github.com

構成

ほぼ全部 Firebase に乗っかって作りました。 Mac アドレス監視の方式を使ってます。

  • Firebase function→ロガー用API
  • Firebase reactime database
  • Firebase Hosting
  • Firebase Authentication→Google認証

を使っています。

f:id:elzup:20181204001452p:plain

ロガー

アクセスポイント内に Mac アドレスを監視し続けるロガーを設置しています。

f:id:elzup:20181204002834j:plain

Raspberry Pi Zero W を使うとUSB電源一つでコンパクトに収まります。

ロガーは1分間隔で Python スクリプトを叩いています。

認証方法

Web アプリは Google 認証でログインできます。 Macアドレス(複数可)を登録して、実際にロガーが設置されているアクセスポイントで検知されると正式登録と判定します。

フロントエンド

  • react, Redux
  • flow
  • s2s
  • material-ui

を使ってます。

ソースコード github.com

ロガー github.com