与 Devin 的软件开发：交付垂直切片（第 2 部分）

欢迎回来！在本系列的第一篇教程中，Devin 重温了我那个旧的 fp-ts-exercises 仓库，并提交了一个整洁的依赖升级 PR。在第二部分里，我们要提高难度，开始构建全栈功能。

您可以在此处访问 Devin 系列的所有教程：

1. 环境搭建与首个 Pull Request（第 1 部分）
2. 用 Devin 交付垂直切片（第 2 部分） 
3. 集成、测试与 CI/CD（第 3 部分） 
4. 安全、部署与运维（第 4 部分）

当您读到第二部分的末尾时，您将拥有：

• 一个Next.js 14 游乐场，学习者可在浏览器中编辑代码；
• 实时 Vitest 测试，结果会实时变绿（或变红）；以及
• 一个基于 NestJS 与 SQL 数据库的后端，通过 localStorage 中的匿名 UUID 来保存进度。

在这个过程中，我们会让 Devin 自行生成任务清单，观察它如何在前后端工单间切换，并在它被配置问题绊倒时介入。我会展示我在哪些地方花费（并节省）了 ACU、哪些问题我手动修复了，以及如何让会话更高效。

回顾与前置要求

在整个教程系列中，我们一直在处理我（曾经）被弃用的 fp-ts 练习仓库。

该项目收集了一系列小挑战，旨在用 TypeScript 教授函数式编程概念（如 Option、Either 等）。目前它是一个 clone-and-run 的仓库：学习者将其拉到本地，编辑本地文件，并在自己的终端中运行测试。

我们的目标是将这些练习改造成基于浏览器的交互式游乐场，让用户可以阅读讲解、在页面内编辑器中调整代码，并即时看到测试通过（或失败）。学习者还可以选择登录以保存他们的进度。

第一部分我们完成了什么

回顾第一篇教程，我们：

• 将旧的 fp-ts 仓库现代化：升级到最新依赖，加入 lint 和类型检查。
• 把 Devin 连接到 GitHub，并验证它可以提交一个干净的 pull request。

第二部分所需的本地工具

在本篇教程中，我们需要：

• Node 20+ 与 npm 10（开箱即带 workspaces 支持）。
• 运行 PostgreSQL 容器的 Docker（或本地 PostgreSQL 实例）。

推荐的 Devin 设置

我建议为 Devin 进行如下设置：

• 在“Settings > Usage & limits”中为每个会话设置5 ACU 的软上限；我们会为每个阶段开启一个全新会话。
• 保持 Timelapse 标签页可见，以便在 Devin 卡住时暂停或轻推。

让 Devin 写出作战计划

我觉得先测试 Devin 的规划能力会很有意思。我写了一个提示词，通过目前仍在 Beta 且免费的“Ask”功能，请 Devin 帮我规划今天要做的工作。

提示词：

我想把现有的 fp-ts-exercises（Node + TypeScript，当前是 clone-and-run 的 CLI 练习）变成一个可跟踪进度的基于浏览器的学习平台。 

目标体验： 

- 学习者打开一个 Next.js Web 应用，选择练习，在浏览器中编辑代码，并即时看到 Vitest 测试通过或失败。 

- 进度（已完成的 slug）保存在服务器端，并在后续访问时重新加载，但我们暂时不添加用户账号（使用存储在浏览器中的匿名 UUID）。 

我倾向的技术选型： 

- 前端：Next.js 14（React 18，App Router） 

- 代码编辑器与运行器：Sandpack + @vitest/browser 

- API：NestJS 13，使用 @nestjs/graphql（Apollo Driver） 

- 数据库：Prisma 5 + PostgreSQL 

- 工作区：纯 npm workspaces（apps/web、apps/api、packages/exercises） 

请提出一个分步实施计划（任务清单），让这个垂直切片落地。为每项任务估算相对 ACU 成本，并标注任何长耗时步骤（例如大迁移或重依赖安装）。

Devin 很贴心地返回了一个六个阶段的任务清单，其中包含各阶段的 ACU 估算，并标注了“重依赖安装”的步骤。

Devin 的回答：

阶段 1：工作区设置（2–3 ACU）

