挑战零基础用CodeBuddy做一款音视频处理软件

朋友们,我最近不是一直在捣鼓小软件嘛!手头这个叫TransDuck的音视频处理工具刚有点小爆的趋势,反馈意见里也是收到不少关于SaaS版本的问题,比如:

  • "翻译效果真的顶!但每次上传比较大的视频要等好久"(我:带宽太贵啦
  • "用网页校对和微调视频翻译像在摸鱼,能整个正经客户端吗?"(我:有道理,计划中

对于SaaS软件来说,虽然用浏览器就能丝滑上手,但遇到动辄上百M、甚至几个G的视频,让用户疯狂上传下载确实不讲武德。我这小水管服务器被薅到冒火星不说,用户盯着进度条干等的体验也属实下头。

其实,在做SaaS版本之前,DD就有过对客户端应用的思考:本地计算省带宽、断网也能用、还能避开浏览器沙盒限制...但每次想到要开发的时候,就有开始纠结用PyQt?Electron?还是Tauri?会不会花了很多时间学了一个,结果做一半发现某些想法实现不了,花了很多时间的又白费啦?就这样反反复复纠结了好久,一点行动都没!

但是,最近突然想着可以行动起来了!由于最近使用AI编程的频率很高,感觉对于这些自己不熟悉的领域,或许让AI来做能够得到奇效?就算失败了,也不会像以前那样从零开始学框架再进行开发那么费时。

所以,马上决定来波极限挑战:

  • 技能背景:熟悉后端开发、完全不会客户端开发
  • 辅助工具:腾讯云代码助手CodeBuddy
  • 挑战目标:实现一款跨平台的音视频处理客户端软件

这篇实测就带大家看看,一个从未接触过客户端开发的程序员,怎么用新工具去扩展更多可能性。

准备工作

  1. 安装VS Code:https://code.visualstudio.com/
  2. 在VS Code的扩展中搜索"腾讯云代码助手CodeBuddy"并安装插件
  1. 准备工程目录,新建一个文件夹,然后用VS Code打开
  1. 对工程目录做一些规划,这里我新建了两个目录分别是:
  • docs:用来放各个不同版本的需求文档,先在这里编写,然后再给CodeBuddy去执行
  • example:用来存放一些用于测试的音频和视频

需求编写

  1. 在docs目录下创建0.1.0.md文件
  2. 根据自己对第一个版本希望实现的功能、所要采用的技术栈、UI设计风格的要求等开发需求做详细的描述。比如,我这里写的要求:
markdown 复制代码
实现一个跨平台的音频/视频处理桌面应用:TransDuck

# 技术栈

开发语言和框架:

- Node.js 22.15.0
- Tauri 2.0,前端框架选择Vue
- ffmpeg 

# 项目结构

- docs:项目需求文档
- example:测试用的音频、视频
- transduck-desktop:项目源码

# 前端框架与UI风格

1. 采用左右布局,左侧为功能菜单,右侧为功能操作区
3. 功能操作区上边为任务配置区,下边为任务执行进度和结果显示区
3. 支持多语言国际化配置,先实现中文和英文,后续再扩展其他语言的配置
4. UI主题采用Vue Admin Bootstrap

# 功能模块

1. 音频格式转换

- 音频文件的支持范围:根据ffmpeg支持的所有音频均可支持
- 结果输出路径源文件同路径,转换完成后提示输出目录位置
- 转换过程需要显示进度条

2. 视频格式转换

- 视频文件的支持范围:根据ffmpeg支持的所有音频均可支持
- 结果输出路径源文件同路径,转换完成后提示输出目录位置
- 转换过程需要显示进度条

# 其他要求

1. 帮我完成项目初始化
2. ffmpeg集成:应用内置依赖、打包到应用中

配置CodeBuddy

在开始开发之前,按如下图所示,对CodeBuddy做一些配置:

把"自动运行"和"自动修改文件"开启,这样在Craft模式中发消息之后,CodeBuddy会直接帮我们进行开发相关的操作,比如:运行命令、修改文件等。

开发过程

  1. 把编写的需求内容复制到CodeBuddy下方的输入框内,模型选择default,

按"回车"开始!如下图,CodeBuddy在对我们的输入思考之后,先扫描当前项目内容,检查项目状态,再根据项目状态制定任务计划

在完成了计划制定之后,就马上开始执行了!如下图所示,由于项目是空的,所以CodeBuddy开始根据我们需求中写的技术栈要求和项目结构开始创建目录、初始化开发框架的项目结构等操作。

这里我们只需要等待AI一步步做,如果有需要确认的,就操作一下,不然看着就行。当CodeBuddy完成当前任务之后,会做当前任务的总结,并且给出下一步的任务建议。

这里,我们可以选择继续执行任务,也可以取消继续执行,执行其他任务,比如启动应用,看看是否可以跑起来。DD建议如果这一步做的任务很多,建议先跑一下,看看是否有报错,如果有报错就先及时处理一下。

由于DD从来没用过Tauri,也不知道如何运行程序,所以就让CodeBuddy帮我启动项目,看看是否有报错。于是CodeBuddy就开始执行命令启动应用(这里我也顺手学会了Tauri项目的启动_)。

如图所示,在执行过程中,CodeBuddy发现有报错信息,并且马上开始自动修复:

再修复完问题之后,然后可以继续让CodeBuddy执行之前还没完成的任务,就这样不断重复:提交任务、启动应用、修复错误,逐步推进开发。

下面是DD这次实践的几个阶段过程和成果:

  1. 初始化项目完成,初步实现界面布局
  1. 测试功能是否可用,是否有遗漏。这一步是耗时最多的,主要遇到不少错误,比如:
  • 点击选择文件没有效果
  • 输出格式组件是输入框,不好用
  • 点击转换按钮不执行转换任务
  • 转换结果输出后,点击打开不会跳转到对应目录

遇到这些问题的时候,如果没有报错信息,就用语言描述告诉CodeBuddy,让AI去处理。如果有报错,就直接复制报错信息告诉CodeBuddy去处理。

这里DD卡了比较久一步是由于Tauri 2.0比较新,可能AI的知识不是很信,所以一开始生成的内容有不少错误,不过比较意外的是,经过多次尝试,最后它还是完成了错误的修复:

  1. 在让AI辅助修复了所有问题,并让功能可用之后,对一些细节做优化,比如:
  • 增加图标元素,让界面更和谐
  • 优化输出格式的组件样式
  • 增加"关于"信息
  • 调整国际化语言选择的样式
  • 处理进度条、处理结果的样式

注意事项

在用CodeBuddy辅助编码或者处理错误的时候,特别要注意的一个点:不要一直用一个会话。

当一个会话处理较多内容之后,建议如下图点击"+"按钮新建会话来处理请求。

不然可能会一直处理好任务,甚至出来一些破坏现有代码的情况,比如会像下图这样给加入很多奇怪的内容:

其他能力

CodeBuddy除了可以帮忙写代码之外,还能帮忙自动生成commit信息,只需要点击下图中的这个按钮即可:

另外,MCP市场也是个不错的特性,你可以方便在这里安装外部服务来增强你的开发工作流:

小结

这波挑战前前后后总共花了我大概4小时左右完成。如果按照以往的模式,先阅读Tauri的教程文档,搭建环境、调试、开发、测试,估计可能最快也要几天时间吧。这次通过CodeBuddy的辅助,大大缩短了学习和开发时间。

同时,在AI辅助编码的过程中,其实我也逐步地学习了Tauri框架的相关内容,根据AI给出的构建命令、执行命令、以及修复错误的过程,也是对Tauri在一步步的学习。这种体验还是非常棒的,除了完成任务,还能学习新技术。

最后,这里开发的工具将会以开源的方式提供,并且计划是持续维护的,后续会增加更多音频、视频的处理能力进来。

感兴趣的小伙伴也可以关注,觉得不错的话,可以帮忙点个Star,项目地址如下: