基于 CodeBuddy+CloudBase 从 0 到 1 打造智能番茄钟应用

一、 前言

1、实验内容

本实验采用了腾讯云旗下的腾讯云代码助手（ CodeBuddy ）与腾讯云云开发平台 CloudBase AI Toolkit，我们将基于 Visual Studio Code（VS Code） ，结合 CodeBuddy 与 CloudBase AI Toolkit 完成番茄钟（ Pomodoro Timer）应用开发。通过这一实践，不仅能深度体验 AI 赋能编程带来的高效便捷，更能全面验证 CodeBuddy + CloudBase AI Toolkit 在代码准确性、安全性和自动化方面的强大优势，感受智能开发的无限可能

2、手册内容

本手册的内容包括：

• 腾讯云黑客松全栈开发挑战赛报名
• 腾讯云开发控制台 CloudBase 平台基础环境搭建与准备
• 基于 CodeBuddy 实现番茄钟应用的环境搭建与准备
• 利用 CodeBuddy 生成番茄钟应用核心功能代码与依赖管理
• 基于 CodeBuddy 进行代码诊断与测试运行
• 使用 CodeBuddy 进行最终项目诊断与部署启动
• 基于 CloudBase AI Toolkit进行代码部署
• 基于 CNB 进行代码上传

3、活动报名

腾讯云黑客松全栈开发挑战赛报名入口：

https://marketing.csdn.net/questions/Q2506091704482070075?shareId=2339&channel=181Q926

注意：请在完成报名后，进行以下实践内容。

二、环境准备与验证

1、环境准备

• 下载安装VS Code AI 开发工具，本实验环境将通过 VS Code 工具进行试验。
• 下载安装Node.js环境，本实验 Node.js 版本是 v24.2.0，npm 版本是 10.5.0。
• 访问 腾讯云开发控制台开通环境（新用户限时送免费额度）。
• 基于腾讯云 黑客松官网 提供的 Vue项目模板 进行环境验证。

注意： 如果无法正常下载，请参考手册附带的安装包，提供了适用于 mac 和 Windows 的版本，这里以 Windows 为例。

VS Code 与 Node 环境准备

1. 点击 VS Code 下载链接后，进行下载并安装。

2. 双击运行下载后的 VS Code 安装包，开始安装。

3. 开始安装Node.js。

4. 打开 cmd 命令窗口查看 nodejs 是否安装成功。

腾讯云开发平台环境准备

1. 访问 腾讯云开发控制台 开通环境，选择腾讯云账户登录。

2. 使用微信扫码登录。

3. 登录成功后，新建环境。

4. 服务授权，点击同意。

5. 身份二次验证，使用微信扫码验证。

6. 填写基础环境配置，购买时长选择开发期（开发期免费体验），最后点击立即购买。

7. 确认订单并立即支付。

8. 购买成功，进入控制台。

9. 点击跳过环境准备。

10. 环境新建成功，复制环境ID。

基于 Vue项目模板进行环境验证

本实验采用 Vue项目模板 快速搭建开发环境，该模板可在 黑客松官网 页面获取。通过使用标准化模板，开发者可一键完成项目初始化配置，立即体验 CodeBuddy 的智能编码辅助能力。

1. 下载并解压 Vue项目模板，我们使用 VS Code 打开模板项目，进行环境验证。

2. 打开 VS Code，点击打开项目。

3. 选择模板项目。

4. 模板项目打开成功。

5. 打开文件 .vscode/mcp.json ，配置以下内容。

{
    "mcpServers": {
        "cloudbase": {
            "command": "npx",
            "args": [
                "-y",
                "@cloudbase/cloudbase-mcp@latest"
            ]
        }
    }
}

6. 使用快捷键 "ctrl+shift+`" 打开终端，执行下载安装命令。

# 1.初始化安装
npm install

# 2.安装cloudbase-mcp
npm install @cloudbase/cloudbase-mcp@latest

7. 安装成功之后，在模块目录下中会看到我们安装后的 cloudbase-mcp 模块。

8. 复制 cloudbase-mcp 模块绝对路径，将 mcp.json 中 args 内容进行修改。

9.配置环境ID，打开 src/urils/cloubase.js 文件，设置 ENV_ID 。

10.启动模板项目，打开终端，执行启动命令，启动成功之后会看到 Local 地址，复制地址到浏览器进行访问。

npm run dev

12. 访问启动后的项目地址 http://127.0.0.1:5173/ 验证环境是否已配置成功。

13. CodeBuddy 拓展安装，点击拓展市场，搜索 CodeBuddy ，点击 install 进行下载安装。

14. CodeBuddy 安装完成之后，点击登录，然后点击打开跳转到浏览器去登陆。

15. 打开 MCP  Marketplace搜索 cloudbase 。
    

16. CodeBuddy 安装完成之后，点击+号，在 json 文件中修改 CloudBase MCP 配置，我们需要替换 MCP 相对路径为本地环境的绝对路径，这样就可以连接到 CloudBase MCP 所有工具了。绿色的点代表工具可调用。
    

2、环境测试

1. 返回到 Craft 菜单栏下，输入 登录云开发，点击发送。

2. CloudBase 会请求登录 tools ，并打开默认浏览器确认登录。我们 确认选择 云开发环境，返回到 VS Code ，此刻我们已经登录到了 CloudBase 云服务环境了，并且 Craft 对话窗口也返回了登录成功结果。

恭喜你，所有的环境配置已准备完成，接下来可以开始开发专属你的应用了。

三、基于 CodeBuddy 实现番茄钟应用核心功能

1、CodeBuddy简介

