การทำ Version Control ด้วย GitHub บน GitHub Codespaces
เมื่อคุณแก้ไขโค้ดแล้ว ต้อง commit (บันทึกการเปลี่ยนแปลง) และ push (ส่งขึ้น GitHub) เพื่อไม่ให้งานหาย
💡 Commit คืออะไร? คือการ “บันทึก snapshot” ของโค้ด ณ จุดนั้น คล้ายกับการ Save Game — สามารถย้อนกลับมาดูได้ในอนาคต
ขั้นตอนที่ 1: เปิด Source Control Panel
คลิกไอคอน Source Control ที่แถบด้านซ้าย (ดูตำแหน่งที่กรอบสีส้ม) จะเห็นรายการไฟล์ที่มีการเปลี่ยนแปลง
- ตัวเลข (1) บนไอคอน = จำนวนไฟล์ที่เปลี่ยนแปลง
- M = Modified (แก้ไข), U = Untracked (ไฟล์ใหม่), D = Deleted (ลบ)
ขั้นตอนที่ 2: ตรวจสอบการเปลี่ยนแปลงก่อน Commit
ก่อน commit ควรตรวจสอบเสมอ ว่าโค้ดที่เปลี่ยนแปลงถูกต้อง โดยคลิกที่ชื่อไฟล์ (1) ในรายการ Changes จะเปิดหน้า Diff View (2) แสดงโค้ดเก่า (ซ้าย) กับโค้ดใหม่ (ขวา)
สิ่งที่ควรตรวจสอบ:
- ✅ โค้ดที่เพิ่ม/แก้ไข (แถบสีเขียว) ถูกต้องหรือไม่
- ✅ โค้ดที่ลบ (แถบสีแดง) ต้องการลบจริงหรือไม่
- ✅ ไม่มี debug code หรือ console.log ที่ลืมลบ
ขั้นตอนที่ 3: Stage ไฟล์
เมื่อตรวจสอบเสร็จแล้ว กดปุ่ม + ที่ไฟล์เพื่อ Stage (เลือกไฟล์ที่ต้องการ commit)
- ซ้าย: ไฟล์อยู่ใน “Changes” (ยังไม่ได้เลือก)
- ขวา: หลังกด + ไฟล์จะย้ายไปอยู่ใน “Staged Changes” (พร้อม commit)
💡 Tip: ถ้าต้องการ stage ทุกไฟล์ ให้กดปุ่ม + ที่หัวข้อ “Changes” แทนการกดทีละไฟล์
ขั้นตอนที่ 4: เขียน Commit Message แล้ว Commit
- พิมพ์ข้อความอธิบายการเปลี่ยนแปลง (1) ในช่อง Message
- ตรวจสอบว่าไฟล์ที่ต้องการ commit อยู่ใน “Staged Changes” (2) แล้ว
- กดปุ่ม ✓ Commit
แนวทางเขียน Commit Message
| รูปแบบ | ตัวอย่าง |
|---|---|
feat: ... | เพิ่มฟีเจอร์ใหม่ เช่น feat: add leave request form |
fix: ... | แก้ bug เช่น fix: login redirect error |
chore: ... | งานทั่วไป เช่น chore: update dependencies |
ขั้นตอนที่ 5: Push ขึ้น GitHub
หลัง commit ปุ่มจะเปลี่ยนเป็น Sync Changes กดเพื่อ push โค้ดขึ้น GitHub
⚠️ สำคัญ: ถ้าไม่กด Sync Changes โค้ดจะถูก commit แค่ในเครื่อง (local) ยังไม่ได้ส่งขึ้น GitHub
ขั้นตอนที่ 6: ตรวจสอบประวัติด้วย Git Graph
หลัง push สำเร็จ สามารถดูประวัติ commit ทั้งหมดได้โดยคลิกที่ Git Graph (1) ที่แถบด้านล่าง จะเห็น commit ล่าสุดอยู่บนสุด (2)
เรื่อง Branch (สำหรับผู้ที่สนใจ)
โดย default การ commit จะเข้าไปที่ main branch โดยตรง ซึ่งเพียงพอสำหรับโปรเจคส่วนตัว
หากทำงานเป็นทีม สามารถสร้าง branch แยกเพื่อทำงานแต่ละฟีเจอร์ แล้วค่อย merge เข้า main ทีหลัง ซึ่งจะช่วยป้องกันไม่ให้โค้ดของคนอื่นเสียหาย
สรุปขั้นตอน
| ขั้นตอน | การกระทำ |
|---|---|
| 1. เปิด Source Control | คลิกไอคอนที่แถบด้านซ้าย |
| 2. ตรวจสอบ | คลิกไฟล์เพื่อดู Diff View |
| 3. Stage | กดปุ่ม + เพื่อเลือกไฟล์ |
| 4. Commit | พิมพ์ข้อความ แล้วกดปุ่ม Commit |
| 5. Push | กดปุ่ม Sync Changes |
| 6. ตรวจสอบประวัติ | ดูที่ Git Graph |