CodeBuddy IDE 携手 Lighthouse 实现从设计、代码到部署全流程
历史信息
在 CodeBuddy IDE 国际版发布公测期间,我亲身体验了它流畅的界面设计、贯穿全程的 AI 编程助手、以及强大的 MCP Server 调用功能。即便是我这样的前端新手,也能轻松实现心中设想的页面效果。公测结束后,国际版转为付费模式,一度让我以为那段-纯 AI 编程-的畅快体验将暂告一段落。而令人惊喜的是,CodeBuddy IDE 团队很快便推出了国内版,继续向用户免费开放。如今,我又能毫无负担地沉浸在这场智能编码的旅程中,继续用代码实现每一个灵感。
下面我们将通过 CodeBuddy IDE 国内版实现学生管理系统,并通过调用 MCP Server 一键部署到腾讯云 Lighthouse。
CodeBuddy IDE
什么是 CodeBuddy IDE
我们先来简单介绍一下我们的 CodeBuddy IDE。CodeBuddy IDE 构建一个产品、设计、研发无缝协作的共生环境。通过将 AI 深度融入从需求规划、产品设计到代码开发的全流程,实现从一个从想法到产品发布的一站式高效交付平台。
CodeBuddy IDE 开发工具涵盖设计、开发、部署全流程,可以从以下三个方面来了解:
产品设计:一句话生成可落地交互原型,支持上传图片及局部调优;
研发编码:内置 Figma,设计稿秒变可维护源码。同时,内置腾讯云开发 CloudBase、EdgeOne Pages 及 Supabase,帮助开发者自动配置数据库、用户认证等后端服务,快速构建、部署站点和无服务器应用;
部署验证:通过 CloudStudio 一键部署至沙箱环境,并生成可分享链接;
官网下载地址(Beta 版):https://copilot.tencent.com/ide/
下载安装
对于还没有下载安装 CodeBuddy IDE 的小伙伴,可以通过上面的官网下载地址下载。安装步骤比较简单,默认的安装即可。安装完成后,初次打开 CodeBuddy IDE 开发工具,需要进行初始化设置。我们可以直接初始化 UI 风格以及语言模式
或者也可以等安装完成之后,进入 CodeBuddy IDE 开发工具后通过设置来个性化设置自己需要的内容。
安装完成后打开 CodeBuddy IDE 开发工具选择【Login】通过微信授权登录即可
登录微信账号之后,如果想要设置 CodeBuddy IDE 开发工具,可以选择右上角的【小人】头像。如果你想要设置开发工具的语言模式,这里我们可以选择【IDE Settings】
在 IDE Settings 页面选择【General】,设置【Display Language】-【中文(简体)】即可设置开发工具的语言展示模式为中文
设置完成后,需要重启 CodeBuddy IDE 即可生效。
学生管理系统
需求描述
这里我们想要开发一个学生管理系统,用于管理学生信息,班级信息,成绩信息等数据,方便在不同的阶段针对不同学生的成绩来指定更有针对性的学习方案,从而提高学生的学习成绩,同时也可以激发学生对学习的兴趣,掌握更多的知识。
在有了需求之后,下面我们就可以将我们的需求整理成为一段 AI 更容易理解的内容,比如:【你是一个开发专家,我需要开发一个学生管理系统,包含以下功能:学生信息管理、班级信息管理、成绩信息管理、成绩分析等功能,现在,帮我实现吧。】
功能开发
在有了需求内容描述之后,我们可以将我们的需求内容直接放入 CodeBuddy IDE 的 AI 对话框中,
当让,如果你担心你的描述 AI 理解不明白,我们也可以选择【Enhance prompt】来让 AI 对我们的需求内容进行润色,润色后的需求内容如下:
那么下面我们就可以发送我们的需求来让 CodeBuddy IDE 帮助我们实现我们的学生管理系统了。在接收到我们的需求后,CodeBuddy 会自动根据我们的需求内容分析并制定项目规划,生成任务列表
在完成一阶段开发之后,CodeBuddy 会针对当前阶段开发的内容进行整理,并给出启动命令,检查当前阶段功能开发效果
由于当前我们的核心功能还没有开发完成,因此我们在 AI 对话框中输入【继续开发剩余的核心模块】,那么 CodeBuddy 会自动进行剩余核心模块的开发,最后就可以完成项目最初设定的任务列表中的开发内容。整个开发过程持续的时间可能会比较长,虽然不用人手工写代码开发,但是也是需要等待 CodeBuddy 来自动执行任务列表的所有功能开发的。在开发过程中,我们可以打开 AI 对话框上方的任务列表来实时监测任务列表的进度情况,以及具体创建的文件信息
等待所有内容开发完成后,CodeBuddy 会对本次需求的全部开发内容做一个汇总,同时介绍使用的技术架构,快速启动命令,默认账户,系统特色功能,项目文件结构概览等内容
最终完成版本的学生管理系统的源码结构如下图
下面我们就可以按照上面提供的操作命令来部署项目了。本地部署完成之后可以通过本地浏览器查看系统页面。
问题处理
对于在项目启动过程中,以及后续运行过程中遇到的问题可以通过 CodeBuddy 来分析处理,比如在启动前端项目访问时遇到这样的问题
在启动后端项目时,由于本地的 Java 版本和 Maven 版本与当前学生管理系统 的版本不一致而导致启动问题
同样的操作,我们可以把我们遇到的问题直接复制到 CodeBuddy AI 对话框,让 AI 来协助我们分析处理
对于版本兼容性问题,CodeBuddy 也会根据我们当前环境的版本来对后端代码的兼容性做出调整,以适应当前的 Maven 环境。当然,这里也是需要我们有足够的耐心的。对于项目的开发需要等待 CodeBuddy 按照任务列表逐项完成。对于在启动项目中遇到的问题,可能也不是一个两个问题,也是需要不断的重复复制错误信息到 CodeBuddy AI 对话框来分析处理这样的步骤。
等到所有的问题都修复之后,我们就可以通过 MCP Server 来尝试直接部署到我们的腾讯云 Lighthouse 了。
部署 Lighthouse
获取 SecretId、SecretKey
在为 CodeBuddy IDE 安装腾讯云 Lighthouse MCP Server 之前,我们首先需要获取 SecretId、SecretKey,获取 SecretId、SecretKey 的 地址:https://console.cloud.tencent.com/cam/capi 。选择【API 密钥管理】-【新建秘钥】-【复制】复制新建的密钥备用
MCP Server
下面我们来配置安装腾讯云 Lighthouse MCP Server,在配置 MCP Server 之前,我们先来简单介绍一下 腾讯云 Lighthouse MCP Server。腾讯云 Lighthouse MCP Server 是基于腾讯云 Lighthouse API 开发的 MCP (Model Context Protocol) ,为 AI 大模型提供强大的腾讯云轻量应用服务器(Lighthouse)管理能力。支持多种工具类型和智能化的云资源操作。
在腾讯云 MCP 广场:https://cloud.tencent.com/developer/mcp 搜索【Lighthouse】可以看到我们需要的 MCP Server
在打开的 MCP Server 页面右侧输入我们上面获取到的 SecretId、SecretKey 并连接,连接成功后可以获取到我们的 MCP Server SSE 连接配置地址
在 CodeBuddy IDE 开发工具打开【My MCP】-【Config MCP Server】
在打开的配置页面输入我们在 MCP 广场获取到的 SSE URL 连接地址后保存,可以看到我们的腾讯云 Lighthouse MCP Server 已经连接成功,同时可以看到当前 MCP Server 所包含的 50 个工具,及每个工具的具体名称
部署到 Lighthouse
在自动发布之前,这里需要说一点遗憾。在我的学生管理系统中,根据我提供给 AI 的描述【你是一个开发专家……】AI 根据我的功能为我生成了前后端分离的项目,同时生成了 Java 后端代码,前端页面代码,数据库表结构等。但是对于 CodeBuddy IDE 来说,CodeBuddy IDE 并不能支持在本地部署启动后端的 Java 项目,包括上面不断尝试处理问题中的 Maven jar 包问题,JDK 版本问题,登录授权问题,请求问题等。最终不得不放弃想要在 CodeBuddy IDE 终端实现启动前端项目+启动后端项目的全功能项目。
为了更好的演示借助于腾讯云 Lighthouse MCP Server 自动部署本地项目到腾讯云 Lighthouse 服务器的操作,这里我们更改了我们的需求描述:【你是一个前端开发,我需要开发一个学生管理系统,包含以下功能:学生信息管理、班级信息管理、成绩信息管理、成绩分析等功能,现在,帮我实现吧。】并重新生成了一个前端代码
同样的实现了学生管理系统期望的核心功能以及在本地的自动部署
本地部署完成后,可以通过访问 http://localhost:3001 链接来查看我们的学生管理系统功能
下面我们正式来通过 MCP Server 部署我们当前的学生管理系统到腾讯云轻量应用服务器,在 AI 对话框中输入【部署当前项目到腾讯云 Lighthouse 】
这里我们看到部署后的请求链接其实是 Cloud Studio :http://cf7af9c9b89e40d4b446d5c70dc8890f.codebuddy.cloudstudio.run/
回过头再来看 MCP 广场关于腾讯云 Lighthouse MCP Server ,没有关于部署项目到腾讯云 Lighthouse 的工具
那么我们可以考虑将我们的学生管理系统发布到 EdgeOne Pages ,配置 MCP Server
配置完成 EdgeOne Pages MCP Server 之后,在 AI 对话框中输入我们的需求【部署项目到 EdgeOne】,CodeBuddy 会自动调用 EdgeOne Pages MCP Server 的工具并执行部署任务,部署成功后可以复制成功后的连接访问
这里我们可以看到部署成功后的效果
到这里,我们本次基于 CodeBuddy IDE 实现学生管理系统,并一句话部署到腾讯云 Lighthouse 或者 EdgeOne Pages 的操作就圆满成功,对于本次的操作,有一些尚未实现的内容:
1.想通过 CodeBuddy IDE 来实现 Java 项目的本地启动,目前还没有实现;
2.想通过腾讯云 Lighthouse MCP 服务来一句话发布本地项目到腾讯云 Lighthouse,目前还没有专门的 MCP Server 可以调用;
3.对于 Java 后端项目想要通过一句话部署到腾讯云 Lighthouse,那么腾讯云 Lighthouse 就需要提前有容器(tomcat,其他)以及数据库(Mysql)服务,请求转发(Nginx)服务,JDK(代码编译运行环境)等。
写在最后
在这次用 CodeBuddy IDE 开发学生管理系统的过程中,我深刻感受到了 AI 编程带来的革命性变化。整个过程就像拥有了一位全能的编程伙伴,我只需用自然语言描述需求“需要开发包含学生信息管理、班级管理、成绩管理和分析功能的系统,AI 就能立即理解并自动生成详细的项目规划。我们可以看着 AI 一步步创建 Vue 前端页面、设计数据库结构、实现增删改查功能,那种“动动嘴皮子就能写代码”的体验实在太神奇了。虽然途中遇到了环境配置、依赖包缺失等技术问题,但只需把错误信息粘贴给 AI,它就能精准诊断并提供解决方案。最让我惊喜的是,当复杂的成绩分析图表需要调试时,AI 不仅能修复代码,还能解释问题根源,让我这个前端新手在解决问题的过程中真正学到了东西。
在部署环节,我体验了从本地开发到云端发布的无缝衔接。虽然最初设想的腾讯云 Lighthouse 一键部署因工具限制未能实现,但是我们可以通过配置 EdgeOne Pages MCP Server,只需在对话框中输入“部署项目到 EdgeOne”,AI 就能自动完成整个发布流程,几分钟后就能获得一个可分享的线上访问链接。这种“一句话部署”的体验,彻底改变了传统开发中繁琐的服务器配置过程。回顾整个项目,从需求分析到上线运行,CodeBuddy IDE 真正实现了“所想即所得”的开发模式。尽管在 Java 后端项目支持上还有提升空间,但它已经让个人开发者享受到了曾经只有大团队才具备的快速交付能力。
#CodeBuddy #CodeBuddyIDE #CodeBuddyCode #无界生成力
版权声明: 本文为 InfoQ 作者【六月的雨在InfoQ】的原创文章。
原文链接:【http://xie.infoq.cn/article/99a1bc10680498cc1a38a2077】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。







评论