跳至主要內容

一、CodeBuddy Craft,我的编程搭子

悟空约 5327 字大约 18 分钟...

一、CodeBuddy Craft,我的编程搭子

你好,我是悟空。

背景

最近项目组事情挺多,一个人要干多个人的活,而且写后端 Java 代码的同学还要懂前端代码,但是对前端不熟悉,就会造成写出来的代码很蹩脚,更重要的是写出来的代码可能会埋下很大的坑,不仅给后续的测试造成负担,而且可能会在上线后曝雷。为了写好前端代码,我想通过一款 AI 辅助编程工具和我一起把前端代码写好,于是 CodeBuddy 开发工具来到了我的身边,结对编程,真香。下面我们来看下这款开发工具。

CodeBuddy Craft 概述

CodeBuddy Craft 是腾讯云推出的一款智能软件开发工具,以下是关于它的详细介绍:

功能特点

  • 自然语言生成代码:用户可以通过自然语言描述需求,Craft 能够理解并自动生成完整的项目代码。例如,输入“我想开发一个音乐播放器应用”,Craft 就能生成包含播放页面、个人中心、歌单创建等页面和文件的完整项目代码。
  • 多文件协同编辑:Craft 支持对多个文件进行协同编辑和改写。在修改代码时,它会自动感知上下文,提示需要同步更新的其他文件。
  • 版本管理:支持版本管理功能,用户可以查看历史版本的代码,进行版本回退、重新编辑以及查看不同版本之间的差异。
  • 支持 MCP 协议:作为国内首个支持 MCP 协议的 AI 编程工具,Craft 能够直接打通测试、构建、部署整个流程,生成的代码可以直接发布上线投入使用。
  • 智能工程理解:升级的工程理解功能可以支持对百万行代码的秒级解析,自动标注模块依赖和调用关系。
  • 代码补全与测试覆盖:提供更智能的代码补全预测,能够准确预测开发者的下一个代码需求;同时支持主流测试框架,自动生成测试计划和边界用例,提升测试的有效性和覆盖率。

和 Craft 结对编程

Craft 的功能是非常强大的,这次我们仅仅只用上帮我分析代码中的问题、添加代码注释。

分析哪个文件

我以为 CodeBuddy Craft 能直接访问我打开的文件,没想到它是需要去查找的。类似这样提问:

CodeBuddy 它其实不知道你要分析哪个文件。必须提供文件路径才行,希望 CodeBuddy 官方可以优化下这个工具~

那我们还是提供一个文件路径,再次提问,我直接给了一个文件名 exam.vue,并不是一个文件路径。如下图所示:

CodeBuddy 还会用 read_file 工具来读取 exam.vue 文件,然后告诉我读取失败,我以为这就完了,没想到它还是遍历整个文件工程,太炫酷了!

经过5次遍历查找,终于找到了 exam.vue 文件。如下图所示:

开始分析文件

CodeBuddy 开始分析 exam.vue 文件中的问题。

然后可以选择让 CodeBuddy 自动添加代码注释,还是用询问的方式,这里直接选择自动方式。

CodeBuddy 就会自动一步步添加注释。如下图所示:

还可以查看每一步变更的内容,如下图所示:

最后 CodeBuddy 会总结修改了哪些内容,还是很贴心的。如下图所示:

查看变更

我们通过 Git Diff 来查看文件变更内容,如下图所示:

CodeBuddy 真是一个出色的编程助手!它为这个函数添加了详细的注释,清晰地阐述了该函数的功能、传入参数的含义以及可能存在的问题。这不仅帮助我们快速理解代码的逻辑,还节省了我们手动排查和修改代码的时间。更令人惊喜的是,它直接给出了需要修改的代码,这意味着我们无需再手动去修改,直接应用即可。这样的工具简直就是编程过程中的得力伙伴,真正做到了高效、便捷,大大提升了我们的开发效率!

CodeBuddy Craft 成为了我的编程搭子!

二、用 CodyBuddy 帮我写自动化运维脚本

你好, 我是悟空。

背景

我个人是非常喜欢 Jenkins 自动化部署工具的,之前都是手写 Jenkins Pipeline 脚本,这次正好有腾讯开发的代码助手open in new window,可以体验下 AI 工具的强大。

下载工具和安装工具

首先进入到下载页面,可以选择安装到 VS code 或者 IDE 中。这里我选择安装到 VS code 中,因为写 Jenkins 流水线脚本,用轻便的 VS code 即可完成。如下图所示:

img
img

安装 CodyBuddy 插件,安装完成后如下图所示:

img
img