• 初始化 npm 工作区结构（1 ACU）
• 创建 apps/web、apps/api 和 packages/exercises 目录
• 在根目录配置 package.json 的工作区定义
• 将现有练习文件移动到 packages/exercises/src/
• 搭建 Next.js 14 前端（1–2 ACU — 长耗时：依赖安装）在 apps/web 初始化 App Router 的 Next.js配置 TypeScript 与 Tailwind CSS设置基础路由结构

阶段 2：练习包迁移（3–4 ACU）

• 将练习内容抽取为共享包（2 ACU）
• 创建 packages/exercises，提取练习元数据
• 解析现有练习文件以提取：
• 说明
• 起始代码
• 解答
• 定义练习结构的 TypeScript 接口
• 实现练习发现系统（1–2 ACU）
• 构建文件系统扫描器（类似于 exercise.js:17–28 中的 fs.readdirSync 逻辑）
• 导出练习元数据：title、description、difficulty、tests

阶段 3：后端 API（4–5 ACU）

• 搭建带 GraphQL 的 NestJS API（2 ACU — 长耗时：依赖安装）
• 在 apps/api 初始化 NestJS 项目
• 配置 Apollo GraphQL 服务器
• 设置基础健康检查端点
• 实现 Prisma + PostgreSQL（2 ACU — 长耗时：数据库搭建）
• 设计以下模型的 schema：
• 用户会话
• 已完成的练习
• 设置 Prisma 客户端与迁移
• 创建进度跟踪的 resolver
• 匿名用户会话管理（1 ACU）
• 生成 UUID 并存储在浏览器的 localStorage
• 在无认证的情况下启用基于会话的进度持久化

阶段 4：前端核心功能（5–6 ACU）

• 练习浏览界面（2 ACU）
• 按类别列出练习（option、either、task 等）
• 显示进度指示与完成状态
• 启用练习选择与导航
• Sandpack 代码编辑器集成（2–3 ACU — 长耗时：Sandpack 设置）
• 配置支持 TypeScript 的 Sandpack
• 加载起始代码与 fp-ts 依赖
• 为练习与测试文件设置文件系统
• Vitest 浏览器运行器集成（1 ACU）
• 用 @vitest/browser 替换 exercise.js:45–47 中基于 execSync 的 Vitest 调用
• 启用实时测试执行与结果展示

阶段 5：进度跟踪（2–3 ACU）

• 客户端进度管理（1 ACU）
• 为 GraphQL 配置 Apollo Client
• 与后端同步进度
• 练习完成检测（1–2 ACU）
• 改造现有的成功检测逻辑（exercise.js:48–49）
• 在测试通过时触发后端的进度更新

阶段 6：打磨与部署（2–3 ACU）

• UI/UX 改进（1–2 ACU）
• 确保响应式设计
• 添加加载态与错误处理
• 改进练习说明的呈现
• 生产部署设置（1 ACU）
• 为两个应用配置 Docker
• 管理环境变量
• 设置数据库部署

总预计成本：18–24 ACU

整体来说，这个计划相当不错。我对其中一些点做了调整，尤其是第六阶段，因为我们会在第四篇教程中处理部署。

阶段 1：工作区与前端脚手架

目标：启用 npm workspaces，迁移遗留文件，并引导一个空白的 Next.js 14 外壳。ACU 消耗：3.66（计划 1–2）。结果：仓库现在包含 /apps/web、共享 packages/exercises，以及一个已配置 Tailwind 的 Next.js 应用运行在 localhost:3000。

提示词

我让 Devin 按它为第一阶段制定的计划来构建。具身代理 Devin 并不了解您此前在“Ask Devin”中可能提出过什么，因此您需要新建一个提示并提供上下文。 

我不会在文中粘贴所有提示词，但以下是第一个：

提示词：

任务：为基于浏览器的 fp-ts-exercises 平台初始化 npm 工作区结构与 Next.js 前端上下文：

我正在把现有的、基于 CLI 的 fp-ts-exercises 学习系统转成基于浏览器的平台。当前系统的练习组织方式在 10-from-either.exercise.ts:1-3，TypeScript 配置在 tsconfig.json:88，Vitest 设置在 vitest.config.ts:7。

需求：