腾讯云代码助手是由腾讯云自研的一款开发编程提效辅助工具，开发者可以通过插件的方式将腾讯云代码助手安装到编辑器中辅助编程工作（ VS Code 系列 IDE）；而腾讯云代码助手插件将提供：自动补全代码、根据注释生成代码、代码解释、生成测试代码、转换代码语言、技术对话等能力。通过腾讯云代码助手，开发者可以更高效地解决实际编程问题，提高编程效率和代码质量。

2、基于 CodeBuddy 生成核心功能

1.首先，切换到已通过环境验证的菜单 Craft 中。根据以下提示词，完成番茄钟应用的核心功能开发。

注意： 模型输出的结果存在随机性，但核心功能不影响，请根据具体情况，由 CodeBuddy 的引导，点击接受即可。

帮我构建一个基于Vue3+Vite前端项目并且实现以下的需求功能，请你完整的按照组件化形式生成所有功能，页面请使用简体中文显示。

番茄钟应用具有以下功能：

1. 三种工作模式：
   • 工作模式（25分钟）
   • 短休息（5分钟）
   • 长休息（15分钟）

2. 计时功能：
   • 显示剩余时间
   • 开始/暂停/重置按钮
   • 自动在工作和休息模式之间切换，并自动倒计时
   • 每完成4个番茄钟后自动进入长休息

3. 任务管理：
   • 添加任务
   • 标记任务完成
   • 删除任务

4. 其他功能：
   • 请下载一个提示音到本地，在计时结束后应用该提示
   • 显示已完成的番茄钟数量
   • 响应式设计，适配不同屏幕尺寸

其他:整体显示在屏幕中间

2. CodeBuddy 正在帮助您初始化一个基于 Vue 3 和 Vite 的番茄钟应用项目，点击接受，完成应用代码编写。

3. 此时番茄钟核心功能已经实现。

3、基于 CodeBuddy 自动完成依赖安装

接下来我们让 CodeBuddy 进行测试运行番茄钟核心功能。 Craft 对话框中输入以下提示词。

注意： 模型输出的结果存在随机性，但核心功能不影响，请根据具体情况，由 CodeBuddy 的引导，点击接受即可。

请安装番茄钟项目相关的依赖。

1. 正在下载安装 package.json 文件中相关依赖。

    2. 依赖安装完成。

四、使用 CodeBuddy 完成最终项目诊断并启动

1、项目诊断与启动

在成功基于 CodeBuddy 完成番茄钟核心应用的优化与实现之后，通过输入以下提示词，我们能够对项目进行全面的诊断，并顺利启动应用，确保一切运行顺畅。

注意： 模型输出的结果存在随机性，但核心功能不影响，请根据具体情况，由 CodeBuddy 的引导，点击接受即可。

请帮我诊断番茄钟项目，并启动项目运行。

1. 诊断并启动项目。

2.诊断完成，访问本地地址。

3.本地访问最终效果。

2、项目首页底部添加标注信息（黑客松参赛作品必备）

在成功基于 CodeBuddy 完成番茄钟项目诊断并启动后，我们接下来在首页底部添加一个标注信息。

注意： 模型输出的结果存在随机性，但核心功能不影响，请根据具体情况，由 CodeBuddy 的引导，点击接受即可。

1.通过 CodeBuddy 添加首页页脚标注信息，输入提示词并发送执行。

请为应用首页页脚处进行标注设置： Made in CodeBuddy | Powered by CloudBase
两个标注分别设置跳转外链：
CodeBuddy外链地址：https://mc.tencent.com/HRVjVcS5
CloudBase外链地址：https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/?from=csdn-hackathon-2025

2.首页页脚信息添加成功。

五、基于 CloudBase AI Toolkit 进行代码部署

1、CloudBase 简介

云开发 CloudBase（Tencent CloudBase，TCB） 是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等 Serverless 化能力，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用、Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

2、代码部署

1. 确保 CloudeBase MCP 服务运行正常。

    2.重新编译并部署到云开发 CloudBase 环境。



    3.选择云开发环境。



    4.成功部署云开发环境，我们点击链接地址，访问查看，可以看到已经成功生成。





六、基于 CNB 进行代码上传

1、CNB 简介

云原生构建（ Cloud Native Build，CNB ）提供代码托管、云原生构建、云原生开发、AI 代码助手和制品库等功能。基于 Docker 生态，对环境、缓存、插件进行抽象，通过声明式的语法，帮助开发者以更酷的方式构建软件。

2、代码部署

1.登录云原生构建环境。

2.实名认证。

3.创建组织。

4.创建仓库。

5.点击系统右上角头像，点击个人设置，点击访问令牌，添加访问令牌。添加成功后，我们需要复制保存好我们的令牌信息。方便后面提交代码使用。

6.本地初始化，我们复制仓库地址，打开 windows 本地 git bash 窗口。

git clone https://cnb.cool/thetid19/web-cloudbase-vue-template.git

7.将代码迁移到初始化好的 web-cloudbase-vue-template 文件夹里

8.执行代码提交命令，推送到远程仓库中。

# 进入到克隆后的项目目录中
cd web-cloudbase-vue-template
# 执行推送命令
git add .
git commit -m '代码提交'
# 第一次推送代码会提示输入用户名和密码（创建仓库时的用户名和密码）
git push origin master

7.返回浏览器，查看远程仓库代码是否推送成功。

恭喜你，已经完成了 cnb 代码管理流程。

七、实验总结分析

恭喜您完成 CodeBuddy 与 CloudBase 实验！ 您已深度体验 CodeBuddy AI 助手的核心能力。用自然语言编程，AI 自主完成多文件代码生成和改写，让灵感即刻落地。