# 第一堂：前後端環境部署教學

* 記得錄影
* 即日起提供，[一對一諮詢連結](https://liberating-turtle-5a2.notion.site/2e16a246851880a28857c25c4df931b2)，提供**課程介紹**與**學習方向**討論

## 開場：同學們的任務是什麼？

### <span style="color:blue">完成 **每日任務 + 主線任務**，順利拿到證書！</span>

### **主線任務（5 道）- [連結](https://rpg.hexschool.com/#/training/12063182914150888561/board/content/12063182914150888562_12063182914150888575)：**

1. 2026 後端工程師體驗營 - 報到任務
2. 任務一：初心者環境任務 (**週末可開始挑戰**)
3. 任務二：把前後端 code on 起來 (**週末可開始挑戰**)
4. 任務三：微調功能細節
5. 2026 後端工程師體驗營 - 心得牆任務

### **每日任務（10 道）- 明天即將開始**
* 新人後端生存指南 - 網頁版遊戲

## 每日任務說明 (以上屆 [React](https://daily-checkin-task.hexschool.io/#/react-2025/progress) 班為例)
1. **開始時間**：1/15 - 1/28，週一~五共 10 道任務
2. **週末任務**：週末也要打卡，但不需做任務，僅分享學習進度
3. **打卡期限**：可以補打卡，並沒有一定要在當日打卡
4. **打卡方式**：回報到[每日任務](https://discord.com/channels/801807326054055996/1446368763581562880)每天的討論串上
5. **更新頻率**：一小時一次

> Q：如果當天來不及做每日，可以先打卡，等有時間再做嗎？
A：可以，那就表示你還在軌道上，沒問題的！

---

## 認識 LiveFit：這次體驗營的主線專案

> 這份規格書會貫穿整個體驗營，從 Day 1 到 Day 10 都會用到

**規格書連結：** https://hackmd.io/tGMiTeEJSVamCd46KaMrew?view

### LiveFit 是什麼？

一個「線上直播小班制健身平台」，讓會員可以：
1. 購買堂數方案
2. 預約教練開設的課程
3. 時間到就進場上課

### 規格書裡有什麼？

| 內容 | 說明 |
|------|------|
| 使用者故事 (User Story) | 從使用者角度描述功能需求 |
| 線稿圖 (Wireframe) | 用簡單線條畫出介面草圖 |
| 泳道圖 (Swimlane) | 展示不同角色在流程中的互動 |

### LiveFit 的四種角色

| 角色 | 可以做什麼 |
|------|-----------|
| 訪客 | 瀏覽課程、查看教練資訊 |
| 會員 | 購買堂數、報名課程、取消課程 |
| 教練 | 開設課程、查看報名狀況、月營收統計 |
| 管理員 | 升級教練、管理堂數方案、管理技能清單 |

> 這份規格書在業界稱為「需求規格書」或「SA 文件（System Analysis）」

有規格書，後端工程師才有辦法開始規劃[資料庫](https://firebasestorage.googleapis.com/v0/b/hexschool-courses.appspot.com/o/hex-website%2Fnode%2F1739179853094-fitness_5.png?alt=media&token=a65de209-3ae6-4263-bdc0-d4f08638ff20)、[API 資源設計](https://www.notion.so/38e4dd6775894e94a8f575f20ca5b867?pvs=21)

> Q：請問通常系統分析書，是哪個角色出的呢？
---

## 什麼是 Git？(打開簡報)

1. Git 是一個「版本控制系統」，就像是程式碼的時光機
2. 可以記錄每一次的修改歷史
3. 讓你隨時回到過去的版本
4. 讓多人同時協作開發

**比喻：** 就像報告_v1、報告_v2、報告_最終版，但 Git 幫你自動管理，更聰明、更有條理

### 什麼是 GitHub？

1. GitHub 是一個「程式碼託管平台」
2. 你可以把它想成程式碼的雲端硬碟
3. Git 裝在你的電腦上，GitHub 在網路上

| 比較 | Git | GitHub |
|------|-----|--------|
| 是什麼 | 版本控制工具 | 程式碼託管平台 |
| 在哪裡 | 你的電腦上 | 網路上 |
| 功能 | 追蹤修改歷史 | 儲存和分享程式碼 |

### Clone 是什麼？

Clone（克隆）= 把 GitHub 上的專案「下載到你的電腦」

git clone https://github.com/hexschool/2025-backend-camp.git

Clone 之後，你的電腦裡就會有一份完整的專案程式碼，可以開始修改和開發。

### Public vs Private

| 類型 | 說明 | 適用場景 |
|------|------|----------|
| Public | 全世界任何人都可以看到程式碼 | 開源專案、作品集 |
| Private | 只有授權的人可以看到 | 公司專案、後端程式碼 |

⚠️ **重點：** 後端專案通常要設成 Private，因為裡面可能有資料庫連線、API 金鑰等敏感資訊！

---

## 前端、後端、資料庫三層架構

用電商網站來比喻：

| 層級 | 比喻 | 功能 | LiveFit 使用 |
|------|------|------|--------------|
| 前端 | 網頁商城的頁面 | 使用者看到的畫面 | Vue.js / Port 3000 |
| 後端 | 訂單處理中心 | 處理商業邏輯 | Node.js / Port 8080 |
| 資料庫 | 商品倉庫 | 存放所有資料 | PostgreSQL / Port 5432 |

**處理順序：**

使用者點擊 → 前端 → 後端 → 資料庫 → 後端 → 前端 → 顯示結果

## 什麼是 Docker？

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

**Docker 解決方案：** 把整個執行環境打包成一個「容器」

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

### LiveFit 專案的容器

啟動後會有 3 個 Container：

| Container | 服務 | Port |
|-----------|------|------|
| frontend | 前端網站 | 3000 |
| backend | 後端 API | 8080 |
| postgres | 資料庫 | 5432 |

---

## 前後端分離的檔案結構

2025-backend-camp/
├── frontend/          # 前端程式碼
│   ├── src/
│   │   ├── components/
│   │   ├── layouts/
│   │   └── views/
│   └── index.html
├── backend/           # 後端程式碼
│   ├── controllers/
│   ├── entities/
│   └── app.js
├── docker-compose.yml
└── .env.example

---

## [體驗課報名]後端工程師就業培訓班

> 專屬體驗營實體同學會！~~上一屆費用：$499~~（本屆免費）

**報名資格（符合任一即可）：**
- 完成至少 3 次每日任務
- 提交任一主線任務（提交即可，不需通過批改）
- 任務一：初心者環境任務
- 任務二：把前後端 code on 起來

**報名時間：**
- 開放報名：1/21（三）第二堂課的 21:30
- 報名截止：1/25（日）

**活動場次：**

| 場次 | 日期 | 時間 | 地點 | 名額 |
|------|------|------|------|------|
| 高雄場 | 1/31（六） | 13:30~16:30 | 高雄市苓雅區中正二路175號5樓之3（WORKHUB） | 50 位 |
| 台北場 | 2/1（日） | 13:30~16:30 | 臺北市中山區松江路350號（IEAT 會議中心） | 150 位 |

### 活動議程
1. 13:15~13:30：開放入場
2. 13:30~14:30： 講座 - 軟體工程師 與 AI 職業趨勢分析
3. 14:30~15:00：一年制後端工程師就業培訓班 - 服務介紹
4. 15:00~16:30：課後交流時間

:::spoiler

:::


## 加碼時間：職涯 QA： 21:30~22:30

1. 【後端地圖】合格的後端工程師需要會什麼？

摘要問題： 從「會寫程式」到「能就業」，後端工程師具體需要具備哪些技能樹（API, 資料庫, Redis 等）？業界標準是什麼？

2. 【前端跨後端】前端工程師需要懂多少後端？

摘要問題： 我是前端，為了能更好配合或轉型，我有哪些「必備」的後端知識？Angular/React 轉後端的思維差異？

3. 摘要問題： 買了課看不完、遇到 Bug 想放棄、沒有危機感但又很焦慮。如何增加動力與建立持續學習的習慣？

4. 【求職策略】刷題 vs. 作品集 vs. 判斷公司

摘要問題： 面試時「刷題 (LeetCode)」跟「作品集」哪個重要？如何分辨這家公司是不是「雷缺」（假 AI 公司、技術落後）？

5. 【接案與薪資】接案起步與薪資天花板

摘要問題： 新手如何接到第一個案子？接案需要什麼程度的技術？純後端能接案嗎？台灣薪資的天花板在哪？

6. 【校長故事】創業契機與時間管理

摘要問題： 想聽校長的創業故事、教育理念，以及如何管理時間（從工程師轉型為創業者的過程）。