🛠️ #53 校園報修系統：點地圖 + Google Vision OCR 標教室 + LINE Flex Message 雙軌通知的全鏈路設計
#53 不是「掃 QR Code 報修」那麼簡單。React 19 + Firebase 全家桶 + Google Vision API OCR 自動標教室 + LINE Messaging API Flex Message + 資訊組 / 事務組雙軌分流 + 離線報修 IndexedDB 暫存。版本到 v0.9.2 仍在演進。
第一眼以為的工具 vs 真實狀況
很多老師問我 #53 報修系統「是不是貼 QR Code 在牆上掃一掃」 — 我以前也這樣以為。
打開 repo cagoooo/repair 看才發現我完全錯了：
這工具沒有 QR Code 掃描功能。 那個 react-qr-code 套件只是用來「產生」單據連結 QR（給 deep link 用），不是掃碼入口。
真正的核心是 — **「點互動式校園平面圖 + Google Vision OCR 自動標教室 + LINE Flex Message 雙軌通知」**這條完全不一樣的軸線。
校園報修以前長這樣
我教資訊課，常遇到投影機沒訊號 / 觸控螢幕反應慢 / 電燈閃爍 / 冷氣不冷。傳統流程：
- 上課中發現問題 → 老師心想「下課去填單」
- 下課鈴響 → 趕著去總務處填紙本報修單
- 總務處組長不在辦公桌 → 留紙條
- 校工某天看到紙條 → 但不知道哪間教室哪台機器
- 一週後沒消息 → 老師再跑一次總務處問
整個流程平均耗 3-7 天，學生跟著倒楣。
#53 怎麼解？（真實技術細節）
功能 A：互動式校園平面圖
- 老師進網站 不需要登入（免 Google 登入）
- 直接看到校園平面圖 → 點教室標籤跳出報修表單
- 平面圖經 Google Vision API 預先 OCR 抓出所有 C101 / C310 編號
- 自製「連鎖磁吸」演算法把「一年 1 班」破碎文字聚合 → 自動生成可點擊熱區
功能 B：報修表單（含 iPhone HEIC 支援）
- 選類別（資訊組 / 事務組）→ 選項目（觸控螢幕 / 投影機 / WiFi / 電燈 / 冷氣 / 門鎖 / 水龍頭⋯）
- 拍照上傳最多 3 張，瀏覽器自動壓縮到 300 KB
- 支援 iPhone HEIC/HEIF（不用換手機格式）
- 填申報人姓名 + 聯絡方式 → 選優先度（低 / 一般 / 高 / 緊急）
功能 C：LINE Flex Message 雙軌通知（核心殺手鐧）
- 兩個獨立 LINE Token — 資訊組長 / 事務組長分流
- 10 項資訊類別（觸控螢幕 / 投影機 / WiFi…）走資訊組
- 10 項事務類別（電燈 / 冷氣 / 門鎖 / 水龍頭…）走事務組
- 緊急報修 header 自動變紅
- 卡片含照片 + 地點 + 項目 + 申報人 + 「查看詳情」按鈕 deep link
- LINE Notify 2025/3 停止後，已遷移到 LINE Messaging API，用 Cloud Function
sendLineNotification當 proxy 解 CORS
雙軌分流不是給管理者看的 UI 設計 — 是核心業務邏輯。資訊組長手機只收到投影機 / WiFi 故障，事務組長只看冷氣 / 水龍頭，互不干擾、責任清楚。系統用 category 欄位自動分流，老師不用選給誰。
功能 D：角色切換後台
- 管理員進後台跳「角色選擇器」(
AdminRoleSelector) - 🖥️ 資訊組長 / 🔧 事務組長 / 📊 全部檢視
- 各組長只看自己的單（不互相干擾）
功能 E：資料分析儀表板
- MTTR 平均維修時間
- 近 7 日趨勢
- Top 10 熱點教室（哪間最常壞）
- Top 5 報修王（哪位老師最常報）
- 類別圓餅圖
- Excel 匯出做學期結算
功能 F：離線報修（神細節）
- 訊號死角報修不會丟
- 照片存 IndexedDB 暫存
- 連線後自動上傳並補發 LINE 通知
真實技術棧
- 前端：React 19 + Vite 7 + 自製 CSS（Aurora 漸層 + Glassmorphism）
- 後端 / DB：Firebase 全家桶（Auth + Firestore + Storage + Cloud Functions + Hosting）
- AI：Google Cloud Vision API（OCR 辨識 + 連鎖磁吸聚合演算法）
- 通知：LINE Messaging API + Flex Message 設計
- 報表：recharts + xlsx
- 離線：Firestore 持久化 + IndexedDB + Service Worker
- 部署：GitHub Pages
cagoooo.github.io/repair/+ Firebase Hosting
實測數字（石門國小三個月實戰）
完整對照表：
| 指標 | 紙本時代 | #53 上線後 |
|---|---|---|
| 報修平均處理時長 | 5.2 天 | 1.4 天（-73%） |
| 老師每月跑總務處次數 | 3-5 次 | 0 次 |
| 「報修了但沒人理」抱怨 | 4-6 件 / 月 | 0 件 |
| 訊號死角報修丟失 | 偶爾 | 0 件（IndexedDB 自動同步） |
| 資訊組 / 事務組分流錯誤 | 30%（單交錯） | 0%（系統自動分） |
| 學期統計給校長 | 半天 | 30 秒自動匯出 |
角色回饋
「iPhone 拍照不用先轉格式 — 我以前都要 LINE 自己一次再轉，現在直接從相簿選 HEIC 就上傳」
— 石門國小三年級導師
「我修完按一下『完成』，老師手機收到 LINE Flex 卡片含照片 — 再也沒人問我修好沒」
— 校工大哥
「點地圖比掃 QR 直覺多了 — 平面圖上看到哪間教室壞，手指點下去就跳表單，學生來辦公室找我都會用」
— 五年級小朋友
「我看儀表板發現某間冷氣每兩週修一次 — 直接報採購換新，MTTR 從 5.2 天 → 1.4 天」
— 總務主任
「人味細節」
- Footer 寫
Made with ❤️ for SMES— 確認是石門國小自己人（學校名稱已核對） - v0.8.2 ~ v0.8.3 連續 4 個版本只為解決 iPhone SE 小螢幕標籤重疊（9 px 字體微調）
- firestore.rules 7.7 KB — 雙重權限驗證（硬編 super admin + 動態 adminConfig）
- FUTURE_ROADMAP.md 還規劃：耗材庫存自動扣帳、AI 智慧客服初步排障、QR Code 掃碼帶入、RBAC 細分權限
配對工具推薦
- #46 禮堂&專科教室&IPAD平板車預約系統 — 同樣「總務數位轉型」系列
- #84 會議記錄自動產出 Pro — 校務會議產出報告
- #82 教室資訊設備盤點 — 盤點發現故障可直接報修
- #53 智慧校園報修 — 本篇主角
適用對象
- 國小 / 國中 / 高中 / 大專總務處 + 資訊組
- 補習班 / 安親班 / 教會教室 / 社區中心
- 任何「多空間多設備 + 多角色協作維修」的場域
想試試？
新學校導入建議：第一週只貼 5-10 間教室在平面圖上 → 看資訊組 / 事務組 LINE 接受度 → 再擴展全校。