[GitHub Global] Translate Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/TRAE - AI 学习英雄小程序实战.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
b548482267
commit
153bc5f007
@@ -0,0 +1,336 @@
|
||||
# TRAE - AI 學習英雄小程序實戰
|
||||
|
||||
這是一個學習英雄微信小程序項目，通過遊戲化的方式幫助用戶學習任何主題。用戶輸入想學的主題，AI 自動生成相關的知識問答卡片，通過做選擇題的方式學習。
|
||||
|
||||
這是一個純 Vibe Coding 項目，主要講解如何使用 TRAE AI 編程工具快速開發微信小程序。通過自然語言描述需求，讓 AI 自動生成包含完整前端和後端的小程序代碼、並且利用 TRAE 集成數據庫和支付等服務。適合想學習 AI 開發小程序、學習 TRAE 工具的同學。
|
||||
|
||||
---
|
||||
|
||||
大家好，我是程序員魚皮。朋友們有沒有這樣的經歷：想學點新技術，打開文檔就頭疼，刷視頻又容易走神，買了一堆課程卻總是半途而廢。。。
|
||||
|
||||
反正我是經常這樣，學習焦慮症晚期患者了。
|
||||
|
||||
|
||||
|
||||
作為一名程序員，我早就想做個程序來治好自己的學習焦慮症，卻因為覺得麻煩一直拖延。直到現在 AI 編程能力足夠強大，我才終於出手了！通過 TRAE 只用了 1 天就完成了這個《學習英雄》小程序，讓學習像玩遊戲一樣輕鬆有趣~
|
||||
|
||||
|
||||
|
||||
下面我先帶大家體驗一下這個小程序，然後會分享整個開發過程中用到的工具和技巧，依然是 **AI 項目開發的保姆級教程**。
|
||||
|
||||
點個收藏，我們開始吧！
|
||||
|
||||
> 推薦觀看視頻版：https://bilibili.com/video/BV1yMn3zuE7L
|
||||
|
||||
## 項目體驗
|
||||
|
||||
打開小程序，可以看到界面非常簡潔、有活力。點擊開始學習，然後輸入你想學習的任何主題，比如 Java 基礎。
|
||||
|
||||
|
||||
|
||||
AI 會根據主題自動生成相關的知識問答卡片。
|
||||
|
||||
|
||||
|
||||
然後你只需要點點點做選擇題，不用擔心做錯，因為每道題目都會有解釋，哪怕你之前完全沒聽說過這個主題，一樣可以讓你學下去。
|
||||
|
||||
|
||||
|
||||
除了技術知識外，你還可以嘗試更多主題，比如一個詞彙、一部電影、甚至是一個人。
|
||||
|
||||
|
||||
|
||||
原本枯燥的概念通過問答的形式變得生動有趣，學習焦慮瞬間消失了~
|
||||
|
||||
你還可以查看自己的學習記錄，重新學習或者查看題解。
|
||||
|
||||
|
||||
|
||||
沒事兒刷一刷，你就能成為學習英雄！
|
||||
|
||||
## 開發實現
|
||||
|
||||
如果是以前，這種小程序可能要做個好幾天。
|
||||
|
||||
但現在利用 TRAE IDE 的 AI 編程，我要帶大家 **不寫一行代碼**，把這個小程序做出來。
|
||||
|
||||
步驟：
|
||||
|
||||
1. 準備開發工具
|
||||
2. 需求分析
|
||||
3. 方案設計
|
||||
4. 服務集成
|
||||
5. 後端開發
|
||||
6. 前端開發
|
||||
7. 測試驗證
|
||||
8. 持續優化
|
||||
|
||||
### 1、準備開發工具
|
||||
|
||||
既然要用 AI 開發，工具選擇很重要。這次我使用的 AI 編程工具是 [TRAE](https://www.trae.ai/)，因為最近它的 SOLO 模式實在太火爆了，我也想試一試。
|
||||
|
||||
區別於傳統的人類主導 + AI 輔助編程，所謂 SOLO 模式，是讓 **AI 主導任務並自動執行開發**，你只需要有一個想法，然後配合 AI 就能讓想法真正落地。
|
||||
|
||||
|
||||
|
||||
此外，既然要開發前端項目，肯定少不了 [Node.js 環境](https://nodejs.org/zh-cn/download)；既然要開發微信小程序，肯定少不了 [微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，直接去對應的官網下載安裝就好。
|
||||
|
||||
|
||||
|
||||
### 2、需求分析
|
||||
|
||||
準備好工具後，進入 Trae 的 SOLO 模式，打開比我臉都乾淨的項目文件夾。
|
||||
|
||||
|
||||
|
||||
首先我們要進行需求分析。
|
||||
|
||||
別想的太複雜，只需要把自己的想法用自然語言告訴 AI 就好。
|
||||
|
||||
比如我給 AI 提了這樣的需求：
|
||||
|
||||
```markdown
|
||||
你是一位專業的程序員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程序。
|
||||
|
||||
用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。
|
||||
```
|
||||
|
||||
|
||||
|
||||
AI 很快生成了詳細的產品需求文檔和技術架構文檔，很符合企業規範的開發流程。
|
||||
|
||||
|
||||
|
||||
看得出來 AI 已經有些迫不及待想寫代碼了，但是千萬別急，一定要先 **仔細確認需求文檔**。
|
||||
|
||||
AI 寫的還是不錯的，但不一定完全符合我們的預期。因此我們要人工重點關注要實現的核心功能，移除掉不需要的附加功能，先確保核心業務流程（P0 級需求）跑通。
|
||||
|
||||
|
||||
|
||||
**不要嫌這一步麻煩，現在多花 1 分鐘，以後節約 1 小時！**
|
||||
|
||||
一定要明確需求，防止 AI 做了不該做的功能。
|
||||
|
||||
這裡有個小技巧，可以利用 TRAE 集成的 Figma 設計工具，在這裡獲取到一些免費的產品 UI 原型圖。
|
||||
|
||||
|
||||
|
||||
可以點擊查看某個原型具體的設計，只需要選中你看上的原型圖，點擊添加到對話，TRAE 就會自動把原型圖關聯到發給 AI 的對話中，這個跨產品之間的交互我覺得還是蠻帥的（不過跟我學做項目的同學應該知道實現原理嘿嘿）。
|
||||
|
||||
|
||||
|
||||
不過生活需要驚喜，這裡我就讓 AI 自己發揮，看看會出現什麼創意~
|
||||
|
||||
### 3、方案設計
|
||||
|
||||
下面我們要進行方案設計，這以前是月薪幾萬的架構師幹的活，現在讓小 AI 幫我們 SOLO。
|
||||
|
||||
編寫這段 Prompt 時一定要注意幾個細節，**遵循最小化開發原則**，防止 AI 把簡單的事情搞複雜。
|
||||
|
||||
```markdown
|
||||
我已經人工調整了產品需求文檔，移除了很多不必要的功能。請你根據我人工修改過的需求，重新生成技術架構文檔。要求：
|
||||
1. 禁止增加需求文檔中沒有提到的功能
|
||||
2. 遵循最小化開發原則，以實現功能為主，禁止提供實現功能之外的擴展，比如部署、監控、限流等
|
||||
3. 遵循前後端分離原則
|
||||
```
|
||||
|
||||
很快 AI 生成了完整的技術架構文檔，包括用什麼前端和後端技術、接口怎麼設計、數據表怎麼設計等等。
|
||||
|
||||
|
||||
|
||||
這裡我建議能看懂文檔的同學還是多發揮一些專業性，明確具體的技術選型，讓 AI 生成的代碼在自己的可控範圍內。比如我明確項目使用 Supabase 數據庫、使用 OpenRouter 對接 Gemini 大模型提供 AI 服務。
|
||||
|
||||
|
||||
|
||||
啥啥啥？這些都是啥？
|
||||
|
||||
別擔心，等會兒就會講。
|
||||
|
||||
|
||||
|
||||
看不懂文檔的同學也不用擔心，你就把自己想像成老闆或者產品經理，程序員同事吭哧吭哧拿了份技術方案給你，你就說 “怎麼實現我不管，這個需求明天上線！” 讓他放手幹就完了。
|
||||
|
||||
你要相信 AI，相信相信的力量~
|
||||
|
||||
### 4、服務集成
|
||||
|
||||
完成了方案設計，在正式進入開發前，我們還要準備項目依賴的服務。
|
||||
|
||||
把用戶數據存儲在哪裡？怎麼讓程序對接 AI 大模型？
|
||||
|
||||
這都是我們要解決的問題。
|
||||
|
||||
相比於自己手動安裝服務，可以直接使用 TRAE 提供的集成能力，不用專門去看官方文檔對接服務，直接傻瓜式安裝。
|
||||
|
||||
我們重點集成 2 個服務。
|
||||
|
||||
|
||||
|
||||
#### 集成 Supabase
|
||||
|
||||
[Supabase](https://supabase.com/) 是開源的後端即服務（BaaS）平台，提供數據庫存儲、用戶身份驗證、即時 API 等功能，可以幫助開發者快速構建和管理程序後端。
|
||||
|
||||
|
||||
|
||||
點擊連接按鈕，在彈出的頁面中完成創建 Supabase 賬號、創建組織、以及認證授權。
|
||||
|
||||
|
||||
|
||||
然後進入到 TRAE，看到組織成功顯示後，點擊創建一個新項目，填寫一些項目配置信息，然後點擊創建。
|
||||
|
||||
|
||||
|
||||
創建項目後回到 TRAE 刷新一下，點擊連接就可以了，就這麼簡單~
|
||||
|
||||
|
||||
|
||||
如果說之前 AI Vibe Coding 讓後端開發者爽翻了，那這波可以說是前端開發者贏麻了，簡單的項目都不用自己搭建後端了~
|
||||
|
||||
#### 集成 OpenRouter AI 服務
|
||||
|
||||
TRAE 能夠和多種 AI 服務集成，這裡我選擇 [OpenRouter](https://openrouter.ai/)，它的優點是可以通過統一的 API 對接各家大模型，比如 Gemini、GPT、Claude 等等。
|
||||
|
||||
|
||||
|
||||
首先到官網註冊登錄賬號，然後進入 API Keys 頁面創建一個調用 AI 的密鑰，然後在 TRAE 中配置並填寫密鑰，AI 服務就已經集成完畢了。
|
||||
|
||||
|
||||
|
||||
但是注意，要確保你有足夠的用量，否則可能調用失敗，或者報錯調用頻率太頻繁。
|
||||
|
||||
|
||||
|
||||
#### 集成 Stripe 支付服務
|
||||
|
||||
此外，你還可以集成 [Stripe 支付服務](https://docs.stripe.com/)，它可以讓你用最少的代碼給產品添加支付和訂閱功能。
|
||||
|
||||
|
||||
|
||||
只需要先到官網註冊賬號，它會自動給你提供一個沙盒測試環境、以及對應的 API 密鑰，你可以創建自己的產品並設置定價。
|
||||
|
||||
|
||||
|
||||
然後把這些信息填寫到 TRAE 配置中，之後 AI 編程時就會生成支付相關的代碼了。
|
||||
|
||||
|
||||
|
||||
但是由於微信小程序有一些限制，這裡我就先不接入了，大家了解一下就好，網頁端和 APP 產品接入還是很香的。
|
||||
|
||||
### 5、後端開發
|
||||
|
||||
準備工作完成後，我們終於要進入緊張刺激的開發環節了。
|
||||
|
||||
這裡要注意，由於 **AI 的上下文是有限的**，為了能更好地生成完整項目、減少 Bug，建議分個步驟：先生成後端代碼，人工校驗通過後，再生成前端代碼。
|
||||
|
||||
好，給 AI 輸入提示詞，先開發後端，確保項目可以正常運行：
|
||||
|
||||
```markdown
|
||||
請你基於最新的產品需求文檔和技術架構文檔進行開發，優先開發後端，確保項目可以正常運行
|
||||
```
|
||||
|
||||
我們可以使用 TRAE 提供的 Prompt 優化功能來一鍵優化提示詞。
|
||||
|
||||
|
||||
|
||||
嗯，確實比之前更嚴謹了。
|
||||
|
||||
點擊執行，請開始你的 SOLO~ AI 會先給出任務計劃：
|
||||
|
||||
|
||||
|
||||
然後自主操作終端執行命令、編寫後端配置文件和業務邏輯代碼、編寫數據庫建表語句等等，重要操作還會找我們主動確認，非常嚴謹。
|
||||
|
||||
|
||||
|
||||
看不懂也沒關係，讓他放手幹吧~
|
||||
|
||||
等待期間，你可以到編程導航上看看 [免費的編程學習路線](https://codefather.cn/)。TRAE 自帶消息通知功能，AI 完成任務後會提醒我們。
|
||||
|
||||
我感覺 TRAE 調教 AI 還是有一套的，他會自己驗證程序是否正常。不過由於我們還沒有填寫微信登錄所需的信息，接口無法完整調用是正常的。
|
||||
|
||||
|
||||
|
||||
一段時間後，AI 生成完畢，不僅生成了代碼，還很貼心地生成了後端的接口文檔。
|
||||
|
||||
|
||||
|
||||
哎，這個東西很有用哦。
|
||||
|
||||
### 6、前端開發
|
||||
|
||||
下面進行前端開發。
|
||||
|
||||
這裡一定要注意，不要接著之前的對話繼續寫提示詞了。
|
||||
|
||||
為什麼呢？
|
||||
|
||||
因為 AI 大模型的上下文是有限的，前面的操作已經消耗了不少上下文，為了防止 AI 上下文不足或者記憶混亂，我們生成前端時，重新開一個乾淨的對話來編寫提示詞。
|
||||
|
||||
|
||||
|
||||
提示詞中提供給 AI 產品需求文檔、技術架構文檔和後端接口文檔，就可以讓 AI 專注於前端代碼生成。
|
||||
|
||||
```markdown
|
||||
你是一位專業的程序員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程序。
|
||||
|
||||
用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。
|
||||
|
||||
請你根據 @產品需求文檔 @技術架構文檔 @後端接口文檔，幫我生成完整可運行的微信小程序前端代碼。
|
||||
注意：
|
||||
1. 遵循最小功能原則，不要額外開發需求文檔沒提到的任何功能
|
||||
2. 如果需要顯示圖片，請使用佔位圖片 picsum.photos 代替（比如 picsum.photos/200/300）
|
||||
```
|
||||
|
||||
好，執行！
|
||||
|
||||
等待期間，你可以到 [面試鴨](https://www.mianshiya.com/) 上看看免費的面試題和刷題路線。
|
||||
|
||||
一段時間後，AI 生成完畢，一次性 SOLO 出了 20 多個文件！
|
||||
|
||||
|
||||
|
||||
雖然看著很爽，但老實說我是有點慌的，不知道能不能正常運行。
|
||||
|
||||
### 7、測試驗證
|
||||
|
||||
下面我們來到了激動人心的測試驗證環節。
|
||||
|
||||
首先需要打開微信開發者工具，導入已有項目文件夾，先選擇使用測試號開發調試項目。
|
||||
|
||||
|
||||
|
||||
打開項目後，我們先點擊右上角的 “測試號”，按照 [文檔](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) 的指引獲取到測試號的 AppID 和 AppSecret 密鑰：
|
||||
|
||||
|
||||
|
||||
然後手動填入到後端配置文件中，否則將無法正常微信登錄。
|
||||
|
||||
|
||||
|
||||
然後我們就可以編譯運行項目了。
|
||||
|
||||
結果，果然報錯了！
|
||||
|
||||
|
||||
|
||||
意料之中，意料之中。。。小程序開發比網頁開發還是更難一些的，畢竟微信開發者工具和文檔一直在更新。
|
||||
|
||||
|
||||
|
||||
不過沒關係，開發過程中難免遇到問題，解決方法很簡單，一句話：**報什麼錯誤，就把報錯信息發給 AI，讓 AI 來修復！**
|
||||
|
||||
像我這裡遇到了幾個典型的問題：
|
||||
|
||||
1）圖片路徑問題：利用 TRAE 的提示詞優化功能，能更好地指引 AI 按照指定的步驟修復 Bug
|
||||
|
||||
|
||||
|
||||
2）登錄失敗問題：點擊開發者工具右上角的 “詳情”，進入到本地設置中，勾選 “不校驗合法域名”
|
||||
|
||||
|
||||
|
||||
3）接口路徑問題：這可能是由於上下文過長導致的，讓 AI 整體修復前端調用後端接口的路徑和參數就好
|
||||
|
||||
|
||||
|
||||
4）環境配置問題：代碼
|
||||
Reference in New Issue
Block a user