Contents
概述
商業專案,工作室負責全端開發。學員端要能進入課程、查看課節與進度;管理者要管理員工、教材與學習狀況。平台同時要處理不同工廠的資料隔離,以及越南學員看得懂的內容欄位。
問題
課程完成、單課節進度、經驗值與 Streak 都依賴學員實際完成的行為,只在前端更新百分比會對不起來。學員、教材與報表要跟工廠範圍綁在一起,不是加一個下拉選單就好。Excel/CSV 匯入「成功」不代表資料可用。
解法
進度視為同一套學習流程的一部分,前端與 Analytics 讀同一份資料。Tenant Context 帶過認證、API 與後台操作。匯入流程顯示處理進度、成功與失敗筆數,以及對應的列號、姓名和錯誤原因。
學員端 / 管理後台(Next.js)──▶ NestJS API ──▶ PostgreSQL
│ Redis
├──▶ Analytics API
├──▶ Excel / CSV 匯入(背景處理)
└──▶ Push Notification主要功能
- 課程、課節、教材、進度與學員管理
- 經驗值、Streak、推薦、徽章與證書
- HSK 詞彙、拼音、注音、越南語近似發音與工廠情境教材
- 管理報表接 Analytics API,呈現參與度與學習狀況
- Excel/CSV 批次匯入與後台處理流程
- 多語系內容、驗證、Modal 確認、RWD 與行動版導覽
- 認證、API Route、工廠資料隔離與部署設定
架構
進入課程 ──▶ 完成課節 ──▶ 學習事件
│
▼
進度 / 經驗值 / Streak / 徽章(同一套流程更新)
│
├──▶ 學員端顯示
└──▶ Analytics API ──▶ 管理報表登入 ──▶ 認證 ──▶ Tenant Context(工廠)+ 角色
│
▼
API 與後台操作都檢查:
這個角色 ∧ 這個工廠 ∧ 這個資源Excel / CSV ──▶ 格式檢查 ──▶ 逐列驗證(欄位缺漏、重複)──▶ 寫入
│
└──▶ 失敗列:列號、姓名、原因 ──▶ 管理者修正後重試工程決策
進度不是畫面上的百分比
重新整理或從另一頁回來就會對不起來。把課程完成、課節進度、經驗值與 Streak 當成同一套學習流程的輸出,前端與 Analytics 讀同一份。
同一套系統不能看到別的工廠
Tenant Context 帶過認證、API 與後台操作,並檢查管理者實際能存取的範圍。
匯入成功不代表資料可以用
真正要處理的是格式、缺漏、重複與單筆失敗。回報到列號與原因,管理者才修得動。
教材內容不是只有一個中文欄位
繁體中文、越南語、拼音、注音、近似發音、詞性、分類、HSK 等級、產業、難度。這些欄位同時影響學員端、後台與匯入,要在內容模型和表單驗證一起處理。
畫面
品牌、工廠識別與主要人物影像已去識別化。


技術
TypeScript、Next.js、NestJS、PostgreSQL、Redis、Docker、Multi-tenant、RBAC、PWA。
結果與心得
- 進度、經驗值與 Streak 出自同一套流程,前端與報表才對得起來。
- 匯入要回報到列號與原因,「成功」兩個字才有意義。
- 在地化不是翻譯一個欄位,而是內容模型、表單驗證與匯入一起改。
公開範圍
公開的是課程、進度、企業管理、在地化內容與批次匯入等部分功能。OCR 與語音辨識不在完成範圍內,不列為平台已提供的能力。
