我:写个任务系统。Trae:前端、后端、文档都给你,再帮你开个源吧!

2,783 阅读8分钟

我正在参加Trae「超级体验官」创意实践征文,本文所使用的 Trae 免费下载链接:www.trae.com.cn/?utm_source…

我只是随口一问,它居然……

事情是这样的,我原本只是想练练手,做个小任务清单页面。

结果我打开 Trae,说了一句:“能帮我写一个任务管理应用吗?”

它就开始疯狂输出:

  • 这是 Vue 前端页面
  • 这是 Spring Boot 后端接口
  • 这是 README 文档
  • 再帮你上传到 GitHub 吧!

我:woc无敌!

Trae 是怎么帮我“从无到有”搞出项目的?

初步生成

首先我试着让 Trae 帮我初步设计下整个项目。

提示词:能帮我设计一个包含前后端的任务管理小项目吗?前端基于vue3,后端基于SpringBoot3

结果它直接给我整了个大的,不仅把项目给我设计好了,居然还给我写了份《项目实施计划》?关键是还写的有模有样的,就好像跟领导汇报工作一样,但现在我变成领导了……

然后这哥们就一直输出一直写,给你看看它都干了些什么,像下面这样的处理过程,还有很多,我就这么看着它一步一步把项目搭起来了!

等他这一波输出完毕之后,就已经可以看到项目雏形了。我大概看了一眼,肯定是处于还没写完的状态。

毕竟才写了一句提示词,能做成这样已经挺不错的了。

image.png

然后我就让它继续完善后端的代码,同时让他帮我把项目中使用的框架换成我习惯的Mybatis-Plus。

提示词:帮我给整个项目的后端代码重新生成一下吧,后端看起来还差了挺多代码的,前端好像基本写好了。你写的时候参考下前端已经接入的那些api吧。后端代码我想用Mybatis-Plus来代替jpa。

对了,它为了节省我安装数据库的步骤,给我生成的代码中用的是H2数据库。

我以前没用过这玩意,然后去搜了一下,发现这个东西都不需要安装,直接引入Maven依赖就可以用了。

他真的,我哭死!

调试阶段

在经过两轮代码生成之后,我感觉已经差不多写完了,可以先跑起来看看效果,然后再决定后续优化的事情。

后端项目是直接跑起来了,但是前端项目,出了点小故障:

不过这个故障比较简单,我一个后端都能看出来是什么问题,它导入了一个不存在的页面,我直接把这段代码给注释掉,然后再运行就不报错了。

我们可以直接使用 Trae 自带的预览窗口来看看样式,很简洁,不算丑,作为自用的ToDo应用来说的话,也还算看的过去。

当我尝试着进行登录、注册流程,bug就冒出来了。

我就说不可能这么顺利,两句话就能搞定这个项目,那可真要把我的饭碗给抢了。

我简单的排查之后,发现问题主要出在后端代码上:

  1. 服务端鉴权异常,拿不到用户数据。
  2. 虽然用的是h2数据库,不需要安装,但也没建表哇!

经过我和 Trae 的一顿友好沟通之后,它也是乖乖的帮我把这两个问题给解决了,解决过程还算顺利,就给大家看一下聊天记录算了,具体的我就不解释了。

建表的时候它还顺便帮我修改了一下配置文件,让项目启动的时候自动创建数据表。

唯一的缺点就是这套 h2数据库 + 自动建表 的方案在每次重启项目的时候都会丢弃掉我之前创建过的数据。

如果需要改成持久化的话,在配置文件里面改一下数据库配置,连到自己的MySQL上就好了。

成果展示

搞定完上面几个bug之后,项目已经基本可以使用了,主流程已经可以跑通了。

经过我的测试,仍然还是有一些交互上的问题:

  • 首页的宽度和其他页面的宽度不一致,进入其他页面时,页面宽度会变大。
  • 点击退出登录以后不会回到登录页面,需要刷新才行。

下面给大家展示一下初步的成果。

添加完任务回到首页之后,发现居然还有任务时间线,这个还真不错。

Trae 利用 MCP 帮我把项目开源了

说明:最新版本的 Trae 支持 MCP,并且有内置的 MCP 市场,可快速添加第三方的 MCP Servers,灵活调用 MCP 工具。

配置 MCP

既然代码都已经写出来了,这不得给大家开源一波?刚好 Trae 的 MCP 市场里已经内置接入了 GitHub,那咱也来体验体验。

