mvp-001 心靈算命網站 MVP 小任務清單

發表於 2025-10-01 分類於 MVP 閱讀次數：

mvp-001 心靈算命網站 MVP 小任務清單

mvp-001 心靈算命網站 MVP 小任務清單

太好了 👍 那我幫你把 7 個步驟的小任務全部拆出來，像待辦清單一樣，你可以一項一項完成，再回來跟我報告。

✅ 心靈算命網站 MVP 小任務清單

Step 1 — 前端雛型

在 Windows 11 notebook 上安裝 Node.js (如果還沒裝)

建立 Vue 3 + Vite 專案 fortune-mvp

npm create vite@latest fortune-mvp
cd fortune-mvp
npm install
npm run dev

在首頁 (App.vue) 放一個文字輸入框 + 一個按鈕 + 一個顯示結果的區塊（先寫死 “Hello Fortune!”）

Step 2 — MCP Gateway 基礎

在 Mac B (MCP server 機器) 建立 mcp-gateway 資料夾

安裝需要的套件

1 2	npm init -y npm install express cors dotenv

建立 gateway.mjs 並貼上你已有的程式碼
啟動伺服器
1
node gateway.mjs
測試健康檢查
1
curl http://localhost:4000/health
→ 看到 { "status":"ok","role":"mcp-gateway" } 就成功

Step 3 — MVP 心靈算命功能

在前端 App.vue，讓按鈕能呼叫 http://192.168.x.x:4000/api/chat (把 IP 換成 Mac B 的內網 IP)

傳送 JSON 給 gateway，例如：

{
  "provider": "openai",
  "messages": [
    { "role": "user", "content": "請幫我算今日運勢" }
  ]
}

把回覆顯示在前端網頁的結果區塊

Step 4 — 儲存機制

在前端，使用 localStorage 存每次的提問與回答
頁面重新整理時，把舊紀錄讀出來並顯示

Step 5 — UI 強化

加入簡單的 CSS：背景色、卡片樣式
設計一個「抽籤框」感覺（按下按鈕 → 出現結果）
（進階）可加隨機籤詩圖片或 emoji

Step 6 — 使用者測試

在 Windows 開啟 npm run dev → http://localhost:5173
用手機（同 WiFi）訪問 http://192.168.x.x:5173 測試
確認：前端 → Gateway → LLM 都能跑通

Step 7 — 擴充功能

增加「算愛情運」、「算事業運」等不同模式（按鈕切換 prompt）
增加「塔羅牌」功能（隨機抽一張卡 + LLM 解釋）
增加「分享結果」功能（先只做 copy 到剪貼簿）

📌 建議你照順序做，Step 1 小任務 1 → 3 完成後，就會看到第一個 Vue 雛型畫面。

要不要我幫你直接寫好 Step 1 的 App.vue 範例程式碼，讓你能馬上跑出「輸入問題 → 顯示結果 (假資料)」？

0%