🎓 學員管理系統 - Vercel 版
一個現代化的學員管理系統，支援點名、成績管理、以及與 Google Sheets 雲端同步。
✨ 主要功能
📋 學員管理
- ➕ 新增、編輯、刪除學員資料
- 🏷️ 班別分類管理
- 📱 聯絡資訊管理
- 📊 學員狀態追蹤（在讀/休學/畢業/退學）
☁️ 雲端同步
- 📤 將本地資料同步到 Google Sheets
- 📥 從 Google Sheets 載入資料
- 🔄 雙向同步功能
- 🚫 解決 CORS 問題
📊 統計報表
- 📈 學員總數統計
- 📋 各狀態學員統計
- 📊 即時數據更新
🚀 技術架構
Frontend: Vanilla HTML/CSS/JavaScript
Backend: Vercel Serverless Functions
Database: Google Sheets
Deploy: Vercel Platform
📁 項目結構
student-management-vercel/
├── index.html # 主頁面
├── package.json # 依賴管理
├── vercel.json # Vercel 設定
├── api/ # Serverless Functions
│ ├── sync-students.js # 同步學員到雲端
│ └── get-students.js # 從雲端載入學員
├── css/ # 樣式檔案
├── js/ # JavaScript 檔案
└── README.md # 說明文件
🛠️ 部署步驟
1. 準備 Google Sheets API
- 到 Google Cloud Console
- 建立新專案或選擇現有專案
- 啟用 Google Sheets API
- 建立服務帳號 (Service Account)
- 下載 JSON 金鑰檔案
- 將 Google Sheet 分享給服務帳號信箱
2. 部署到 Vercel
- 將程式碼推送到 GitHub
- 連接 Vercel 到你的 GitHub repository
- 在 Vercel 設定環境變數：
GOOGLE_SHEET_ID: 你的 Google Sheet IDGOOGLE_CLIENT_EMAIL: 服務帳號信箱GOOGLE_PRIVATE_KEY: 私鑰 (完整內容)
3. 環境變數設定
GOOGLE_SHEET_ID=1paCFI-QxJ3HjTrA4IOnZFQjuw2I7jh8KkTPiNSbfcoo
GOOGLE_CLIENT_EMAIL=your-service-account@project.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n....\n-----END PRIVATE KEY-----\n"
🌐 使用方式
🖥️ Web 訪問
📱 手機使用
- 響應式設計，自動適配手機屏幕
- 可以在手機瀏覽器加入書籤，像 App 一樣使用
- 支援離線瀏覽（使用 localStorage）
🔗 分享給其他人
- 直接分享 URL 連結
- 其他使用者無需安裝任何軟體
- 多人可同時使用（資料透過 Google Sheets 同步）
🎯 優勢特點
✅ 零安裝: 純網頁版，開瀏覽器就能用
✅ 跨平台: 支援所有裝置和作業系統
✅ 雲端同步: 資料自動備份到 Google Sheets
✅ 多人協作: 多個使用者可同時管理
✅ 成本低廉: Vercel 免費方案已足夠使用
✅ 維護簡單: 無需管理伺服器
🔧 本地開發
# 安裝依賴 (可選)
npm install
# 本地開發 (需要 Vercel CLI)
vercel dev
# 部署到 Vercel
vercel deploy
📞 技術支援
如有問題請檢查：
- 環境變數是否正確設定
- Google Sheets API 是否正確啟用
- 服務帳號是否有 Sheet 存取權限
- 網路連線是否正常
🎉 現在你有一個完全雲端化的學員管理系統了！
