我用 AI 两天写了个宝宝喂养小程序:免费、无广告、全家共用

0 阅读6分钟

起因是我媳妇抱怨了一句:现在这些带娃 App,记个奶量都要先看 15 秒广告,想看完整记录还得开会员。

我打开应用商店翻了翻,记录类 App 的套路基本一致:注册、广告、会员、功能藏三层。而我们的需求其实特别朴素——喂了多少奶、几点换的尿布、睡了多久,家里几个人都能看到

于是我决定自己写一个。两天时间,AI 协作,做出了「芽芽食记」。

先看成品(首页 / 记一笔 / 统计):

shot-overview.png


这个小程序能干什么

首页:一眼看全,一键记录

shot-home-boy.png

shot-home-girl.png

打开就是宝宝今天的状态。四个数字——喂养、小便、大便、睡眠,今天的全部信息都在这:
  • 四宫格:喂养次数(含奶量)、小便、大便、睡眠时长,当天实时汇总
  • 照护状态条:「距上次喂养 1小时38分」「距上次小便 2分钟」——半夜迷迷糊糊醒来,不用算时间,扫一眼就知道该不该喂
  • 快捷记录:8 个大图标,点「小便」直接 +1,不用进表单。这是用得最多的功能,一天要按五六次
  • 今日时间线:今天每条记录谁记的、几点记的,清清楚楚

两张截图还有两个细节:顶部宝宝卡和全家头像会跟随宝宝性别换主题色(男孩蓝、女孩粉);下方是多宝宝切换——二胎家庭每个宝宝一份数据,点头像即切。

记一笔:不是填表格,是做选择

shot-record.png

传统记录 App 让你填一堆输入框,我们的思路是能点就不打字

  • 喂养方式:母乳亲喂 / 配方奶 / 辅食 / 喝水,图标卡一点就选
  • 奶量:120 / 150 / 180 / 210 常用量一按就走,要精确也能手输
  • 大便颜色:真实色块可视化选择,灰白 / 黑色 / 带血丝会直接标红提醒就医——异常大便颜色是需要警惕的信号,这种提醒工具应该主动做,而不是指望家长记得
  • 睡眠:开始、结束各点一下,时长自动算

统计:数据不记白记

shot-stats.png

  • 周期概览:日均奶量、日均喂养、日均睡眠、有记录天数
  • 趋势图:近 7 天 / 30 天的奶量、喂养次数、大小便、睡眠柱状图,今天的柱子高亮,还标了平均值
  • 生长曲线:体重 / 身高 / 头围三条曲线切换,体检前看看长势

还有这些

  • 家庭共享:创建家庭会生成一个 6 位邀请码,奶奶、外婆输入这个码就能进来,看到的是同一份数据。不用对方注册,不用加好友
  • 多宝宝:二胎家庭可以加多个宝宝(见上面截图里的小明和小红)
  • 老人模式:一键切换,全局字号放大、按钮加高,专门给爷爷奶奶用的
  • CSV 导出:想留底随时导出,Excel 直接打开不乱码

和 AI 对线的三个回合

两天能做完,AI 确实帮了大忙。但过程并不是「一句话生成整个项目」,更像是跟一个打字很快、知识很广、但偶尔自信过头的实习生结对。说三个印象最深的回合。

回合一:删除功能一直报错,查了三轮

删除记录接口一直提示「服务器内部错误」,诡异的是时好时坏

  • 第一轮,我描述现象,AI 检查后端逻辑,说「代码没问题」
  • 第二轮,我贴了更多复现步骤,它怀疑是权限校验,也不是
  • 第三轮,我把后端控制台的报错原文贴给它:"null" is not valid JSON

它秒懂了:微信开发者工具会把 GET/DELETE 请求的空参数,序列化成字符串 "null" 发出去,服务端把它当 JSON 解析,直接就崩了。真机上不发这个包体,所以真机是好的——这就是「时好时坏」的原因。

前端改成「没参数就不发」,两行代码,结束。

这个坑最气人的地方在于:报错信息指向的是后端,但真凶在前端。如果我不把控制台原文贴给它,可能还在后端打转。

回合二:AI 一口咬定「这个功能没写」

有一次我让它检查「复制邀请码的功能写了没」。它搜了一遍,非常肯定地回复:没写,需要补

但那个功能我明明试过,是好的。

后来发现真相特别无语:它在 macOS 上用了 Linux 语法的 grep 命令,什么都搜不到,于是得出「代码不存在」的结论。它没有怀疑自己的搜索方式,而是直接相信了搜索结果。

从这以后我立了条规矩:AI 给出的「有 / 没有」这种结论,必须用另一种方式再验一遍。 它的问题不在于不会写代码,而在于它不知道自己的尺子是坏的。

回合三:小数点消失了

填体重,输 8.6,敲下小数点那一下,点没了。

AI 看了代码一眼就指出来了:输入框在每次键入时都把内容转成数字再写回去——"8." 转成数字是 8,写回输入框,小数点自然就没了。

修复思路也简单:输入的时候只过滤非法字符、不做转换,提交的那一刻才转数字。 输入框里存的应该是用户看到的字符串,不是程序理解的数值。

对线的总结

AI 提效最猛的三个场景:写样板代码、生成测试用例、翻译报错信息

但有三件事它帮不上:架构上怎么取舍、偶发问题怎么定位、以及发现自己错了

我的使用心得就一句话:把 AI 当实习生用——它负责打字,你负责决定和验收。谁验收谁负责,这句话在 AI 时代格外成立。


背后用了什么

技术栈刻意选得简单,都是成熟到无聊的东西:

用的什么
前端微信小程序原生(WXML/WXSS/JS)
后端Node.js + Express
数据库SQLite(Node 内置,单文件)
部署一台 1 核 1G 的云服务器 + systemd

没有 TypeScript,没有跨端框架,没有云开发。理由很简单:一个人、一个端、功能边界清晰,每多一层抽象都是负担。SQLite 单文件数据库让备份变成「复制一个文件」,对个人项目来说再合适不过。

部署也没用什么花活:nginx 反代 + HTTPS 证书自动续期,数据目录和代码目录完全分开,更新代码不可能碰到数据。


花了多少钱

  • 服务器:1 核 1G 的轻量云服务器,一年百来块
  • 域名:几十块一年
  • 其他:全免费,没有用任何付费服务

对,这个小程序没有任何成本压力,所以永远免费、没有广告、不需要会员


体验方式

微信搜索小程序:

芽芽食记

搜索框传播样式-微信标准绿版.png

如果你也在带娃,或者家里有正在带娃的人,欢迎试试。有任何问题或者想看某部分的完整实现,评论区聊。

文中提到的坑都是真实踩过的,代码都来自这个项目本身。