这个学期有一门课叫「企业级开发」,期末作业是做一个完整的 Web 应用。
选题的时候纠结了很久——做什么好呢?电商系统?太常见了。论坛?太无聊了。想来想去,不如做一个自己真正会用的东西。
我是一个咖啡爱好者。每天早上冲一杯手冲咖啡,是我一天中最放松的时刻。于是就有了 BrewDaily 的想法——一个手冲咖啡的冲煮工具箱。
第一版:一个简单的计时器
最开始的版本非常简单,就是一个计时器。精确到秒,能计时间就够了。
但很快就发现,手冲咖啡不只是计时那么简单。不同咖啡豆需要不同的粉水比、不同水温、不同分段注水时间。于是开始往里面加功能——水粉比计算器、分段计时、预设方案。
第一版前后端都是用最朴素的方式写的:前端纯 HTML + CSS + JavaScript,后端用 Spring + Spring MVC + MyBatis。没有用 Vue、React 这些框架,因为当时想的是「先把东西做出来」。
第二版:加入用户系统
做到一半发现一个问题——没有用户系统,冲煮记录存不下来。每次打开页面都是一张白纸,之前冲了什么样的咖啡、用了什么方案,完全没有痕迹。
于是加入了注册登录功能,后端用 Session 管理用户状态,冲煮记录可以保存到数据库。这样每次打开页面,都能看到自己的冲煮历史了。
这个阶段也加入了「我的」页面——可以看到累计冲了多少杯、连续多少天、最常用的方案是什么。统计功能虽然简单,但看着数字一点点增长,还挺有成就感的。
第三版:从单一功能到工具箱
随着开发深入,功能越来越多,我开始意识到——这不是一个简单的「作业」了,而是真正会每天用到的工具。
于是加了更多功能:
- 批量导入——从别的 App 迁移数据,可以一次性导入 CSV 格式的冲煮方案
- 自定义方案——不满足于预设方案?自己创建一个,分几个阶段、每阶段注多少水
- 彩蛋系统——冲煮到一定次数会触发小惊喜,让每次冲煮都多一点期待
说到彩蛋,这个其实是写着玩加进去的。但加完之后发现,用户会因为想知道还有什么彩蛋而更愿意用这个 App。有时候「有趣」比「有用」更能留住人。
第四版:让它变成真正的 App
一个 Web 页面在浏览器里打开,总觉得不像一个正经的工具。于是做了 PWA(Progressive Web App)支持——添加 Service Worker、manifest.json、离线缓存。
现在你可以在手机浏览器打开 BrewDaily,然后添加到主屏幕。它看起来就像一个原生的 App,有图标、有启动画面、离线也能用。
对于手冲咖啡这个场景来说,离线支持其实很重要——很多人冲咖啡的时候手机开的是飞行模式,或者网络信号不好。如果 App 因为没网就不能用,那体验就很糟糕了。
另外还做了一个小细节:每次冲煮完成,会有一小段庆祝动画。咖啡滴落的音效、冒热气的小动画、统计数字的滚动——这些微交互让整个体验更有温度。
现在的 BrewDaily
现在 BrewDaily 是一个功能完整的手冲咖啡工具箱:
- 冲煮计时器——预设方案 + 自定义方案,多阶段计时
- 水粉比计算器——克和盎司都支持
- 冲煮记录——每次冲煮的数据都保存下来
- 统计面板——累计杯数、连续天数、最爱方案
- 批量导入——CSV 导入冲煮方案
- 彩蛋——冲煮到一定次数触发惊喜
- PWA——可安装到主屏幕,支持离线
回顾这段开发经历,从一个期末作业起步,最后变成了自己每天都会用的工具。这大概就是做软件最有意思的地方——你永远不知道一个简单的想法,最后会长成什么样子。