使用 AI Agent 工具帮助你从零构建一个小程序#
Lan-Fa/HandyIn: HandyIn 是一个开源、跨平台的二维码作业收取与统计系统，通过多人协作扫码自动完成纸质作业登记、实时统计以及未交名单管理。 ↗
明确自己的需求：我需要做一个什么东西？#
- 考虑到不同人有不同手机，我又没有 ios 开发环境，所以我想把它做成网页。
- 它应该是前后端分离的。
- 它也应该是轻量级的，不妨使用前端 React 框架 + 后端 Node.js 的形式。
- 它应该有自己的数据库，我认为 PostgreSQL 比较好用。
- 它应该可以被别人轻易的部署，docker 用在这里看起来很不错。
- 我希望有管理者和被管理者两种账户权限。
- 既然有账号，那么也就需要有密码，我们还需要一定的安全性，以防被别人轻易攻破。
- 老师应该可以管理学生，每个学生应该属于一个班级。
- 每个学生还应该有一个学号，作为学生的主键，不妨就采用二南开常用的：年份+部门+班级+编号的形式。
- 对于这个项目的管理，应该使用 git ，在 ai 写出不尽人意的修改的时候，方便进行回滚等版本控制的操作，同时在创作的时候，随时进行进度的提交，为后面创建一个“还原点”。
经过一番思考，我们得到了初步的构想。
让你的 agent 工具为你制定计划#
这里以 opencode 为例。
首先，你需要配置好你自己的 apikey ，这样才能开始使用 ai agent 工具。
在这次项目中， 我将全程使用 DeepSeek V4 Pro 。
在 opencode 中，存在 Plan 和 Build 两种模式，我们可以使用 Plan 模式进行具体的实现步骤构想，在成熟后切换到 Build 模式，让工具进行代码实现的任务。
在让 Plan 计划的时候，可以让它在写代码的时候顺便编写测试代码，测试每个模块的功能，会节省很多调 bug 的时间。
第一次给 Agent 的 Prompt 大致如下：
我要开发一个学校内部使用的作业登记系统…… 技术栈使用 React + Node.js + PostgreSQL…… 暂时不要写代码，请先分析需求并制定实现计划。 同时规划测试方案。
最终，我们得到了一个策划方案：
不要让 Agent 一次写完整个项目#
即使已经有了完整 Plan，也推荐按照模块逐步实现：
- 初始化项目
- 建数据库
- 完成登录
- 完成学生管理
- 完成作业管理
- 最后实现二维码功能
每完成一个阶段，都应该：
- 运行项目
- 执行测试
- 查看 git diff
- 手动验证主要功能
- 提交一次 Git
切换到 Build 模式，让它把策划方案记录到新建的 docs/ 目录下，就可以开始让它编写代码了。经过一番实现，我们获得了一个很粗糙的雏形。
进行 Bug 的调整#
它成功跑起来了，但是看起来还有许多 bug。
上报 bug 的时候，我们可以结合日志、你观察到的现象等信息，ai 知道这些信息后，可以更有针对性的完成任务。
和刚刚相同，采用 Plan 计划 + Build 工作的方式，把我们看到的 bug 进行修复。
调整好目前看到的 bug 后，我们得到了这样的程序：
它看起来很丑？所以需要我们尝试美化。
阶段的分隔#
不过到这里，第一阶段的任务已经完成，因此，我们需要新开一个对话框，这在 opencode 中可以通过 /new 指令完成。
分阶段是很有必要的一个事情。这可以防止上下文过长导致模型的表现变差，同时也可以节省一些 token，降低你的开销。
但是新的对话框可能不拥有之前的记忆，怎么办？很简单，只需要让它保存下来之前打记忆即可。可以使用 /compact 进行压缩，然后让它存储到本地文件中。
让它变得漂亮一些？#
我们发现 React 框架有一些很不错的 UI 组件库，可以直接拿来使用。因此在 Plan 模式中进行规划。
与其让 Agent 从零手写按钮、Dialog、Table、Form，不如选择成熟组件库。这样不仅视觉效果通常更好，而且 Agent 对主流组件库也更熟悉，生成代码的稳定性更高。
在实现的时候，同样不要忘记进行时刻测试。
在一些修改后，我们就有了现在的样子：
新功能的加入#
同样开启新的窗口，把你认为还需要添加的功能加入即可。