營運痛點：現場租借流程的人工瓶頸
遊園車租借屬於現場高頻、即時性高的服務流程，傳統人工處理容易產生以下問題：
- 租借狀態不透明：現場人員需靠紙本、口頭或記憶確認車輛是否可租，尖峰時段容易誤判。
- 計時與收費易出錯：歸還時間、逾時計費與人工試算混在一起，容易造成收費爭議。
- 交接紀錄不完整：客人資料、同意時間、交鑰匙、歸還、核銷與作廢缺少統一軌跡。
- 團體租借複雜：多台車同時租借時，若缺少系統化管理，容易混淆車輛狀態與核銷進度。
產品策略：建立「現場租借數位工作流」
本系統將遊園車租借拆成「客人自助填寫」與「員工後台核銷」兩條流程：
- 客人端自助租借：客人選車、填寫資料並送出後，系統建立待交鑰匙租用紀錄。
- 現場員工快速處理：員工可進行交鑰匙、歸還、核銷與車輛啟停，降低現場排隊壓力。
- 團體租借入口：支援團體一次選擇多台車，但每台車仍保留獨立計時與獨立核銷。
- 權限分層入口：以現場與管理權限區分操作範圍，降低高風險操作外流。
商業價值與影響力
- 降低現場溝通成本：租借狀態、車輛可用性與付款核銷集中於同一套系統。
- 減少收費爭議：計費規則由程式統一計算，歸還後即時產生應收金額。
- 提升尖峰處理效率：現場人員不用手動查表、計時與重複登記，可專注在交車與服務。
- 建立可稽核資料軌跡：從租借、交鑰匙、歸還、核銷到作廢皆有狀態紀錄，利於後續查帳。
- 支援營收同步：核銷後可將每日營收同步至 Google Sheet 總業績表，降低月底彙整成本。
核心功能
客人租借前台
- 車輛狀態即時顯示：客人可直接查看目前可租車輛。
- 單台與團體租借：支援一般租借與團體多台車一次送出。
- 租借同意流程：租借前完成必要資料與同意確認，保留數位紀錄。
- 手機版優先體驗：針對現場掃碼填寫情境設計，降低操作門檻。
員工後台
- 現場操作入口：可處理交鑰匙、歸還、核銷與車輛啟停。
- 管理入口：可查看核銷紀錄、歷史資料與營收狀態。
- 車輛管理：支援車輛啟用、停用與即時狀態追蹤。
- 營收同步：核銷、金額調整與作廢後，重新計算當日收入並同步至 Google Sheet。
技術亮點
- 輕量化前端架構：以 Vanilla JavaScript 拆分
app.js、api.js、store.js、render.js，避免不必要框架成本。 - Cloudflare Pages Functions API：前台與後台統一走
/api/*，將資料存取與權限判斷集中在後端。 - Supabase RLS 與後端權限雙層防護：匿名端只能讀取必要公開欄位，員工端依權限等級放行。
- 現場權限模型：將客人端、現場端與管理端分流，避免現場入口暴露過多管理能力。
- Google Sheets 營收同步：核銷後自動寫入總業績表，串接既有營運報表流程。
- 自動化測試覆蓋核心規則：包含計費邊界、權限檢查、公開 API 與資料安全測試。
系統架構
客人 / 員工瀏覽器
│
├── 靜態前端：index.html / styles.css / app.js
│
└── Cloudflare Pages Functions
├── public-state / public-rentals
├── staff-login / staff-rentals / staff-action
├── 權限檢查與 rate limit
└── Google Sheets 營收同步
│
└── Supabase PostgreSQL
技術棧
- 前端：HTML, CSS, Vanilla JavaScript
- 後端：Cloudflare Pages Functions
- 資料庫：Supabase PostgreSQL
- 權限：HMAC token, staff level guard, Supabase RLS
- 整合：Google Sheets API
- 測試：Node.js test runner
- 部署：Cloudflare Pages
成果證明
「本專案展現了如何用低維護成本的 Web 架構，將現場租借、計時、核銷、權限與營收同步整合成一套可實際營運的系統，讓第一線作業從人工記錄升級為可追蹤、可驗證、可持續擴充的數位流程。」
💡 AI 協作筆記：本專案之 [流程拆解 / 權限設計 / 計費邏輯 / UI 調整 / 測試補強] 係透過與 AI 深度對話共同完成，展現了高效能的 AI 輔助開發模式。