[Hands-on] ลอง GitHub101 แบบพื้นฐานมือใหม่ทำตามได้

จกาที่เราพาไปทำความเข้าใจเนื้อหา GitHub เบื้องต้นสุดแล้ว เดี๋ยวเราจะลองพามากดจริงกันให้เห้นภาพการใช้งานที่เกิดขึ้นจริงมากขึ้นแบบ Step By Stpe ถ้าพร้อมแล้วลุ้ยโลด~~~

1. สร้าง Repository (Repo)

มองหาปุ่ม + ด้านขวาบน

สร้าง Repository (Repo)

ตั้งค่า New repo กำหนด
- Repository name
- Description
- Choose visibility - ว่าจะ Public หรือ Private
- Add README - เป็นไฟล์อธิบายว่าโปรเจกต์นี้คืออะไร ใช้อย่างไร เป็นไฟล์ .md ย่อมาจาก Markdown

สร้าง Repository (Repo)

2. การ Commit

เมื่อจะบันทึกควรระบุ Commit message
Commit message คือ ป้ายบอกว่า Commit ครั้งนี้เราทำอะไร
- Commit = จุดบันทึกการเปลี่ยนแปลง
- Commit message = ชื่อ/คำอธิบายของจุดบันทึกนั้น

ประวัติของโปรเจกต์อาจกลายเป็น:

● Update README with learning topics
│
● Initial commit

วัตถุประสงค์ : เมื่อเราต้องการกลับมาดูการแก้ย้อนหลัง เราก็พอรู้ว่าแต่ละจุดเกิดอะไรขึ้น โดยไม่ต้องเปิดไฟล์ไล่ดูทีละอัน ดังนั้นข้อความใน Commit message ควรตั้งให้สื่อสารให้เราเข้าใจได้ทันที

3. Main branch

Painpoint คือ เมื่อเรามีความต้องอยากแก้ อยากเพิ่มอะไรบางอย่างเข้าไป แต่กลัวของเดิม (main) จะพัง Git ให้เราแตกเส้นทางใหม่ได้
Main / Main branch คือ เส้นทางหลัก ที่เราถือว่าเป็นงานเวอร์ชันปัจจุบันของโปรเจกต์
Branch คือ การแตกสาขา / แตกกิ่ง ให้งานหลัก

เป็นหนึ่งในเหตุผลที่ Git มีประโยชน์มากกว่าแค่ Version History จากเดิมที่เราการแก้ไขต่อเนื่องกันเป็น Timeline แบบนี้

🌿 main
│
● ระบบอ่าน Sheet ได้
│
● เพิ่ม AI ได้
│
● ส่ง Email ได

เราสามารถแตกกิ่งสาขาของงานออกไปแบบนี้

🌿 main
│
● ระบบอ่าน Sheet
│
● เพิ่ม AI
│
● ส่ง Email
│
├──────── 🌱 add-line
│          │
│          ● ทดลอง LINE
│          ● แก้ bug
│          ● ใช้งานได้แล้ว

จากตัวอย่าง add-line นี่แหละคือ อีก Branch เราสามารถแก้ไขงานต่อได้โดย Main ยังอยู่เหมือนเดิม

เมื่อเราแก้ไขแล้วระบบพัง ก็จะไม่กระทบกับของเดิม และเมื่อเราอยากอัพเดตที่แก้เพิ่มเข้าไปในของเดิมก็สามารถทำการ รวมกลับ เช่น ถ้าทดลองแล้วเวิร์ก ✅ เราค่อยเอาสิ่งที่ทำใน add-line กลับมารวมกับ main

การ “รวมกลับ” นี้เรียกว่า Merge

4. สร้าง Branch

จาก

🌿 main
   │
   ● README เวอร์ชันล่าสุด

เราจะทำการเพิ่ม Branch เข้าไปโดยกดเพิ่ม

เมื่อสร้าง Branch สำเร็จโครงสร้างที่ได้จะเป็นดังนี้

🌿 main
   │
   ● README เวอร์ชันล่าสุด
   │
   └──── 🌱 practice-readme

จากนั้นเราลองทำการแก้ไขไฟล์ใน Branch ที่เพิ่งสร้างกันแล้วมาดูว่า Main เปลี่ยนไปไหม

อันดับแรกให้ทำการเลือก Branch ที่เพิ่งสร้าง

Note - เรายังไม่ได้ Copy โปรเจกต์แบบสร้าง Repo ใหม่ แต่กำลังสร้างอีก “เส้นทางการทำงาน” ภายใน Repo เดิม

อย่าลืมใส่ Commit message ให้อ่านได้เข้าใจด้วยล่ะ

จะเห็นได้ว่าไฟล์ที่อยู่ใน Main จะมีเนื้อหาที่ต่างจากไฟล์ที่อยู่ใน Branch จะเห็นได้ว่า เราสามารถทดลองงานใหม่ โดยไม่ทำให้งานหลักเปลี่ยน

โครงสร้างที่ได้จะเป็นดังนี้

🌿 main
   │
   ● Update README
   │
   └──── 🌱 practice-readme
             │
             ● Add branch practice section 👈 เราอยู่ตรงนี้

5. การ Merge (Intro)

เมื่อเราต้องการอัพเดตสิ่งที่แก้ไขเข้าไปในงานหลักจาก

            ● เพิ่ม Branch Practice ⬅︎ จาก practice-readme
          /
