reveal.js

# Version Control ด้วย Git: branching, merge, pull request

Lesson 3 - Testing, DevOps และการ Deploy

**Git** คือ Version Control System สำหรับติดตามประวัติการเปลี่ยนแปลงของโค้ด ทำงานร่วมกันเป็นทีม และควบคุมการ merge ผ่าน Pull Request

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Copy Folder / Manual Version"]
 A["project-final-v2.zip สับสนง่าย"]
 end
 subgraph Era2["ยุค Git / Distributed VCS"]
 B["Commit History ย้อนดูได้"]
 C["Branching แยกงาน"]
 end
 subgraph Era3["ยุค Pull Request / Code Review"]
 D["Pull Request review ก่อน merge"]
 E["Branch Protection กัน main พัง"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Branching Strategy** เช่น `main`, `develop`, `feature/*`, `hotfix/*`
- **สร้าง Branch** ใช้ `git checkout -b feature/user-auth`
- **บันทึกงาน** ใช้ `git add`, `git commit -m`, `git push`
- **Conventional Commits** เช่น `feat`, `fix`, `docs`, `refactor`, `test`, `chore`
- **Pull Request** ใช้ review โค้ดก่อน merge เข้า `main`
- **Merge vs Rebase vs Squash** มีผลต่อประวัติ commit ต่างกัน
- **Merge Conflicts** ต้องแก้ไฟล์ที่ชนกันอย่างระมัดระวัง

---

## ตาราง Merge Strategies

| วิธี | ลักษณะ | เหมาะกับ |
|---|---|---|
| Merge | เก็บ commit history พร้อม merge commit | ทีมที่อยากเห็นประวัติจริง |
| Rebase | เรียง commit ใหม่ให้ตรงปลาย branch | history อ่านง่าย |
| Squash | รวมหลาย commit เป็น commit เดียว | feature branch ที่ commit ย่อยเยอะ |

---

## Mermaid Diagram: Pull Request Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["main branch โค้ดหลัก"] --> B["feature branch แยกงาน"]
 B --> C["commit บันทึกงาน"]
 C --> D["push ส่งขึ้น remote"]
 D --> E["Pull Request ขอ review"]
 E --> F["CI + Review ตรวจคุณภาพ"]
 F --> G["Merge to main รวมโค้ด"]
</pre>

---

## Code Example

```powershell
# สร้าง branch ใหม่สำหรับงาน login
git checkout -b feature/user-auth

# เพิ่มไฟล์ที่แก้ไข
git add .

# commit ด้วย conventional commit
git commit -m "feat: add login form"

# push branch ไป remote
git push origin feature/user-auth

# ตัวอย่างการใช้งาน:
# เปิด Pull Request จาก feature/user-auth ไป main แล้วรอ review
```

```text
# ตัวอย่าง Conventional Commits
feat: add lesson search
fix: handle empty API response
docs: update deployment guide
refactor: split auth service
test: add login component spec
chore: update dependencies
```

---

## วิดีโอแนะนำ

- [YouTube: Git Branching Pull Request Workflow](https://www.youtube.com/results?search_query=Git+branching+pull+request+workflow)

---

## กิจกรรมท้ายบท

1. สร้าง branch `feature/lesson-test`
2. commit ด้วยข้อความแบบ Conventional Commit
3. push branch
4. อธิบายว่าจะเลือก merge, rebase หรือ squash ในสถานการณ์ใด

---

## End

<a href="/web-programming/14-testing-deploy/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>