# Day 3 - 把專案跑起來：前後端與 Docker 入門

## 劇情背景

一早，海克絲神色匆忙地走了過來。

「早安！今天有個緊急狀況要跟你說。」

「怎麼了？發生什麼事？」

「我的合夥人剛傳訊息來，說她這週想看看專案目前的進度。她不是工程師，但很在意產品能不能『跑起來』給她看。」

「所以⋯⋯我們要把專案跑起來給她看？」

「沒錯！但在那之前，你得先搞懂這個專案到底是怎麼組成的。一個完整的系統通常有三大部分：前端、後端、還有資料庫。」

---

## 學習目標

- 了解前端、後端、資料庫各自的角色
- 了解什麼是 Docker 以及為什麼需要它
- 理解 Container（容器）的概念
- 成功啟動 LiveFit 專案的開發環境
- 驗證前端、後端、資料庫都正常運作

---

## 核心概念

### 1) 前端、後端、資料庫是什麼？

海克絲用電商網站來比喻：

| 角色 | 電商網站比喻 | 系統中的角色 |
|------|----------|--------------|
| **前端 (Frontend)** | 網頁商城的頁面（商品展示、購物車、結帳畫面） | 使用者看到的畫面，負責互動與呈現 |
| **後端 (Backend)** | 訂單處理中心（訂單處理、庫存檢查、付款驗證） | 處理商業邏輯，決定要做什麼、怎麼做 |
| **資料庫 (Database)** | 商品倉庫 | 儲存所有資料（會員資料、訂單紀錄、商品庫存） |

**實際運作流程：**
1. 使用者在前端點擊「購買課程」按鈕
2. 前端發送請求給後端
3. 後端檢查使用者餘額、課程是否可購買
4. 後端把購買紀錄存到資料庫
5. 後端回傳結果給前端
6. 前端顯示「購買成功」畫面

**LiveFit 專案的技術棧：**
- 前端：Vue.js
- 後端：Node.js
- 資料庫：PostgreSQL

### 2) 為什麼需要 Docker？

在軟體開發中，最常見的問題就是：

- 「在我的電腦上可以跑啊！」
- 「為什麼換一台電腦就壞掉了？」

這是因為每台電腦的環境都不一樣（作業系統、軟體版本、設定等）。

**Docker 的解決方案：**
> Docker 可以把整個執行環境打包成一個「容器」，確保每個人的開發環境一致，避免「在我電腦可以跑」的問題。

### Docker 是什麼？

Docker 是一個「容器化平台」，可以把它想成：

**生活比喻：**
> 想像你要搬家，與其把東西一件一件搬，不如把整個房間打包成一個貨櫃。
> 不管搬到哪裡，打開貨櫃就是一模一樣的環境！

### Container（容器）是什麼？

Container 就是 Docker 打包出來的「貨櫃」，裡面包含：

- 程式碼
- 執行環境
- 系統函式庫
- 設定檔

**重要特性：**

- 輕量：比虛擬機器更小、更快
- 隔離：每個容器獨立運作，互不干擾
- 可攜：在任何支援 Docker 的環境都能運行

### 3) LiveFit 的三個服務

前任後端雖然把專案搞得一團糟，但至少有一件事做對了——他用 Docker 把整個環境打包好了。只要你安裝 Docker，一個指令就能把三個服務全部跑起來！

我們的專案會啟動三個 Container：

| 服務 | 說明 | Port |
|------|------|------|
| Frontend | Vue.js 前端應用 | 3000 |
| Backend | Node.js 後端 API | 8080 |
| Postgres | PostgreSQL 資料庫 | 5432 |

- Docker 的 Port 就像是大樓的分機號碼：撥打指定的「號碼」，就能精準連接到容器內部的「特定服務」。
- localhost：就是「你使用的這台電腦」，也就是大樓本體。
- /healthcheck：用來確認程式碼有沒有「壞掉」的指令。

## 今日任務

### 任務內容

1. **必做：完成遊戲測驗**
- 進入遊戲完成 Day 3 關卡
- 👉 **[點此進入遊戲](https://hexschool.github.io/backend-camp-game/)**

2. 非必做：攻略以下兩個任務
* [任務一：資料庫與 Docker 環境建立](https://rpg.hexschool.com/#/training/12063182914150888561/board/content/12063182914150888562_12063182914150888575?tid=12063182914152027037)
* [任務二：把前後端 code on 起來](https://rpg.hexschool.com/#/training/12063182914150888561/board/content/12063182914150888562_12063182914150888575?tid=12063182914152027038)

---

## 測驗題目預覽

### 前端、後端、資料庫篇 (4 題)

1. 前端的主要職責是什麼？
2. 後端的主要職責是什麼？
3. 資料庫的主要職責是什麼？
4. 使用者點擊「購買課程」後，系統的處理順序是什麼？

### Docker 觀念篇 (3 題)

5. Docker 主要解決什麼問題？
6. Container（容器）是什麼？
7. 為什麼這個專案要用 Docker？

### LiveFit 環境篇 (3 題)

8. LiveFit 專案啟動後會有幾個 Container？
9. 前端服務跑在哪個 Port？
10. 如何確認後端服務是否正常運作？

---

## 遊戲連結

請進入遊戲完成 Day 3 關卡：

👉 **[點此進入遊戲](https://hexschool.github.io/backend-camp-game/)**

## 回報格式(確認打卡細節)

1. 完成遊戲中的測驗並截圖完成畫面
2. 到體驗營 Discord 的[每日活動頻道](https://discord.com/channels/801807326054055996/1446368763581562880)，找到當天任務的討論串
3. 在討論串留言貼上截圖，打卡儀表板會自動記錄你的成績
4. 分享一下此關卡有哪些知識點讓你印象深刻，甚至有透過 AI 服務延伸學習


---

## 海克絲的叮嚀

> 「太好了，專案跑起來了！這樣我就可以跟合夥人說進度正常。Docker 是後端工程師的好夥伴，以前我們要花好幾天設定環境，現在一個指令就搞定。今天成功把環境架起來，代表你已經跨過了最重要的一關。加油，今天結束後你就能親眼看到 LiveFit 在你電腦上運作了！」

### 關於海克絲

其實海克絲以前是工程師，還當過全端技術主管，寫了快十年的 Code。她也練重訓、當過瑜伽老師，後來決定把兩個專業結合起來，開了這間健身房，想做一個真正能幫助人的運動媒合平台。

> 「工程師的經驗讓我知道怎麼設計系統，健身教練的經驗讓我知道怎麼照顧人。所以啊，你要是敢給我爆肝加班，我可是會直接把你從電腦前拖走的喔。」