Coding Fundamentals

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

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

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

1. สร้าง Repository (Repo)

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

สร้าง Repository (Repo) บน GitHub

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

สร้าง Repository (Repo) บน GitHub

สร้าง Repository (Repo) บน GitHub


2. การ Commit

ลองแก้ไขไฟล์ใน Repo บน GitHub

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

หน้าต่าง Commit message ก่อนยืนยันการ Commit บน GitHub

เปรียบเทียบการเปลี่ยนแปลงบน GitHub

  • ประวัติของโปรเจกต์อาจกลายเป็น:
● Update README with learning topics
│
● Initial commit

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

Timeline การ commit พร้อมข้อความ Commit message บน GitHub

ผลลัพธ์การ Commit แต่ละครั้งที่เราสามารถเปิดดูย้อนหลังได้บน GitHub


3. Main branch

  • Painpoint คือ เมื่อเรามีความต้องอยากแก้ อยากเพิ่มอะไรบางอย่างเข้าไป แต่กลัวของเดิม (main) จะพัง Git ให้เราแตกเส้นทางใหม่ได้
  • Main / Main branch คือ เส้นทางหลัก ที่เราถือว่าเป็นงานเวอร์ชันปัจจุบันของโปรเจกต์ 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 ใหม่ให้ Repo บน GitHub

สร้าง Branch ใหม่ให้ Repo บน GitHub

สร้าง Branch ใหม่ให้ Repo บน GitHub

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

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

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

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

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

Branch ที่ได้หลังจากสร้างสำเร็จบน GitHub

การเลือก Branch บน GitHub

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

ทดลองแก้ไข Repo เพื่อดูผลลัพธ์การเปลี่ยนแปลงเทียบกับ main บน GitHub

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

เปรียบเทียบผลการทดลองแก้ไข Repo ใน Branch เทียบกับ Main บน GitHub

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

🌿 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

การเอาผลลัพธ์ใน Branch รวมเข้ากับ Main เรียกว่า Merge

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


6. การ Pull Request (PR)

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

ความต่างระหว่าง Merge กับ Pull Request (PR)

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

ขั้นตอนการขอ Pull Request บน GitHub

ขั้นตอนการขอ Pull Request บน GitHub

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

ขั้นตอนการขอ Pull Request บน GitHub

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

การอ่านรายละเอียดสิ่งที่เปลี่ยนแปลงจากคำขอ Pull Request บน GitHub

  • เราจะเห็นข้อความประมาณนี้
+ ## Branch Practice
+
+ I'm learning how branches work.
  • เครื่องหมาย + หมายถึง บรรทัดที่เพิ่มเข้ามา
  • ถ้าเป็นบรรทัดที่ถูกลบ จะเห็นเป็น -
  • นี่เรียกว่า Diff ย่อมาจาก Difference หรือพูดง่าย ๆ ว่า:

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

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

การยืนยัน/ตกลง คำขอ Pull Request บน GitHub

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

🌿 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 pull request  บน GitHub

การยืนยัน/ตกลง คำขอ Merge pull request  บน GitHub

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

🌿 main
   │
   ● README เดิม
    \
     \
      ● เพิ่ม Branch Practice
        🌱 practice-readme
       
      🔀 MERGE
หลัง Merge

🌿 main
   │
   ● README เดิม
   │
   ● เพิ่ม Branch Practice ✅

เปรียบเทียบผลลัพธ์ที่เกิดขึ้นใน Main

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

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

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

Recap

  1. Repository = กล่องของโปรเจกต์
  2. Git = ระบบที่ติดตามประวัติการเปลี่ยนแปลง
  3. Commit = จุดบันทึกในประวัติ
  4. Branch = แยกเส้นทางออกไปทำงานโดยไม่กระทบเส้นหลัก
  5. Pull Request = เสนอการเปลี่ยนแปลงให้ตรวจสอบก่อนรวม
  6. Merge = รวมการเปลี่ยนแปลงกลับเข้าปลายทาง เช่น main

← กลับไปหน้า Notes

บทความที่เกี่ยวข้อง