人才媒合・商城・課程・社群——全端整合平台
2024 – Present
Dentalk 是一套專為牙醫產業打造的綜合性數位平台，整合人才媒合、線上商城、課程學習與社群論壇四大核心功能，服務對象涵蓋牙醫師、牙助、牙技師、牙科學生以及醫療院所與診所。
前端網頁以 Astro 5 + Vue 3 建構，行動 App 以 Flutter 原生開發（iOS + Android），後端採用 Laravel 11 提供 REST API，管理後台以 Filament 3 建構超過 60 個管理面板。系統整合 ECPay 金流、即時 WebSocket 聊天、OAuth 社群登入與QR Code 簽到等企業級功能。
平台上線後持續迭代，目前已累積超過 95 個資料模型、90+ API 端點與 28 個 App 功能模組，是團隊規模最大、技術複雜度最高的全端專案。
求職端可建立履歷、瀏覽職缺、追蹤面試邀約；企業端可發佈職缺、篩選人才、排程面試，雙向智慧媒合牙科從業人員與醫療院所
完整 C2C 電商系統，涵蓋商品上架（含規格/屬性/SKU 變體）、購物車、ECPay 金流（信用卡/ATM/超商付款）、超商取貨整合、訂單狀態機、退換貨流程
支援同步/非同步/混合教學模式，講師端管理課程章節與堂次，學員端報名繳費與 QR Code 簽到，內建考試系統與課後評價機制
社群論壇支援文章發佈、分類標籤、留言按讚、收藏分享；公會系統提供群組建立、成員審核、專屬商品與內容管理
基於 Laravel Reverb WebSocket 的即時通訊，支援多聊天室、已讀狀態追蹤、Redis 快取加速，串接求職、商城、社群等多場景對話
以 Riverpod + GoRouter 架構的 28 功能模組 Flutter App，支援 OAuth PKCE 登入（Google/LINE）、Deep Linking、ECPay WebView 付款、QR Code 掃描簽到
多層級內容審核機制——履歷版本審核、退換貨申請審核、檢舉處理、公會成員審核；搭配 AWS Rekognition 自動偵測商品圖片與用戶上傳內容，過濾不當影像與敏感內容
前端以 Astro 5.17 SSR 為基礎框架，搭配 Vue 3.5 進行互動元件開發。頁面採用 Server-side Rendering 提升 SEO 與首屏載入速度，互動區塊以 client:load、client:idle、server:defer 三種策略進行選擇性 Hydration，確保每個元件在最佳時機載入。
樣式層使用 TailwindCSS 4 + Flowbite 元件庫，搭配 Tailwind Merge 處理動態 class 合併。富文字編輯功能以 TipTap 實現，支援文字對齊、顏色、圖片嵌入與 YouTube 影片插入。日曆相關功能使用 FullCalendar，拖曳排序以 VueDraggable 實現。圖示系統透過 Unplugin Icons 動態載入 Flowbite、Heroicons、Tabler 等圖標集。
前端狀態管理採用 Nanostores（輕量級跨框架狀態庫），搭配 @vueuse/core 提供常用 Composition API 工具。HTTP 請求使用 ofetch，前端 API Client 實作 401 自動重導登入與 Token 自動刷新機制。
後端以 Laravel 11 / PHP 8.3 建構，提供 REST API v1 + v2 雙版本架構，共計 90+ API Controllers 涵蓋帳號、商品、訂單、聊天室、求職、課程、論壇等全部業務邏輯。資料層包含 95+ Eloquent Models 定義完整資料結構。
認證使用 JWT（tymon/jwt-auth）實作 Token-based API 認證，搭配 Laravel Socialite 支援 Google、Apple、LINE、Facebook 四種 OAuth 社群登入。Middleware Pipeline 包含 Origin Check（自訂 CSRF 防護）、Guest Guard、Auth Guard、Token Refresh、Identity Verification 與 Session Flash Data 等多層處理。
訂單系統採用 Eloquent State Machine 管理四種狀態機——OrderStatusStateMachine（主訂單流程）、OrderPaymentStatusStateMachine（付款狀態）、OrderShippingStatusStateMachine（出貨狀態）與 CourseOrderStatusStateMachine（課程訂單），確保每筆交易嚴格遵循業務規則。
階層式分類（商品分類、職缺類別等）以 Closure Table（franzose/closure-table）實現高效的樹狀查詢。活動日誌以 Spatie Activity Log 記錄所有關鍵 Model 的變更歷程，資料備份以 Spatie Backup 定期執行。
以 Filament 3 打造超過 60 個 Resource 面板，主要涵蓋以下管理場景：
商城管理——商品 / 規格 / 屬性 / SKU 變體 / 分類（巢狀樹）、訂單（含物流追蹤、退換貨審核）、商店設定與評價管理。
求職管理——公司 / 職缺 / 職缺分類、履歷 / 履歷版本審核、面試邀約追蹤。
課程管理——課程 / 堂次 / 章節、考試 / 題目 / 考試作答、出席記錄、課程訂單與付款設定。
內容管理——文章 / 文章分類、Banner、FAQ / FAQ 分類、公告頁面。
社群管理——論壇貼文 / 留言審核、公會成員管理、檢舉處理。
系統管理——管理員帳號、城市 / 區域資料設定。
權限控管以 Filament Shield（基於 Spatie Permission）實現細粒度 RBAC，不同管理員角色可見不同 Resource。安全層加入 Cloudflare Turnstile 防止後台暴力登入。Filament 擴展使用了 Select Tree、Nested Resources、Time Picker 等多個社群外掛。
串接 ECPay 綠界金流（tsaiyihua/laravel-ecpay），支援五種付款方式——信用卡一次付清、ATM 虛擬帳號轉帳、超商代碼繳費、超商條碼繳費與銀行轉帳。系統設有 B2C 與 C2C 雙商店模式，各自配置獨立的 Merchant ID 與 Hash Key/IV。
Web 端結帳流程透過後端產生 ECPay 表單後 Redirect 完成交易；Flutter App 端以 WebView 嵌入付款頁面，附帶 Bearer Token、Content-Language（zh-TW）、Time-Zone（Asia/Taipei）等自訂 Header。付款完成後 ECPay 透過 Webhook 通知後端更新訂單狀態。
系統同時支援電子發票開立（個人載具/公司統編）與超商物流串接，結帳時可選擇宅配到府或超商取貨。物流訂單有獨立的 LogisticsOrder 追蹤模型與出貨列印功能。
聊天系統後端基於 Laravel Reverb（WebSocket 伺服器，Port 6001 local / 443 production），前端以 Laravel Echo + Pusher.js（作為 Transport 層）監聽頻道事件。
後端以 ChatRoomRedisService 將聊天室 metadata 與訊息快取於 Redis，大幅提升讀取效能。聊天室支援一對一與群組模式，具備訊息已讀/未讀追蹤、歷史訊息分頁載入。應用場景包含商城客服（買賣雙方對話）、求職媒合（企業與人才對談）、社群私訊等。
Web 前端以 Laravel Echo Vue 搭配 Vue 3 Composable 封裝即時事件監聽，App 端以 flutter_chat_ui 套件建構聊天介面。
系統支援三種認證策略：Email / Password（傳統帳號註冊，支援多步驟註冊流程）、OAuth 2.0 PKCE（Google / Apple / LINE / Facebook，以 code_challenge + code_verifier 確保安全性）、App WebView Token（AES-256-GCM 加密，含 30 秒 Timestamp 防重放攻擊）。
Web 端 Session 以 2 小時 TTL 儲存於 Server-side，支援 Token 自動刷新與 Flash Message 跨請求傳遞。Flutter App 端 Token 存放於 Secure Storage（加密儲存區），Dio Interceptor 自動處理 401 錯誤並強制登出。Deep Link 回呼支援 Custom Scheme（dentalk://oauth/callback）與 Universal Link 雙通道。
平台使用者分為多種身份：牙醫師、牙助、牙技師、牙科學生、醫療院所/診所、一般會員等。系統以多階段身份驗證（status1 / status2 / status3）追蹤每位使用者的認證進度，並搭配 Middleware（ensureVerifiedUser）限制未驗證用戶存取特定功能。
求職相關路由以 jobSettings Middleware 區分「人才端」與「企業端」，提供不同的頁面與 API 存取權限。商店功能以 storeSettings Middleware 確保商家已完成店鋪設定。
平台建立多層級內容審核流程：履歷版本審核（求職者提交 → 管理員審核通過/退回）、退換貨審核（買家申請 → 賣家 / 平台審核）、檢舉處理（論壇貼文與留言檢舉 → 管理員處置）、公會成員審核（申請加入 → 會長審核）。每項審核皆以 State Machine 或 Status Enum 管控流程，搭配 Spatie Activity Log 完整記錄審核歷史與操作軌跡。
圖片辨識整合 AWS Rekognition，用於商品圖片上傳時自動偵測不當內容（Moderation Labels），以及用戶頭像與證件照的合規性檢查。上傳圖片先存至 AWS S3，觸發 Rekognition DetectModerationLabels API 進行即時分析，若偵測到違規內容則自動標記並阻擋上架，管理後台可查看審核結果與信心分數。
Filament 後台提供統一的審核儀表板，管理員可依審核類型（履歷 / 退換貨 / 檢舉 / 圖片）進行批次處理，搭配篩選與排序快速定位待審項目。
行動 App 以 Flutter 3.8+ 開發，架構採用 Feature-Driven Modular Architecture，每個功能模組獨立為 models/、entities/、presentations/（screens + widgets + providers + notifiers）、repositories/ 四層結構，遵循 MVVM + Repository Pattern。
狀態管理統一使用 Riverpod 3.0，所有 State Class 以 Immutable copyWith() 模式實作，搭配 Equatable 確保正確的相等性判斷。UI 層以 HookConsumerWidget（結合 flutter_hooks + Riverpod）與 ConsumerWidget 建構，支援 FutureProvider.autoDispose.family 等進階 Provider 模式。
導航使用 GoRouter，以 ShellRoute 包覆 Bottom Navigation（論壇/職缺/課程/商城/個人），支援 40+ Named Routes 與 Deep Linking。API 層以 Dio 5.9 + Cache Interceptor（10 分鐘預設 TTL）實現智慧快取，並提供 dioProvider（快取）與 uncachedDioProvider（即時）兩組 HTTP Client。登出時自動清除所有快取資料。
多媒體功能包含 image_picker（相機/相簿取圖）、flutter_image_compress（上傳前壓縮）、mobile_scanner（QR Code 掃描出席）、pretty_qr_code（學員 QR Code 生成）。手勢操作以 HammerJS 增強，輪播以 Swiper 實現，Tooltip 定位以 Floating UI 處理。
Redis 作為快取層（前綴 dentalk_）、佇列 Driver 與 WebSocket Broadcasting 通道。前端 Session 以 Astro Cookie Session 儲存。
檔案存儲統一使用 AWS S3，支援多型態附件——商品圖片（含自動尺寸偵測）、課程封面、公司 Logo/背景圖、使用者大頭照、履歷附件文件。Polymorphic Attachment Model 使同一套上傳邏輯可套用於任何 Model。
錯誤追蹤使用 Sentry（sentry/sentry-laravel），即時捕捉後端 Exception 與 API 錯誤。前端以三層錯誤處理——Server-side errorHandler（GET 請求錯誤統一處理）、Client-side 401 自動重導、Flash Message 跨請求錯誤傳遞。
部署方面，Production 使用 Node.js Standalone Adapter 部署於 Ubuntu Server，Staging 使用 Netlify Adapter。環境以 --mode 切換 Development / Staging / Production 三組設定。資料備份以 Spatie Backup 自動排程執行。
