作为一位产品经理,也是一名魔兽世界玩家,我从未真正写过代码。近期AI编程、Vibe Coding概念火爆,便心血来潮,想亲自体验感受一下,结果却意外的好用。
在课余时间使用CodeBuddy+云开发AnyService+OrcaTerm+Lighthouse的工具组合,仅用了不到1小时左右时间,便从0代码基础开始在云端搭建了一个基于魔兽世界API的小程序基础Demo,整个过程非常简单丝滑。
需要注意的是:务必要能够清晰地对AI陈述清楚需求细节,避免空泛的一句话。
前言
作为一名魔兽世界玩家,一直被一个小问题困扰:如何快速知道自己职业的毕业级装备,从而能去猛刷装备?但似乎一直没有类似的功能,过去只能靠自己去游戏网站数据库查,不同职业又不一样,非常麻烦。同时,作为一名互联网从业者,又非常想尝试自己去写一个查询工具,但无奈确实没啥代码基础,想法也只能作罢。
但随着AI大模型时代的到来,VibeCoding(氛围编程)概念的兴起,以及近期CodeBuddy的上线以及云开发联合Lighthouse的解决方案AnyService的发布,让我心血来潮,恰好手里有一台Lighthouse,准备亲自动手感受一下,话不多说,Lighthouse,启动!
整体工作流
1、小程序注册
既然想体验小程序,那肯定要注册一个小程序啦。(注册小程序流程不多赘述。)
2、云开发AnyService服务
腾讯云-云开发CloudBase最新推出的接入服务,仅需简单配置即可打通小程序和后端服务的部署,也仅需简单一行代码即可直接调用后端服务。>>参考文档
3、Lighthouse及OrcaTerm
Lighthouse可以作为小程序后端服务的部署云服务器,OrcaTerm则可以非常便捷地运维管理Lighthouse服务器,两者都极大简化了传统开发运维步骤,非常适合我这种技术小白。
4、VS Code及CodeBuddy
CodeBuddy作为腾讯全新推出的AI编程IDE,只需要将你的想法尽量细致的告诉你的好兄弟CodeBuddy,他就会帮你生成你需要的代码。本次使用的场景是作为VS Code(微软推出的代码编辑器)的插件方式。
5、魔兽世界游戏API文档
Blizzard Battle.net Developer Portal。既然是想折腾“魔兽世界”游戏相关的东西,自然需要魔兽世界的API。(注册魔兽世界API的Client过程此处不多赘述。)
接下来,我将逐步带大家来实现这款小程序,沉浸式体验Vibe Coding。Vibe Coding,中文直译为氛围编程,通过跟AI的对话式交互,让我们沉浸在富有仪式感的编程环节里,享受极速而丝滑的编程氛围。咱压根不用关心代码具体是怎么实现的,这些实现逻辑、底层细节交给AI即可,我们只需要“发出指令 => 看效果 => 作出调整 => 再看效果”的循环里即可。
在整个过程中,需要注意避免只给到AI一句不切实际且空泛的话,从模糊描述到精准指令,AI不是为了替代人的思考,而是协助我们成为更优秀的工程师,成为我们最给力的协助伙伴。
步骤参考
1、启动VS Code,本地调试魔兽世界API后端代码
这一步骤的目的主要是可以读取魔兽世界的职业列表,作为本次小程序开发的核心数据。
在前文讲到,我这里主要是通过在VS Code中调用AI编程插件Codebuddy来帮助我写代码。因此,首先要打开VS Code,在插件商店中搜索CodeBuddy并安装好。
VS Code安装CodeBuddy
找到魔兽世界API文档,但毕竟从来没写过代码,这文档自然是读不懂的,看着头大,但好在有好兄弟 CodeBuddy 可以帮你解决一切问题。
你只需要和CodeBuddy说出你想做什么:
1)基于魔兽世界的API文档,我想要获取access_token,生成一份代码;(示例提示词)
CodeBuddy则会帮你自动生成一段代码,只需要替换掉其中的APIkey和APIsecret即可;
2)基于GetAccessToken文件获取到的access_token,调用魔兽世界获取职业列表接口;(示例提示词)
这时候CodeBuddy会自动分析前面的文件,并续写一份代码。
向AI提出指令示例
生成代码片段示例
看着一行行代码哗啦啦地生成,成就感拉满。至此,基础的后端接口已经调试完毕!
2、启动微信开发者IDE,生成小程序项目
已经获取职业列表数据后,接下来咱们进入正式生成小程序环节,开始编写小程序的交互页面代码,这时候需要用到的是微信开发者工具。同样的,咱依然借助AI来帮我们生成代码。
微信开发者工具在创建小程序项目时,也已支持AI智能生成模板,由于是测试接口访问,便也通过对话的方式自动生成了一个最简易的模板:
1)我现在需要创建一个测试的项目,提供一个按钮,作用是点击后显示魔兽世界职业列表;
2)按钮下方摆放一个展示框,以表格的形式用于展现返回的数据;(示例提示词)
提示词示例
IDE则根据我给到的提示词,快速做需求分析,生成一个符合我要求的项目,而后续代码仍然可以做修改。
项目文件生成示例
到了这里,后端逻辑有了,前端代码也已具备,相当于备菜环节已ready,接下来开始炒菜出成品了。咱们需要先把后端逻辑部分部署到云服务器上,开始运行起来。
3、启动Lighthouse,并配置AnyService服务
在云服务器的选择上,选择Lighthouse的好处是它更加简单易用,我不需要理解传统云服务器的高阶概念及功能。
首先在腾讯云官网上购买一台Lighthouse服务器实例,新用户首次购买还能享受官网活动优惠。下单购买后将会自动创建一台Lighthouse实例,根据云开发的AnyService文档教程,来配置好AnyService服务。这一步骤主要是为了后续部署的后端逻辑能够快速接入小程序。
注意:当前AnyService服务只支持上海地区,故Lighthouse实例也要选择上海地域。
Lighthouse服务器实例
配置AnyService服务
参考AnyService测试代码,在微信开发者工具中调试:
// 在调用前,或在小程序 onLaunch 中初始化环境
wx.cloud.init({
env: 'test-xxxxx', // 这里为tcb的环境ID
traceUser: true,
})
const result = await wx.cloud.callContainer({
"path": "/",
"header": {
"X-WX-SERVICE": "tcbanyservice", // 固定为 tcbanyservice
"X-AnyService-Name": "lh", // X-AnyService-Name 中填入 AnyService 服务标识,从「腾讯云开发平台 - AnyService」获取服务标识
"content-type": "application/json",
},
"method": "GET",
})
console.log(result);
测试参考代码示例
实际修改代码文件示例
4、将本地的魔兽世界API部署到Lighthouse
已经启用服务器后,我们就需要把最开始获取魔兽世界数据的相关代码部署到服务器上了。这时候继续找到CodeBuddy帮忙,继续和CodeBuddy说出你想做什么:
我想要把本地的项目部署到云上,使用Node.js进行部署,生成一段代码(示例提示词)
CodeBuddy将会为你生成Node.js的代码,接着打开 Lighthouse 的实例详情,查看云上Node.js 的目录结构。
点击登录,OrcaTerm提供一键登录的功能,进入服务器终端;
点击文件管理器,找到路径选择,将应用软件安装地址复制并进入目录;
通过OrcaTerm将本地生成的全部文件上传到云上的Node.js目录。
5、启动OrcaTerm,云上调试
上传成功后,可以直接通过OrcaTerm自带的Web编辑器,进行代码的微调和调整;如果遇到问题,可以继续将报错以提示词形式告诉CodeBuddy,进一步调试。
通过Ligthouse和OrcaTerm的组合,我已经成功将调用魔兽世界API部分部署到云服务器上并正常运行了,so easy。
6、运行,查看最终效果
这时候我们再回来微信开发者工具试运行,因为利用AnyService跟Lighthouse打通,之前准备好的界面部分已经可以成功获取到职业列表数据了!
当然,最终的效果仍然仅仅是一个非常简单基础的测试页面,但主流程已经丝滑跑通了,其余功能继续按照上述方式不断迭代和调试即可。
运行项目
到这里就大功告成啦!
云开发AnyService+Lighthouse方案的优势
AnyService 是腾讯云开发CloudBase提供的服务接入解决方案,帮助开发者将已有的服务器资源快速接入小程序或微信 H5,无需迁移原有服务即可享受云开发的便捷性和安全性。
在实际体验过程中,仅需简单的配置,和几行代码便可轻松调用存量的Lighthouse后端资源服务,完全不需要繁琐的域名配置,极大减轻了调试和维护的成本。
如果你有存量的服务已经在运行在Lighthouse或是其他云服务器上,想要接入小程序,完全无需额外开发,真正的秒级接入。
CodeBuddy和OrcaTerm组合的便利
CodeBuddy作为腾讯云最新推出的AIIDE工具,则可以完全让非技术人员仅通过对话聊天交互的方式,生成所想要的代码;同时,也支持自定义配置MCP,让你的代码生成之路更加灵活、便利。
OrcaTerm则是腾讯云的Web智能远程终端,不仅可以方便的直接远程连接服务器,更支持在线的文件编辑器,以及智能命令补全,帮助开发者能以更好的体验进行远程开发、调试、运维。
总结
通过仅仅不到1小时的时间,便通过CodeBuddy+云开发AnyService +OrcaTerm+Lighthouse的方案,纯靠“AI原生”来实现了一个完整的小功能,整体的体验非常丝滑,但在让CodeBuddy为你生成代码的过程中,不可避免的会遇到非常多的小问题,但可以通过不断的将代码报错、你的预期不符等信息,给AI说明,AI会快速帮你解决。
因此,如果对写一些小功能来解决身边的问题有兴趣,但又苦于没有代码基础的爱好者,VibeCoding确实体验已经非常良好,但在过程中还是要清楚的认识到:AI不是万能的,一句话需求是不存在的,我们在使用AI作为工具实现功能的同时,还是要不断思考我们的需求和指令是否清晰,能否发挥AI最大的潜力,从而让我们个人的思考和认知得到提升。