見出し画像

オモカゲ開発12~13日目:ダッシュボードの実装

顔がポイントカードになるアプリ、オモカゲを開発中のthere2です。
12~13日目では、最初にアプリを起動した時に表示されるダッシュボード部を実装しました。

主要なKPIが一目で確認できるようにしています。

ダッシュボード画面

画像1

カード型を利用する事で、各指標が見えやすくなっているのではないかと思います。

トップには本日の売上と来店者数の累計を表示しています。
次のブロックでは前日の売上と来店者数を前日比との比較と一緒に表示しました。
最後のブロックでは総会員数と総ポイント残数を表示しています。

また、最下段ではFloating Action Buttonで売上登録をする画面に遷移できるようにしました。

全体のデザインとしては文字列の配置やサイズなどで全体がごちゃごちゃしないように気を付けたつもりですが、あまりメリハリがなくわかりにくいかもしれません。

個人的にはカラーが多くて情報過多な画面は好きじゃないので、できる限りシンプルで色数やフォントサイズの種類など抑えたものにしたいのですが、これで使いやすくなっているかどうかは心配なところです。

ダッシュボードからの画面遷移

本日の来店者数、前日の来店者数のカードをタップすると、そのメンバーの一覧を表示できるようにしました。

画像2

これによってクイックに当日、前日の会員情報にアクセス可能となります。

また、当日の売上、前日の売上のカードをタップした場合は売上のリストを一覧表示して、そこから売上データにアクセスできるようにしています。

画像3

画面の遷移パターンが増えて、また呼び出し元によって同じ画面でも出力する情報を変えたりで実装が複雑になりなかなか苦労しました。

FlutterのProviderというパッケージを利用していますが、これを使うと画面をまたがったデータの共有や他の画面の表示データの更新等が簡単にできるようになり重宝しました。

これがないと、画面でのデータ出力制御が非常に複雑になっていたと思います。

開発進捗サマリ

開発着手:2020年5月14日
作業日数:13日
作業した時間合計:89時間
ファーストリリースに向けた進捗:61%

画像4

今日はいくつか思いついたIssueを4件ほど追加してしまったので、OpenのIssue数があまり減っていません。

やはり実装を進めていくとアレもコレもと追加しなければいけない機能を思いついてしまいます。

最近は対応した作業と追加される作業で一進一退で50%あたりの進捗でずっと滞留してしまっている気がします。

画面のデザインなんかももう少し凝ったりしたいのですが、そろそろ割り切って動く事を優先していかないと、6月中にサービスインまでもっていけないかもしれないという不安でいっぱいです。

明日は初期設定画面の構築を始める予定です。