上次看到晖哥使用Trae从零搭建了一个雷电云的埋点数据分析平台,感觉很有意思。正好迭代最后几天进入覆盖测试阶段,手上任务都做完了,也想搭建一个视频取证的数据统计分析平台;一来多学习学习前端知识,二来埋点数据可视化页面有助于团队基于数据做出更精准的决策和迭代优化。
项目说明 #
项目采用 Vite + Vue 3 + TypeScript 技术栈构建,并搭配了 Element Plus UI 组件库。通过 vue-router 管理页面导航,并使用 Axios 与公司部署的 Elastic APM 数据库进行交互。属于纯前端项目,没有任何后端代码。
项目使用Trae工具从零开始搭建,除了一些参数翻译字典手敲之外,全程由AI生成;项目所有功能都是基于视频取证产品埋点数据结构体设计,后续会根据产品需求在空闲之余继续添加功能;我是一个后端程序员,前端只是可以稍微看得懂代码。
效果展示 #
完整地址:http://172.16.60.141:3000 三楼同事可自行查看
概览 #
概览功能支持任务状态分布、版本分布、任务成功率等等。

数据展示 #
数据展示界面可删选所有记录、任务等,支持搜索等功能,详细界面还翻译了任务参数


任务使用排行榜 #
任务使用排行榜,分记录和任务两个维度,按使用次数排行。

点击具体任务,可查看此任务相关参数统计图,及每个任务的详细信息

像高级识别任务物体描述是加密上传到elastic平台的,这里还做了解密处理。

IP地址排行榜 #
IP地址排行榜对不同IP的数据进行了分类统计排序,可直观看到我们的用户分布。

心得体会 #
最热门编程语言 #

这张图内大多数情形我们或多或少都经历过,虽说是网上的段子,但它真实记录了我们驾驭AI过程中走过的路。
转变角色 #
随着AI技术的发展,特别是像Trae这样的编程助手,正在如何重塑我们的开发工作流。我们基本上不再编码,是否可以逐渐向“架构师”的方向转变,从执行者到定义者再到决策者。技术知识仍然重要,但更重要的是理解业务需求、系统设计和用户体验等更广泛的技能。
整体规划 #
开发项目之前,先想清楚要做什么?它的框架是什么样的?想清楚之后,将它写入一个文档,可以让AI进行润色。我们在后面开发的过程中可以根据实际情况不断的修改这个文档,每当AI开始不受控制胡说八道的时候,先让它阅读一下这个文档,再跟上你的功能需求描述。
不仅仅是框架,当遇到一些重复且复杂的任务,也可以写成文档,让AI根据文档的流程去处理,避免AI自行发挥。
一次只办一件事 #
一次只办一件事情,不要让它同时做多个任务,贪多必失
你必须看得懂代码 #
如果你不知道它生成的代码是什么意思,或许刚开始没有什么问题;但随着你问的问题越来越多,功能越来越复杂,你埋下的“坑”就会像雪球一样越滚越大。一个微小的改动都可能引发连锁反应,AI还自行解决不了。由于你从未真正理解底层逻辑,排查和解决问题的困难很大,只能不断地将报错复制给AI,继续生成更多不可控的代码,形成恶性循环。
不要随意接受任何代码 #
当我们发现功能没有问题的时候,很容易接受所有代码。但这样会有隐患,你不知道它在什么时候改了一行会影响到其他功能的代码,与其后面排查半天,不如每次仔细审查每一行代码。
先问自己在问什么? #
这是我在某个文章中看到的一句话,很受触动。
比如你在开发一个项目前,你问别人,你用什么开发工具?
很正常的提问,却是一个非常差的问题,因为它需要多步的沟通来确认真正的问题,跟晖哥之前说的“报联商”有相似的地方。比如,你指的是那类开发工具?(IDE、文本编辑器、版本控制、API测试?),或者针对什么技术栈?(前端、Java、Go、Python?),由或者你的使用场景是什么?
正确的提问方式是什么? 以“开发工具”这个问题为例,先想清楚我要问什么。
- 你为什么想问这个? 是你正在用的工具遇到了问题(例如:“VS Code在打开大型项目时卡顿,有何优化方案?”),还是你要开始学习一门新语言(例如:“刚开始学Go,有哪些轻量级的IDE推荐?”)?如果是前者,这完全是另一个“解决问题”而非“寻求推荐”的问题。问题解决了,你根本不用换工具。
- 如果你想找一个新工具,最基本的,你要定义什么是“合适”,罗列完整自己的需求。哪些是必须项,哪些是加分项,哪些可有可无。必须项: 免费、对Python支持好、调试方便。加分项: 界面美观、插件市场丰富、Git集成流畅。可有可无: 内置数据库管理工具。于是你的问题变成了:“我需要一个免费的、对Python和Django框架支持良好的IDE,调试功能要强大,有什么推荐?” 。
- 更进一步,你应该先搜索一下,了解主流的选择(比如PyCharm, VS Code, Vim等),看看相关的测评,试试它们的官方基础功能。把这些工具和你的需求进行匹配。现在,你的问题是:“我想学Python Web开发,需要免费且调试功能强的IDE。了解到VS Code很轻量且免费,PyCharm专业版收费但社区版免费。我的需求是免费 、Django支持好、 调试方便。请问社区版PyCharm和配置了Python插件的VS Code相比,在调试和Django支持上差距大吗?或者有更优解?”
对AI下达指令也是一样的道理,先问问自己在问什么?
提示它可以问你问题 #
正常AI不会问你问题,它只会尽量满足你的要求。但是有时因为你的描述过于笼统或者过于复杂,它根本没有真正理解您的核心意图,只会基于现有条件进行“自由发挥”。有意识地告诉它:“如果你需要更多信息来更好地理解我的需求,请随时向我提问“。 这种简单的引导能激活AI的“追问”功能,将单向的指令变为双向的对话,从而确保它交付的成果能精准命中你的期待。
帮它寻找问题 #
当它生成的代码无法运行的时候,真的很让人头疼,当你复制报错信息给它也无法解决问题的时候,试着帮它寻找一些可能的错误原因,以及解决方案。这个前提是你需要看的懂它之前的代码,并熟悉整个流程。