201 lines
5.2 KiB
Markdown
201 lines
5.2 KiB
Markdown
# 🚀 LinguaForge 網頁版 - 立即開始指南
|
||
|
||
## 選擇網頁版的決定：正確！
|
||
|
||
**你節省了：**
|
||
- 💰 **86% 成本**（NT$ 30,000）
|
||
- ⏰ **50% 時間**（6 週）
|
||
- 🎯 **100% 上架費用**（NT$ 4,100）
|
||
|
||
## 📌 15 分鐘快速開始
|
||
|
||
### Step 1: 複製貼上這些指令（5分鐘）
|
||
|
||
```bash
|
||
# 一鍵建立專案
|
||
npx create-next-app@latest linguaforge-web --typescript --tailwind --app --src-dir=false --import-alias="@/*" -y
|
||
|
||
cd linguaforge-web
|
||
|
||
# 安裝所有必要套件
|
||
npm install @supabase/supabase-js @supabase/ssr zustand @tanstack/react-query @google/generative-ai lucide-react
|
||
|
||
# 安裝 UI 元件庫
|
||
npx shadcn-ui@latest init -y
|
||
npx shadcn-ui@latest add button card dialog input textarea
|
||
|
||
# 建立環境變數檔
|
||
echo "NEXT_PUBLIC_SUPABASE_URL=your_url_here
|
||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key_here
|
||
GEMINI_API_KEY=your_gemini_key_here" > .env.local
|
||
|
||
# 啟動專案
|
||
npm run dev
|
||
```
|
||
|
||
### Step 2: 取得必要的 API Keys（10分鐘）
|
||
|
||
#### 2.1 Supabase（5分鐘）
|
||
1. 開啟 [supabase.com](https://supabase.com) → 註冊/登入
|
||
2. 點「New project」→ 名稱填 `linguaforge`
|
||
3. 複製 URL 和 anon key 到 `.env.local`
|
||
|
||
#### 2.2 Gemini API（5分鐘）
|
||
1. 開啟 [makersuite.google.com/app/apikey](https://makersuite.google.com/app/apikey)
|
||
2. 點「Get API key」
|
||
3. 複製 key 到 `.env.local`
|
||
|
||
### Step 3: 部署上線（選擇性，5分鐘）
|
||
```bash
|
||
# 推送到 GitHub
|
||
git init
|
||
git add .
|
||
git commit -m "Initial commit"
|
||
gh repo create linguaforge-web --public --push
|
||
|
||
# 自動部署到 Vercel
|
||
vercel
|
||
```
|
||
|
||
## 📅 6 週開發計劃總覽
|
||
|
||
| 週次 | 目標 | 關鍵產出 | 檢查點 |
|
||
|------|------|---------|--------|
|
||
| **Week 1** | 基礎架構 | 認證系統 | 可註冊登入 ✓ |
|
||
| **Week 2** | AI 核心 | 詞卡生成 | AI 生成成功 ✓ |
|
||
| **Week 3** | 複習系統 | SM-2 演算法 | 複習功能完整 ✓ |
|
||
| **Week 4** | UI/UX | 響應式設計 | PWA 就緒 ✓ |
|
||
| **Week 5** | 測試優化 | 效能優化 | Lighthouse > 90 ✓ |
|
||
| **Week 6** | 發布推廣 | 100 用戶 | 40% 留存率 ✓ |
|
||
|
||
## 🎯 今天的任務（Day 0）
|
||
|
||
### ✅ 必做（2小時）
|
||
1. **環境設置**（30分鐘）
|
||
- 執行上面的快速開始指令
|
||
- 取得 API keys
|
||
|
||
2. **測試運行**（30分鐘）
|
||
- 確認 http://localhost:3000 可以開啟
|
||
- 建立第一個頁面
|
||
|
||
3. **Supabase 設置**（30分鐘）
|
||
- 建立資料表（複製 `web-setup-guide.md` 的 SQL）
|
||
- 測試連線
|
||
|
||
4. **第一個 Commit**（30分鐘）
|
||
- Git 初始化
|
||
- 推送到 GitHub
|
||
|
||
### 🎉 完成標準
|
||
- 網站在本地運行 ✓
|
||
- Supabase 連線成功 ✓
|
||
- 可以呼叫 Gemini API ✓
|
||
- 程式碼已上 GitHub ✓
|
||
|
||
## 💡 成功秘訣
|
||
|
||
### Week 1-2：快速搭建
|
||
```typescript
|
||
// 不要追求完美，先跑起來
|
||
// ❌ 錯誤：花 3 天設計完美架構
|
||
// ✅ 正確：1 天搞定基本功能
|
||
|
||
// 範例：簡單的 Gemini 呼叫
|
||
async function generateCard(word: string) {
|
||
const res = await fetch('/api/gemini', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ word })
|
||
})
|
||
return res.json()
|
||
}
|
||
```
|
||
|
||
### Week 3-4：核心功能
|
||
- 專注 MVP 功能，其他都砍掉
|
||
- 每天部署，快速迭代
|
||
- 使用現成元件，不要自己造輪子
|
||
|
||
### Week 5-6：上線獲客
|
||
- 不等完美就上線
|
||
- 積極收集用戶反饋
|
||
- 快速修復關鍵問題
|
||
|
||
## 📊 成本控制
|
||
|
||
### 完全免費方案（前 3 個月）
|
||
| 服務 | 免費額度 | 足夠支援 |
|
||
|------|---------|---------|
|
||
| Vercel | 100GB/月 | 10,000 用戶 |
|
||
| Supabase | 500MB DB | 50,000 詞卡 |
|
||
| Gemini | 60 QPM | 1,000 用戶 |
|
||
| **總計** | **NT$ 0** | **充足** |
|
||
|
||
## 🔥 關鍵決策
|
||
|
||
### 技術選擇理由
|
||
- **Next.js 14**：最新、最快、SEO 好
|
||
- **Supabase**：比 Firebase 更適合網頁
|
||
- **shadcn/ui**：免費、美觀、可客製
|
||
- **Vercel**：Next.js 原生支援最佳
|
||
|
||
### 為什麼 6 週可以完成？
|
||
1. 網頁開發比 App 簡單 50%
|
||
2. 使用現成服務，不重造輪子
|
||
3. MVP 思維，只做核心功能
|
||
4. 每日部署，快速迭代
|
||
|
||
## 📚 參考文件
|
||
|
||
需要詳細資訊時查看：
|
||
1. **總體計劃**：`web-mvp-master-plan.md`
|
||
2. **技術細節**：`web-technical-architecture.md`
|
||
3. **環境設置**：`web-setup-guide.md`
|
||
4. **成本分析**：`web-vs-app-comparison.md`
|
||
|
||
## 🚨 遇到問題？
|
||
|
||
### 常見問題快速解決
|
||
```bash
|
||
# Supabase 連不上
|
||
echo $NEXT_PUBLIC_SUPABASE_URL # 檢查環境變數
|
||
|
||
# TypeScript 錯誤
|
||
npm run build # 重新編譯
|
||
|
||
# 部署失敗
|
||
npm run build && npm run start # 本地測試 production
|
||
```
|
||
|
||
### 求助管道
|
||
- Next.js Discord
|
||
- Supabase Discord
|
||
- Stack Overflow
|
||
- ChatGPT/Claude
|
||
|
||
## 💪 激勵的話
|
||
|
||
> **"Facebook 最初也只是 Zuckerberg 一個人在宿舍花 2 週寫出來的網站"**
|
||
|
||
你的優勢：
|
||
- 有完整的計劃指引
|
||
- 有現成的技術方案
|
||
- 有 AI 輔助開發
|
||
- 成本極低，失敗也無妨
|
||
|
||
## 🎬 現在就開始！
|
||
|
||
```bash
|
||
# 複製這行，開始你的創業之旅
|
||
npx create-next-app@latest linguaforge-web --typescript --tailwind --app -y && cd linguaforge-web && npm run dev
|
||
```
|
||
|
||
**記住：6 週後，你將擁有一個真正的產品和 100 個用戶！**
|
||
|
||
---
|
||
|
||
📅 開始日期：_________
|
||
🎯 目標完成：_________ (6週後)
|
||
💪 每日 Commit：[ ] [ ] [ ] [ ] [ ] [ ] [ ]
|
||
|
||
**相信自己，開始行動！🚀** |