# Day 5 - 學會 API，各種服務自己接！

## 劇情背景

你盯著 LiveFit 的教練列表頁面，看著一個個教練的照片和資料...

「海克絲，我有個問題。這頁面上的教練資料，是從哪裡來的？難道是寫死在網頁裡面嗎？」

海克絲搖搖頭：「當然不是囉！你昨天不是才學過，會經常變動的資料要存在資料庫嗎？」

「對對對！但是...資料庫的資料要怎麼跑到網頁上？」

「好問題！這些資料是從網路上『要』來的。你平常輸入一個網址，知道背後發生什麼事嗎？」

「呃...網頁就跑出來了？」

「那是你看到的結果。讓我告訴你背後發生了什麼事...」


---

## 學習目標

- 了解「網路請求」是什麼
- 理解 API 與一般網址的差異
- 認識 JSON 資料格式
- 知道後端如何整合第三方服務
- 理解後端工程師的「中央調度站」角色

---

## 核心概念

### 一、什麼是網路請求？

當你輸入網址按下 Enter，背後發生了一連串的事：

1. 瀏覽器發送「請求」(Request)
2. 請求透過網路傳送到伺服器
3. 伺服器處理請求
4. 伺服器回傳「回應」(Response)
5. 瀏覽器顯示結果

**這個「一來一往」的過程，就叫做網路請求！**

你每天上網都在發網路請求：打開 Google、看 YouTube、滑 IG...通通都是。

### 二、一般網址 vs API

| | 一般網址 | API |
|---|---------|-----|
| 回傳內容 | HTML 網頁（給人看） | JSON 資料（給程式用） |
| 用途 | 顯示漂亮的畫面 | 傳遞純資料 |
| 範例 | `https://google.com` | `https://api.example.com/users` |

**API 就是一種網路請求，差別只在於「回傳什麼」。**

### 三、JSON 資料格式

JSON 是程式之間交換資料的標準格式：

{
  "name": "海克絲",
  "role": "教練",
  "skills": ["重訓", "有氧", "瑜珈"]
}

特色：
- 用大括號 `{}` 包住資料
- 用 `"key": value` 表示每筆資料
- 程式可以輕鬆讀取和解析

### 四、資料流：前端 → 後端 → 資料庫

教練資料怎麼從資料庫跑到網頁上？

前端發請求 → 後端處理 → 資料庫查詢 → 後端回傳 → 前端顯示

1. **前端**：使用者看到的網頁，發送 API 請求
2. **後端**：接收請求，處理邏輯，連接資料庫
3. **資料庫**：儲存資料，回傳查詢結果
4. **後端**：把資料包成 JSON 回傳
5. **前端**：收到 JSON，顯示在畫面上

### 五、後端：中央調度站

後端工程師的工作不只是連接自己的資料庫，更多是「整合各種第三方服務」：

| 服務類型 | 範例 |
|---------|------|
| 金流服務 | 綠界、藍新、LINE Pay |
| 第三方登入 | Google、Facebook、Apple |
| 簡訊/郵件通知 | Twilio、SendGrid |
| 雲端儲存 | AWS S3、Google Cloud |
| 地圖服務 | Google Maps API |

**這些服務都有提供 API，後端工程師負責把它們「串」起來！**

### 六、實際案例：購買課程

當使用者在 LiveFit 點擊「購買」：

1. **點擊購買** → 前端送請求給後端
2. **後端呼叫金流服務** → 建立訂單
3. **金流服務處理付款** → 通知後端成功
4. **更新資料庫** → 訂單狀態「已付款」
5. **購買成功！** → 前端顯示結果

**重點：後端負責「串接」金流服務的 API，不需要自己處理信用卡！**

---

## 測驗題目預覽

### 網路請求基礎 (5 題)

1. 當你在瀏覽器輸入網址按下 Enter，第一步會發生什麼事？
2. 「網路請求」指的是什麼？
3. 一般網址和 API 的差別是什麼？
4. 為什麼教練資料要透過 API 取得，而不是寫死在網頁裡？
5. API 的全名是什麼？

### 第三方服務整合 (5 題)

6. 當使用者在網站上購買課程，後端需要做什麼？
7. 後端工程師的工作主要是什麼？
8. 以下哪些是常見的第三方服務？
9. 在完整的資料流中，順序是什麼？
10. JSON 資料格式的特色是什麼？

### 進階觀念 (5 題)

11. 為什麼要使用第三方金流服務，而不是自己處理付款？
12. LiveFit 有超過 30 個 API，以下哪個不是 API 的常見功能？
13. 當前端要顯示教練資料時，正確的做法是？
14. 以下哪個是 Google 第三方登入的優點？
15. 後端工程師被稱為「中央調度站」的原因是？

---

## 遊戲連結

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

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

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

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

---

## 海克絲的叮嚀

> 「API 是後端工程師的核心技能。學會 API 之後，你就能串接各種網路服務：金流、登入、通知、地圖... 無窮無盡的可能。記住，後端工程師就像『中央調度站』，負責把前端、資料庫、和各種第三方服務整合在一起。這就是為什麼 API 這麼重要！」

---

## 劇透小秘密

> 海克絲悄悄告訴你：其實 LiveFit 的金流功能目前還沒做好。前一任後端工程師離職前沒時間完成，所以金流那塊一直是空的。等你把基本功都學會、功能測試都正常之後...就要請你來開發金流串接囉！