这是一套给零技术基础产品经理使用的前端学习系统。学习目标是看懂一次页面操作经过哪些步骤，遇到问题时找到卡住的位置，并把现场和证据整理成 Codex 可以执行的任务。
课程用 Product Pulse 作为贯穿练习。每个专业词首次出现时都会回答三件事：它在前端中负责什么、它对应产品经理日常工作的哪个对象、现在可以收集什么证据。
需要 Node.js 20 或更高版本。Node.js 是让这套项目命令可以在电脑上运行的程序。
- 在本目录执行
npm run doctor。这一步做环境预检，用清单告诉你环境缺什么。 - 执行
npm install。这一步根据项目依赖清单和版本基线准备当前开发环境。 - 执行
npm run dev。这一步启动开发运行程序，终端会持续显示页面地址。 - 浏览器打开
http://localhost:4173。 - 从“01 确认运行版本”开始。
页面顶部会显示“运行身份证”。它记录运行方式和课程版本，用来确认屏幕上的页面来自当前项目。
每节开头会先回抽上一节的问题；从第 04 节起，Codex 指令需要自己补齐并通过质检器；毕业任务会让 npm run graduation 从红转绿。
课程的核心练习依赖终端、端口和构建，因此本地运行（或 Codespaces）是主路径，静态托管只适合试读。
| 入口 | 适合谁 | 说明 |
|---|---|---|
| 本地克隆运行 | 想要完整学习体验 | 与真实业务项目的工作形态一致：终端、端口、构建、双端口并存都真实存在 |
| GitHub Codespaces | 不想在电脑上装环境 | 仓库已包含 .devcontainer 配置：浏览器里获得真实终端与端口转发，模块 01/03/08 的动手练习全部保留 |
| Vercel 等静态托管 | 只想先看看课程内容 | 只能读到课程文字；模块 01/03/08 与练习场依赖本地命令和教学接口，托管版无法完成 |
在 Codespaces 打开本仓库后，等待 npm install 与 npm run doctor 自动完成，再执行 npm run dev，按提示打开 4173 端口的转发地址。
环境卡住本身也是一次可以学习的排查。先执行 npm run doctor，把输出整段复制，配合下面的指令交给 Codex：
请帮我在这台电脑上准备好 PDE-starter 的学习环境。
目标：执行 npm install 和 npm run dev 后，浏览器打开 http://localhost:4173 能看到课程首页。
当前事实：把 npm run doctor 的完整输出粘贴在这里。
边界：保持项目文件原样，先解释每一步在做什么，再执行。
验收：npm run doctor 全部通过；课程首页与练习场都能打开。
PDE-starter 是独立的学习工作台，负责课程、受控练习、问题诊断和 Codex 任务整理。真实业务项目负责代码修改、运行验证和交付证据。
实际工作采用以下流程：
学习工作台理解任务 → 受控练习收集证据 → 生成 Codex 任务单 → 在真实业务项目中开发 → 根据同一版本证据验收
课程首页已经展示这条交接流程，并说明当前 Web 实现与后续 React Native 实现怎样对应。
| 模块 | 学会做什么 |
|---|---|
| 01 确认运行版本 | 核对项目文件夹、启动命令、页面地址和页面版本。 |
| 02 逐步定位问题 | 为按钮故障找出最后成功点和首次失败点。 |
| 03 软件包与构建 | 看懂软件包清单、准确版本、安装目录、构建和预览。 |
| 04 组件与页面状态 | 看懂页面区域、用户动作和操作后的页面变化。 |
| 05 数据与等待 | 检查请求、等待、成功、空结果、失败和再次尝试。 |
| 06 PC 与辅助功能 | 检查窗口拖动、200% 文字、键盘、主题、对比度和动画。 |
| 07 容器与系统能力 | 看懂页面、React Native 容器接口、原生服务和手机系统的连接。 |
| 08 验证、审查与回滚 | 用同一版本的构建、页面、测试和回退准备完成交付。 |
- 确认现场：记下项目文件夹、启动命令、页面地址和版本。
- 稳定复现：用固定入口和固定操作再做一次。
- 逐步查证：沿执行路线寻找最后成功和首次失败的一步。
- 交给 Codex：填写目标、现场、证据、边界和验收结果。
- 核对生效：检查源码、运行程序、构建文件、页面版本和用户结果。
- 记录规律：说清问题属于哪一层，以及下次从哪里开始。
http://localhost:4173/playground/?lab=stale-build：源码已经更新，页面仍来自旧构建。http://localhost:4173/playground/?lab=button-bug：点击已经到达，处理动作出现错误。http://localhost:4173/playground/?lab=search-bug：搜索“登录”稳定产生错误的空结果。http://localhost:4173/playground/?lab=boundaries：切换文字、主题、对比度和动画，并拖动窗口。http://localhost:4173/playground/?lab=bridge：页面包要求容器 3.6，当前容器 3.4，升级后执行路线恢复。
这些现场可以反复重置。学习者看到固定结果，方便比较自己的判断与证据。
练习场的“状态实验台”会发出真实请求到 /api/feedback，支持正常、慢、空结果和服务器错误四种场景，供 Network 面板观察。
执行以下命令：
npm install
npm run build
npm run previewnpm run build 会把开发文件整理到 dist 文件夹。这个过程叫“构建”，对应前端生成提测包或发布包。npm run preview 会在 http://localhost:4174 展示本次构建产物。
核对五张回执：
- 源码回执：Codex 报告修改文件和具体变化。
- 进程回执：终端显示启动命令、页面地址和文件来源。
- 产物回执：
dist/build-info.json显示本次构建版本和时间。 - 页面回执：练习场“运行身份证”与产物版本对应。
- 用户结果：亲自执行目标操作并看到验收结果。
完整自动检查使用：
npm run check毕业任务使用单独的测试门：初始状态 npm run graduation 是红色的（预期）。完成模块 08 的排序功能后，它会转为绿色——这条红转绿的记录就是交付证据之一。
Web 和 React Native 共享三项核心方法：确认运行版本、逐步检查执行路线、用真实结果验收。React Native 项目会增加页面包、Metro、容器版本、Native Module、iOS/Android 工程、权限和设备日志。
课程第 07 节使用这条路线：
页面组件 → 项目适配层 → 容器接口 → 原生服务 → 操作系统 → 页面结果
当 JavaScript 页面已经收到点击，系统通知仍未出现时，继续检查容器版本、接口名称、参数、权限和原生日志。React Native 官方文档也把 React 页面调试与原生平台调试分开说明，Native Module 通过明确的方法和数据类型连接 JavaScript 与平台代码。
当前代码已经分成两层：
- 共用层：课程数据、问题诊断、Codex 任务模板、学习状态结构和平台能力契约。
- Web 运行层：浏览器存储、运行版本读取、剪贴板、确认框和 URL 导航。
RN 版本继续使用共用层，并为设备存储、App 与页面包版本、系统分享、原生确认框和导航栈提供 RN 适配器。迁移决策记录在 docs/adr/0001-portable-learning-core-for-react-native.md。
- Harvard CS50 for Business 从高层概念和技术决策开始，目标学习者包含产品经理与业务决策者。
- MDN Learn Web Development 为完全初学者提供环境、网页、工具和练习路线。
- Chrome DevTools 断点指南 说明怎样在点击事件和错误位置暂停程序。
- W3C Easy Checks 提供键盘、焦点、文字缩放、颜色对比度和动画的非技术检查步骤。
- React Native DevTools 说明 React 页面问题与原生平台问题各自使用的调试证据。
- OpenAI Docs：Prompting 建议重要任务提供目标、上下文、输出和边界；课程在此基础上加入运行现场、执行路线和验收证据。
- OpenAI Docs：Code review 说明怎样限定审查范围并查看优先级明确的发现。
src/course-data.js：八节课程、六步定位器、常见问题、场景题与回抽题库和毕业标准。src/app.js：课程页面、学习进度、跨节回抽、问题诊断、排查记录和指令生成器交互。src/prompt-builder.js：七类任务的指令模板与八字段质检器。src/core/learning-state.js：Web 与 RN 共用的学习进度与排查记录结构。src/core/platform-contract.js：Web 与 RN 都要提供的平台能力约定。src/platform/web-platform.js：当前浏览器版本的平台实现。playground/：Product Pulse 产品页面与五个受控练习。playground/sorting.js：模块 08 毕业任务的红绿测试门实现位置。packages/build-stamp/：给构建文件写入版本和时间的本地教学软件包。scripts/build.mjs：生成dist交付文件。scripts/dev-server.mjs：开发与预览运行程序，包含教学接口/api/feedback。scripts/doctor.mjs：环境预检（npm run doctor）。tests/：课程、指令、平台契约、软件包和构建信息测试。tests/graduation-capstone.mjs：毕业测试门（npm run graduation，初始为红色）。SYSTEM_DESIGN.md：学习设计、React Native 映射和验收方式。