後端、前端、App 各自需要什麼?

一句話總結:10 維度是所有 Proto 的基線,但後端在意 API 架構和資料庫層,前端在意狀態管理和元件系統,App 在意原生功能和安全存儲。

結論先講:如果你只拿通用的 10 維度來檢查所有 Proto,一定會漏掉 Track 特有的需求。後端沒有 Repository Pattern 不行,前端沒有 Error Boundary 白屏,App 沒有 Certificate Pinning 被中間人攻擊——這些都是各 Track 的「生死問題」。

B2E(後端):API 服務的完整骨架

後端 Proto 的核心是「從請求進來到回應出去的每一層都有規範」。

除了通用的 10 維度之外,後端特別需要:

套件管理:lockfile 一定要有。dev / test / lint 的依賴要分組,production image 不需要包含開發工具。

資料庫層:連線池設定、Base Model(UUID PK + soft delete + timestamps)、Migration 命名規範、zero-downtime migration 原則。

API 架構:RESTful 命名慣例、版本前綴 /api/v1/、Serializer / DTO 處理請求驗證和回應格式化、Cursor-based + Offset-based 兩種分頁、OpenAPI 自動產生。

認證授權:JWT lifecycle(Login / Logout / Refresh)、Access + Refresh Token 管理、RBAC 角色權限檢查。

業務層:Service Pattern 把邏輯集中在 Service 層、Repository Pattern 把資料存取抽象出來。至少一組從 Router → Service → Repository 的完整 CRUD 範例。

範圍外:Docker、CI/CD、CORS、部署、備份、Multi-tenancy、WebSocket。這些不是每個專案都需要,或者歸 Infra 管。

F2E(前端):SPA 的完整骨架

前端 Proto 的核心是「從路由到元件到狀態管理的每一層都有規範」。

路由:路由表設定、lazy loading、Layout System(Base / Auth / Admin 切換)、Navigation Guards 做認證和權限檢查。

狀態管理:全域 Store(Auth Store、App Store)+ Feature Store。統一的 action / getter 命名規範。

API 層:HTTP Client 封裝(Axios + Interceptors),Token 自動注入、401 自動處理、Error 統一轉換。每個 feature 有自己的 api 檔案。

錯誤處理:Error Boundary 防白屏、Loading / Empty / Error 三態元件、Toast 友善提示。

表單系統:Schema-based validation(Zod / Yup)、即時驗證 + 送出驗證的 UX pattern。

元件系統:Design Tokens(Color / Typography / Spacing)、基礎元件(Button / Input / Select)、Overlay 元件(Modal / Drawer / Toast)。

範圍外:Docker、CI/CD、PWA(選做)、Push Notification(選做)。

App(行動應用):跨平台的完整骨架

App Proto 除了前端的那些需求之外,還有原生功能跟安全的特殊要求。

安全存儲:flutter_secure_storage / Keychain / Keystore。敏感資料不能放 SharedPreferences 或 AsyncStorage。

Certificate Pinning:SHA-256 指紋驗證,防止 MITM 攻擊。這不是選配。

原生功能整合:Push Notification(FCM / APNs)、Network Connectivity(離線處理)、App Lifecycle(前背景切換)、Permission 管理(相機、相簿、位置)。

認證:除了 JWT lifecycle,還有 OAuth(Google / Apple 登入)和 Biometric Auth(指紋 / Face ID)。

Crash Reporting:Sentry 或 Crashlytics 整合。App 裡的錯誤你看不到 log,crash report 是唯一的線索。

範圍外:CI/CD Pipeline、Android/iOS 簽章、Store 上架流程——歸 Infra。

各 Track 的實際完成度

做過 Gap Analysis 之後,三個 Track 的有效完成度:

  • B2E (Django):~89%(扣除 Infra 項)
  • F2E (Vue 3):~86%
  • App (Flutter):~86%

未完成的項目多是可選項(Analytics、i18n)或已歸 Infra 的項目。安全層在 App Track 達到 100%——這是正確的優先順序。

這篇的重點回顧

每個 Track 在通用 10 維度之上都有自己的核心需求。跨 Track 的共同標準是「回答同樣的問題」(怎麼管狀態?怎麼做認證?),具體的答案隨語言和框架而異。

系列文章:

延伸閱讀:

「好的 Track 標準不是要求所有語言做法一樣,而是要求所有語言回答同樣的問題。」