●────────●  
main

ให้กลายเป็น เส้น Timeline เดียวกัน

●────────●────────●
                ↑
                main

README บน main
มี Branch Practice แล้ว

การเอาการเปลี่ยนแปลงจาก Branch กลับมารวมกับ main เรียกว่า Merge

ใน GitHub เรามักมีขั้นตอนก่อน Merge ที่เจอบ่อยมาก เรียกว่า… Pull Request (PR)

6. การ Pull Request (PR)

Pull Request (PR) คือ การขอให้รวม ประมาณว่างานใน Branch นี้เสร็จแล้วนะ ช่วยตรวจดูหน่อย ถ้าโอเคค่อยเอาไปรวมกับ main
ประโยชน์ - ทำให้เราเห็นชัดว่า กำลังจะเอาอะไรเข้า main แต่ถ้าทำคนเดียว คนตรวจกับคน Merge ก็อาจเป็นตัวเราเองทั้งคู่

🌱 ทำงานใน Branch
       ↓
 📨 Pull Request
"ขอเสนอการเปลี่ยนแปลงนี้"
       ↓
    👀 ตรวจดู
       ↓
    🔀 Merge
"โอเค เอาเข้า main"

เราจะลองทำ Pull Request กันโดยกลับไปที่ GitHub โดยไปที่ Branch ที่เราต้องการรวมเข้า
จากนั้นสังเกตหาปุ่ม “Compare & pull request” หรือถ้าไม่เห็น ให้เข้าแท็บ Pull requests → New pull request

จะเจอของสำคัญสองช่องประมาณนี้ ในตัวอย่างนี้คือ base: main ← compare: practice-readme

practice-readme
       │
       │ งานใหม่
       ▼
      main

โดยจากตัวอย่างนี้

base: main = ปลายทางที่เราต้องการเอางาน เข้าไป
compare: practice-readme = Branch ที่มีงานใหม่ที่เราต้องการเอา ออกมาเสนอ

“เอาสิ่งที่ฉันทำใน practice-readme มาเทียบกับ main เพื่อดูว่าจะเพิ่ม/เปลี่ยนอะไรบ้าง”

จำง่าย

base: main  ←  compare: feature-ai
บ้านปลายทาง  ←   งานที่เราถือกลับเข้าบ้าน

สมมติเรามี

main
feature-ai
และต้องการเอาฟีเจอร์ AI เข้า main

Pull Request ควรตั้งเป็นข้อไหน?

A) base: feature-ai ← compare: main B) base: main ← compare: feature-ai

เราจะเห็นข้อความประมาณนี้

+ ## Branch Practice + + I'm learning how branches work.

เครื่องหมาย + หมายถึง บรรทัดที่เพิ่มเข้ามา

ถ้าเป็นบรรทัดที่ถูกลบ จะเห็นเป็น -

นี่เรียกว่า Diff ย่อมาจาก Difference หรือพูดง่าย ๆ ว่า:

มีอะไรเปลี่ยนจากของเดิมบ้าง?

- ข้อความเดิม + ข้อความใหม่

ถ้าสิ่งที่เห็นถูกต้อง ให้กด Create pull request

GitHub จะให้ตั้ง Title กับ Description สามารถรายละเอียดคำขอ ว่าจะทำอะไร และรายละเอียดในนี้มีอะไร แล้วกด Create pull request อีกครั้ง

ภาพรวมโครงสร้างใหม่

🌿 main │ └── 🌱 practice-readme │ └── 📸 Commit │ └── 📨 Pull Request │ ▼ รอตรวจสอบ

สังเกตว่า main ยังไม่ได้เปลี่ยน เพราะ

Commit = บันทึกงานใน Branch

Pull Request = เสนอให้นำงานนั้นมารวม

Merge = ลงมือรวมจริง

7. การ Merge (ลงมือ)

ปุ่ม Merge pull request กดได้เลย → GitHub จะให้ยืนยันอีกครั้ง → กด Confirm merge

เมื่อสำเร็จ จะเห็นข้อความประมาณ Pull request successfully merged and closed

ตอนนี้สิ่งที่เกิดขึ้นคือ:

ก่อน Merge 🌿 main │ ● README เดิม \ \ ● เพิ่ม Branch Practice 🌱 practice-readme 🔀 MERGE

หลัง Merge 🌿 main │ ● README เดิม │ ● เพิ่ม Branch Practice ✅

Branch → แก้ไฟล์ → Commit → Pull Request → Merge → main เปลี่ยน

นี่คือ workflow หลักที่ใช้จริงบ่อยมาก

🌿 main │ ├── 🌱 สร้าง Branch │ ↓ │ ✏️ ทำงาน/แก้ไฟล์ │ ↓ │ 📸 Commit │ ↓ │ 📨 Pull Request │ ↓ │ 👀 ตรวจสิ่งที่เปลี่ยน │ ↓ └──── 🔀 Merge ↓ 🌿 main ใหม่

Recap

Repository = กล่องของโปรเจกต์

Git = ระบบที่ติดตามประวัติการเปลี่ยนแปลง

Commit = จุดบันทึกในประวัติ

Branch = แยกเส้นทางออกไปทำงานโดยไม่กระทบเส้นหลัก

Pull Request = เสนอการเปลี่ยนแปลงให้ตรวจสอบก่อนรวม

Merge = รวมการเปลี่ยนแปลงกลับเข้าปลายทาง เช่น main