# 第三堂：動手做起來，前後端程式碼體驗開發
* 記得錄影
* 即日起提供，[一對一諮詢連結](https://liberating-turtle-5a2.notion.site/2e16a246851880a28857c25c4df931b2)，提供**課程介紹**與**學習方向**討論
* 獲得書籍同學，週五前填表者，將準時於週六日發送~
* [簡報模式](https://hexschool.github.io/backend-camp-game/dev)
* 任務數突破 1432 份 🥳，突破 2100 份將贈送「藍新金流 API 介接教學」！！！
## 課程結束後
* 每日任務抽書活動
## [主線任務三](https://rpg.hexschool.com/#/training/12063182914150888561/board/content/12063182914150888562_12063182914150888575?tid=12063182914152027039)詳解
- 觀看任務攻略影片：[初階任務攻略影片](https://courses.hexschool.com/courses/202421/lectures/64549970)、[進階任務攻略影片](https://courses.hexschool.com/courses/202421/lectures/64549972)
> 任務通過請觀看上方影片來攻略
## 實操環節
## Part 1：初階任務（7 題程式碼修改）
### 題目 1：修改網站 Title
**檔案位置**：`frontend/index.html`
**操作步驟**：
1. 用 VS Code 開啟檔案：`frontend/index.html`
2. 找到第 7 行：
```html
<title>LiveFit+</title>
```
3. 改成：
```html
<title>LiveFit</title>
```
4. 儲存檔案（Ctrl+S 或 Cmd+S）
**驗證方式**：開啟 http://localhost:3000，查看瀏覽器分頁標題是否變成「LiveFit」
---
### 題目 2：更換網站 Logo
**檔案位置**：`frontend/src/layouts/LayoutHeader.vue`
**操作步驟**：
1. 用 VS Code 開啟檔案：`frontend/src/layouts/LayoutHeader.vue`
2. 找到第 11 行：
```html
<img src="/logo-text.png" alt="LiveFit+" class="h-6 w-auto" />
```
3. 把 `logo-text.png` 改成 `logo-text-v2.png`：
```html
<img src="/logo-text-v2.png" alt="LiveFit+" class="h-6 w-auto" />
```
4. 儲存檔案
**驗證方式**：開啟 http://localhost:3000，查看左上角 Logo 是否改變
---
### 題目 3：修改 Token 過期設定
**檔案位置**：`.env.example`（根目錄）
**操作步驟**：
1. 用 VS Code 開啟根目錄的檔案：`.env.example`
2. 找到第 21 行：
```
JWT_EXPIRES_DAY=30d
```
3. 改成：
```
JWT_EXPIRES_DAY=7d
```
4. 儲存檔案
**驗證方式**：觀念題，理解環境變數的用途
---
### 題目 4：新增 Entity 欄位說明
**檔案位置**：`backend/entities/CreditPackages.js`
**操作步驟**：
1. 用 VS Code 開啟檔案：`backend/entities/CreditPackages.js`
2. 在檔案最上方（第 1 行之前）新增以下註解：
```javascript
/**
* 堂數方案資料表
*
* 欄位說明：
* - id: 方案編號（UUID）
* - name: 方案名稱
* - credit_amount: 包含堂數
* - price: 方案價格
* - createdAt: 建立時間
*/
```
3. 儲存檔案
**修改後檔案開頭應該是**：
```javascript
/**
* 堂數方案資料表
*
* 欄位說明：
* - id: 方案編號（UUID）
* - name: 方案名稱
* - credit_amount: 包含堂數
* - price: 方案價格
* - createdAt: 建立時間
*/
const { EntitySchema } = require('typeorm')
```
---
### 題目 5：修改密碼長度限制
**檔案位置**：`backend/controllers/users.js`
**操作步驟**：
1. 用 VS Code 開啟檔案：`backend/controllers/users.js`
2. 找到第 9 行：
```javascript
const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}/
```
3. 把 `.{8,16}` 改成 `.{10,16}`：
```javascript
const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{10,16}/
```
4. 儲存檔案
**驗證方式**：密碼最短長度從 8 個字改為 10 個字
---
### 題目 6：新增 API 回傳總筆數
**檔案位置**：`backend/controllers/creditPackage.js`
**操作步驟**：
1. 用 VS Code 開啟檔案：`backend/controllers/creditPackage.js`
2. 找到第 22-25 行的 `getAll` 函數回傳：
```javascript
res.status(200).json({
status: 'success',
data: creditPackage
})
```
3. 新增 `total` 欄位：
```javascript
res.status(200).json({
status: 'success',
data: creditPackage,
total: creditPackage.length
})
```
4. 儲存檔案
**驗證方式**：呼叫 `GET /api/credit-package` API，回傳 JSON 應包含 `total` 欄位
---
### 題目 7：修改健康檢查回傳格式
**檔案位置**：`backend/app.js`
**操作步驟**：
1. 用 VS Code 開啟檔案：`backend/app.js`
2. 找到第 30-33 行：
```javascript
app.get('/healthcheck', (req, res) => {
res.status(200)
res.send('OK')
})
```
3. 改成：
```javascript
app.get('/healthcheck', (req, res) => {
res.status(200).json({
status: 'success',
message: 'OK'
})
})
```
4. 儲存檔案
**驗證方式**：開啟 http://localhost:8080/healthcheck，應顯示 JSON 格式回應
---
## Part 2：進階任務（9 步驟前端體驗）
> 💡 **提示**：如果需要清空資料庫重新開始，可執行 `npm run clean` 後再 `npm start`
### 測試資料
| 角色 | 姓名 | Email | 密碼 |
|------|------|-------|------|
| 學員 → 教練 | 李燕容 | lee2000@hexschooltest.io | Aa12345678 |
| 學員 | 王小明 | wXlTq@hexschooltest.io | Aa12345678 |
### Step 1：開啟前端專案
**操作步驟**：
1. 開啟終端機
2. 進入專案根目錄，執行：
```bash
docker-compose up -d
```
3. 等待容器啟動完成
4. 開啟瀏覽器，前往：http://localhost:3000
---
### Step 2：用 DBeaver 新增組合包方案
**工具**：DBeaver
**操作步驟**：
1. 在 DBeaver 的 SQL 編輯器中執行以下 SQL：
```sql
-- 新增 7 堂組合包方案
INSERT INTO "CREDIT_PACKAGE" (name, credit_amount, price)
VALUES ('7 堂組合包方案', 7, 1400);
-- 新增 14 堂組合包方案
INSERT INTO "CREDIT_PACKAGE" (name, credit_amount, price)
VALUES ('14 堂組合包方案', 14, 2520);
-- 新增 21 堂組合包方案
INSERT INTO "CREDIT_PACKAGE" (name, credit_amount, price)
VALUES ('21 堂組合包方案', 21, 4800);
```
2. 確認新增成功，執行：
```sql
SELECT * FROM "CREDIT_PACKAGE";
```
---
### Step 3：註冊兩個帳號
**網址**：http://localhost:3000/signup
**操作步驟**：
**註冊帳號 A（李燕容，之後升級為教練）**：
1. 前往 http://localhost:3000/signup
2. 填寫表單：
- 姓名：`李燕容`
- Email：`lee2000@hexschooltest.io`
- 密碼：`Aa12345678`
3. 點擊「註冊」按鈕
**註冊帳號 B（王小明，學員）**：
1. 前往 http://localhost:3000/signup
2. 填寫表單：
- 姓名：`王小明`
- Email：`wXlTq@hexschooltest.io`
- 密碼：`Aa12345678`
3. 點擊「註冊」按鈕
---
### Step 4：使用後台新增技能
**網址**：http://localhost:3000/admin/skills
**操作步驟**：
1. 使用任一已註冊帳號登入
2. 前往後台管理系統：http://localhost:3000/admin
3. 點擊左側選單「教練技能管理」
4. 在輸入框中輸入技能名稱：`瑜珈`
5. 點擊「新增技能」按鈕
6. 確認技能出現在下方列表中
---
### Step 5：升級為教練
**網址**：http://localhost:3000/admin/promote-trainer
**操作步驟**：
1. 使用李燕容帳號登入：
- Email：`lee2000@hexschooltest.io`
- 密碼：`Aa12345678`
2. 前往教練資格管理頁面：http://localhost:3000/admin/promote-trainer
3. 填寫教練資料：
- 教練照片網址：輸入任意圖片網址（例如：`https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b`）
- 教學經驗年資：輸入數字（例如：`3`）
- 教練簡介：輸入簡介文字（例如：`專業瑜珈教練，擁有多年教學經驗`）
4. 點擊「立即升級為教練」按鈕
5. 等待升級成功提示，系統會自動登出
6. 重新登入後即可使用教練功能
---
### Step 6：教練登入 & 開課
**網址**：http://localhost:3000/login
**操作步驟**：
1. 前往 http://localhost:3000/login
2. 用教練帳號登入：
- Email：`lee2000@hexschooltest.io`
- 密碼：`Aa12345678`
3. 登入後，點擊右上角「教練介面」
4. 進入課程管理頁面，建立一堂課程：
- 課程名稱：自訂（例如：瑜珈入門課）
- 選擇技能：瑜珈
- 開始時間：選擇未來的日期時間
- 結束時間：選擇開始時間之後
- 人數上限：自訂（例如：10）
- 會議連結：自訂（例如：https://meet.google.com/xxx-xxxx-xxx）
5. 點擊「建立課程」
---
### Step 7：學員購買堂數
**網址**：http://localhost:3000
**操作步驟**：
1. 先登出教練帳號（點擊右上角登出圖示）
2. 前往 http://localhost:3000/login
3. 用學員帳號登入：
- Email：`wXlTq@hexschooltest.io`
- 密碼：`Aa12345678`
4. 前往「健身方案」頁面：http://localhost:3000/fitness-plans
5. 選擇任一方案（例如：14 堂組合包方案）
6. 點擊「購買」按鈕
---
### Step 8：學員預約課程
**網址**：http://localhost:3000/coaches
**操作步驟**：
1. 確認已用學員帳號（王小明）登入
2. 前往「尋找教練」頁面：http://localhost:3000/coaches
3. 找到教練（李燕容）開的課程
4. 點擊課程，進入課程詳情
5. 點擊「預約課程」按鈕
---
### Step 9：查看預約紀錄
**網址**：http://localhost:3000/user/dashboard
**操作步驟**：
1. 確認已用學員帳號（王小明）登入
2. 點擊右上角「會員介面」
3. 進入會員儀表板，查看「我的課程」或「預約紀錄」
4. 確認剛剛預約的課程顯示在列表中
## 後續時間軸
* 2026/2/8(日) 作業繳交與發問服務期限
* 公佈獎項
* 任務數突破 1432 份 🥳，突破 2100 份將贈送介接第三方金流藍新金流 程式碼、跟教學~
* [提交連結抽獎](https://discord.com/channels/801807326054055996/1446368763581562880/1466021051480670282)
## 課程結尾
* 抽書！！每日抽 3 本~
## 校長動態
* 展開一整年的[後端工程師就業培訓班](https://www.hexschool.com/courses/backend-training.html)
* 30 堂直播課
* 從後端到雲端架構設計到求職作品設計
* [Line 預約連結](https://r.botbonnie.com/jtYmh)
* 會依照數據回饋，來評估要不要做第二季來輔助學習，走向會是海姐學徒階段，會依照心得牆的回饋來決定
## 同學會將於週六日展開，高雄台北都是我主持
## 最後送學員三句話
1. 跟自己比較
2. 你不用一開始就很厲害，但要開始才有辦法很厲害
3. 只要你不放棄自己，六角就不會放棄你
4. 終生教育 賺你的錢>你能力提升>開進階課程>你上課氪金更多的$$>你能力提升>你薪水提升>開更進階的課程
Sign in with Wallet
Connect another wallet