# 教程：在 WorkBuddy 中快速搭建全栈应用

本教程将引导你使用 WorkBuddy + CloudBase，从零开始搭建一个完整的全栈 Web 应用（待办事项管理），并部署上线。

## 预估时间

约 15 分钟

## 前置条件

- 已安装 [WorkBuddy](https://www.codebuddy.cn/docs/workbuddy)，并在对话中通过**连接器**或输入 `/cloudbase` 启用 CloudBase（参阅[配置指南](../ide-setup/workbuddy)）
- 已开通 [云开发环境](https://docs.cloudbase.net/quick-start/create-env)

## 步骤 1：启用 CloudBase

在 WorkBuddy 对话中输入 `/cloudbase`，选择 CloudBase Skill，即可开始使用。

## 步骤 2：创建项目

在 WorkBuddy 中打开一个空目录作为项目根目录，然后向 AI 输入：

```
使用 React + Vite 创建一个 Web 待办事项管理应用
```

AI 会自动生成项目代码。项目结构如下：

```
my-todo-app/
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.html
├── package.json
└── vite.config.js
```

## 步骤 3：创建数据库

部署前，先通过 CloudBase 创建数据库集合。在 WorkBuddy 的 AI 对话中输入：

```
在我的云开发环境中创建一个名为 "todos" 的数据库集合
```

成功后，AI 会返回集合创建确认信息。

## 步骤 3：集成后端功能

接下来，让 AI 将待办事项数据存储到云数据库。在 WorkBuddy 中继续输入：

```
为待办事项应用添加云数据库集成，使用 CloudBase Web SDK：
1. 安装 @cloudbase/js-sdk
2. 将待办事项的增删改查操作与云数据库的 "todos" 集合关联
3. 页面加载时自动从数据库读取待办列表
```

AI 会自动修改代码，添加数据库集成逻辑。

## 步骤 4：本地预览

在 AI 完成代码修改后，运行：

```bash
npm install
npm run dev
```

在浏览器中预览应用，确认待办事项的添加、完成、删除功能正常工作。

## 步骤 5：部署上线

确认应用正常工作后，在 WorkBuddy 中输入：

```
将当前项目部署到 CloudBase，使用独立子域名
```

AI 会自动执行以下操作：

1. 构建前端项目
2. 通过 `manageApps` 创建应用并部署到独立子域名
3. 配置 SPA 路由
4. 返回可公开访问的部署链接

## 完成

恭喜！你已经使用 WorkBuddy + CloudBase 完成了全栈应用的开发与部署。

## 下一步

- 尝试添加用户认证功能
- 为应用添加搜索和筛选功能
- 探索更多 [CloudBase 工具](../mcp-tools)
