台大衛教系統 React 版本

• 衛教系統一共分成兩大項：
  • 使用者模式
  • 訪客模式

訪客模式

訪客模式將會有以下限制：

1. 無觀看紀錄
2. 無基礎練習／練習／測驗紀錄
3. 無更改設定功能

訪客模式流程

1. 透過訪客登入
2. Laravel API 進行溝通取得臨時權杖(Token)
3. 進入首頁中進行部分限制操作

使用者模式

使用者模式功能：

1. 可完整存取管理人員已勾選各類型(基礎練習/練習/測驗)影片與測驗題目
2. 可設定用戶名、變更密碼與變更信箱
3. 忘記密碼時，可透過忘記密碼功能透過信箱取回 OTP 密碼

使用者模式流程

1. 透過輸入帳號(病歷號)、密碼進行使用者登入
2. Laravel API 進行溝通取得權杖(若有按下記住我，則會依照權杖揮發日期進行確認)
3. 進行使用者登入操作

專案解說：

• src: 專案主軸皆在此資料夾內
  • assets: 圖檔放置的位置
  • client: 客戶端 web 功能
    • axios.jsx 負責與後端 API 溝通的檔案
    • Header.jsx 上方導覽列
    • Footer.jsx 下方頁尾(暫時捨棄)
    • Form: 與使用者互動的表單有關功能會放置於此資料夾內
    • JSON: 與使用者篩選器有關的引入資料會放置於此資料夾內
    • Pages: 客戶端各個頁面的功能會放置於此資料夾內
      • Home.jsx: 客戶端首頁
      • Login.jsx: 客戶端登入頁面
      • ForgotPasswordForm.jsx: 客戶端忘記密碼頁面
      • Record.jsx: 客戶端練習/測驗紀錄頁面
      • RewritePassword.jsx: 客戶端重設密碼頁面
      • UserComment.jsx: 客戶端用戶回饋頁面
      • UserSetting.jsx: 客戶端用戶設定頁面
      • UserTips.jsx: 客戶端使用教學頁面
      • VideoChapterPlayer.jsx: 客戶端影片播放頁面
      • VideoList.jsx: 客戶端影片列表頁面
      • VideoPlayer.jsx: 客戶端影片播放元件
  • components: 整個專案頻繁調用的元件庫
  • js: 整個專案頻繁調用功能如:轉換時間、API 調用、Modal 視窗 Hook
  • styles: 整個專案的樣式庫
  • App.jsx: 路由、未更改密碼提醒功能
  • AuthProtected.jsx 路由保護，用於確認使用者 LocalStorage 或 SessionStorage 當中是否存在用戶資料
  • PermissionProtected.jsx 權限保護，避免訪客模式惡意嘗試無訪問權限路由
  • RewritePasswordProtected.jsx OTP 更改密碼保護，避免使用者在未輸入 OTP 認證碼情況下，惡意轉向修改密碼路由
  • main.jsx: 主頁所調用的 React 檔案，此專案底下使用嚴謹模式

專案注意事項：

第一次使用時，請透過github 連結下載 zip 檔案後，透過使用指令下載對應版本的套件

npm i

若要在本機執行本專案，請由 Terminal 執行以下指令

npm run dev

專案底下的兩個檔案請勿直接進行修改!!，該檔案是由下載套件時自動生成
兩個檔案內的資訊主要包含了當前使用 node 專案，如 vite、以及當前下載套件的版本號

• [package-lock.json]
• [package.json]

代辦事項

1. 新增基礎練習／練習／測驗整體完成率於影片清單中
2. 部分程式進行優化

製作團隊

本台大衛教系統係由 Dr.H.Group 研究團隊進行研發。
v1.0.0 研發成員為：顏銘德、高彬軒
本專案託管由：顏銘德負責，聯絡資訊：[email protected]

版本資訊

主要版本號：1.0.0