第 4 关 · 你的第一个"小程序"（手机应用）

第 4 关 · 你的第一个”小程序”（手机应用）

用半天把一个网页改成适合手机操作的”小程序”。完成后通过链接访问，也可以把它添加到手机主屏幕。

先看一个常见场景

小雨是幼儿园老师。除了照顾孩子，她每天还要回答家长重复提出的问题：

“今天孩子吃了什么？""午睡了吗？""今天有没有哭？”

班里有 30 个孩子，同样的信息常常要解释很多遍。下班以后，她还在群里逐条回复。

她用 AI 做了一个”班级日报”小程序。每天花 2 分钟选好午餐和午睡情况，再补一句当天发生的事，页面就会整理出一段可以复制到家长群的图文日报。

家长觉得每天都能看到孩子在园里的情况很方便。原本让小雨觉得负担很重的回复工作，现在集中在这 2 分钟里完成。生成后她仍会检查内容，再发到群里。

这里说的”小程序”，就是针对手机屏幕和触控操作调整过的网页。

你要造什么

你要做一个适合手机使用的页面：按钮够大，手指容易点，也能添加到主屏幕。

它只处理一件每天都会遇到的小事。

动手（半天，可以分两天做）

第 1 步：找一个”每天都发生”的小麻烦（30 分钟）

问自己：

我每天要重复做什么？（填表、记录、汇报、提醒……）
别人每天要问我什么？（吃了什么、几点到、多少钱……）

几个例子：

👶 班级日报：老师记录吃喝睡 → 生成日报发给家长
🏠 家庭采购单：谁缺什么就记一笔 → 去超市照着买
💊 服药提醒：家里老人每天吃什么药 → 点一下就记录
📒 每日复盘：睡前 3 个问题 → 生成今日总结

选一个你明天就会遇到的场景。这样做完以后，马上就有机会测试。

第 2 步：让 AI 生成小程序（30 分钟）

打开 Google AI Studio（https://aistudio.google.com），新建对话，输入：

帮我做一个手机端小程序，只有一个 index.html 文件。

功能（班级日报）：
1. 页面顶部是标题"班级日报"，副标题"今天，孩子们在园里这样过"
2. 三个记录区域：
   - 午餐（多选按钮）：米饭 / 面条 / 饺子 / 青菜 / 鸡腿 / 鱼
   - 午睡（单选按钮）：睡了 1 小时 / 睡了 30 分钟 / 没睡
   - 今日亮点（文字输入）：比如"乐乐今天主动帮小朋友捡玩具"
3. 底部一个大按钮"生成日报"，点击后自动生成一段给家长看的文字
4. 生成结果下面有一个"复制"按钮，一键复制
5. 设计成手机 App 的样子：上下布局、按钮大、手指好点
6. 支持添加到手机主屏幕（PWA）：有应用图标和标题
7. 风格：可爱、明亮、圆角
8. 全部中文，输出完整的 HTML 代码

把【班级日报】和里面的功能换成你自己第 1 步想好的需求。

第 3 步：在电脑上测试（30 分钟）

复制代码 → 打开 https://htmlpreview.github.io/ 预览（或保存 index.html 双击）
点几个按钮，看”生成日报”的结果对不对
关键测试：把浏览器窗口缩到手机那么窄，看看还好不好点、字会不会太小
不满意就回去指挥 AI：

按钮在手机上太小了，间距加大，字也加大，重新输出完整代码。

第 4 步：部署到手机（1 小时）

用免费部署上线：https://app.netlify.com/drop → 拖入 index.html → 得到网址
用手机打开这个网址
在手机浏览器菜单里选 “添加到主屏幕”（Add to Home Screen）
手机桌面上会出现一个图标，点它即可打开页面

现在这个页面可以从主屏幕打开，也可以继续通过链接分享。先在自己的手机上确认一次，再发给别人测试。

第 5 步：让 3 个人用起来（1 小时）

找一位最可能使用它的人，例如家长、室友或同事：

教他打开链接
看他操作，记下犹豫和点错的地方
改完重新部署，把新链接发给他

第一版可以简单，但要完整走通一次。先修复用户卡住的地方，再考虑增加功能。

你的作品

你的成果是一个能从手机主屏幕打开的小程序。至于用户会不会每天打开，要交给后续使用来验证。

分享你的作品

录一段手机使用的小视频（或截图），发到社区：

“我做了个手机小程序，解决我每天【填表/回复】的麻烦 📱”

这一关你学会了什么

本关的”小程序”是针对手机调整过的网页，可以添加到主屏幕
先把一个高频任务做顺，再决定是否增加更多功能
电脑预览不能代替手机测试；按钮大小、字号和间距都要在真机上检查

下一关：第 5 关 · 你的第一个自动化