• 创建 npm 工作区结构：
• 根 package.json 中配置 apps/web、apps/api、packages/exercises 的工作区
• 将现有 src/ 中的练习文件移动到 packages/exercises/src/
• 保留当前练习文件命名约定（.exercise.ts 与 .solution.ts）
• 在 apps/web 中初始化 Next.js 14 前端：
• 使用 App Router（而非 Pages Router）
• 配置 TypeScript，严格度与当前 tsconfig.json:88 类似
• 添加 Tailwind CSS 用于样式
• 为练习浏览创建基础路由结构
• 保持兼容性：
• 确保现有练习结构与导入仍可用
• 在整个工作区中可访问 fp-ts 依赖
• 保留当前 Vitest 配置模式

可交付物：

• 根目录下配置了工作区的 package.json
• apps/web/ 中使用 TypeScript 与 Tailwind 的 Next.js 应用
• 迁移到 packages/exercises/ 的练习
• 基础路由结构（/exercises、/exercises/[category]、/exercises/[category]/[slug]）

技术栈：

• Next.js 14（App Router）
• TypeScript（严格模式）
• Tailwind CSS
• npm workspaces（非 yarn/pnpm）

提交要求：

• 确保 lint 与 typecheck 脚本通过
• 创建包含您修改内容的 PR

此后我写的所有提示基本遵循相同模式：任务概述、上下文、需求、可交付物、技术栈与提交细则。

Devin 实际做了什么

它花了相当长的时间来决定执行路径（约 4 分钟），但它：

1. 创建了工作区骨架
2. 将所有练习文件夹迁移到了 packages/exercises/src。
3. 用 App Router、TypeScript 和 Tailwind 引导了 Next.js 14。
4. （在我轻推之后）为前端应用添加了 lint 与类型检查脚本。

为何 ACU 成本飙升

ACU 成本之所以上升，是因为：

• 镜像超时后，Devin 花了一整分钟在循环重试 npm install。
• 它试图用 Vim 中的 q、然后 Ctrl-C 停止 dev 服务器与进程，两者都失败。我给了它一点时间自己修，但最终两次都靠我手动干预并退出进程。每多耗一分钟就多烧 ACU，如果我当时没密切关注 Devin 的操作，也不会这么快发现问题。

人工介入与经验教训

以下是我需要做的修复汇总：

批量移动大文件树用手动操作更快，也更省钱，因为 Devin 按时间/任务计费。我直接拖动了文件夹、提交，让代理接手新的结构。它能够很好地拉取并自行合并我的更改！

不过，我还是得提示它去跑 lint 与类型检查脚本，尽管我在最初的提示词里已经写了。最后它确实跑了，但没通过。Devin 仍将其视为成功，并继续发起了 PR。

我在本地修好了两个问题，自己跑了脚本，启动了新的 web 开发服务器，确认一切按预期运行后，推送了提交。

阶段 2：封装练习

目标： 将所有挑战文件抽取到可复用的 packages/exercises 包中，并为每个练习生成元数据。ACU 消耗： 0.6（计划 2+）。结果：共享包导出了带类型的元数据，web 应用与未来的 API 可通过 import { exercises } from '@exercises/registry' 进行导入。

Devin 实际做了什么

Devin 创建了：

• 结构化的 TypeScript 接口，涵盖练习、元数据、类别与完整目录。
• 练习解析器，它：
• 从代码注释与函数签名中抽取元数据
• 解析起始代码、解答代码与 Vitest 测试用例
• 根据 fp-ts 的使用自动生成标签
• 将驼峰命名转为可读标题
• 练习发现系统，它：
• 扫描文件系统以查找 .exercise.ts 与 .solution.ts 配对
• 构建基于 slug 的目录（例如 option-01）
• 按类别组织练习，并通过缓存提升性能
• 便捷导出，用于查询练习与类别：
• getExercises()、getExerciseBySlug()、getExercisesByCategory()、getCategories()、getCategoryBySlug()

为何 Devin 低于预算完成

Devin 设法压低了 ACU 成本——原因如下：

• 没有重安装或网络调用
• 文件移动很直观；Devin 使用 git mv（便宜）而不是复制粘贴加对比
• 元数据生成纯 TypeScript，规划与执行都很快

人工介入

这次没有！

吸取上次经验，我检出 Devin 的分支并在本地运行了脚本。一切都能编译，注册表导出了干净的类型定义，非常适合作为我们接下来构建 UI 与 API 的输入材料。

