使用 Coderblock 逐步创建预约应用

你将创建什么

在本教程中，你将创建一款完整的预约应用。客户可以注册账号、查看可预约时段、预约服务并管理自己的预约；工作人员则可通过管理后台查看和更新预约。 Coderblock 能根据自然语言要求生成 React 前端、后端逻辑、Postgres 数据库、身份验证和安全策略。你可以直接通过聊天推进开发，无需手动编写 API 路由、身份验证代码或数据库迁移。

1. 创建项目

在 Coderblock 中新建一个项目。你可以从预约平台模板开始，也可以从零描述你的应用。 如果要创建定制应用，可以先使用如下提示词：

创建一款适用于水疗中心的响应式预约应用。访客应能浏览服务和可预约时段。注册客户可以预约、改期或取消服务。工作人员需要一个管理后台，用于管理服务、营业时间和预约。采用简洁、舒缓的设计风格，并针对移动设备进行优化。

请说明业务类型、应用的目标用户、预约时长以及你偏好的视觉风格。向智能体提供的背景信息越充分，生成的初始版本就越贴近你的需求。

2. 生成并检查初始版本

Coderblock 会使用 React、Vite、TypeScript 和 Tailwind CSS 生成一款真正的全栈应用。此外，应用还会获得一个专属 Supabase 项目，其中包含 Postgres、身份验证、存储和 Row Level Security。

通过项目的 .coderblock.dev 地址打开实时开发预览。在你继续通过聊天开发时，修改会在几秒内应用并显示出来。 添加新功能前，请检查以下主要页面：

• 首页
• 服务列表
• 可预约日历
• 预约表单
• 客户个人中心
• 工作人员管理后台

如果某些功能无法正常运行，或效果与你的设想不符，应提出有针对性的修改要求，而不是从头开始。例如：

缩小服务卡片的尺寸，在每张卡片上添加服务时长和价格，并确保预约摘要在桌面端始终可见。

或者：

在移动端依次显示服务选择、日历和可预约时段。

3. 定义预约数据

接下来，向智能体说明应用需要管理哪些信息。在本例中，核心数据包括服务、工作人员、可预约时段、预约记录和客户资料。 你可以使用如下提示词：

为服务、工作人员、每周可预约时间、屏蔽日期和预约记录创建数据库结构。每条预约记录必须包含客户、服务、工作人员、开始时间、结束时间、预约状态、备注和支付状态。添加适当的关联关系和索引。

智能体会设计 Postgres schema 并执行迁移。你可以在编辑器的 Backend 选项卡中查看生成的表，以及已验证用户、存储和函数。 为了便于初步测试界面，你还可以要求添加一些初始数据：

添加三项具有不同时长和价格的示例服务、两名工作人员，以及未来两周的可预约时间。

4. 添加用户登录与权限

每款应用都已包含用户资料表和基础角色结构。现在，你可以让 Coderblock 创建完整的账号管理体验：

添加使用电子邮箱和密码注册及登录客户账号的功能。保护客户预约页面和工作人员管理后台。客户只能查看和修改自己的预约。工作人员可以管理所有服务、营业时间和预约。

智能体会配置 Supabase Auth、会话管理、受保护路由和 Postgres Row Level Security。你无需创建自定义密码表，也不必手动编写 JWT 或密码哈希代码。 如果还想添加第三方账号登录，可以明确提出要求。 此时，请测试两种角色：分别以客户和工作人员身份登录，确保每位用户只能查看其有权访问的数据，并执行其有权使用的操作。

5. 创建可靠的可预约规则

预约系统不能只有一个简单的日历。可预约时段必须综合考虑工作时间、服务时长、已有预约以及任何被屏蔽的时间段。 可以直接使用自然语言描述这些规则：

根据每名工作人员的排班生成可预约时段。排除屏蔽日期和已有预约，在两次预约之间预留 15 分钟间隔，并禁止客户预约已经过去的时间。

同时处理并发请求也很重要：

即使两名客户几乎同时选择同一时段，也要在数据库和后端层面防止重复预约。如果某个时段在确认前已不可预约，请显示清晰的提示信息。

测试不同时长的服务、临近下班时间的预约、预约取消，以及所有时段均已约满的日期。

6. 创建客户和管理员流程

客户流程应简单且符合预期：选择服务、按需选择工作人员、选择时间、确认详细信息并收到预约确认。 你可以使用如下提示词完善这一流程：

添加最终确认页面，显示服务、工作人员、日期、时间、时长和价格。预约成功后，将客户带到“我的预约”页面，使其可以为未来的预约改期或取消预约。

对于工作人员，则可以要求创建更便于日常操作的视图：

添加管理后台，提供预约的日视图和周视图、按工作人员和状态筛选的功能，以及确认、完成或取消预约的操作控件。加入摘要卡片，显示今日预约和即将开始的预约。

7. 检查并测试整个技术栈

现在，使用不同用户测试应用。创建两个客户账号和一个工作人员账号，然后验证：

• 未登录访客无法访问受保护页面。
• 客户无法查看其他客户的预约。
• 工作人员可以管理预约，而客户无法访问管理功能。
• 取消预约后，相应时段会按预期恢复为可预约状态。
• 无效或存在冲突的预约会被拒绝。
• 桌面端和移动端的界面都保持易用。

发现问题时，请直接在聊天中说明你执行了什么操作，以及预期会发生什么。例如：

客户取消预约后，该时段仍显示为不可预约。请修复可预约时段的计算逻辑，并为这种情况添加测试。

8. 按需添加 Stripe 支付

如果预约需要支付订金或全款，可以提出如下要求：

允许客户在确认预约时支付 20 美元订金。先使用 Stripe 测试模式，并在结账完成后更新预约的支付状态。

采用默认配置时，智能体可以在询问所在国家或地区、企业名称等信息后，为你创建一个托管 Stripe 账号。你无需提供 API 密钥，Coderblock 会负责处理支付 webhook。之后，你可以通过智能体提供的 Stripe 链接完成支付设置和身份验证。 如果希望使用自己的 Stripe 账号，请选择 BYOK 选项。智能体会通过专门用于环境变量的安全流程请求 STRIPE_SECRET_KEY，将其存储在服务器端，并自动注册 webhook。切勿直接在聊天或生成的代码中输入敏感信息。 切换到实时模式前，请测试支付成功、取消支付和支付失败等情况。

9. 发布预约应用

完成所有测试后，单击 Publish。Coderblock 会将应用部署到对应的 .coderblock.app 生产环境地址，并自动配置 SSL。后续发布也能快速应用更新。 如果要使用自定义域名，请打开 Settings → Domains。你可以按照 DNS 配置向导连接现有域名，也可以直接在 Coderblock 中购买域名；采用后一种方式时，DNS 和 SSL 会自动完成配置。

在确认应用可以正式使用之前，请通过生产环境域名完成一次真实的测试预约。检查登录、可预约时段、预约管理、已启用的支付功能以及工作人员管理后台。 至此，你已经拥有一款真正可投入使用的全栈预约应用，并且可以继续通过同一套聊天式工作流不断完善它。