 |
| Gemini界面 |
项目 3：Little Biochemist
（这个阶段已经不能叫“测试”了，算是真正以“成品"为目标的开发项目。）
在前两个小游戏的实验之后（文接这里：Page not found: Vibe Coding 2025：两周亲身体验 AI 写程序（1）），我终于可以尝试做一个 在工作上真正用得着的工具 :一个以生物化学反应主题的沙盒互动游戏。
灵感来自一个我一直觉得很有趣的网站： Little Alchemy 2，它的玩法很简单，就是把不同元素组合看看可以产生什么新东西。
虽然网上可能已经有类似的生化互动教材，但因为我打算拿来上课用，甚至可能分享给学生，所以内容的有克制化的要求。
Substrate、Enzyme、Product 的名称和反应逻辑要符合我自己的教学大纲，不能太简化丢掉重要概念，也不能复杂到超过课程范围。换句话说，这是一个专为课堂而生的教学小工具。
有了前面几个项目的经验，这次直接先把概念大纲起草好（第一次觉得和 AI agent 对话前竟然要打草稿）。虽然这个项目相对复杂得多，但 Gemini 依然是在 一分钟内就生成了第一版原型。
接下来就是漫长的来回修正：调整界面布局，修改一堆化学反应方程式，处理循环反应，修正分子图示 (尽量保持科学准确, 虽然还是达不到 100%）。
我粗略算过，这一轮几天下来大概改了 40 多个版本。过程中发生了问题：修改前后搞混、Gemini貌似失忆、输出内容鬼打墙。而且 Gemini在精准绘制 SVG 化学结构这块还是有限制。最后我只好放弃太复杂的分子图，让整个视觉风格保持简单实用就好。
满心欢喜把网页推上 GitHub，兴致勃勃地想在手机上体验一下触屏操作。
结果一打开手机
 |
| 完全没办法使用！ |
虽然我已经要求 Gemini 做成 responsive web design，但我完全忽略了一个关键：inventory panel 在手机竖屏下根本放不下！导致整个 UI 爆炸式错位，手机根本不可能好好操作。
我只好硬着头皮回去 Little Alchemy 的界面抄功课，再问了好基友意见，顺便翻了一篇 UI/UX 设计文章 （
Desktop vs Mobile design: The only RULE you must know! | by UXGO | UX Planet），才意识到：竖屏与横屏的菜单布局思路不同，基本上也是我在上一个锄大D项目犯下的错误。
于是，我和 Gemini 再开一轮设计讨论，最后决定：整个界面重做。
（反正也不是我写代码。）
接着卡在一个怎么也无法解决的bug：在手机上用手指拖拉分子进沙盘和滑动菜单列表两个手势会互相冲突，完全没办法共存。
我不知道 Little Alchemy 是怎样做到那种几乎丝滑的操作体验。做到这种程度，我真的只能说：
在真正的工程师面前，AI 还是输了。
在真正的工程师面前，AI 还是输了。
就在我在烦恼的时候，我突然想到那句万用真理：Keep it simple.
于是我直接指示 Gemini取消拖拉操作，改成触点生成分子。结果整个问题瞬间解决：菜单可以顺畅滚动，手势不再冲突，手机体验大幅改善。
虽然算是功能被小幅度“阉割”，但用户体验反而更好。
 |
| 电脑版 |
 |
| 手机版 |
最后最后，成品出炉后，我是真的满意。
功能上已经相当完整，界面也顺畅到足以拿上课使用。后续要做的事情其实就很单纯：
不断打补丁、加入更多生物化学反应，甚至加入挑战模式，让内容越来越丰富。
以教学用途来说，它已经完全达标。
链接：
解锁技能：
Mobile First Design概念✅
项目 4：第一次接触 Backend —— 分账计算工具
前面三个项目都是不需要数据库的 static webpage。下一步，我想挑战看看如何使用免费的数据库当作 backend 后台服务，这样未来的项目就能扩展出更多可能性。
目标很简单：做一个类似 SplitWise 的 分账计算小工具。网上当然已经有很多类似的免费服务，但我主要是想借这个小项目练习如何架设后台数据库。顺便也把 SplitWise 需要订阅的功能自己做出来，例如：免费版的每日 10 项输入限制和货币转换。
跟 Gemini 讨论过后，我决定用Firebase当作免费数据库。看了1支 YouTube 教学影片之后，我就开始动工。
有了前几个项目的经验，Frontend 前台设计这部分很快就搞定了。虽然还是有些瑕疵，但基本功能完整，在手机竖屏再进行微调成也不过 2-3次尝试就搞妥。接着把 Firebase SDK 接入 HTML，一测试：连线成功，成功登录！
数据库安全和维护
Firebase 的安全基本上依赖它内建的认证与权限设定。没有受过正规训练的我，只能反复确认自己有没有做出什么骚操作，让数据库暴露在攻击风险中。Gemini 虽然很强，它生成的代码可能也藏着潜在风险，所以这部分必须特别谨慎。
还有就是简单的删除资料指令原来不简单，为了确保不留下幽灵资料，必须特别指示Gemini的代码需要强制删除sub-collection的资料，不可以留下任何孤儿。
货币汇率API
跟 Gemini 聊了一下才知道，要做自动货币转换，必须依赖外部的汇率 API。
而这立刻带来一个新的现实问题：我要开 API 帐号。我随手查了一下平时常看的那些汇率网站结果全都是 付费申请API的。还好最后找到一个专门提供给小型开发者的免费汇率API，但限制也很现实：每个月只能用 2000 次汇率转换请求。我顺手再瞄一眼目前使用的 Firebase 免费方案的流量限制，我在想：如果未来真的想做一个大量使用后台服务的商业工具不管是 API、数据库、流量、认证系统……全部通通都要钱。
网上的所有服务几乎都要钱！顿悟：感恩Google大帝！
解锁技能：
Firebase 设置后台数据库✅
设置用户登录✅
设置API对接✅
项目 5：Kahoot Clone
储备了足够的知识后，我觉得是时候尝试集成一个线上测试系统了。没错，就是对标 Kahoot 的那种网页。因为是自己做自己用，可以绕开许多付费版才有的限制，比如人数上限之类的。
几天的断断续续地和 Gemini 讨论，不停地提问、建议、推翻再重来。过程中我也参考了自己常用的教学管理平台的功能，同时评估免费数据库的容量、流量限制，以及权限设定（避免有人拿到 SDK 就能洗掉后台数据库）。
越讨论越发现：在把复杂任务交给 AI 写代码之前，一个清晰的软件架构真的非常关键。不能随便就叫开始AI写代码，不然一直推翻再一直测试实在太没有效率。
和前两个项目不同，这次需要两个前台：学生端和教师 Dashboard。虽然我没特别要求设计风格，但 Gemini 产出的界面一眼看过去就是在致敬 Kahoot。我哥直接笑说：“这不就是 Kahoot Clone 吗？”于是名字就这样定了。
经过两天的密集测试和功能追加，中间还发生了一次乌龙：我的开发环境因为显示问题没把“确认栏”渲染出来，让我错误责怪 Gemini 功能写坏了，浪费了不少时间尝试修不存在的错误。不知道是不是错觉，被我“冤枉”之后的 Gemini 似乎明显变得有一点不友善和积极了，回复得比较直接干脆，而且还会更主动地纠正我。
整个开发流程其实非常快：一个周末的开发加测试，就把整个系统完整跑通了！
 |
| 成品 |
解锁技能：
软件架构启蒙✅
结语：
这两个星期下来，虽然一行代码都没写，却觉得知识被灌得很充实。有了 Gemini 的协助，不同功能的小工具或小游戏几乎都能实现，限制的反而是自己的想象力。2025年的Vibe Coding已经足以让我们为工作或生活开发各式实用的小工具了。
No comments:
Post a Comment