用代码助手辅助写 jenkins 流水线脚本

提示词:

我现在需要部署后端微服务,帮我实现 Jenkins pipeline流水线脚本,支持选择不同的微服务或者ALL,git分支,替换 JAR 包,启动 JAR 包,备份jar包等。

CodeBuddy 开始回答我的问题:

img
img

代码语言:txt

AI代码解释

pipeline {
    agent any

    parameters {
        choice(
            name: 'SERVICE',
            choices: ['service1', 'service2', 'service3', 'ALL'],
            description: '选择要部署的微服务(ALL表示全部)'
        )
        string(
            name: 'BRANCH',
            defaultValue: 'main',
            description: '输入Git分支名称'
        )
        string(
            name: 'JAR_VERSION',
            defaultValue: 'latest',
            description: '输入JAR包版本号'
        )
    }

    stages {
        stage('代码检出') {
            steps {
                checkout([
                    $class: 'GitSCM',
                    branches: [[name: params.BRANCH]],
                    userRemoteConfigs: [[url: 'YOUR_GIT_REPO_URL']]
                ])
            }
        }

        stage('备份JAR包') {
            steps {
                script {
                    if (params.SERVICE == 'ALL') {
                        sh 'mkdir -p backup && cp target/*.jar backup/'
                    } else {
                        sh "mkdir -p backup && cp target/${params.SERVICE}-*.jar backup/"
                    }
                }
            }
        }

        stage('替换JAR包') {
            steps {
                script {
                    if (params.SERVICE == 'ALL') {
                        sh 'cp /path/to/new/jars/*.jar target/'
                    } else {
                        sh "cp /path/to/new/jars/${params.SERVICE}-${params.JAR_VERSION}.jar target/"
                    }
                }
            }
        }

        stage('启动服务') {
            steps {
                script {
                    if (params.SERVICE == 'ALL') {
                        sh 'nohup java -jar target/*.jar &'
                    } else {
                        sh "nohup java -jar target/${params.SERVICE}-${params.JAR_VERSION}.jar &"
                    }
                }
            }
        }
    }
}

主要功能说明:

  1. 支持参数化构建:
  • 选择微服务(包括ALL选项)

  • 指定Git分支

  • 指定JAR包版本

  • 完整部署流程:

  • 代码检出

  • 备份现有JAR包

  • 替换新JAR包

  • 启动服务

  • 注意事项:

  • 需要替换YOUR_GIT_REPO_URL为实际Git仓库地址

  • 需要调整/path/to/new/jars/为实际JAR包存放路径

  • 服务名需要与实际的JAR包命名格式匹配

  • 根据实际情况可能需要调整启动命令参数

CodeBuddy 还会提示关联问题。单击关联的题目可以继续对话。

如何优化这个Jenkins流水线脚本以实现多环境部署?

img
img

代码语言:txt

AI代码解释

pipeline {
    agent any

    parameters {
        choice(
            name: 'ENVIRONMENT',
            choices: ['dev', 'test', 'staging', 'prod'],
            description: '选择部署环境'
        )
        choice(
            name: 'SERVICE',
            choices: ['service1', 'service2', 'service3', 'ALL'],
            description: '选择要部署的微服务(ALL表示全部)'
        )
        string(
            name: 'BRANCH',
            defaultValue: 'main',
            description: '输入Git分支名称'
        )
        string(
            name: 'JAR_VERSION',
            defaultValue: 'latest',
            description: '输入JAR包版本号'
        )
    }

    environment {
        // 不同环境的配置变量
        DEPLOY_PATH = "${env.ENVIRONMENT == 'prod' ? '/opt/prod' : '/opt/non-prod'}"
        CONFIG_FILE = "config-${env.ENVIRONMENT}.yml"
    }

    stages {
        stage('代码检出') {
            steps {
                checkout([
                    $class: 'GitSCM',
                    branches: [[name: params.BRANCH]],
                    userRemoteConfigs: [[url: 'YOUR_GIT_REPO_URL']]
                ])
            }
        }

        stage('构建') {
            steps {
                script {
                    sh "make build ENV=${params.ENVIRONMENT} SERVICE=${params.SERVICE}"
                }
            }
        }

        stage('备份') {
            steps {
                script {
                    sh """
                    mkdir -p ${DEPLOY_PATH}/backup
                    cp ${DEPLOY_PATH}/*.jar ${DEPLOY_PATH}/backup/
                    """
                }
            }
        }

        stage('部署') {
            steps {
                script {
                    if (params.SERVICE == 'ALL') {
                        sh """
                        cp target/*.jar ${DEPLOY_PATH}/
                        cp ${CONFIG_FILE} ${DEPLOY_PATH}/config.yml
                        """
                    } else {
                        sh """
                        cp target/${params.SERVICE}-*.jar ${DEPLOY_PATH}/
                        cp ${CONFIG_FILE} ${DEPLOY_PATH}/config.yml
                        """
                    }
                }
            }
        }

        stage('启动服务') {
            steps {
                script {
                    sh """
                    cd ${DEPLOY_PATH}
                    nohup java -jar *.jar --spring.profiles.active=${params.ENVIRONMENT} &
                    """
                }
            }
        }
    }
}

