第一节 零基础开发一个项目

【任务描述】

本节的核心实训任务是：在零原生代码编写基础的前提下，完全借助 AI 智能编码助手（通义灵码），利用标准的前端技术栈（HTML + CSS + JavaScript），从零构建一个功能完备的“Web 版个人学习笔记系统”。学习者将在这个过程中完整体验现代软件工程的“需求分析、敏捷迭代、环境部署与缺陷回测”全生命周期。

【知识储备】

一、 业务需求分析与 CRUD 模型

在开发任何软件系统前，必须进行严谨的业务逻辑拆解。本项目所需构建的个人笔记系统，其底层数据流转完全遵循软件工程中经典的 CRUD（增删改查）模型：

1. 新增记录 (Create)：提供标准的数据输入视图（Input/Textarea）与交互触发器（Button），实现信息的采集与发布。
2. 读取呈现 (Read)：将底层数据集合通过 DOM 渲染机制，以列表或网格形式实时反馈至用户视图层。
3. 数据销毁 (Delete)：针对冗余或过期的信息节点提供定向移除机制。
4. 数据检索 (Search)：在信息量递增的场景下，提供基于关键字的字符串匹配过滤功能，提升数据获取效率。

二、 工程实施策略

最小可行性产品（MVP）与敏捷迭代

直接要求 AI 一次性生成具备复杂状态管理和精美 UI 的完整系统是不符合大模型运作逻辑的，极易导致代码逻辑断裂或出现“幻觉”。 现代研发团队普遍遵循 敏捷开发（Agile Development 策略：即化繁为简，优先构建一个仅包含核心交互的“最小可行性产品（MVP，Minimum Viable Product）”。随后基于该原型，通过“提出需求 -> 观察渲染结果 -> 捕获异常 -> 闭环反馈修复”的迭代模型，逐步垒砌新功能。

【任务实施】

人机协同开发流水线

阶段一：工程环境初始化与“画布”清理

1. 测试服务器部署：启动第一章配置的 EServer 本地环境，确保 HTTP 协议支持及后续 HTML5 Web Storage（本地存储） API 的正常调用。
2. 工作区隔离：在本地开发环境中新建独立站点（如 note.local）。进入物理根目录，彻底清空所有预设文件（包含默认的 index.html）。确保浏览器访问时呈现 403 Forbidden 或空白状态，为 AI 提供纯净的代码注入环境。
3. 协同基座挂载：将该纯净目录拖拽至 VS Code 中作为工作区打开。激活左侧通义灵码插件，切换至专属的“AI 程序员”协同模式。
4. 建立提示词工程日志：在工作区新建一个名为 prompt.txt 的文本文档。此文件作为工程日志，专门用于记录、推敲发往 AI 的所有结构化指令（Prompt），以便在代码崩溃时进行逻辑溯源与重放。

阶段二：实战迭代演练

迭代一：构建 MVP 原型与状态分支捕获

• 【结构化提示词】：“请帮我开发一个极简的个人学习笔记 Web 应用原型。技术栈限定为纯 HTML、CSS 和 JS。视图层需包含一个文本输入框、一个发布按钮，以及一个数据展示列表。交互逻辑：用户输入内容点击按钮后，数据需实时插入并显示在下方列表中。”
• 工程验证与情景分支：在浏览器中录入测试数据。随后执行强制刷新（F5），检验数据的持久化状态。由于大模型生成的非确定性（Non-deterministic）特征，此处通常会出现两种工程分支：
  • 情景 A（高频缺陷：数据丢失）：页面刷新后，刚才录入的测试数据被全部清空。
    • 底层分析：初代代码仅将数据状态维护在浏览器 JS 引擎的临时内存（RAM）中，页面重载即触发生命周期销毁。这是构建 MVP 原型时最常见的现象。
  • 情景 B（偶发情况：数据留存）：页面刷新后，测试数据依然存在。
    • 底层分析：说明 AI 在首次生成代码时，基于庞大的训练语料主动预判了业务的持久化需求，提前调用了存储接口。

迭代二：状态管理与数据持久化（针对情景 A）

如果你的项目在迭代一中遇到了“情景 A”的数据丢失缺陷，则必须进行此轮重构。(若属于情景 B，请审查代码后直接跳至迭代三。)

• 【结构化提示词】：“当前原型功能可用，但存在严重的数据易失性缺陷。刷新页面会导致内存数据丢失。请重构 JS 逻辑，调用浏览器的 localStorage 接口实现数据本地持久化存储，确保重载页面时能够自动读取并恢复历史列表。”
• (注：在人机协同中，及时洞察 AI 的遗漏，并使用专业术语进行精准纠偏，是提示词工程进阶的核心能力。)

迭代三：数据结构演进与“脏数据”处理

