AI 工具站开发:3 小时 SOLO,全栈开发+自动部署

本文作者:X 小鹿,TRAE 开发者用户

2023 年初接触 AI 编程工具时,功能还局限于代码补全和片段生成。如今,AI IDE 已能通过一句话完成产品从设计到部署的全流程开发。

市场上的 AI IDE 呈现多样化发展,对于编程新手,图形界面的 AI IDE 更易上手。本文将展示使用 TRAE SOLO 完成全栈项目开发的完整实践。

TRAE SOLO:行业首个 Context Engineer

TRAE 分为国内版(www.trae.cn/)和 国际版(www.trae.ai/),分别内置有不同的大...

国内版的 TRAE 主要集成了豆包、Kimi、Qwen、GLM、DeepSeek 等国内主流的大模型,而国际版 TRAE 主要集成了 Claude、Gemini、GPT 等国际主流的一些大模型。

选择适合的版本下载安装就可以了。

打开 TRAE 后,在左上角可以看到 TRAE 有两种模式:IDE 模式 和 SOLO 模式。(点击可以切换)

TRAE SOLO 模式,是 TRAE 在 7 月新推出的一项更新。用户仅需描述需求,系统即可智能获取上下文,自动完成从设计到部署的全流程。

下面的案例,就是在 TRAE SOLO 模式下完成的。

实战项目:AI 工具站开发

这个案例是从零开发、上线一个 AI 工具站(含用户端和管理端),涉及前端、后端、数据库操作等。

  • 用户端: 用来展示工具、根据分类和关键字快速检索工具;
  • 管理端: 用来添加、删除工具和更改工具的信息。
  • 数据来源: 为了简单,就直接用我之前维护的一份飞书文档来填充数据,里面有 200 多个 AI 工具及工具教程。

下面是这份文档的部分内容:

描述需求

我们只需要在对话框中简单描述下任务需求,点发送,就可以看 TRAE 帮我们干活了。你也可以通过上传图片或 Figma,来规定具体的样式。比如这里就简单上传了张草图,来描述每个 item 的大概样式。

点「优化」按钮,还可以对现有提示词进行优化。

智能需求分析与设计

TRAE SOLO 在接到需求后,就开始干活了。它先是创建了「产品需求文档」和「技术架构文档」,用于指导后续的开发。

产品需求文档:

包含了产品概述和核心功能定义、用户角色设计(普通用户和管理员)、详细的页面功能模块规划、用户界面设计规范和响应式设计策略、完整的用户流程设计等。

技术架构文档:

包含了架构设计、完整的路由定义和 API 接口设计、详细的数据库模型设计、完整的 SQL 建表语句和安全策略配置等。

如果有需要调整的,可以在对话框中继续输入或者在文档中修改。点「查看变更」,可以看到修改前后的对比。

自动化开发实施

如果没有问题, TRAE 就可以开始开发了。

TRAE 先是根据技术架构文档,创建了项目的脚手架,并自动安装了所需的依赖包。

然后创建了一份待办事项列表:

TRAE SOLO 会根据待办事项列表来逐步完成开发步骤。

每完成一项,都会更新状态。让我们清楚它的进度。

所有任务开发完后,点「预览」,就可以在右侧的「浏览器」中,查看效果了:

对于不满意的地方,可以继续在对话框中提需求。

比如,在它一开始展示工具的时候,并没有用到飞书文档中提供的数据,而是自己随便拟了 5 个 AI 工具来展示。那么就可以继续追问。

TRAE 分析了可能的原因,并给出了解决方案,最后还是决定,直接从飞书文档中导出一份 CSV 文件给它。

之后它自己写了「数据清洗」的脚本和「批量导入数据库」的脚本,将清洗后的数据成功导入了数据库。

实用调试技巧

分享一些小技巧。

批量错误处理:

比如程序报错了,在控制台里点「添加到对话」,就可以一次性将多个报错信息告诉 TRAE,让它修复。

精准元素修改:

再比如,想对画面中的某个元素进行修改,可以直接选择这个元素,「添加到对话」进行针对性的修改。

集成 Supabase

因为项目涉及后端服务和数据库操作,比如数据库的存储和操作、图片的存储、以及登录管理端的身份验证,这些都是需要用到 Supabase 的。

Supabase 数据库存储:

Supabase 图片存储:

TRAE SOLO 直接将 Supabase 服务集成了进来,不需要我们了解太多数据库和后端技术了,大大简化了上手难度。

第一次连接需要授权。

在 Supabase 里新建一个项目:

授权连接 Supabase、选择项目后,TRAE 就可以自动帮我们完成数据库建表、增删改查及用户认证等操作。

比如,下面这些,建表、插入数据、添加策略、写批量插入数据的脚本啥的,完全不需要自己动手,TRAE 全部帮我们做了。

也可以在「集成」里管理 Supabase 服务:

一键部署上线

以往部署上线一个项目,需要自己在服务器上安装、配置各种服务,还需要开放端口、绑定域名等各种操作。对于非程序员来说,有一定难度。

而 TRAE SOLO 支持将开发好的项目一键部署上线。

点对话中的「部署卡片」、或浏览器右上角的「部署按钮」:

第一次部署需要授权

部署好好后,就可以直接把链接分享给朋友了。

如果后续有新的修改,修改后可以点「部署新版本」。

项目结果展示

最后来看下用 TRAE SOLO 实现的效果吧~

写在最后

以上就是今天的分享,用一个小案例,来演示了 TRAE SOLO 的主要功能和玩法。

从需求提出,到编写产品需求文档和技术架构文档,再到前后端开发,及最后的部署上线,整个过程都非常顺畅。不需要懂太多的编程技术、数据库操作和服务器操作,直接用大白话沟通需求、描述问题就行了。

记得几个月前,用 AI 编程工具改一个需求时,还经常修改好几遍都改不好。而现在,明显提升,只要表述清楚,基本一两遍就能改好。

曾以为「AI 提效」只是个遥远的口号,如今,它用实实在在的生产力做出了有力的回答。

相关推荐
用户4099322502121 天前
FastAPI的CI流水线怎么自动测端点,还能让Allure报告美到犯规?
后端·ai编程·trae
豆包MarsCode1 天前
效率提升 45%!TRAE 辅助下的 uni-app 跨端小程序工程化开发实践
trae
围巾哥萧尘2 天前
使用 TRAE cn 打造 AI 编程 IDE 工具的安装指南网站🧣
trae
cpp加油站2 天前
项目上线后,我发现一个残酷的事实:AI编程2.0时代,会写代码成了次要的能力
ai编程·trae
Goboy2 天前
TRAE SOLO:原来真的可以有一人公司
trae
用户4099322502123 天前
如何用 Git Hook 和 CI 流水线为 FastAPI 项目保驾护航?
后端·ai编程·trae
豆包MarsCode5 天前
TRAE MCP 实践:用高德地图搭建旅游攻略系统
trae
兵临天下api5 天前
淘宝自定义 API 操作深度分析及 Python 实现
trae
用户458203153175 天前
使用Trae做一个简单的天狗食日动画效果试试
前端·trae