###### tags: `專案系統` `NextJS`
# Q3 非履約 - 課程報名系統
※ <font style="color:red;font-weight:bold;">紅色字體為自行擴增之功能</font>
※ <font style="color:blue;font-weight:bold;">藍色字體為未來可能會做亦可能不會做</font>
※ <font style="color:green;font-weight:bold;">綠色字體為需要討論</font>
## 資料庫
- MongoDB : 後台管理者資料、用戶資料、報名資料
- Firebase : 課程資料
## 前台功能
- ### 註冊功能
- 需填入會員帳號名稱、姓名、電子郵件、密碼
- 如已註冊的會員(電子郵件),將會顯示已註冊等字樣的彈跳視窗
- 密碼不得低於8位數
- 如已登入狀態的使用者進入註冊頁面,將會自動導向至首頁
- ### 登入/登出功能
- 需填入電子郵件、密碼
- 如未註冊或輸入之帳號密碼有誤,將會顯示相關錯誤的彈跳視窗
- 如已登入狀態的使用者進入登入頁面,將會自動導向至首頁
- ### 會員中心
- 個人檔案
- 可以修改帳號、姓名與電話號碼,電話號碼可填可不填, <font style="color:blue;font-weight:bold;">現階段並未做電話號碼唯一值的處理</font>
- 修改密碼
- 需要輸入目前密碼、新密碼與確認新密碼,即可修改密碼
- <font style="color:red;font-weight:bold;">課程紀錄</font>
- 可以查看此會員報名之課程紀錄(包含代理報名)
- ### 課程顯示
- 首頁
- 顯示6筆精選課程,點擊下方 "看更多精選課程" 即可跳至精選課程頁面
- 所有課程
- 課程篩選 Tab 鍵 : 全部、未開始、報名中、已截止
- 每頁顯示6筆課程資料,課程圖片的右下角會顯示課程狀態,分別為 : 尚未開放報名、報名中、已額滿、報名已截止
- 如果該篩選機制為無課程資料,將會顯示相關無課程的字樣
- 精選課程
- 每頁顯示6筆精選課程
- 詳細課程頁面
- 顯示課程圖片、報名日期、上課日期、課程描述...等等
- ### 課程報名
- 於詳細課程頁面中的報名按鈕,如果為尚未登入的狀態,點擊時將會跳出未登入的彈跳視窗。如課程已額滿、尚未開放或已截止,課程將會轉為 disabled
- 於課程報名頁面,會顯示課程圖片、課程描述、上課日期...等等,右側為報名者需輸入的報名者名字、電子郵件、電話號碼
- 報名頁面的名字與電子郵件之預設值為會員的名字與電子郵件,如電話於個人檔案有填寫,在此頁面之電話號碼欄位將會預設為會員之電話號碼
- 此報名機制預設可以進行代理報名,如某會員重複報名某課程,系統於後端會判斷電子郵件是否重複,如果是則跳出 "已報名該課程" 的彈跳視窗
- 報名成功頁面將顯示成功字樣,並顯示報名編號、報名者姓名與報名時間
- 如未登入之使用者透過URL進入報名頁面或報名成功頁面,將會跳出 "無權限需要登入" 的字樣
## 後台功能
※ 管理者於無登入狀態進入後台所有頁面,都會被系統自動導向至後台登入頁面
- ### 登入功能
- 需填入電子郵件、密碼
- 如未註冊或輸入之帳號密碼有誤,將會顯示相關錯誤的彈跳視窗
- 如已登入狀態的使用者進入登入頁面,將會自動導向至首頁
- ### 後台
- 首頁 -> 控制台
- ### 後台管理者管理
- 以表格列表的形式顯示後台管理者資料,可以選擇顯示5筆、10筆、25筆或全部資料<font style="color:blue;font-weight:bold;">(Material UI Table 顯示 ALL 資料傳遞參數有誤,會少最後一筆,暫時未處理)</font>
- <font style="color:red;font-weight:bold;">可以輸入帳號或電子郵件關鍵字查詢資料</font>
- 可以新增、刪除、修改資料
- ### 課程管理
- 以表格列表的形式顯示課程資料,可以選擇顯示5筆、10筆、25筆或全部資料<font style="color:blue;font-weight:bold;">(Material UI Table 顯示 ALL 資料傳遞參數有誤,會少最後一筆,暫時未處理)</font>
- <font style="color:blue;font-weight:bold;">現階段並未做資料查詢</font>
- <font style="color:blue;font-weight:bold;">現階段並未做新增、刪除、修改資料之後端功能,但資料傳至後端是正確無誤的</font>
- 點擊課程名稱,會進入課程詳細資料頁面供檢視
- ### 用戶管理
- 以表格列表的形式顯示用戶資料,可以選擇顯示5筆、10筆、25筆或全部資料<font style="color:blue;font-weight:bold;">(Material UI Table 顯示 ALL 資料傳遞參數有誤,會少最後一筆,暫時未處理)</font>
- <font style="color:red;font-weight:bold;">可以輸入帳號、名稱或電子郵件關鍵字查詢資料</font>
- 可以新增、刪除、修改資料
- <font style="color:blue;font-weight:bold;">在新增與修改資料的部分,現階段並未加上電話欄位</font>
- 點擊帳號名稱,會進入用戶詳細資料頁面供檢視
- ### 報名管理
- 以表格列表的形式顯示報名資料,,可以選擇顯示5筆、10筆、25筆或全部資料<font style="color:blue;font-weight:bold;">(Material UI Table 顯示 ALL 資料傳遞參數有誤,會少最後一筆,暫時未處理)</font>
- <font style="color:red;font-weight:bold;">可以輸入姓名、電子郵件或報名編號關鍵字查詢資料</font>
- 可以新增、刪除、修改資料
- 新增資料時,僅能新增報名中的課程
- 修改資料時,可以選擇所有課程,但會被系統判斷,因此可勾取 "排除無法報名的課程" 之核取方塊選擇報名中的課程
- 點擊報名編號,會進入報名詳細資料頁面供檢視
- ### 設定
- 可以進行後台管理者登出
- 可以更換後台網站外觀,分別為預設、溫暖風、咖啡風、海洋風、星塵風
---
## 前台 API
- ### 註冊功能
- **Request Url**
- /api/register
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- account : string
- name : string
- email : string
- password : string
- **Response Code**
- 200
- 註冊成功!
- message : string
- 註冊失敗!
- message : string
- 此電子郵件或帳號已註冊!
- message : string
- ### 登入功能
- **Request Url**
- /api/login
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- email : string
- password : string
- **Response Code**
- 200
- 此帳號尚未註冊!
- message : string
- 帳號密碼錯誤!
- message : string
- 登入成功!
- message : string
- token : string
- userData : json
```javascript=
{
id,
account : string,
name : string,
email : string
phone : string
}
```
- ### 更新個人資料
- **Request Url**
- /api/profile
- **Request Method**
- PUT
- **Request Parameters**
- 無
- **Request Body**
- account : string
- email : string
- name : string
- phone : string
- **Response Code**
- 200
- 資料更新成功!
- message : string
- 資料更新失敗!
- message : string
- ### 取得個人資料 - redux persist
- **Request Url**
- /api/profile?email=${email}
- **Request Method**
- GET
- **Request Parameters**
- email
- **Request Body**
- 無
- **Response Code**
- 200
- userData : json
```javascript=
{
id,
account : string,
name : string,
email : string
phone : string
}
```
- ### 修改密碼
- **Request Url**
- /api/profile
- **Request Method**
- PUT
- **Request Parameters**
- 無
- **Request Body**
- password : string
- newPassword : string
- confirmPassword : string
- email : string
- **Response Code**
- 200
- 當前密碼輸入錯誤!
- message : string
- 修改密碼失敗!
- message : string
- 修改密碼成功!
- message : string
- ### <font style="color:red;font-weight:bold;">課程紀錄</font>
- ### 取得所有課程資訊
- **Request Url**
- 接 Firebase 的
- **Request Method**
- GET
- **Request Parameters**
- 無
- **Request Body**
- 無
- **Response Code**
- 200
- data : json
範例 :
```javascript=
{
"id": 38,
"apply_end_time": "2023-10-20T00:00:00.000+00:00",
"apply_start_time": "2023-09-10T00:00:00.000+00:00",
"courseName": "演算法實戰",
"description": "本課程將指導學員學習重要的資料結構與演算法。我們以 Princeton 出版社的演算法教科書 [0, 1] 為主軸,佐以 LeetCode [1] 相關的題目為輔,精選適當難度的題目提供給已具備基礎程式能力的學員提升解決問題的能力。此課程亦適合作為高中 108 課綱程式訓練之先修或課輔 [2, 3],並涵蓋 APCS 大學先修程式檢定考試的內容。本課程的最後導入實務上會使用到的隨機演算法、近似演算法、狀態機等相關的主題,增加學員在資訊領域上的廣度。",
"image_url": "/image/course-image-07.png",
"lesson_duration_minutes": 43200,
"lesson_start_time": "2023-10-25T00:00:00.000+00:00",
"people_limit": 50,
"isPopular" : false,
"people_remaining" : 50,
"courseTeacher" : "王大明"
}
```
- ### <font style="color:green;font-weight:bold;">取得精選課程資訊</font>
- ### 取得每頁課程資訊
- **Request Url**
- /api/course?currentPage=$ {currentPage}&items=$ {rowsPerPage}&tabs= ${tabs}&isPopular= ${isPopular}
- **Request Method**
- GET
- **Request Parameters**
- currentPage : string (當前頁面,是數字字串)
- rowsPerPage : string (顯示的數量,是數字字串)
- tabs : string (課程篩選鈕,是字串)
- isPopular : string (是否精選,是布林字串)
- **Request Body**
- 無
- **Response Code**
- 200
- data : 課程資料(json)
- length : 課程資料長度
- ### <font style="color:green;font-weight:bold;">取得單一課程資訊</font>
- ### 課程報名
- **Request Url**
- /api/apply
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- name : string
- email (報名者電子郵件) : string
- phone : string
- courseID : number
- accountEmail (平台帳戶電子郵件) : string
- **Response Code**
- 200
- 此報名者已報名此課程!
- message : string
- 報名失敗!
- message : string
- 報名成功!
- message : string
- ### 取得報名成功資料
- **Request Url**
- /api/apply/$ {courseID}/$ {userEmail}
- **Request Method**
- GET
- **Request Parameters**
- courseID : string
- userEmail : string
- **Request Body**
- 無
- **Response Code**
- 200
- data : json
範例 :
```javascript=
{
id,
name : "Kerry",
email : "kerry@gmail.com",
phone : "0934123456",
courseID : 38,
customerID : "64c63e0aeea3aef5c14eb6c6",
createTime : "2023/9/24 下午9:10:38"
}
```
## 後台 API
- ### 登入功能
- **Request Url**
- /api/admin/login
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- email : string
- password : string
- **Response Code**
- 200
- 此帳號尚未註冊!
- message : string
- 帳號密碼錯誤!
- message : string
- 登入成功!
- message : string
- token : string
- userData : json
- ### 取得後台管理者資料
- **Request Url**
- /api/admin/data/adminUser? currentPage={page}&items=$ {rowsPerPage}&search= ${keyword}
- **Request Method**
- GET
- **Request Parameters**
- currentPage : string (當前頁面,是數字字串)
- rowsPerPage : string (顯示的數量,是數字字串)
- search : string (搜尋關鍵字)
- **Request Body**
- 無
- **Response Code**
- 200
- message : 後台管理者每頁資料(json)
- length : 後台管理者總 total 資料長度
- ### 新增後台管理者資料
- **Request Url**
- /api/admin/data/adminUser
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- account : string
- email : string
- password : string
- **Response Code**
- 200
- 此電子郵件或帳號已被註冊!
- message : string
- 新增資料失敗!
- message : string
- 新增成功!
- message : string
- ### 取得後台管理者單筆資料
- **Request Url**
- /api/admin/update/adminUser/${id}
- **Request Method**
- GET
- **Request Parameters**
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 找不到相符合的資料!
- message : string
- 取資料成功!
- message : string
- data : json
- ### 修改後台管理者單筆資料
- **Request Url**
- /api/admin/update/adminUser/${id}
- **Request Method**
- PUT
- **Request Parameters**
- id : string
- **Request Body**
- account : string
- email : string
- password : string
- **Response Code**
- 200
- 您修改的電子郵件或帳號已被註冊或使用!
- message : string
- 修改成功!
- message : string
- 修改資料失敗!
- message : string
- ### 刪除後台管理者單筆資料
- **Request Url**
- /api/admin/data/${params}?id= ${id}
- **Request Method**
- DELETE
- **Request Parameters**
- params : (哪種類型的資料,例如後台管理者、課程、報名等等)string
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 刪除成功!
- message : string
- id : string
- 資料刪除失敗!
- message : string
- ### 取得課程資料
-
- ### 取得用戶資料
- **Request Url**
- /api/admin/data/user? currentPage={page}&items=$ {rowsPerPage}&search= ${keyword}
- **Request Method**
- GET
- **Request Parameters**
- currentPage : string (當前頁面,是數字字串)
- rowsPerPage : string (顯示的數量,是數字字串)
- search : string (搜尋關鍵字)
- **Request Body**
- 無
- **Response Code**
- 200
- message : 用戶每頁的資料(json)
- length : 用戶總 total 資料長度
- ### 取得用戶資料(不分每頁取幾個,而是全部)
- **Request Url**
- /api/admin/update/user
- **Request Method**
- GET
- **Request Parameters**
- 無
- **Request Body**
- 無
- **Response Code**
- 200
- data : json
- ### 新增用戶資料
- **Request Url**
- /api/admin/data/user
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- account : string
- name : string
- email : string
- password : string
- **Response Code**
- 200
- 此電子郵件或帳號已被註冊!
- message : string
- 新增資料失敗!
- message : string
- 新增成功!
- message : string
- ### 取得用戶單筆資料
- **Request Url**
- /api/admin/update/user/${id}
- **Request Method**
- GET
- **Request Parameters**
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 找不到相符合的資料!
- message : string
- 取資料成功!
- message : string
- data : json
- ### 修改用戶單筆資料
- **Request Url**
- /api/admin/update/user/${id}
- **Request Method**
- PUT
- **Request Parameters**
- id : string
- **Request Body**
- account : string
- name : string
- email : string
- password : string
- **Response Code**
- 200
- 您修改的電子郵件或帳號已被註冊或使用!
- message : string
- 修改成功!
- message : string
- 修改資料失敗!
- message : string
- ### 刪除用戶單筆資料
- **Request Url**
- /api/admin/data/${params}?id= ${id}
- **Request Method**
- DELETE
- **Request Parameters**
- params : (哪種類型的資料,例如後台管理者、課程、報名等等)string
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 刪除成功!
- message : string
- id : string
- 資料刪除失敗!
- message : string
- ### 取得報名資料
- - **Request Url**
- /api/admin/data/apply? currentPage={page}&items=$ {rowsPerPage}&search= ${keyword}
- 課程接 Firebase 的
- **Request Method**
- GET
- **Request Parameters**
- currentPage : string (當前頁面,是數字字串)
- rowsPerPage : string (顯示的數量,是數字字串)
- search : string (搜尋關鍵字)
- **Request Body**
- 無
- **Response Code**
- 報名者資料 : 200
- message : 報名每頁的資料(json)
- length : 報名總 total 資料長度
- 課程資料 : 200
- data : json
範例 :
```javascript=
{
id,
name : "Kerry",
email : "kerry@gmail.com",
phone : "0934123456",
courseID : 38,
customerID : "64c63e0aeea3aef5c14eb6c6",
createTime : "2023/9/24 下午9:10:38"
}
```
- ### 取得報名單筆資料
- **Request Url**
- /api/admin/update/apply/${id}
- **Request Method**
- GET
- **Request Parameters**
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 找不到相符合的資料!
- message : string
- 取資料成功!
- message : string
- data : json
- ### 新增報名資料
- **Request Url**
- /api/admin/data/apply
- **Request Method**
- POST
- **Request Parameters**
- 無
- **Request Body**
- name : string
- email : string
- phone : string
- course : (課程id) number
- stageAccount : (平台帳戶id) string
- **Response Code**
- 200
- 此報名者已報名此課程!
- message : string
- 新增資料失敗!
- message : string
- 新增成功!
- message : string
- ### 修改報名單筆資料
- **Request Url**
- /api/admin/update/apply/${id}
- **Request Method**
- PUT
- **Request Parameters**
- id : string
- **Request Body**
- <font style="color:red;font-weight:bold;">_id : (此報名者資料的id) string </font>
- name : string
- email : string
- phone : string
- <font style="color:red;font-weight:bold;">courseID : number</font>
- course : number
- stageAccount : string
- <font style="color:red;font-weight:bold;">customerID : string</font>
- **Response Code**
- 200
- 此報名者已報名此課程!
- message : string
- 修改成功!
- message : string
- 修改資料失敗!
- message : string
- ### 刪除報名單筆資料
- **Request Url**
- /api/admin/data/${params}?id= ${id}
- **Request Method**
- DELETE
- **Request Parameters**
- params : (哪種類型的資料,例如後台管理者、課程、報名等等)string
- id : string
- **Request Body**
- 無
- **Response Code**
- 200
- 刪除成功!
- message : string
- id : string
- 資料刪除失敗!
- message : string