【自作アプリ】 珈琲が好きすぎて、珈琲だけのためにアプリ作ってみた。
最近、react×typescriptを勉強している大学生「kitsune」です。
アプリ名は、「Good Time With Coffee」(github)
作った経緯
作った経緯としては2つあります。
- 勉強しているReact, typescriptを使って何か作ってみたい。
- 珈琲もっと楽しみたいなぁ。。
まぁ1番は、そのままなので割愛します。メインは、2番！！
また、珈琲に関する知識として3つの重要なポイントがあると思っています。
- 豆量と湯量の比率
- 抽出時間
- ドリップのやり方
3番は、技術的問題。。幸い、自分には喫茶店で働いた経験もあったため、これはクリア。
問題は、1番と2番でした。
これまでは、毎回豆の量と湯量の比率を測ってから入れていました。
というのも、毎日ドリップはするけど飲む量が毎回違う。一応、黄金比として、豆の量 : 湯量 = 1 : 16というものがあります…
いや、毎回計算するのめんどくね？
ってなりました(まぁ、なりますよね)。
これがきっかけ。
あと、タイマーも実装していて、これは開発過程で、抽出時間も測れたらよくね？ ってなったので実装しました(ドリップスケールが高すぎる件について)。
タイマーの実装には、便利なパッケージがあったので、**react timer hook**を使いました。
実装機能
アプリ上部のテキストフィールドに飲みたいコーヒーの量を入力後、OKボタンを押すと、適切な豆量を計算します。
下部のタイマーで抽出時間を測ることができます。
使った技術
今回使った技術としては、
React.js, Typescript, material UI, netlify
を使いました。
困ったところ
1月頃からReactの勉強をしていて、可能な限りコンポーネント開発の規則に則って開発するように心がけました。
Propsのコンポーネント間の受け渡しとイベント処理のところがめっちゃむずかった。
あとは、入力値の正規チェックも。。
また、可能な限りコンポーネント開発を心掛けて開発しましたが、イベント処理の受け渡しなど、もっと綺麗にかけるかなというところは多々あるので修正はしていくつもり。。
UIについて
material UIを使いました。絶対、使いこなせてないので、リファクタリングは必要だなと。。
今後の改善指標
使ってて、機能追加したい点が見えてきた。
- 豆と湯量の比率を動的に変えたい
- カフェオレ、アイス珈琲なども変更できるようにしたい。
最後に
珈琲好きの方、ぜひ使ってみてください！感想も待ってます。
おすすめの珈琲アイテムがあれば教えてください！！
何かアドバイスやご質問などありましたら、Contact formもしくは、TwitterのDMに送ってくだされば反応いたします。
下のボタンから、コーヒーチップを送ることができます！支援して頂けると、ブログや個人開発の励みになります！
シェアリンクから、ブログのシェアもしてもらえると励みになります！！