---
# System prepended metadata

title: 第三堂：動手做起來，前後端程式碼體驗開發
tags: [2026 後端工程師體驗營]

---

# 第三堂：動手做起來，前後端程式碼體驗開發

* 記得錄影
* 即日起提供，[一對一諮詢連結](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)
    * 會依照數據回饋，來評估要不要做第二季來輔助學習，走向會是海姐學徒階段，會依照心得牆的回饋來決定

![截圖 2026-01-28 晚上7.51.39](https://hackmd.io/_uploads/ryN3_dvLWe.png)

## 同學會將於週六日展開，高雄台北都是我主持

## 最後送學員三句話
1. 跟自己比較
2. 你不用一開始就很厲害，但要開始才有辦法很厲害
3. 只要你不放棄自己，六角就不會放棄你
4. 終生教育  賺你的錢>你能力提升>開進階課程>你上課氪金更多的$$>你能力提升>你薪水提升>開更進階的課程