优化点说明:

  1. 多环境支持
  • 新增ENVIRONMENT参数,支持dev/test/staging/prod环境选择

  • 通过environment块定义不同环境的变量

  • 环境差异化配置

  • 使用不同的部署路径(DEPLOY_PATH)

  • 加载对应环境的配置文件(CONFIG_FILE)

  • 启动时指定spring.profiles.active参数

  • 安全隔离

  • 生产环境(prod)使用独立部署目录

  • 非生产环境使用统一目录

  • 构建优化

  • 构建阶段传入环境参数

  • 支持按环境构建不同配置

  • 部署流程

  • 标准化备份流程

  • 统一配置文件处理

  • 支持服务批量部署

注意事项:

  1. 需要根据实际项目结构调整部署路径和配置文件命名
  2. 生产环境建议添加人工确认步骤
  3. 可考虑添加健康检查阶段确保服务启动成功

整体来说 CodeBuddy 速度快、关联问题很贴心、答案准确!

三、CodeBuddy 接入 MCP,一键生成网站!

你好,我是悟空。

最近 MCP 挺火的,正好 CodeBuddy 也支持 MCP 接入,所以可以体验一波。

对于 MCP 有些同学可能有些陌生,下面简单介绍下 MCP。

MCP 概述

2024 年 11 月,Anthropic 公司搞了个挺有意思的新玩意 - Model Context Protocol(模型上下文协议)简称为 MCP 协议。简单来说,它就是给 AI 和各类工具数据之间搭了个标准化的”桥梁”,让开发者不用再为对接问题头疼了。

大模型应用可以使用别人分享的 MCP 服务来完成各种各样的工作内容,你可以从这些地方获取 MCP 服务:

如下图所示,这是 mcp.soopen in new window 网站中的 MCP Server。

MCP 协议在实际的应用场景上非常广泛,列举一些比较常见的应用场景:

  • 使用百度/高德地图分析旅线计算时间
  • 接 Puppeteer 自动操作网页
  • 使用 Github/Gitlab 让大模型接管代码仓库
  • 使用数据库组件完成对 Mysql、ES、Redis 等数据库的操作
  • 使用搜索组件扩展大模型的数据搜索能力

MCP 的架构

MCP 的架构

MCP 主要分为 MCP 服务和 MCP 客户端:

  • 客户端:一般指的是大模型应用,比如 Claude、通过 Spring AI Alibaba、Langchain 等框架开发的 AI 应用
  • 服务端:连接各种数据源的服务和工具

整体架构如下:

图片
图片

整体的工作流程是这样的:AI 应用中集成 MCP 客户端,通过 MCP 协议向 MCP 服务端发起请求,MCP 服务端可以连接本地/远程的数据源,或者通过 API 访问其他服务,从而完成数据的获取,返回给 AI 应用去使用。

EdgeOne Pages MCP Server

这次我们要接入的 EdgeOne Pages MCP Server。那 EdgeOne Pages 又是什么呢?

EdgeOne Pages 概述

我们打开 MCP.soopen in new window 网站中的关于 EdgeOne Pages MCP 的描述,如下图所示:

网页中有一个英文描述:

An MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.

翻译过来就是:

一种 MCP 服务,用于将 HTML 内容部署到 EdgeOne Pages 并获取可访问的公共 URL。

简单来说,可以通过具有 AI 功能的客户端调用 MCP Server 将静态页面快速部署到公网上,并拿到一个公网 URL。

CodeBuddy 接入 MCP Server

首先我们得安装 CodeBuddy,这次我们选择 Cursor 开发工具。

在 Cursor 应用市场中搜索腾讯云代码助手,安装后即可使用。

然后在 MCP Server 中添加 EdgeOne Pages MCP Server

然后点击它的开始按钮,如下图所示:

接着 CodeBuddy 就会自动执行演示功能,edgeone-pages-mcp 提供了一个工具:deploy-html,用于部署HTML内容并返回公共URL。简单来说就是 CodeBuddy 调用 Edgeone Pages MCP 服务将网页部署到公网上。如下图所示:

我们直接访问这个公网 URL,打开的页面内容包含一个简单的标题和段落文本,如下图所示:

总结

本文介绍了腾讯云代码助手 CodeBuddy 接入 MCP 协议后,能够一键生成并部署网站的功能。

MCP 是一种标准化协议,用于连接 AI 应用和外部工具或数据源。通过接入 EdgeOne Pages MCP Server,CodeBuddy 可以快速将 HTML 内容部署到公网上并生成公网 URL,极大简化了静态网页的开发和部署流程。

四、一分钟用 MCP 上线一个 2048 小游戏

你好,我是悟空。

背景

现在 AI 辅助编程越来越强大,从最开始的 Agent、Function Calling,到现在的 MCP,学习 AI 成本的降低了很多。

这次我们用 CodeBuddy + MCP 开发一个 2048 小游戏,并部署到公网上。全程不用写代码,只需要和 CodeBuddy AI 工具对话即可。

MCP 介绍

Model Context Protocol(模型上下文协议)简称为 MCP 协议。简单来说,它就是给 AI 和各类工具数据之间搭了个标准化的”桥梁”,让开发者不用再为对接问题头疼了。

原理如下图所示:

MCP 主要是为了解决当前 AI 模型因数据孤岛限制,无法充分发挥潜力的难题,MCP 使得 AI 应用能够安全地访问和操作本地及远程数据,为 AI 应用提供了连接万物的接口。

CodeBuddy 接入 EdgeOne Page MCP Server

接入 MCP

如下图所示,点击 CodeBuddy 对话框的 MCP 按钮。

然后在 MCP 市场搜索 EdgeOne Pages,就能找到对应的 MCP 服务,点击安装即可。如下图所示:

安装完成后,会在一个 Json 配置文件中生成 EdgeOne Page MCP Server 的配置。

自动生成 2048 游戏

与 CodeBuddy 对话如下:

写一个2048的小游戏,并部署到 EdgeOne Pages。

CodeBuddy 开始进行游戏生成。

整体的思路如下:

  1. 任务分析:用户要求创建一个2048小游戏并部署到EdgeOne Pages。2048是一个经典的滑动方块数字合并游戏,需要实现游戏逻辑和界面。
  2. 技术选择:2048游戏可以使用纯HTML/CSS/JavaScript实现,不需要后端服务,适合部署到EdgeOne Pages。
  3. 实现步骤
    1. 创建HTML文件作为游戏入口
    2. 添加CSS样式
    3. 编写JavaScript游戏逻辑
    4. 部署到EdgeOne Pages
  4. 复杂度评估:这个任务涉及创建3-4个文件,复杂度适中,不需要拆分。
  5. 工具需求
    1. 首先需要创建游戏文件
    2. 然后使用edgeone-pages-mcp的deploy-html工具部署

CodeBuddy 通过对话的方式生成代码文件,如下图所示:

在本地可以看到生成的 html、js、css 文件,如下图所示:2

自动部署游戏到公网

CodeBuddy 自动调用 EdgeOne Pages MCP Server 服务,将代码上传了EdgeOne Pages 服务器上,并返回了公网 URL。

image-20250510221305000
image-20250510221305000

打开2048 游戏链接,就可以开始游戏了。

但是发现了 Bug,数字只出现在左上角,根本就玩不了。我们让 CodeBuddy 修复下 Bug。

修复 bug

向 CodeBuddy 提问:

有 bug,方块都在左上角。

然后 CodeBuddy 就会修复 Bug,并将修复后的代码部署为一个新的站点。

现在可以畅玩 2048 游戏了。

一分钟用 MCP 上线一个贪吃蛇小游戏

你好,我是悟空。

背景

上篇我们用 MCP 上线了一个 2048 小游戏,这次我们继续做一个 贪吃蛇的小游戏。原理如下图所示:

我们要做的步骤如下:

  • 使用 CodeBuddy 代码助手编写贪吃蛇小游戏
  • 使用 EdgeOne Pages MCP Server 上传小游戏代码到 EdgeOne Pages 服务器。
  • 拿到小游戏的公网 URL,浏览器直接访问 URL。

MCP 介绍

Model Context Protocol(模型上下文协议)简称为 MCP 协议。简单来说,它就是给 AI 和各类工具数据之间搭了个标准化的”桥梁”,让开发者不用再为对接问题头疼了。

MCP 主要是为了解决当前 AI 模型因数据孤岛限制,无法充分发挥潜力的难题,MCP 使得 AI 应用能够安全地访问和操作本地及远程数据,为 AI 应用提供了连接万物的接口。