在软件生命周期中，业务需求的扩展往往伴随着底层数据结构的重构。本轮迭代旨在为笔记追加时间戳与删除控制权。

• 【工程状态审查】：首先观察当前运行的网页。由于大模型生成的非确定性，部分 AI 可能在初代版本中已“超前”实现了时间显示或删除功能。若这些功能已存在，可直接跳过当前提示词，或仅针对缺失的部分进行定向补充。
• 【结构化提示词（针对功能缺失场景）】：“基于当前稳定版本进行业务扩展：1. 为列表中的每条笔记挂载发布时间属性（格式：YYYY-MM-DD HH:mm）；2. 在每行节点末尾追加‘删除’按钮，并绑定点击事件以实现针对对应条目的持久化移除。”
• 【工程预警与情景分支】：应用新版本代码并刷新页面后，由于底层数据结构极可能发生了质变（例如从原本单一的“文本字符串”升级为包含内容与时间的“JSON 对象”），在读取 localStorage 中的历史残留数据时，可能会引发兼容性问题。
  • 情景 A（高频缺陷：白屏或列表渲染报错）：
    • 根因剖析：新版 JavaScript 尝试用解析 JSON 对象的逻辑（如 JSON.parse）去强行读取旧版的纯文本缓存，导致引擎抛出 TypeError 数据类型异常，进而阻断了整个 DOM 树的渲染流程。
    • 排险操作（人工介入清洗）：这是典型的数据迁移冲突。按下 F12 呼出开发者工具 -> 切换至“应用 (Application)”面板 -> 定位至“本地存储空间 (Local Storage)” -> 右键点击目标域名执行“清除 (Clear)”指令。彻底清洗脏数据后，强制刷新页面（F5），系统即可恢复正常运转。
  • 情景 B（无感过渡：页面正常渲染）：
    • 底层分析：说明 AI 在生成新代码时，具备优秀的工程鲁棒性（Robustness），主动编写了向下兼容逻辑（如 try-catch 异常捕获机制或数据格式校验），或者你的本地缓存中恰好没有格式冲突的旧数据。

迭代四：检索增强与视图重构

• 【结构化提示词（功能扩展）】：“数据量呈现增长趋势，需引入检索机制。请在顶部控制台追加搜索输入框与查询按钮。点击查询后，下方 DOM 列表仅实时渲染内容字段命中搜索关键字的笔记节点。”
• 【结构化提示词（UI 修复）】：“当前视图结构存在排版错位：1. 按钮的物理尺寸过大，请利用 CSS 将按钮宽度硬性约束为 80px 并附加圆角属性（border-radius）；2. 搜索模块目前的流式布局错误地折行显示了，请重构 CSS 规则（如引入 Flexbox），强制输入框与按钮在同一水平基准线上对齐。”

迭代五：处理未捕获异常（Bug）的终极策略

如果在某次生成后，页面点击彻底失效。请严格执行以下标准化调试流程：

1. 开启 F12 开发者工具，切换至“控制台 (Console)”环境。
2. 完整复制抛出的红色异常栈信息（Error Stack Trace）。
3. 【结构化提示词】：“代码运行崩溃。浏览器内核在执行交互逻辑时抛出以下严重错误：[在此处精确粘贴 Console 报错全文]。请作为高级研发专家，解析报错根因，并输出修复后的完整代码。”

阶段三：需求反哺与产品边界拓展

在完成标准 CRUD 闭环后，优秀的开发者应具备利用大模型拓宽产品维度的能力。

• 【结构化提示词（产品经理角色设定）】：“我正在研发一款 Web 版个人笔记应用，目前已打通增删查及持久化存储基建。请你切换至资深产品经理角色，基于当前架构，通过头脑风暴的形式，为我列出 3 至 5 个具备高实用价值且前端易于集成的进阶功能矩阵（按研发优先级排序）。”
• 行动指引：根据 AI 输出的蓝图（例如：Markdown 解析引擎集成、分类标签挂载、JSON 数据一键导出等），挑选匹配的模块，转化为下一轮的迭代提示词，持续演进你的系统。

【课程思政】

人机协同中的“主导者”责任

在协同开发中，AI 扮演的是执行效率极高的“初级程序员”角色，而学习者则是把握项目走向的“架构师”与“产品经理”。当 AI 产出的代码存在漏洞或偏离需求时，开发者必须承担起代码审查与逻辑纠偏的核心责任，坚守“人为主导”的工程底线。

【成果展示】

经过严密的提示词工程引导与多轮闭环迭代，我们在未手工干预底层代码逻辑的前提下，成功部署了具备持久化能力的 Web 应用程序。

【在线演示】

您可以直接访问我们的在线演示页面查看本节内容的成品效果：在线演示