阶段 3：NestJS + GraphQL API

目标：搭建一个 NestJS 13 服务，通过 GraphQL 暴露练习进度，并用 Prisma 将数据持久化到 PostgreSQL。ACU 消耗：4.2（计划 4）。结果：apps/api 启动于 localhost:4000/graphql。您可以基于匿名会话 ID 查询与变更进度记录。

Devin 实际做了什么

在第三阶段，Devin：

1. 在 apps/api 中创建了完整的 NestJS API，集成 TypeScript 与 Apollo GraphQL
2. 集成 PostgreSQL 与 Prisma ORM，并设置包含 Session 与 CompletedExercise 模型的 schema
3. 实现了使用 UUID 的匿名会话管理（无需认证）
4. 构建了用于会话创建/校验、练习查询与进度跟踪的 GraphQL resolver
5. 将后端连接到共享的练习包（packages/exercises）以进行数据发现
6. 配置了 CORS，以支持与 Next.js 前端通信
7. 确保 GraphQL schema 与现有 TypeScript 接口之间的类型兼容
8. 设置了开发脚本、数据库迁移流程与 Prisma Studio 集成

Devin 出错的地方

以下是我在第三阶段遇到的问题与所做修复：

经验教训

我的收获如下：

• 配置 vs 代码： 框架样板就位后，Devin 表现很出色，但诊断依赖问题仍需要人工介入。
• 务必本地运行： 我已经在本机创建了本地 PostgreSQL 数据库，PR 中关于运行 Prisma 迁移与启动开发环境的说明清晰易懂（见下图）。Devin 的评论称它已成功在本地运行 API，但在添加 reflect-metadata 前，npm run dev 一直崩。

• Devin 很擅长处理 PR 评论。 我在 PR 里留言，告知 Devin 我在本地运行 API 时遇到错误。它立刻给了我一个小眼睛表情，随后会话自动恢复去修复错误，几分钟后就推送了修复。

• 务必检查机密文件：Devin 提交了带 DATABASE_URL 变量的 .env 文件，里面是个占位的用户名与密码。我拉到本地后，把用户名和密码改成了我本地数据库的，并确保将该文件从 Git 追踪中移除并加入 .gitignore。在后续教程中我们会讨论如何安全管理机密信息。

阶段 4：Sandpack 游乐场与实时测试

目标：为学习者提供一个浏览器编辑器，能实时运行 fp-ts 解答并执行 Vitest 检查。ACU 消耗：7.2（计划 3–4）。结果：访问 /exercises/option-01 会打开分屏视图：左侧为 Sandpack 编辑器，右侧为测试通道，所有用例通过的瞬间会弹出成功提示。

Devin 实际做了什么

在第四阶段，Devin 做了：

• 构建练习列表与导航页面，支持动态类别与 slug
• 集成支持 TypeScript、fp-ts 与实时文件系统的 Sandpack 编辑器
• 用浏览器内 Vitest 替换 CLI 测试运行器，并提供实时反馈
• 通过 Apollo Client 将前端连接到后端，以基于会话跟踪进度
• 实现响应式 UI，包含加载态与错误处理

Devin 额外烧 ACU 的地方

这一阶段 Devin 比预期耗费更多 ACU——原因如下：

经验教训

我的收获是：

• 默默旁观 = 烧钱。 打开 Timelapse 标签页，如果 Devin 循环卡住，轻推或暂停。
• 尽早删除死代码。 Devin 基本不会主动删除旧代码，除非您告诉它。我先前让它移动文件，却没有明确要求删除旧文件，结果出现了多个入口点，这在本阶段极大地干扰了 Devin。

Devin 在这里确实花了不少时间。它一遍又一遍地循环，试图解决相同问题：前后端没连好、做改动、重启服务器、在浏览器里检查是否生效……某种程度上就像日常开发工作吧……

现在我们有了一个可用的应用。我能同时启动 API 与 Web 服务器，访问本地地址，编辑桩函数，点击保存，并看到测试面板由红转绿。随后我意识到它的工作只做了一半：它在每个练习页面都硬编码了第一个练习的测试与解答。我指出问题后，经过更多循环，才最终修正并推送了更改。