从零开始使用 Coderblock 创建网店
只需用自然语言描述需求，即可创建一套全栈网店，并通过聊天逐步完善商品目录、购物车、身份验证、支付和管理工具。本教程将带你从第一条提示词开始，直至发布一家具备真实数据库和 Stripe 结账功能的在线商店。
你将构建什么
在本教程中，你将从一段简单的聊天描述开始，创建一个功能完整、支持响应式布局的网店。
完成后，你将拥有：
- 包含商品详情页的商品目录
- 搜索、分类和库存状态功能
- 购物车
- 客户账户和受保护的订单历史记录
- 测试模式下的 Stripe 结账功能
- 用于管理商品和订单的后台管理区
- 启用 Row Level Security 的真实 Postgres 数据库
- 已部署至生产环境并启用 SSL 的线上版本
Coderblock 会使用 React、Vite、TypeScript 和 Tailwind CSS 生成前端，同时创建后端和数据库。你只需通过自然语言对话管理整个项目，无需手动配置路由、数据库迁移或支付 webhook。
1. 创建新的网店项目
打开 Coderblock 并新建一个项目。 你可以从网店专用模板开始，也可以直接描述想要构建的内容，从零创建网店。
例如：
创建一家销售可持续家居配件的现代化网店。制作响应式首页、商品目录、分类筛选器、商品详情页、购物车、客户账户、Stripe 结账、订单历史记录，以及用于管理商品和订单的后台管理区。使用温暖的中性色调，并确保界面在桌面端和移动端均易于使用。
你向智能体提供的商品类型、视觉风格、重要页面和所需功能等信息越充分，生成的第一个版本就越接近你的设想。
Coderblock 会创建前端、后端和数据库，并在项目的 .coderblock.dev 地址上显示实时开发预览。
你可以同时打开聊天窗口和预览页面，在操作过程中实时查看网店的变化。
2. 检查并完善网店
现在可以开始体验刚刚创建的内容。 测试网站导航、首页、商品目录、商品页面和购物车，并分别检查桌面端和较小的移动设备屏幕上的显示效果。
第一个版本只是起点。你可以直接在聊天中提出有针对性的要求，继续修改网站。
例如：
- “将页头固定在顶部，并始终显示购物车中的商品数量。”
- “桌面端使用四列网格展示商品，移动端则使用单列布局。”
- “添加按分类、价格和库存状态筛选的功能。”
- “为购物车为空的情况添加提示状态，并提供返回商品目录的链接。”
- “在每件商品的描述下方显示相关商品。”
- “添加加载中、错误和无结果状态。”
修改会在几秒内显示于实时预览中。 建议将工作拆分成小步骤：每次提出一到两个相互关联的要求，检查结果后再进行下一项修改。
3. 创建商品和订单数据模型
确定网店结构后，可以让智能体创建所需的数据模型。 例如：
为商品、分类、订单和订单明细创建数据库表。每件商品都应包含名称、描述、价格、SKU、可用数量、分类、图片、启用状态和时间戳。订单必须与已登录的客户关联，并包含支付状态、履约状态、总金额和订单明细。
每个 Web 应用都会使用一个独立的 Supabase 项目和 Postgres 数据库。Coderblock 会设计数据库结构并执行必要的迁移。 你可以直接在 后端 选项卡中检查结果，其中包含数据表、已认证用户、存储空间和函数。 此时还可以添加一些示例商品：
添加八件示例商品并分为三个分类，以便我测试网店。确保以后可以通过后台管理区轻松替换这些商品。
如果你的商品有特殊要求，请尽早说明。例如，你可以指定每件商品需要多张图片、尺码、颜色或其他变体。 你还可以要求智能体使用 Supabase Storage 保存上传的图片，并将它们关联到相应商品。
4. 添加客户身份验证和安全机制
现在可以创建客户账户，并保护个人信息和订单数据。 向 Coderblock 提出以下要求：
添加客户注册和登录功能，保护账户页和订单历史记录页，并确保每位客户只能查看自己的订单。添加管理员和客户角色。
智能体会配置 Supabase Auth，包括注册页和登录页、会话管理、受保护路由以及数据库策略。 每个应用都已包含用户资料表和基础角色结构。 Coderblock 还会应用与当前认证用户关联的 Postgres Row Level Security。这样，每位客户只能访问自己的数据，而管理员则可以获得管理商品和订单所需的权限。
你无需创建自定义密码表，也不必手动编写 JWT 或密码哈希代码。 如果还想添加社交账号登录，可以提出：
在电子邮箱和密码登录之外，再添加社交账号登录功能。
接下来，分别使用客户账户和管理员账户验证系统行为。确保普通客户无法打开后台管理页面，也无法查看其他客户的订单。
5. 创建购物车和结账流程
配置支付之前，请先确认购物车可以正常工作。 检查客户能否：
- 添加商品
- 修改数量
- 移除商品
- 查看实时更新的总金额
购物车准备就绪后，可以让智能体添加 Stripe：
允许客户使用 Stripe 支付购物车中的商品。先启用测试模式，创建所需的商品和价格数据，保存已完成的订单，并为支付成功和取消支付分别提供清晰的结果页面。
默认情况下，Coderblock 可以为项目创建一个托管的 Stripe 账户。智能体会询问一些简单信息，例如所在国家或地区以及企业名称。
你无需提供 API 密钥：Coderblock 会处理支付 webhook，并提供一个由 Stripe 托管的链接，供你之后完成支付配置和身份验证。
如果希望使用自己的 Stripe 账户，可以选择 BYOK 方案。
智能体会通过安全的环境变量请求获取 STRIPE_SECRET_KEY。该值会保存在项目的服务端密钥存储中，不会写入生成的代码或普通聊天记录。webhook 也会自动完成注册。
请始终从测试模式开始。
进行几次模拟购买，确认支付成功后能正确创建订单及对应的订单明细。同时测试取消支付和支付失败的情况。 只有在整个流程均按预期运行后，才能切换到真实支付。
6. 添加后台管理区
网店还需要一个供运营人员使用的管理空间。 你可以向智能体提出：
创建一个受保护的后台管理面板，让管理员能够添加、编辑、启用和停用商品，上传图片，更新库存，查看订单并修改履约状态。同时添加订单和收入概览卡片。
直接在预览中检查每一项操作。 例如，确认商品修改能立即反映在网店中，并确保普通客户无法访问后台管理仪表盘。 你还可以添加防错校验：
禁止输入负数价格和数量，将商品名称和 SKU 设为必填项，并在停用商品前要求用户确认。
同样，你也可以要求添加清晰的空状态、错误消息，以及执行破坏性操作前的确认对话框。
7. 测试完整购物流程
发布网店之前，请像真实客户一样走完全部购买流程。
- 浏览并筛选商品。
- 打开商品详情页。
- 将商品加入购物车并修改数量。
- 创建账户或登录。
- 使用 Stripe 完成测试支付。
- 打开订单历史记录页。
- 以管理员身份登录并检查订单。
- 更新订单的履约状态。
不要只测试理想情况下的正常流程。 还应在移动设备上检查网店，测试商品缺货时的系统行为，并确认空状态和错误消息清晰易懂。 如果发现问题，无需手动修改代码。只要在聊天中描述你看到的现象以及期望的行为即可。
8. 发布并绑定域名
完成所有测试后，即可发布网店。
点击 发布，Coderblock 会将应用部署到生产环境中的 .coderblock.app 地址，并自动启用 SSL。
后续发布可以通过快速热更新完成。
如果想使用自定义域名，请打开 设置 → 域名。 你可以按照向导配置 DNS 记录，绑定已有域名；也可以通过集成的结账功能直接在 Coderblock 中购买域名。选择后一种方式时，DNS 和 SSL 都会自动完成配置。 正式推广网店之前，请完成 Stripe 入驻流程，并从测试模式切换到真实支付。 此外，请再下一笔真实订单，并确认对应记录已正确写入数据库。
你的网店已上线
至此，你已经将一段简单的描述转化为一家具备商品目录、客户账户、购物车、支付、数据库和后台管理区的全栈网店。 更重要的是，发布并不意味着工作结束：你可以继续通过同一个聊天窗口改进网店，添加新功能、优化现有功能，同时保持开发流程不中断。
