diff --git a/assets/wechat.png b/assets/wechat.png index 8a4ce0a..d7b64d2 100644 Binary files a/assets/wechat.png and b/assets/wechat.png differ diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 7b9cc6a..323ed64 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -1528,35 +1528,35 @@ Sitemap: ${siteUrl}/sitemap.xml link: '/zh-cn/stage-2/frontend/2.5-hogwarts-portraits/' }, { - text: 'AI 营销文案 SaaS 开发实战', + text: 'AI 营销文案 SaaS', link: '/zh-cn/stage-2/assignments/copywriting-platform-supabase/' }, { - text: '在线考试与管理系统开发实战', + text: '在线考试与管理系统', link: '/zh-cn/stage-2/assignments/exam-management-express/' }, { - text: '现代 AI 生图 SaaS 开发实战', + text: '现代 AI 生图 SaaS', link: '/zh-cn/stage-2/assignments/modern-landing-page/' }, { - text: '类 Dify 智能体平台开发实战', + text: '类 Dify 智能体平台', link: '/zh-cn/stage-2/assignments/custom-dify-agent-platform/' }, { - text: '智能旅游规划 Agent 平台开发实战', + text: '智能旅游规划 Agent 平台', link: '/zh-cn/stage-2/assignments/travel-planning-agent-platform/' }, { - text: 'Spring Boot 电影推荐系统开发实战', + text: 'Spring Boot 电影推荐系统', link: '/zh-cn/stage-2/assignments/movie-recommendation-springboot/' }, { - text: '生鲜电商微服务系统开发实战', + text: '生鲜电商微服务系统', link: '/zh-cn/stage-2/assignments/simple-grocery-microservices/' }, { - text: 'Go 交通数据分析平台开发实战', + text: 'Go 交通数据分析平台', link: '/zh-cn/stage-2/assignments/traffic-data-visualization-go/' } ] diff --git a/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/index.md b/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/index.md index 4ad4c97..6cd179c 100644 --- a/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/index.md +++ b/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/index.md @@ -1,12 +1,42 @@ # AI 营销文案 SaaS 开发实战 -这个项目不再只是“写一个生成按钮”，而是围绕一份真实 PRD，把一个 AI 营销文案 SaaS 从想法推进到可上线产品。 +## 概述 -你会同时看到三件事： +本实战项目要求你围绕一份真实的 PRD，从零完成一个面向独立开发者和内容团队的 AI 营销文案 SaaS 产品。你将使用 Supabase 作为后端服务、Stripe 作为支付系统，完成从需求分析到部署上线的全过程。 -- 项目要做成什么 -- 如何基于 PRD 拆解并推进开发 -- 最后应该交付出什么样的效果 +这是 Stage 2 的综合实战环节。在前面几章中，你已经分别学习了前端页面搭建、后端接口开发、数据库操作、支付集成等单项技能——这个项目要求你把它们全部串起来，交付一个可运行的产品原型。 + +## 前置知识 + +在开始本项目之前，你应该已经掌握以下内容： + +- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)） +- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)） +- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)） +- 支付集成（[Stripe 收费系统](../../backend/2.7-stripe-payment/)） +- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)） + +## 学习目标 + +完成本实战后，你将能够： + +1. 阅读并理解一份真实的 PRD，从中提取开发任务清单 +2. 使用 AI 辅助分步生成前端页面和后端接口 +3. 使用 Supabase 实现用户鉴权、数据库操作 +4. 集成 Stripe 实现付费订阅功能 +5. 搭建管理后台并完成端到端联调 + +## 项目简介 + +你要构建的产品是一个 AI 营销文案 SaaS，包含三个子系统： + +| 子系统 | 职责 | +|--------|------| +| **官网前台** | 产品介绍、定价、FAQ、注册转化 | +| **用户工作台** | 输入产品信息、生成文案、查看历史、升级套餐 | +| **后台管理台** | 用户管理、生成记录、支付数据、运营概览 | + +后端使用 Supabase 提供数据库和鉴权能力，使用 Stripe 处理支付，使用 AI 模型生成营销文案。 ::: tip PRD 入口 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD.md) @@ -15,69 +45,33 @@
-## 这个项目到底在做什么？ +## 第一部分：需求分析 -这是一个面向独立开发者和内容团队的 AI 营销文案 SaaS： +### 1.1 阅读 PRD -- 官网前台：负责产品介绍、定价、FAQ、注册转化 -- 用户工作台：负责输入产品信息、生成文案、查看历史、升级套餐 -- 后台管理台：负责用户、生成记录、支付数据和运营概览 +打开 PRD 文档，重点回答以下问题： -后端需要接住这些关键能力： +- 系统有几个入口？各自覆盖哪些页面？ +- 每个页面的核心功能是什么？ +- 后端包含哪些模块和数据表？ +- 套餐定价、支付流程、免费额度如何设计？ +- MVP 范围是什么？第一版哪些做，哪些不做？ -- 用户鉴权 -- 文案生成任务 -- 历史记录持久化 -- Stripe 支付 -- 后台用户和生成数据管理 +::: warning +如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。 +::: -## 开发过程怎么走？ +### 1.2 确认系统架构 -### 1. 先看 PRD，不要上来就写代码 - -先确认： - -- 有几个入口：`www / app / admin` -- 页面清单是否完整 -- 后端模块和数据表是否合理 -- 套餐、支付和后台范围是否收住 - -如果 PRD 没拍板，就先不要写代码。 - -### 2. 先让 AI 生成“骨架版” - -第一轮目标不是做完整闭环，而是先生成： - -- 官网首页 -- 登录注册 -- 文案生成工作台 -- 历史记录页 -- 套餐页 -- 后台首页与管理页骨架 - -这一步要先把页面结构、路由和信息架构搭出来。 - -### 3. 再进入“监工模式” - -你需要重点盯这几件事： - -- 页面结构是不是和 PRD 一致 -- 登录态和匿名态有没有分清 -- 生成结果有没有稳定落库 -- 支付之后套餐状态有没有更新 -- 后台是不是能看到真实用户、生成和支付数据 - -可以把 AI 当执行者，但你自己要做项目经理和验收人。 - -### 4. 最后做联调和上线 +根据 PRD 梳理出系统的整体架构： ```mermaid flowchart TD @@ -91,11 +85,13 @@ flowchart TD admin --> analytics["用户 / 生成 / 支付看板"] ``` -只要这条链路能跑通，这个项目就不是单点 Demo，而是一个完整 SaaS 原型。 +## 第二部分：搭建项目骨架 -## 怎么让 AI 帮你生成？ +### 2.1 生成前端页面 -推荐按模块逐步下指令，而不是一句“帮我做完”。 +使用 AI 先生成所有页面的基本结构和假数据。 + +提示词参考： ```text 请基于当前 PRD，帮我生成一个 AI 营销文案 SaaS 的前端骨架。 @@ -109,52 +105,9 @@ flowchart TD 6. 风格要像现代 SaaS，不像课堂 demo ``` -然后再一块一块补： +### 2.2 完善核心页面 -- 鉴权 -- 生成接口 -- 数据库 -- 支付 -- 后台管理 - -## 怎么“监工”才有效？ - -每做完一个模块，至少检查这 5 件事： - -| 检查项 | 要看什么 | -|------|------| -| 页面是否对 | 页面数量、入口、功能是否符合 PRD | -| 接口是否对 | 输入参数、返回结构、状态处理是否合理 | -| 权限是否对 | 游客、用户、管理员是否隔离 | -| 数据是否对 | 生成、历史、支付和套餐状态是否一致 | -| 演示是否对 | 是否真的能完整跑通注册、生成、升级这条链路 | - -## 最后的预期效果 - -做完后，你应该拿到这些交付物： - -- 一套可运行的 AI 文案 SaaS 项目 -- 一份同级 PRD 文档 -- 三套入口：`www / app / admin` -- 基础鉴权、生成、历史、支付、后台管理 -- 一份 README -- 一个可以演示的线上版本或本地完整运行方案 - -## 验收标准 - -| 维度 | 最低达标 | -|------|------| -| PRD 对齐 | 页面、功能、数据结构基本符合 PRD | -| 产品闭环 | 注册、生成、历史、支付升级可以跑通 | -| 后台能力 | 用户、生成、支付数据可以查看 | -| 工程完整度 | 前端、后端、数据库、支付链路已接通 | -| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 | - -::: tip 🚀 完成后你会得到什么？ -你得到的不只是一个生成页面，而是一套完整的 AI SaaS 开发过程样例。后面再做别的产品型项目，也可以继续沿用这套“先 PRD、再生成、再监工、再联调上线”的方法。 -::: - -第一版页面完成后，继续补充： +骨架搭好后，重点完善文案生成工作台（Dashboard）页面： ```text 请继续完善 /dashboard 页面。 @@ -183,32 +136,28 @@ flowchart TD - 响应式布局，宽屏窄屏都能正常显示 ``` +### 2.3 验证页面结构 + +逐项检查： + +- [ ] 三个入口的路由是否独立 +- [ ] 页面数量是否与 PRD 一致 +- [ ] Dashboard 的表单和结果区域布局合理 +- [ ] 假数据展示了基本的 UI 状态 + ### 遇到阻碍？ -回头看看这几篇： +如果你在前端搭建阶段卡住，可以回顾这些章节： -- [构建第一个现代应用程序 - UI 设计](../../frontend/2.2-ui-design/) +- [UI 设计](../../frontend/2.2-ui-design/) - [参考 UI 设计规范设计页面和按钮](../../frontend/2.3-multi-product-ui/) - [用 LLM 和 Skills 让界面变好看](../../frontend/2.4-llm-skills-beautiful/) - [从设计原型到项目代码](../../frontend/2.6-design-to-code/) - [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/) -
- - - -
+## 第三部分：后端集成 -## 3. 接后端：把数据库、生成、支付串起来 - -这一步才算真正的"全栈"。 - -### 第三步：接入 Supabase 登录 +### 3.1 接入 Supabase 登录 ```text 请把我当成 0 基础，一步一步带我完成 Supabase 登录接入。 @@ -229,7 +178,7 @@ flowchart TD - 完成后说明如何验证注册和登录 ``` -### 第四步：接入生成接口和数据库 +### 3.2 接入生成接口和数据库 ```text 请把我当成 0 基础，帮我完成网站的核心功能：生成营销文案并保存。 @@ -260,7 +209,7 @@ flowchart TD - 如何测试完整生成链路 ``` -### 第五步：接入 Stripe 付费 +### 3.3 接入 Stripe 付费 ```text 请把我当成 0 基础，帮我给 LaunchKit 加上最简可用的 Stripe 付费。 @@ -281,7 +230,7 @@ flowchart TD - 完成后说明如何测试完整支付流程 ``` -### 第六步：搭建管理后台 +### 3.4 搭建管理后台 ```text 请把我当成 0 基础，帮我做一个简洁可用的管理后台。 @@ -290,10 +239,7 @@ flowchart TD 需要你完成： 1. 仅 role = admin 的用户可访问 /admin -2. 后台包含 3 个 Tab： - - 用户列表 - - 生成记录 - - 订阅状态 +2. 后台包含 3 个 Tab：用户列表、生成记录、订阅状态 3. 用户列表显示：email、plan、创建时间 4. 生成记录显示：用户、产品名、渠道、创建时间 5. 订阅状态显示：用户、套餐、支付状态 @@ -306,37 +252,22 @@ flowchart TD ### 遇到阻碍？ -回头看看这几篇： +如果你在后端开发阶段卡住，可以回顾这些章节： - [从数据库到 Supabase](../../backend/2.2-database-supabase/) - [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/) - [如何集成 Stripe 等收费系统](../../backend/2.7-stripe-payment/) -
- - - -
+## 第四部分：联调与上线 -## 4. 做后台与交付：真正上线 +### 4.1 端到端测试 -网站基本成型，最后三件事： +至少验证以下场景： -### 4.1 部署 +- 注册 → 登录 → 生成文案 → 查看历史 → 升级套餐 +- 管理员登录 → 查看用户数据 → 查看生成记录 → 查看支付状态 -代码推送到 GitHub，部署到公网。 - -参考： - -- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/) -- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/) - -### 第七步：部署前检查 +部署前检查： ```text 请把我当成 0 基础，帮我检查项目是否具备部署条件。 @@ -354,52 +285,37 @@ flowchart TD 3. 说明修复后的部署步骤 ``` -### 4.2 README +### 4.2 部署 -至少包含： -- 项目简介 -- 核心页面说明 -- 技术栈 -- 本地启动步骤 -- 环境变量清单 +将项目部署到公网环境。部署教程参考：[Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)、[如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)。 -### 4.3 演示材料 +## 交付物 -至少准备： -- 首页截图 -- Dashboard 生成截图 -- Billing 页面截图 -- Admin 后台截图 -- 60 秒左右演示视频 +完成本项目后，你需要提交以下内容： -## 验收标准 +- [ ] 可访问的线上演示链接 +- [ ] 源码仓库链接（含 README） +- [ ] PRD 文档 +- [ ] 核心页面截图（首页、Dashboard、Billing、Admin） +- [ ] 60 秒演示视频（覆盖注册 → 生成 → 支付 → 后台） -如果你想判断这个作业到底算不算“完成”，不要只看页面有没有写完，而要看下面这几个维度是不是都达标： +README 至少包含：项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。 -| 维度 | 最低达标 | 加分项 | -|------|------|------| -| 产品完整度 | 首页、登录、Dashboard、Billing、Admin 都能访问 | 首页文案和视觉风格明显像真实 SaaS | -| 业务闭环 | 用户可以注册、登录、生成并查看历史 | 免费 / Pro 权限差异清晰可见 | -| 数据正确性 | 生成结果和支付状态都会写入数据库 | 有明确的错误提示、空状态和 Loading | +## 评分标准 + +| 维度 | 基本要求 | 进阶要求 | +|------|---------|---------| +| 产品完整度 | 首页、登录、Dashboard、Billing、Admin 都能访问 | 首页文案和视觉风格像真实 SaaS | +| 业务闭环 | 注册 → 登录 → 生成 → 查看历史可以跑通 | 免费/Pro 权限差异清晰可见 | +| 数据正确性 | 生成结果和支付状态都写入数据库 | 有明确的错误提示、空状态和 loading | | 权限与安全 | 未登录不能访问受保护页面，普通用户不能进 Admin | 有基本的输入校验和服务端鉴权 | | 工程交付 | 项目可本地启动，也可部署到公网 | README 清楚，演示视频结构完整 | -如果你现在还觉得任务太大，就记住一个标准：**优先保证“能跑通”，再去追求“做漂亮”。** +::: tip +如果你觉得任务太大，记住一个原则：**先保证"能跑通"，再去追求"做漂亮"。** +::: -## 5. 最终成果 - -按这篇指南做完，你拿到的不是"练习页"，而是一个**最小但完整的 SaaS 产品**： - -- ✅ 现代组件库前端 -- ✅ Supabase 数据库与登录 -- ✅ 真实 AI 生成功能 -- ✅ Stripe 支付系统 -- ✅ 管理员后台 -- ✅ 可部署上线 - -这完全够资格作为**第一个全栈作品**。 - -## 6. 提交前最后检查 +## 提交前检查