2025-06-14 無 DB 的 MVP → 加 DB 的進化版
2025-06-14 無 DB 的 MVP → 加 DB 的進化版
把之前設計的 「無 DB 的 MVP → 加 DB 的進化版」學習路線圖，整理成一步步、附上簡稱翻譯的版本，方便你理解每個步驟的角色與目的。每個步驟都非常小、可立即驗收。
心靈算命網站學習路線圖（附簡稱翻譯）
總體概念
- **MVP (Minimum Viable Product，最小可行產品)**：先做最簡單能跑通的功能，不追求完整。
- **MCP (Model Context Protocol，模型上下文協定)**：你的 Mac 上的中介 server，用來連接多個 AI 服務。
- **DB (Database，資料庫)**：存使用者問答歷史、會員資料等。
- **API (Application Programming Interface，應用程式介面)**：前端與 MCP server、AI 服務之間的通訊介面。
階段 A — 無 DB 的 MVP（快速驗證 AI 互動流程）
目標：前端問問題 → MCP server → AI 服務（OpenAI / DeepSeek） → 回前端。不存資料。
Step A1 — 建立 MCP Gateway
功能：在 Mac 上起一個 Node.js server，接收前端請求，轉給不同 AI provider。
驗收：
/health回傳 MCP 狀態。/api/chat對provider=openai或provider=deepseek能回傳 mock 或實際回答。
簡稱翻譯：
- MCP：中介 server
- AI provider：AI 服務提供者（OpenAI / DeepSeek）
操作：前面我給你的
gateway.mjs指令與測試。
Step A2 — 前端最小測試頁面
功能：建立 Vite + Vue 前端，能輸入問題並呼叫 MCP
/api/chat，顯示回覆。驗收：輸入問題 → 點送出 → 顯示回覆。
簡稱翻譯：
- Vite：前端開發工具
- Vue：前端框架
Step A3 — MCP Gateway 常駐
- 功能：使用
pm2或類似工具，讓 MCP 在 Mac 上常駐，避免關掉終端就停止。 - 驗收：關閉終端 → MCP 仍可接收 API 請求。
階段 B — 加 DB 的進化版（保存歷史、會員系統）
目標：讓使用者問答可以保存到資料庫，方便後續擴展統計、會員、課金等功能。
Step B1 — 在 Windows 用 Docker 啟動 MySQL
功能：
- Docker：容器化工具，隔離環境、快速部署 DB。
- MySQL：DB，用於存問答紀錄。
驗收：MySQL container 正常啟動，能連線。
簡稱翻譯：
- Docker：容器化部署工具
- MySQL：關聯式資料庫
Step B2 — MCP Gateway 寫入 DB
功能：將每次問答寫入 DB（使用
mysql2或 ORM），可記錄：- 使用者 ID
- 提問
- 回答
- Provider
- 時間
驗收：
- 發送問題 → AI 回答 → DB 有對應紀錄。
Step B3 — 前端顯示歷史
功能：前端可查詢歷史對話。
驗收：輸入會員帳號 → 顯示過去問答紀錄。
簡稱翻譯：
- JWT (JSON Web Token，網頁驗證用令牌)：可選，用於會員登入驗證。
資源分配建議
| 電腦 | 角色 | 功能 |
|---|---|---|
| Mac A（舊） | Documentation / 技術文件 | 編寫設計文檔、流程圖、Git 操作 |
| Mac B（舊） | MCP Gateway / 中介 | Node.js MCP server，轉發請求給 AI，mock 測試或真實 API 呼叫 |
| Lenovo Windows 11 | 主開發機 + DB | Docker MySQL、前端開發、整合測試、可能放本地 DB 和 CI/CD |
實務小提醒
- API keys 只放 MCP server 的
.env，前端不要放 - Mac B 性能有限 → 只做路由/adapter，不跑大型模型
- LAN 測試 → 先不要開網路端口，正式上線再考慮 ngrok 或 port-forward
- 日誌與排錯 → 開發期可用 console.log，之後用 winston 寫檔
- 驗收逐步做 → 完成 A1 → A2 → A3，再進入 B1 → B2 → B3
我可以幫你把 Step A2（最小前端 Ask.vue） 做成 可直接貼上執行的完整檔案，包括呼叫 MCP、顯示回覆、mock 測試的方式。
你希望我現在直接給你 Step A2 的程式碼嗎？