【AI编程-学习篇】基于 CodeBuddy+CloudBase 从 0 到 1 打造智能番茄钟应用（腾讯云黑客松全栈开发挑战教程跟练）
腾讯云黑客松全栈开发挑战赛参赛指南：通过官方教程学习AI编程工具使用。文章详细介绍了使用腾讯云CodeBuddy和CloudBase AI Toolkit开发番茄钟应用的完整流程，包括环境准备、插件安装、项目创建和功能实现。重点分享了如何通过AI辅助工具快速生成Vue3项目，并解决开发中的常见问题。适合想要学习AI编程工具的新手开发者参考，强调通过比赛实践提升技能而非获奖的思路。
【腾讯云黑客松，全栈开发挑战】官方教程跟练。
我的心里话
俗话说，学习的第一步就是模仿。多少人因为还没开始，就被脑子里的各种想法挡住了脚步的？
AI编程虽然已经是如火如荼，但我个人还是只停留在用AI帮忙梳理项目思路，总结md文件，和修改一些小功能上，没敢用他完全来实现过项目。
各个大厂都在开发推广自家的AI编程工具，为了抢占市场，上线初期肯定会举办各类型的挑战赛和活动，已达到让更多人使用自家产品的效果。
这个时候，这些比赛挑着参加一下，好处多多。
即使咱们并没什么特别直击痛点或者能引爆市场的好点子，也可以通过各大官方的教程，达到学习理解，进入这个领域的目的。
而为了提交比赛作品，我们就从能想到的最烂的点子出发，只要能达到比赛要求就好，毕竟咱们目的是学习，不是获奖。
比赛说明
大赛地址： 腾讯云黑客松全栈开发挑战赛
要求工具：
- 腾讯云代码助手（ CodeBuddy ）
- 腾讯云云开发平台 CloudBase AI Toolkit
赛道：
- Web应用创新赛道
- 微信小程序时间赛道
跟练模仿开始
一、准备工作
1.1 软件与插件安装
因为我是前端开发经验，因此选择的代码工具是VS Code。
- VS Code
- node
- npm
1）. VS Code + Node + npm
VS Code官网， 直接右上角Download安装。
Node.js，点击并安装（案例使用nodev24.2.0，npm10.5.0)
2）. CodeBuddy （腾讯云代码助手）
官网：CodeBuddy
简介：CodeBuddy是由腾讯云自研的一款开发编程提效辅助工具，开发者可以通过插件的方式将腾讯云代码助手安装到编辑器中辅助编程工作。
用法：通过在自己的IDE中安装CodeBuddy插件，即可使用。
支持的IDE：
| IDE | 最低版本要求 |
|---|---|
| Visual Studio Code | 1.82 |
| IntelliJ IDEA | 2022.2 |
| PyCharm | 2022.2 |
| GoLand | 2022.2 |
| Clion | 2022.2 |
| PhpStorm | 2022.2 |
| Android Studio | |
| Flamingo | 2022.2.1 |
| 微信开发者工具IDE | 1.06.2409140 |
VSCode中安装：
- 插件市场搜索CodeBuddy，点击安装。
- 安装之后，插件会出现在左侧的侧边栏中，在这里使用腾讯账号登录（微信扫一扫）。
3）CloudBase AI Kit（腾讯云云开发AI 套件）
文档地址：云开发 AI 开发套件
简介：
CloudBase – 是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等Serverless 化能力，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用、Flutter客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
CloudBase AI Kit-–自动帮你生成可直接部署的前后端应用+小程序，并一键发布到腾讯云开发 CloudBase。
在CodeBuddy中打开MCP Market，搜索cloudbase并安装。
1.2. 腾讯云开发环境准备
- 访问 腾讯云开发控制台，选择腾讯云账户登录，可以通过微信扫码快捷登录。
- 登录后，左侧菜单滑动到底，选择【环境配置】，页面中点击【新建环境】。
- 在新页面中，点击【同意授权】
- 配置环境基础信息。 填写环境名称、选择套餐【个人版】（免费试用6个月），点击【立即购买】
- 同意协议，支付订单
- 购买成功，点击【进入控制台】
 - 跳过问卷
