AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話 👏

イ ジュスン(@jslee_

・株式会社Fusic エンジニア

・韓国出身(福岡4年目)

・無類のラーメン好き🍜

家庭内の課題

👀

お金の管理がうまくできてない

💸

現状

  • 家のお金は奥さんがメインで管理

  • お小遣い制

昨日外食して、今日も外食 🍻

ガスが二重請求されても気づかない 🔥

帰省や旅行でかさむ飛行機代 ✈️

それでも、給料日は外食 🍻

いつどこにいくら使っているか分からない

節約の計画を立てることができない

⬇︎

課題 1

お互いに共有できていない

お金の流れが見えない

課題 2

⬇︎

ちゃんと管理できているか
このままで大丈夫か不安

お互いに見える化したい

結論

出費をちゃんと把握したい

あれ?これ作れそうなんじゃないかな?

Donn

韓国語で「お金💸」という意味

使った技術

Firebase

・アプリ開発に集中したい

・デプロイが簡単
  (コマンド一発で可能)

・無料

Angular

・業務で使ったことない
 言語を使いたい(技術向上)

・WEBの技術でネイティブ
 アプリに近い体験を提供

・配信が簡単(審査不要)

・Push通知を
 送信することができる

・個人的に好き

・Angular Material Design

主な機能

入力
履歴
集計
通知

奥さんフィードバック👂

積極的に使ってくれなかった

衝撃のフィードバック

入力が面倒 笑

もうちょっと簡単に
入力できないかな

カテゴリーを選択

入力フローをよりシンプルに

改善策①

(改善前)

「次へ」ボタンタップ

「金額」入力欄までスクロール

「金額」入力欄をタップ

「金額」入力

メモ入力(必須ではない)

登録

確かに面倒いな..

入力フローをよりシンプルに

改善策①

カテゴリーを選択

金額入力

メモ入力(必須ではない)

登録

(改善後)

Angular Lazy Loading に対応し、

アプリの立ち上がる速度を改善。

片手で操作できるように、

右側にボタンを配置(右手専用😇)

立ち上がる速度を改善

改善策②

ボタンの配置を変える

改善策③

少しずつ改善を行った結果、
積極的に使ってくれるように
なった!

良いフィードバック

・デザインがポップで好き。同僚に自慢した

・集計機能助かる! うちは、食費ロスがすごいなあ。

・アプリの速度が本当に速くなってて、びっくりした!

その他フィードバック

「やってほしいことは何でも言って」と言うので、言ったら 

 「わがままだね」と言われた(でもちゃんと作ってくれた)

・アプリの色を変えようとしていて、グラデーションが流行って

 いるらしく取り入れてくれたが、卓球選手のユニフォーム

 みたいになった

ログイン画面を少し​変えたけど、いまだに気づいてない...

まとめ

・Angular + Firebase + PWA 最高です👍

・自分でサービスを作るのは楽しい!

・使っている人を身近な距離で見れる。

 反応がすぐ見えて面白い。

・いくら家族でも、使いにくいと、使ってくれない。

ご静聴ありがとうございました

AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話

By jslee

AngularとFirebaseで作ったPWA対応アプリで家庭内の課題を解決した話

「家庭内での課題も、ITで解決・改善できないか」という思いがあり、 PWA家計簿アプリをAngularとFirebaseを使って開発しました。実際に運用する中で、 家族からもらったフィードバックや、感じたこと、勉強になった点について話したいと思います。

  • 446
Loading comments...