大家好，我是不如摸鱼去，欢迎来到我的 AI 编程分享专栏。
去年，「老乡鸡不装了，直接开源」的消息引发了广泛的关注。我也纳闷，老乡鸡不是做菜的吗，开的哪门子源？仔细看了下原来是把他们的菜品、溯源报告这些开源了。然后，GitHub 上这个叫「像老乡鸡那样做饭」的项目火了，如今 star 数量已经达到了 18k，这是它的地址：github.com/Gar-b-age/C… 。
作为一名爱做饭的程序员，面对如此诱人的开源资源，怎能袖手旁观？我选择用 Trae 快速构建了一个像老乡鸡那样做饭小程序！ 本文将分享我如何利用 Trae SOLO 的高效开发能力，把这份“开源美味”封装成便捷的小程序。
实现效果
技术栈
我们开发前选择好开发的技术栈，这样 AI 可以在我们规划好的路线上进行开发，可以达到事半功倍的效果。
前端技术栈
因为我本身就是一个前端程序员，所以前端技术栈比较熟，直接选择常用的技术栈：
- 小程序的开发框架: uni-app
- 开发模板项目: wot-starter 地址: starter.wot-ui.cn/
- 组件库: wot-ui 地址: wot-ui.cn/
后端技术栈
服务端最好是可以免开发，于是我选择了 TRAE SOLO 集成的 Supabase 作为我们的云端服务。
Supabase 是一个开源的 Firebase 替代品，旨在帮助开发者快速构建后端功能。它基于 PostgreSQL 数据库，并提供实时订阅、身份验证、存储、边缘函数等功能，支持 REST 和 GraphQL API。Supabase 强调开源、可自托管，并提供免费起步的云端服务，适合构建现代 Web 和移动应用。
菜谱数据来源
我们的菜谱数据来自于开源项目「像老乡鸡那样做饭」，这是它的 GitHub 地址：github.com/Gar-b-age/C…
动手
我们选择好技术栈之后就可以开始开发，由于我们使用 Supabase 作为服务，所以后端开发无需操心，只需要让 Trae SOLO 来建表、处理数据就好了。
数据处理
我们将菜谱的 markdown 和相关图片放到了 cook-book 目录下，然后让 Trae SOLO 开始处理吧！
Trae SOLO 开始处理需求，生成 tasks 列表，并执行
不过它也不是一步到位了，我发现导入的数据有的配料字段是空的，有的步骤是空的，于是让它重新检查了下（后面我自己检查了下发现是部分菜谱的 markdown 文件的标题不对，这里我就自己处理了）。
最终，Trae SOLO 帮我将全部的菜谱数据处理完毕，并插入到 Supabase 的数据库中了，接近 200 道菜，足够每天吃一道了。
小结
“干净”的数据能达到事半功倍的效果，从上面纠错的过程可以印证这一点，在让 AI 处理前，花点时间做基础的数据清洗（统一文件命名规范、检查必要字段是否存在、清理异常字符）是非常值得的投入。
小程序开发
我们开发前，有一些准备工作，由于 wot-starter 中包含暗黑模式等相关的配置，我们本次暂不需要，故需要移除，以免干扰 AI 对项目的理解（这里我们要明确一个点，要尽量提供有用的语料给 AI，因为过大的上下文会导致它天马行空）。
我们向 Trae SOLO 提出以下需求，先实现一个简易版：
开发一个像老乡鸡那样做饭小程序，基于现有表结构实现以下核心功能：
1. 分类浏览功能：按照菜品分类展示菜谱列表
2. 首页推荐功能：在首页展示精选推荐的3-5个菜谱
3. 菜谱详情页：点击可查看完整菜谱信息
要求：
- 保持现有表结构不变
- 界面设计简洁直观
- 确保数据加载流畅
- 适配移动端显示
- 使用unocss编写样式，使用rpx做单位
经过一轮开发后，项目结构如下：
不过此时项目还是跑不起来的，控制台报错了，我们直接将控制台报错发送给 Trae SOLO。
解决之后，我们的小程序启动起来，效果就已经差不多达到了文章开头的样子了。
当然还有一些小问题，都可以让 Trae SOLO 来处理
后续完善
初版完成后，我们群里的好朋友 FliPPeDround 提醒我说，「像老乡鸡那样做饭」项目的 Github 上有 PR 提供了做菜的手绘流程图。那太好了，我们这就给加上。
首先还是让 Trae SOLO 将新增的手绘流程图上传到 Supabase 并将其地址插入到对应的菜谱中
然后在菜谱详情中展示手绘流程图
效果如图，配上流程图，清晰又美观。
总结
我们今天几乎零代码 用 Trae SOLO 实现了「像老乡鸡那样做饭」小程序，过程中这三个规则让我们事半功倍：
- 保持数据干净：“干净”的数据能达到事半功倍的效果，上面处理数据时纠错的过程可以印证这一点，在让 AI 处理前，花点时间做基础的数据清洗（统一文件命名规范、检查必要字段是否存在、清理异常字符）是非常值得的投入。
- 纯净上下文：为 AI 提供一个相对“纯净”的、与当前任务高度相关的上下文环境，这样可以让 AI 在我们规划好的路线上进行开发，避免“天马行空”。
- 增量式沟通：尽量做到增量式沟通，不要一次性把所有需求都丢给 AI。先实现核心功能，跑通后再提新需求，比如我们添加手绘流程图的功能。每次交互都基于当前已完成的代码状态，让 AI 能“看到”它之前的成果，更容易理解下一步要做什么。
好了，实现这个小程序后，我再也不愁没菜吃了！后面我想还可以加一些有趣的功能，例如：今天吃什么、每周必吃、大家都在吃，等等功能，当然这些功能也是由 Trae 来开发，大家可以期待下，同时也期待未来 AI 编程能给我们带来更多、更强的能力，让我们能专注于更重要的「业务逻辑」。
参考资料
- 小程序的开发框架: uni-app
- 开发模板项目: wot-starter 地址: starter.wot-ui.cn/
- 组件库: wot-ui 地址: wot-ui.cn/
- 像老乡鸡那样做饭：github.com/Gar-b-age/C…
往期精彩
当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战
告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞
Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身
欢迎评论区沟通、讨论👇👇
