Skip to main content

เปลี่ยนมาเก็บโค้ดของเราแบบง่าย ๆ บน GitHub กันเถอะ (ใช้ง่ายกว่าที่คิด)

เคยไหมทำแลปแล้วจะเอาโค้ดกลับบ้านก็คงจะเซฟลงแฟลช์ไดรฟ์, โยนขึ้น Google Drive ไม่ก็ไปฝากไว้ในข้อความ Facebook เพื่อน แล้วรู้สึกว่าไม่เป็นระเบียบเอาเสียเลย หรือว่าจะเป็นปัญหาเหล่านี้

  • แก้โค้ดไปแล้ว อ้าวบัคทั้งไฟล์เลย จะกลับไปจุดก่อนที่จะบัคยังไงดี?
  • เผลอลบไฟล์ตรงนี้ไป จะย้อนกลับไปเอายังไงเนี่ย?
  • วันนี้ทำอะไรเสร็จไปแล้วบ้างเนี่ย ไม่ได้จดไว้ด้วย
  • ทำโครงงานกลุ่ม จะจัดการไฟล์ยังไงดี แล้วถ้าแก้ไฟล์เดียวกันจะเอามารวมกันยังไง?
  • อ้าวโค้ดตรงนี้บัค ใครเป็นคนสร้างบัคไว้?

คนที่เขียนโค้ดใหม่ ๆ คงเจอปัญหานี้ไม่น้อย บทความนี้เลยจะพูดถึงการเอา GitHub เข้ามาช่วยแก้ปัญหา โดยไม่ต้องกังวงลว่าจะยาก หรือต้องจำคำสั่งอะไร เพราะจะคัดมาเฉพาะส่วนพื้นฐานสุด ๆ สำหรับแก้ไขปัญหานี้โดยเฉพาะ!

Git และ GitHub คืออะไร ต่างกันอย่างไร?​

ก่อนจะไปใช้ GitHub เราก็ต้องรู้ก่อนว่าต่างจาก Git อย่างไร มันคือสิ่งเดียวกันหรือเปล่า ซึ่งเราก็ขอยกส่วนสรุปจากบทความที่ได้เขียนไว้แล้วมาช่วยอธิบาย

Git เป็นระบบที่ช่วยจัดการการแก้ไขใน Repository ส่วน GitHub เป็นบริการจัดเก็บ Repository ออนไลน์พร้อมกับฟีเจอร์อำนวยความสะดวกต่าง ๆ ที่ให้เราไปทำงานร่วมกันคนอื่นได้

หากใครสนใจบทความเต็ม สามารถไปอ่านได้ที่ Git กับ GitHub คืออะไร ต่างกันอย่างไร?

รู้จักกับ GitHub Desktop​

เวลาพูดถึง Git ก็คงหลายคนก็อาจจะนึกถึงพิมพ์คำสั่งลง Terminal มีแต่ตัวหนังสือหลากสีเต็มไปหมดใช้งานยากแน่ ๆ เลย

ตัวอย่าง Output ของคำสั่ง “git log” เพื่อดูประวัติการแก้ไข

แต่สำหรับมือใหม่เรามีตัวช่วยนั่นก็คือ GitHub Desktop ให้เราสามารถใช้ Git ผ่านหน้าจอแบบกราฟฟิกได้

หน้าแสดงประวัติการแก้ไขใน GitHub Desktop — ดูใช้ง่ายขึ้นใช่ไหมล่ะ

Demo: สร้าง Repository เพื่อเก็บไฟล์บน GitHub​

ก่อนจะไปต่ออย่าลืมสร้างบัญชี GitHub และติดตั้ง GitHub Desktop (ติดตั้งแล้ว Login ด้วย) ให้เรียบร้อย หากพร้อมแล้วเข้าไปที่หน้าแรกของ GitHub ได้เลย

สมมุติว่าเรามีโค้ดอยู่ในโฟลเดอร์ my-future-repository อยากจะเอาขึ้น GitHub จะต้องทำอะไรบ้าง

1. สร้าง Repository ใหม่​

ใน GitHub Desktop ไปที่ Current Repository > Add > Create New Repository

2. กรอกชื่อ Repository เลือก Folder แล้วเลือก “Create Repository” ได้เลย​

ตัวเลือกอื่น ๆ นอกเหนือจากชื่อ Repository ยังไม่ต้องแก้ไข

3. เอา Repository ขึ้น GitHub​

ตอนนี้เราจะได้ Repository แบบ Local หรืออยู่บนเครื่องเราเฉย ๆ แต่เพียงแค่กดปุ่ม “Publish repository” คราวนี้โค้ดของเราก็จะขึ้นไปเก็บไว้แบบออนไลน์บน GitHub แล้ว

กดปุ่มใหญ่ ๆ ด้านบนที่เขียนว่า “Publish repository” ได้เลย

ถ้าไม่อยากเปลี่ยนชื่อ หรือแก้ไขอะไรก็กด “Publish Repository” สีฟ้าอีกรอบได้เลย

4. กดปุ่ม “View on GitHub”​

ก็จะเห็นได้ว่าโค้ดของเราขึ้นในอยู่ใน GitHub แล้ว เย่!

เพียง 4 ขั้นตอนง่าย ๆ เราก็เอาโค้ดของเราขึ้นไปเก็บได้แล้ว

Demo: แก้ไขไฟล์และส่งขึ้น GitHub​

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

  • ด้านซ้ายของหน้าจอ “2 changed files”: ตรงส่วนนี้จะเป็นการสรุปรายการการแก้ไข (รวมถึงการสร้าง/ลบไฟล์ด้วย)
  • ด้านขวาของหน้าจอ: สีเขียว/แดง ๆ นี้แสดงให้เห็นว่าไฟล์ที่เราเลือกอยู่ มีอะไรแก้ไขไปบ้าง สีเขียวหมายถึงสิ่งที่เพิ่ม สีแดงหมายถึงสิ่งที่หายไป (ถูกลบ)

คราวนี้เรามาเอาสิ่งที่เราแก้ไขขึ้น GitHub กัน

1. เลือกการแก้ไขที่อยากนำขึ้น​

คลิกที่ Checkbox ด้านหน้ารายการที่อยากนำขึ้นได้เลย

ทำไมต้องเลือกด้วย? เอาขึ้นหมดเลยไม่ได้หรอ?

ให้คิดถึงว่าการเอาขึ้นแต่ละครั้งเป็นการสร้าง Checkpoint ไปในตัว สมมุติว่าเราแก้ไขไปสองอย่างคือ:

  • เพิ่มข้อมูลในไฟล์ index.html
  • แก้ไขฟังก์ชันการสมัครสมาชิกของเว็บไซต์

จากที่ได้บอกไปตอนแรกว่าเราสามารถ Undo สิ่งที่เราทำไปในแต่ละ Checkpoint ได้ หากเรานำทั้งสองอย่างที่แก้ไขขึ้นไปพร้อมกัน แล้วฟังก์ชันสมัครสมาชิกเกิดบัค อยากจะ Undo Checkpoint นั้น จะทำให้ข้อมูลที่เราเพิ่มไปในไฟล์ index.html ที่ไม่ได้เกี่ยวอะไรกับฟังก์ชันสมัครสมาชิกเลยถูก Undo หายไปด้วย

ดังนั้นเราควรเลือกเฉพาะไฟล์/การแก้ไขที่เกี่ยวข้องกันขึ้นไปพร้อมกันเท่านั้น เพื่อป้องกันการเกิดปัญหาอย่างที่กล่าว

Checkpoint ที่เราเรียกกันเนี่ยมันมีชื่อเรียกจริง ๆ ว่า Commit และการ Undo จะเรียกว่าการ Revert การ Undo Checkpoint ก็จะเรียกรวม ๆ ว่า Revert Commit (ทำยังไง รอดูในหัวข้อต่อไปได้เลย)

2. กรอกข้อมูลของ Checkpoint​

ตรงนี้เป็นการกรอกเพื่อบอกว่าที่เราจะเอาขึ้นเนี่ย เป็นการทำอะไร/แก้ไขอะไรไป

เช่น เพิ่มฟีเจอร์ xxxxx, แก้ไขบัค yyyyy

3. กด Commit to main​

ปุ่มสีฟ้า ๆ ใกล้ ๆ ช่องกรอกนั่นแหละ กดไปเลย! คราวนี้เมื่อไปดูในแทบ History ก็จะเห็นรายการใหม่เพิ่มขึ้นมาแล้ว

ในขั้นนี้การแก้ไขของเราจะยังไม่ขึ้นไปใน Repository ออนไลน์ของเรา สังเกตได้จากสัญลักษณ์ลูกศรชี้ขึ้นเป็นการบอกว่ารายการนี้ยังไม่ได้เอาขึ้นไปนะ

4. กด Push origin ปุ่มใหญ่ ๆ ด้านบน​

เมื่อกดปุ่มนี้สิ่งที่เราแก้ไขและสร้าง Checkpoint ไปก็จะขึ้นไปอยู่บน Repository ออนไลน์แล้ว

เมื่อไปดูใน Repository ของเราในเว็บไซต์ GitHub ก็จะเห็นว่าการแก้ไขได้ถูกส่งขึ้นไปแล้ว

โดยการนำ Commit (Checkpoint) ขึ้นไปยัง GitHub นี้เรียกว่าการ Push ซึ่งหากแก้ไขหลายอย่างแนะนำให้ Commit (ขั้นตอนที่ 1-3) หลาย ๆ รอบแล้วค่อย Push ทีเดียวจะดีกว่า

GitHub Desktop ทำอะไรได้อีก​

ที่โม้ ๆ ไว้ด้านบนว่าย้อนเวลาได้, ดูคนทำโค้ดบัคได้, ทำงานร่วมกับคนอื่นได้ไม่ต้องกลัวแก้ทับกันได้นี่มันยังไง มาดูกันในหัวข้อนี้

ย้อนเวลากลับไปตอนก่อนจะเริ่มแก้ไข​

เคยเขียนโค้ดแล้วพัง ต้องเขียนใหม่หมดเลยไหม แต่พอจะเอาโค้ดส่วนที่พังออก อ้าวดันเผลอไปเอาส่วนที่ไม่พังออกได้วย

ทำได้ง่าย ๆ เลย เลือกไฟล์ที่เราได้แก้ไขไป (ในส่วน Changes) คลิกขวา แล้วเลือก “Discard Selected Changes” ได้เลย คราวนี้ทุกอย่างที่เราเขียนพัง ๆ ไว้ก็จะหายไปหมดแล้ว!

Undo โค้ดส่วนที่ทำบัค​

คราวนี้ต่างจากกรณีที่แล้วหน่อยคือโค้ดส่วนที่พัง ถูก Commit หรือส่งขึ้นตัว Repository ไปแล้ว ซึ่งจะเกิดในกรณี เช่น เขียนไว้นานแล้ว พึ่งมาเห็นว่ามันบัค อยากจะเอาออกไป ต้องทำไงดี?

  1. ไปที่ส่วน History ของ Repository นั้นใน GitHub Desktop
  2. หา Commit รายการที่อยาก Undo
  3. คลิกขวา เลือก “Revert Changes in Commit”

เมื่อกดแล้วสิ่งที่เราแก้ไขไปใน Commit นั้น จะหายไปหมด เหมือนไม่มีอะไรเกิดขึ้น (แต่ยังมีแสดงอยู่นะว่ามีคน Revert Commit นี้)

บทส่งท้าย​

ถ้าใครอ่านและทำตามมาถึงตรงนี้ได้แล้วก็ยินดีด้วย! คุณสามารถจัดการโค้ดได้อย่างเป็นระบบมากขึ้นแล้ว แต่เรื่องของ Git และ GitHub ยังไม่จบแค่นี้ ยังมีอีกหลายฟีเจอร์ที่ทำให้การทำงานของเราสะดวกขึ้นอีก เมื่อใช้งานปกติคล่องแล้วอย่าลืมไปศึกษาเพิ่มเติมกันด้วยนะ!

อ้างอิง​