第5周（共40周）添加我的第一个 AI-like 端点

Source: Dev.to

第5周 – 通过卡住（再解卡）学习

目标

本周的目标是为已有的全栈应用添加我的第一个 AI‑style capability，更重要的是，了解前端、后端和开发环境在实际中的交互方式。

与其专注于复杂模型，不如学习 集成模式：定义 API 合约、暴露新端点、从 UI 调用它并渲染结果。

我构建的内容

我在 Learning Log 应用中加入了一个新的 analysis endpoint（后端），并在前端添加了 Analyze 按钮。

• 后端现在接受文本并返回结构化响应（摘要、标签、情感）。
• 前端在每条记录上触发该分析，并将结果直接显示在条目下方。

虽然分析本身很简单，但其架构映射了真实 AI 驱动功能的构建与集成方式。

发生了什么

在添加我的第一个 “AI‑like” 端点并将其集成到前端时，我遇到了一系列问题，归根结底都是 环境和流程管理。

我有如下疑问：

• 为什么 uvicorn 会提示 “address already in use”？
• 为什么会看到两个进程在同一个端口上监听？
• 为什么在我只想重启后端时，npm 会抱怨 package.json？
• 我的前端到底运行在哪里，如何找到它的 URL？
• 在 Codespaces 中 “重启前端” 实际上意味着什么？

我学到了什么

• uvicorn --reload 会启动 两个进程（watcher + worker），有时需要同时停止它们。
• 端口不会自动释放，了解如何检查并杀死进程非常重要。
• 在 Codespaces 中，所谓的 “本地” 并不像我的直觉那样——必须显式暴露端口并发现对应的 URL。

最重要的是： 难点不在于写代码，而在于构建正确的 思维模型，弄清楚各组件在哪里运行、为何运行。

反思

本周进展缓慢且偶有挫败感，但收获极大。每一个 “为什么会出错？” 的问题都转化为一块基础知识，我会在以后不断复用。

进度看起来不像是功能的增多，而是 谜团的减少。

期待下周的挑战。