今天的目标
你会做出什么，带走什么
做出一个应用
把上节课用 Codex 生成的原型，补成一个能被别人用一次的应用：能新增、能保存、刷新还在。
带走一套方法
更重要的是学会指挥 Codex 把一个想法一块块做出来——以后换个点子，你自己也能再做一个。
什么是 MVP？ 最小可用产品：有一条真实的核心闭环、能被真人用一次、解决一个小问题。它可以很小很粗糙，但它是真的能跑。
今天要打通一条链路：界面 → 逻辑 → 数据 → 交互。
② 数据结构
先想清楚：要存什么
把你的应用里反复出现、反复操作的那一条信息，想成 Excel 的一行——它有哪几列？
| 应用 | 一条信息 = 哪几列 |
|---|
| 背单词 | 单词 ｜ 意思 ｜ 是否背过 |
| 留学申请管理 | 学校 ｜ 截止日期 ｜ 状态 ｜ 备注 |
| 内容 / 兴趣社区 | 标题 ｜ 作者 ｜ 内容 ｜ 点赞数 |
| 日程整理 | 任务 ｜ 日期 ｜ 是否完成 |
你的任务： 写出你应用"一条信息有哪几列"。先只做一种信息、控制在 3–5 列，把它做通再加。
③ 前端界面
先做界面，快速跑起来
核心页面就是三件套：输入框 ＋ 添加按钮 ＋ 一个列表（每行带"完成 / 删除"）。先让数据存在本机，最快看到成果。
提示词模板（把括号换成你自己的列）
帮我做一个单页网页应用（一个 HTML 文件，用原生 JavaScript，不要框架、不要复杂工具）：
- 顶部一个输入框 + 一个"添加"按钮
- 下面一个列表，把每一条信息显示出来，每条包含：[填你第②步的那几列]
- 每条右边有"完成"和"删除"按钮
- 数据先存在浏览器本地（localStorage），刷新页面数据还在
- 代码尽量简单，关键地方用中文注释
现场示例：待办清单（可直接复制）
帮我做一个单页网页应用（一个 HTML 文件，用原生 JavaScript，不要框架、不要复杂工具）：
- 顶部一个输入框 + 一个"添加"按钮
- 下面一个列表，把每一条待办显示出来，每条包含：任务内容、是否完成
- 每条右边有"完成"和"删除"按钮
- 数据先存在浏览器本地（localStorage），刷新页面数据还在
- 代码尽量简单，关键地方用中文注释
跑起来后：新增几条 → 刷新 → 数据还在 → 你已经做出一个能用的界面了 🎉
③ 前端界面
试一下：为什么需要后端
把刚才的页面，开一个无痕 / 隐身窗口再打开一次（或换一个浏览器）……
数据没了！ 因为数据被锁在你刚才那个浏览器窗口里，无痕窗口 / 另一个浏览器打开是空的。
要让换设备也在、别人也能看，就得把数据搬到云上一个大家都能访问的地方：
④ 云端后端
用 Supabase 把数据搬上云
Supabase 是一个免费的在线服务（去 supabase.com 注册就能用）。它一次给你两样东西：一个云端数据库（数据存这里）＋ 一套现成的接口（前端拿来读写数据）——所以你不用自己搭服务器、也不用装数据库。
而且 Codex 自带 Supabase 插件：建表、写连接代码它全包；你只要说清要存什么，再把两个值贴进提示词就行（下一页动手）。
读数据
打开应用时，去云端数据库把清单取回来显示在界面上。
写数据
你增 / 删 / 改之后，把改动存回云端数据库。
④ 云端后端 · 动手
把两个值交给 Codex，让它接上
- 上一步已建好项目，拿到 项目地址 和 publishable key 两个值
- 把这两个值直接写进下面的提示词，让 Codex 建表 + 接上——你不用打开代码手填
在 Codex 输入框里先打 @supabase 选中 Supabase 插件，再粘贴下面的提示词。
提示词模板（把字段换成你自己的列）
把这个应用的数据，从存在浏览器本地，改成存在 Supabase：
- 帮我在 Supabase 建一张表来存这些信息，字段是：[填你第②步的那几列]
- 这张表先不要开 RLS、不要做登录、允许匿名读和写；安全以后再加
- 我的 Supabase 项目地址是 [粘贴你的 Project URL]，publishable key 是 [粘贴你的 key]，直接用它们连接
- 打开页面时，从这张表读出清单并显示
- 用官方 supabase-js 客户端读写；新增/完成/删除后，把改动写回表，再重新读一遍最新列表来刷新界面（不要解析写入操作返回的内容）
- 每一步加中文注释，标出这一步是"从数据库读"还是"往数据库写"
现场示例：待办清单（可直接复制）
把这个应用的数据，从存在浏览器本地，改成存在 Supabase：
- 帮我在 Supabase 建一张表来存待办，字段是：任务内容、是否完成
- 这张表先不要开 RLS、不要做登录、允许匿名读和写；安全以后再加
- 我的 Supabase 项目地址是 [粘贴你的 Project URL]，publishable key 是 [粘贴你的 key]，直接用它们连接
- 打开页面时，从这张表读出清单并显示
- 用官方 supabase-js 客户端读写；新增/完成/删除后，把改动写回表，再重新读一遍最新列表来刷新界面（不要解析写入操作返回的内容）
- 每一步加中文注释，标出这一步是"从数据库读"还是"往数据库写"
RLS 是给数据加的"权限锁"。课堂上先不上锁，方便直接读写、快速跑通；等以后做真实产品、要存别人的隐私数据时，再把锁加上。
④ 云端后端 · 验证
成功长什么样
- 新增一条 → 刷新页面，数据在
- 用无痕窗口 / 换个浏览器打开 → 数据也在！
- 去 Supabase 后台，能看到那张表里真的多了一行
⑤ Table Editor 里，数据真的存进来了
关于钥匙（key）： 能放前端的 publishable key 是设计上公开、安全的；真正会花钱、不能外泄的 key（比如接 AI 用的），要藏在后端——那是我们后面课程才会遇到的事。
⑤ 串联与排障
跑通链路 + 遇到问题问 Codex
完整走一遍：打开（读）→ 新增（改 → 写）→ 刷新（读，还在）。
把问题交给 Codex 的正确姿势： 报错原文 ＋ 我想要它做什么 ＋ 现在实际是什么样。三样一起发过去。
| 现象 | 可以这样跟 Codex 说 |
|---|
| 打开是空白 | "页面打开是空白，我希望它显示 Supabase 表里的清单，请检查读数据这一步" |
| 刷新后没了 / 没反应 | "新增后刷新数据丢了，像是写不进去。请确认这张表没开 RLS、允许匿名读写，再检查写数据这一步" |
| 点按钮没反应 | "点添加按钮没反应，请检查按钮和函数的连接" + 贴上报错 |
