🔧 阿川の電商水電行
老鄉雞也開源？我用 Trae SOLO 做了個像老鄉雞那樣做飯的小程序！
大家好，我是不如摸魚去，歡迎來到我的 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 分鐘瘦身
歡迎評論區溝通、討論👇👇
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
