🍔 #5 校園點餐系統 v3.4.2：Firebase + React 三端分離（顧客 / 廚房 / 叫號）+ 多班級獨立庫存 + OAuth 權限分級
#5「校園點餐系統 (Campus Food Order)」v3.4.2 — 基於 Firebase + React 的現代化校園園遊會點餐系統。**三端分離**（顧客點餐 / 廚房管理 / 叫號顯示完全獨立）+ Firestore 即時資料庫 + 多班級獨立庫存（每班一個攤位）+ Firebase Auth Google OAuth 三層權限（owner / staff / none）+ PWA 離線。
校慶園遊會的真實痛點
學校每年校慶 / 園遊會 → 每班一個攤位賣食物：
- 攤位 5-10 個 × 全校 20 班 = 100-200 個點餐窗口
- 痛點：
- 排隊找零亂（學生不會算錢）
- 菜單寫在紙板上容易掉
- 廚房做完不知道誰是顧客
- 顧客不知道自己的餐好了沒
- 老師統計營收要花一整晚
阿凱的 #5 校園點餐系統 反向：Firebase 即時 + 三端分離 + 多班級獨立庫存。
#5 真實技術細節（v3.4.2）
真實名稱：「校園點餐系統 (Campus Food Order)」
🌟 五大核心特色：
- ⚡ 即時同步：Firestore 即時資料庫，訂單狀態即時更新
- 🎯 三端分離：顧客點餐 / 廚房管理 / 叫號顯示完全獨立
- 📱 響應式設計：支援手機 / 平板 / 大螢幕
- 💾 離線支援：前端 localStorage 快取
- 🚀 PWA 就緒：可安裝到手機主畫面
三端分離設計（核心殺手鐧）
顧客點餐 App 廚房管理 App 叫號顯示 App
/order/ /kitchen /display/
↓ ↓ ↓
Firebase Firestore 即時同步
5 個路由：
| 路徑 | 角色 | 用途 |
|---|---|---|
/ | 班級選擇 | 顧客選要點餐的班級攤位 |
/order/:classId | 顧客點餐 | 指定班級的點餐介面 |
/kitchen | 廚房管理 | 接單 / 調庫存（店長可切班級） |
/display/:classId | 叫號顯示 | 大螢幕顯示取餐 |
/admin | 管理中心 | 店長班級 + 用戶管理 |
完整版本演進史
v3.4.2 (2026-03-10)：擴充預設品項分類、自訂分類快捷、豐富預設值「一鍵升級舊班級」
v3.0.0 (2026-01-09)：多班級獨立庫存系統大改版
- 🏫 每班一個攤位 → 各自菜單 / 庫存
- 📋 班級選擇首頁
- 🔄 店長可在廚房後台切班級
- 🔗 動態路由
/order/:classId//display/:classId - 🔒 OAuth 驗證優化
v2.0.0 (2026-01-08)：
- ✨ PWA 支援
- 🔐 Firebase Auth Google/Email
- 👥 權限分級
🔐 OAuth 三層權限
| 角色 | 權限 |
|---|---|
| owner | 完整權限，可清除資料 |
| staff | 接單 / 調庫存 |
| none | 無權限（防止無權人員亂改） |
設定流程：
- Firebase Console 啟用 Google 登入
- 用 Google 帳號登入
/kitchen - 在 Firestore
users集合把 role 改為 owner
真實技術棧
- 前端：React + Vite + TypeScript + Zustand 狀態管理
- 後端：Firebase Firestore + Authentication
- Cloud Functions（選用）：API 端點
- Firestore 資料結構：
menuItems（含 stock 庫存）orders（訂單流：Pending / Preparing / Completed / Paid / Cancelled）system/config（isOpen / waitTime）
- 部署：
cagoooo.github.io/vendor/+ Firebase Hosting
跟「許願池」隱藏作品的關係
#27 swissknife 許願池 文章內提到 swissknife 子站還有：
- 「取餐叫號區」
- 「校園點餐後台」
→ 這是 #5 校園點餐系統 v1.0 早期版本（Google Sites Embedded）。 v3.4.2 GitHub Pages 版 已經把這些子功能合併進三端分離架構。
「從 swissknife 早期版 → cagoooo.github.io/vendor v3.4.2 GitHub 版」 = 阿凱漸進式工具升級的代表案例（跟 #87 PIRLS Pro 從 #4 升級同款邏輯）。
API 端點（Cloud Functions 選用）
| 端點 | 用途 |
|---|---|
/getMenu | 取菜單 + 系統狀態 |
/getTrending | 熱銷品項 |
/placeOrder | 顧客下單 |
/getOrders | 訂單列表 |
/updateOrderStatus | 更新狀態 |
/updateStock | 更新庫存 |
/getStats | 統計資料 |
教學情境
校慶園遊會（單日 4-6 小時）：
- 上午 9 點開校慶
- 顧客掃 QR → 進
/order/602點 602 班攤位 - 廚房學生在
/kitchen接單做菜 - 大螢幕掛
/display/602顯示「602 班 - 第 12 號餐已完成」 - 全程無紙本 + 無人工算錢
多班同時開攤：
- 每班獨立路由
- 不同班庫存互不影響
- 老師管理員可切換班級看狀況
期末統計：
/admin一鍵看全校營收- 哪班最熱銷 / 平均等待時間
配對工具推薦
- #27 swissknife 許願池 — 含早期版本
- #48 動態表單系統 — 一般表單需求
- #3 即時投票 — 同款 Firebase 即時同步
適用對象
- 國中小校慶 / 園遊會承辦
- 想做「校園活動數位化」的學校
- 想看「Firebase 即時 + 三端分離架構」的開發者
- 補習班 / 才藝中心（活動報名 + 餐點訂購）
- 想做小型線上點餐系統的人
想試試？
下次校慶 — 每班一個攤位 + 用 #5 跑 → 不用 cash 不會算錯 + 統計自動。