开始写贪吃蛇小游戏

我们出点难点的要求。

提示语:请编写个一个贪吃蛇游戏,可以部署到web网站上。要求:样式美观,加上一些特效,有三条命可以立即复活。实时显示游玩时间,得分。

CodeBuddy 会根据这个提示语,进行一定的思考,可以看下它的思维链,如下图所示:

然后 CodeBuddy 就会自动生成代码文件。如下图所示:

然后 CodeBuddy 会将这个 HTML 文件部署到 Web 网站。CodeBuddy 调用 EdgeOne Pages 服务部署时,第一次失败了,接着它还会重试。

CodeBuddy 会将网站的地址显示在对话框中,如下图所示:

直接点击链接会自动打开浏览器访问部署完成的游戏站点。如下图所示的游戏界面:

  • 有得分记录,110分
  • 这一局玩的时长,31秒
  • 用掉了几条命,3条。
  • 显示游戏结束后的总得分 110 分。

总结

这篇文章介绍了如何使用 CodeBuddy 和 MCP 快速开发并上线一个贪吃蛇小游戏。通过 CodeBuddy 提供的提示语生成代码,并利用 EdgeOne Pages MCP Server 将游戏部署到服务器上。

CodeBuddy 会重试调用 EdgeOne Pages MCP 服务,即使首次部署失败也会自动重试,并最终生成可直接访问的公网 URL。

游戏界面包括得分记录、游玩时长和剩余生命值等信息,最终显示总得分。

CodeBuddy 在开发过程中的高效性和便捷性实在是太酷了!

CodeBuddy 助力小程序开发,一款面试答题小程序诞生

你好,我是悟空。

背景

之前我自己开源的一款产品 PassJava,它是帮助程序员进行Java面试的开源系统,采用流行的技术,如 SpringBoot、MyBatis、Redis、 MySql、 MongoDB、 RabbitMQ、Elasticsearch,采用Docker容器化部署。

小程序界面如下图所示:

这次我想通过 CodeBuddy 代码助手来实现一个简易版的面试刷题小程序。

微信开发者工具安装 CodeBuddy 插件

微信开发者工具已经支持安装插件了,我们在插件市场搜索腾讯云代码助手,就能看到 CodeBuddy 插件了,点击安装,就能直接使用了。

生成一个小程序模版

现在微信开发者工具在创建项目的时候,可以选择很多模版,有功能简单的,也有功能复杂的比如电商小程序。如下图所示:

这次我们选择一个最简单的模版,看看 CodeBuddy 能帮我们做到什么程度。如下图所示,只有一个获取头像和昵称的界面。

让 CodeBuddy 搓个小程序

提示语:帮我将这个小程序改成一个 面试刷题的小程序。

如下图所示:CodeBuddy 会尝试将上面的模版小程序改写成一个面试刷题小程序。

image-20250512202349136
image-20250512202349136

首先 CodeBuddy 会读取根目录的文件,然后会提示我这个需求太简单了,还需要加一些需求它才能继续干活。比如哪些面试题,包含哪些功能,比如题目收藏,错题本,还有数据来源是从后端获取还是小程序本地存储的静态数据,最后是 UI 风格是什么样的。如下图所示:

了解这些信息后,CodeBuddy 就可以制定一个更加详细的改造计划。等个几分钟后,所有的代码都会生成完成,如下图所示:

编译后,并不能直接运行,会报一些错误:

[ pages/question-list/question-list.json 文件内容错误] pages/question-list/question-list.json: According to the configuration of the page or app.json, the value of "renderer" in pages/question-list/question-list.json page is "skyline", the "navigationStyle" configuration for the page should be set to "custom"(env: macOS,mp,1.06.2503290; lib: 3.8.3)

将这个错误丢给 CodeBuddy,它会帮我们解决这些错误。

注意:如果它没有应用这些改动,我们可以手动修改。

实际效果和调整页面

我们来看下效果,如下图所示:首页包含了这些模块功能:搜索、题目分类、每日推荐、最近做题,还有底部的导航栏也修改, 但是首页的样式不太对。

那我们手动来微调下首页的样式,其他也比较简单。最后效果如下:

其他页面也有很多样式问题,这里就不再一一列举了。

总结

整体来说 CodeBuddy 还是挺给力的,比自己手搓要快很多。我们只需要输入需求,等待 CodeBuddy 自动编写代码,然后运行小程序,如果有异常,丢给 CodeBuddy 帮我们解决。最后再调整下样式,验证下功能是否正常,有问题的我们自己调整下就行。

评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0