点击加号,添加 GitHub MCP Server,这里需要授权一个 GitHub Personal Access Token,点击带下划线的 here,会直接帮我们跳转到对应的界面。

进到 GitHub 的 Token 配置界面,点击 Generate new token,然后根据自己的需求选择 token 类型,再按照操作提示就可以拿到 token 了。

这边建议直接生成一个 classic 类型的 token ,省事。如果你不放心的话,可以在 Trae 每次执行 MCP 调用的时候审查一下请求内容。

拿到 token 之后填入到 Trae 当中,这样我们就配置好了,很方便。

一些灵感

接入成功后,它可以帮我们做很多事情,包括 创建仓库、创建分支、创建PR、创建issue、添加issue评论、修改文件、搜索代码 等等,有了这些功能,AI 模型可以帮我们可以做很多事情。

我随便举几个列子:

  • 阅读他人源码时发现一段代码可能有bug,直接让 Trae 帮我们核验是否有bug,并且让它自动提一个issue。
  • 想给开源项目贡献代码时,直接让 Trae 帮我们找一个还没解决的 issue,然后让它把问题解决了再提个 PR 上去。

想想我都觉得有意思,不过我也不知道目前的可行性怎么样,有兴趣的朋友可以试一试,然后来评论区跟大家分享分享。

发布项目

接下来,我们该让 Trae 帮我们上传项目了。

提示词:帮我给项目取一个有网感的名字,可以参考下网上流行的项目,然后帮我把这个项目上传到GitHub上,新建一个开源的仓库。

可以看到聊天记录中 Trae 调用了 GitHub MCP Service,帮我们先创建了一个仓库,然后帮我们提交了代码,完全无压力,我直呼牛币!

甚至还把最重要的 push 操作留给了我,好让我也有点参与感。它真的,我哭死~

然后咱上 GitHub 看看,针不戳啊,有模有样的,甚至还弄了个 MIT 开源协议。

Trae 利用Web搜索优化项目

说明:最新版本 Trae 支持 #Web 和 #Doc 两种 Context。#Web 可联网搜索并自动提取网页内容;#Doc 支持通过 URL 或上传 .md / .txt 文件创建文档集,最多支持 1000 个文件(50MB)。

之前不是还留了几个交互上的bug嘛,我寻思让 Trae 帮我再解决一下。

我还觉得前端页面的样式和交互有点不太舒服,但是我自己又不太懂这一块,毕竟我只是个喜欢吹水的废物后端。

既然这样,那正好体验一下 Trae 的Web搜索能力,让它参考网上流行的设计和交互,帮我们优化一下样式,顺便修一下bug。

还别说,还挺好使。

Trae 参考了网上的一些博客文章,在浏览器兼容和性能优化上做了一些文章。

改完之后首页变成了这个样子,之前是只有最中间那三分之一的区域有内容,现在是占满全屏了,我提的那两个bug也修复了。

怎么说呢,比起原来的,确实好看些了,但是还有优化空间。

(参考下原来的首页 ↓ )

其他功能

目前 Trae 最新版本,除了我上面用到的 MCP 以及 上下文能力增强 之外,还新增了其他亮点功能:

  • 规则系统上线:支持配置个人与项目规则,规范项目内 AI 行为。
  • Agent 能力升级:支持通过 prompt 和 tools 自定义 Agent。内置 Builder Agent 和 Builder with MCP,支持自动运行模式,自动执行命令和调用工具,并支持配置命令黑名单。
  • 统一对话体验:Chat 与 Builder 面板合并,支持通过 @Builder 进入 Builder Agent 模式。

这些也都是很实用的功能,由于文章篇幅问题,这里我就不一一给大家演示了,感兴趣的朋友们可以自行体验~

最后

能做成这样,我已经很满意了,毕竟这才花多少时间。唯一比较费时间的点就是排队了,希望以后有实力了能把这块搞定一下。

整体体验下来,我是真觉得牛币,当前阶段的 AI,已经可以做到几乎独立的做出完整项目了,再发展几年,不敢想象会有多恐怖。

各位同僚,时代在进步,倘若你我原地踏步,只怕这时代的一粒沙,真的会成为你我的一座山。

最后,开源地址给大家附上,欢迎感兴趣的朋友参观:github.com/stick-i/nex…


对了,记得让 Trae 写份声明,有bug它来背锅。