見出し画像

お小遣い帳アプリを作ってみた!

こんばんは、SASAKENです。
テストは、めちゃくちゃ前にもう終わりました。
最近、忙しくて、Noteの更新ができていなかったのですが、お小遣い帳アプリを作りました。
今回は、それについて紹介します!


私がお小遣い帳アプリケーションを作った経緯

ずっと前から、親に「何かのアプリで、お小遣い帳をつけなさい。」と言われていたのですが、自分に気に入って、親からもらってる条件にもあうようなアプリがなかったのです。

それから1年経過
ようやく、お小遣い帳をつけるときに、最善の方法を思いついたのです。
プログラマーなら「作っちゃえばいいじゃん。
こうして、2時間で終わると思い、作り始めたのである。(この後の苦労を全く知らずに

作り始めた

作り始めて、「お小遣い帳アプリに必要な機能は、何か。」と考え始めました。
私が必要と思う機能と、私の親が必要と思う機能

私が必要と思った機能(プログラマー目線)

  • ログイン機能

  • サインアップ機能

  • データベースにアクセスする機能

  • データベースで、ユーザーごとに、現在の残額と、ユーザーが記録したデータを記録する機能

私の親が必要だとおもた機能(ユーザー目線)

  • テーブルを書く機能

  • テーブルのデータ その時使った後の残額、支出、収入、何で使ったか

このような感じになりました。
それで、私は、このように考えます。

残額 Numberデータ型
支出 Numberデータ型
収入 Numberデータ型
カテゴリー Stringデータ型
時間での管理で、FireBaseで作るか。

こうして開発がスタートしたのだ。

開発中(1週間目)

最初は、ChatGPTや、Google BardなどのAIを駆使して、2時間で終わるだろうと思っていた。
そんなことは、なかった。
意外と、GPT3は、言うことを聞いてコーディングしてくれなかった。
これは、私が言った内容が不適切だった可能性がめちゃくちゃあります。)(ちゃんと、OSづくりなどでは、お世話になっており、感謝しております。)
GPT4なら結果は、違ったと思います。
コツコツ自分で作っていった。

バグ(2週間目)

重複バグ、残高が、1000 + 2000で、 「10002000」このようになることが発覚など、色々ありました。
Numberコンストラクタを使用して、設計する必要があったみたいです。

↑詳細は、こちら(MDN)
これだけでなく重複バグは、すごく苦労しました。

バグ修正前 forでループして、それをどんどん書き込めばいいだろう 「2回目更新ボタンをクリック」 どんどん増える そりゃぁそうだ すぐに修正 それでも重複する。 イベントのログを出してみても、1回しかForは、ループしていない。

var isDuplicate;

のように定義。
そうすることによって、なくなるだろうと考えた

if (!isDuplicate) {
     //データベース読み込みの処理
} else {
   //何もせずにデータは関数から立ち去る
     return;
}

バグの結果


このような行を追加するだけで良いとわかった

開発日記

1日目 サインイン機能を実装
2日目 サインアップ機能を実装
3日目 テーブルの機能を追加
4日目 ほぼ出来上がり
5日目 親への紹介で、バグが多発(はづかしすぎて草。)
6日目 そのバグの一つを修正
7日目 そのバグのもう一つを修正中
8日目 そのバグの少しを修正
9日目 完全に修正
10日目 重複バグを修正
11日目 PWAに対応して終わり

長かったけど、FireStore周りの勉強になって良かったと思います。
(これから長らくフロントエンドの開発は、行わないけど)

終わり

終わりに、宣伝。

https://t.co/To57ZHONgt

最近少しわたしたちが作っているLinuxディストロが人気になってきているようです。
β2は、この秋リリース予定です。 (間に合うかな?)
少なくとも、私の期末テストが終わらないとできないと思う。
冬になるかも。
終わり。


この記事が気に入ったらサポートをしてみませんか?