- 环境创建成功，注意这里的环境ID，后续需要使用。（点击后面的图标可以复制环境ID）
1.3 在CodeBuddy中登录云开发
- 在VS Code的CodeBuddy对话框中输入【登录云开发】
- 在自动打开的网页中点击【确认授权】
- 在新窗口中选择云环境，点击【确认选择】
- 回到VSCode，显示“登录成功”，此时云开发已经登录成功了，我们的环境配置也就完成了。
（这里显示的当前环境，就是我们在云开发里刚刚创建的环境id）
小贴士1：使用 AI ToolKit 激活邀请码【TCBgespc】，立即领取环境续费奖励
哦y
- 参考 CloudBase AI ToolKit 快速指引完成 CloudBase MCP 配置并完成云开发的登录
- 登录成功后，继续在AI对话框中输入“激活邀请码TCBgespc”指令
- 按 AI 对话提示完成邀请码激活
激活邀请码TCBgespc
小贴士2：把CodeBuddy放到右侧聊天区域。
此时CodeBuddy就出现在右侧啦。
二、开发一个番茄闹钟应用
2.1 核心功能生成
- 切换到CodeBuddy，输入以下提示词。
帮我构建一个基于Vue3+Vite前端项目并且实现以下的需求功能，请你完整的按照组件化形式生成所有功能，页面请使用简体中文显示。
番茄钟应用具有以下功能：
1. 三种工作模式：
• 工作模式（25分钟）
• 短休息（5分钟）
• 长休息（15分钟）
2. 计时功能：
• 显示剩余时间
• 开始/暂停/重置按钮
• 自动在工作和休息模式之间切换，并自动倒计时
• 每完成4个番茄钟后自动进入长休息
3. 任务管理：
• 添加任务
• 标记任务完成
• 删除任务
4. 其他功能：
• 请下载一个提示音到本地，在计时结束后应用该提示
• 显示已完成的番茄钟数量
• 响应式设计，适配不同屏幕尺寸
其他:整体显示在屏幕中间
根据引导，点击运行。
运行过程中会有多次命令行执行，挨个点击即可。
2.2 看一下他的生成思路
- 项目初始化
- 进入目录安装依赖
- 创建组件与文件结构
- 挨个生成文件
- 提示音下载与保存
- 项目保存于执行
发现有个错误，让codeBuddy自己改一下
2.3 运行查看效果
启动效果：
对比了一下，发现效果跟案例中查的有点多。。。 决定让他继续修改。
再次运行，看起来好多了
其实AI编程中提示词是很重要的，你想的越周到，AI做的越完善。
三、应用云部署
概念说明：
CNB 云原生构建 （Cloud Native Build，CNB ）提供代码托管、云原生构建、云原生开发、AI代码助手和制品库等功能。基于 Docker 生态，对环境、缓存、插件进行抽象，通过声明式的语法，帮助开发者以更酷的方式构建软件。
3.1 代码云部署
- 确保已安装cloudbase/cli
- 重新编译并部署到云开发 CloudBase 环境。
- 发现需要先安装cloudbase-mcp
npm install -g @cloudbase/cli
- 再次执行，告知环境ID
部署成功！现在就可以用返回的地址打开我们的应用了。
3.2 代码CNB上传（该部分与云部署无关，是腾讯的代码云管理）
- 用微信登录cnb
- 登录后，进入个人中心，扫码完成实名认证
- 完成实名认证后，点击右上角+，创建组织
- 继续创建仓库
- 仓库创建后，回到个人设置，找到【访问令牌】，点击【添加访问令牌】
搞到这发现这部分是腾讯的代码管理工具的用法，暂时用不到，后面不做了。
原文地址：
https://img-bss.csdnimg.cn/bss/TencentCodeBuddyWorkshop/TencentCodeBuddyWorkshop.html?pId=3020
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)