云端化与一本账 · AI 能力沉浸体验课

边界需联网

撞墙 A：Excel 死了 · HTML 活着

让 AI 直接往页面加 3 个客户，体会「改 HTML 比改 Excel 快」，但也埋下「每次都手工加？」的问。

约 2 分钟

老板让我加这 3 个客户，请把他们加到 dashboard.html 的 customers 数组里：
1. Hoffmann GmbH / DE / Klaus Hoffmann
2. Rivera Trading SAC / PE / Ana Rivera
3. Nakamura Tools KK / JP / Takeshi Nakamura
缺的字段按现有 customers 字段风格和数据合理补全，保持同一套字段 key，不要停下来追问我。

来自教练的额外叮嘱：先不要做持久化，这一步只是感受一下直接改页面数据。

完成标志

3 个新客户出现在卡片里。讲师追问：「老板每周都加几个呢？每次都回来手工加？xlsx 那边怎么办？」引出持久化。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

边界需联网

撞墙 B：刷新就丢了

看到刷新就丢，理解页面内存不是持久层。

约 5 分钟

操作步骤

在 dashboard 里新增两个测试客户。
刷新页面，检查刚加的两个客户还在不在。

完成标志

刷新后新增客户消失——看到「页面内存不是持久层」。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

主线需联网

第一层答案 · localStorage

用 localStorage 把数据存进浏览器，解决刷新丢失。

约 2 分钟

把 dashboard.html 的客户数据存到浏览器本地缓存（localStorage），用 customers 这个 key。页面加载时优先从 localStorage 读取（有就用），没有就回退到 HTML 里硬编码的初始数据；任何增删改查后自动写回 localStorage。

来自教练的额外叮嘱：本步只做 localStorage，先不要切到 D1、不要接 Cloudflare Worker、也不要处理同桌共享，这些下一步再做。

完成标志

新增一个客户后刷新页面，它还在；关掉浏览器重开也在。硬编码数据只作为首次启动的种子。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

边界需联网

撞墙 C：同桌打不开

看到 localStorage 数据同桌打不开，理解它解决不了共享与同步。

约 10 分钟

操作步骤

把当前页面地址发给同桌，让对方打开。
对比双方看到的数据，确认对方看不到你浏览器里 localStorage 的数据。
记下：localStorage 解决了持久化，但解决不了共享、同步、单一事实来源。

完成标志

同桌打不开你的数据——看到 localStorage 的边界，引出真云端 D1。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

主线需联网

创建 D1 客户数据库

用已授权的 wrangler 建 D1 数据库和带稳定主键的 customers 表。

约 5 分钟

我要把客户数据搬到 Cloudflare D1。请用 wrangler CLI 帮我创建一个 D1 数据库叫 ruida_crm，再建一张 customers 表。表结构按这些字段建，并且必须包含稳定主键：
- id TEXT PRIMARY KEY（客户编号，如 CUST001）
- owner_id TEXT（负责人的员工编号，如 RD003，比用姓名更不容易错）
- company / country / contact / products / phone / email / owner / intro / avatar

来自教练的额外叮嘱：字段 key 就用上面这一套（客户简介统一叫 intro，不要再用 notes）；id 和 owner_id 两列一定要建，后面的关联和权限全靠它们。Cloudflare 账号和 wrangler 登录昨晚作业已经弄好了，这里直接建库即可；如果提示未登录，先停下来告诉我。

完成标志

D1 数据库 ruida_crm 创建成功，customers 表建好且含 id 主键与 owner_id 列。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

主线需联网

将客户数据迁入 D1

从 canonical CSV 一次性把客户批量导入 D1，确立唯一事实来源。

约 4 分钟

本节材料

带稳定 ID 的客户数据18-integrate-business-data/customers-linked.csv9 KB ↓

请把 customers-linked.csv 里的客户数据批量 INSERT 进 D1 的 customers 表，id 和 owner_id 用 CSV 里的值。这份 CSV 是清洗过、带稳定 id 的客户主表，作为唯一事实来源。

来自教练的额外叮嘱：直接以 customers-linked.csv 为准导入，不要从各自浏览器的 localStorage 迁（每个人本地数据不一样），也不要再造第二份 customers 真相。

完成标志

customers-linked.csv 全部行入库 D1，每行都有 id 和 owner_id；换台电脑查也是同一份数据。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

主线需联网

将 dashboard 改为读写 D1 并部署

把 dashboard 重构成一个 Worker 应用、数据走 D1，并部署出公开网址。

约 6 分钟

把 dashboard 重构成同一个 Cloudflare Worker 应用：同一个 Worker 同时服务 HTML 页面和 /api/customers 这类接口，数据源切到 D1，增删改查都走 D1；localStorage 只保留为显式离线缓存。改好后用 wrangler 部署，给我一个能打开的公开网址。

来自教练的额外叮嘱：不要拆成两个独立 Worker/站点；部署后把公开网址给我（后面发给同桌验证共享要用到）。

完成标志

打开部署后的公开网址，页面正常、增删改查后刷新仍是同一份数据；把网址发给同桌，对方看到的和你一样。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节

边界需联网

⚡ Aha：一本账落地 · 云端化四属性点名

确认 D1 同时满足持久化/单一事实来源/同步/共享，一本账落地。

约 5 分钟

操作步骤

让同桌打开你部署的公开网址，确认双方看到相同数据。
对比 xlsx、HTML 硬编码、浏览器内存、localStorage、D1 五种存储位置的差别。
核对 D1 是否同时满足持久化、单一事实来源、同步、共享。

完成标志

同桌能打开同一份数据；能指着 D1 说清它同时满足云端化四属性——一本账真正落地。

人工边界

只使用交付包内的课堂模拟数据；不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时，停在最终动作前等待人工确认。

我已完成并核对这一节