[แนะนำ] Git คืออะไร การใช้งาน Git ฉบับผู้เริ่มต้น

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>Git<&sol;strong> คือ Version Control ที่ถูกพัฒนาขึ้นมาเพื่อใช้ในกระบวนการพัฒนาซอฟต์แวร์ แปลให้เข้าใจแบบง่าย ๆ คือ ระบบที่ถูกพัฒนาขึ้นมาเพื่อใช้สำหรับการติดตาม ตรวจสอบ การพัฒนา แก้ไข ซอร์ซโค้ด ซอร์ซไฟล์ ต่าง ๆ ในขั้นตอนการพัฒนา ที่สามารถตรวจสอบได้ทุกตัวอักษร ทุกบรรทัด ทุกไฟล์ ที่มีการแก้ไข ใครเป็นคนแก้ไข และแก้ไข ณ วันที่เท่าไหร่ <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ระบบการทำงานของ Git ไม่ได้อยู่แค่การตรวจสอบการแก้ไขเท่านั้น ยังสามารถรวมการแก้ไขทั้งหมดเข้าด้วยกันได้อย่างชาญฉลาด เราเรียกขั้นตอนนี้ว่า CI &lpar; <strong>Continuous Integration<&sol;strong> &rpar; และในปัจจุบัน Git VCS &lpar; Version Control System &rpar; มีการควบรวมฟีเจอร์ที่ทำให้นักพัฒนาทำงานได้สะดวกมากขึ้น สามารถทำงานได้ตั้งแต่ขั้นตอนการพัฒนา ไปจนถึงการ Deploy งานขึ้นใช้งานบน Server เราเรียกขั้นตอนนี้ว่า CD &lpar; <strong>Continuous Deployment<&sol;strong> &rpar;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">การใช้งาน Git มีให้เลือกใช้งาน 2 แบบ คือ<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ใช้งานผ่าน Git Command Line &lpar; ใช้งานผ่านการพิมพ์คำสั่งด้วยตัวหนังสือ &rpar;<&sol;li><li>ใช้งานผ่านโปรแกรม Git GUI &lpar; ใช้งานผ่านโปรแกรมสำเร็จรูป &rpar;<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">คำถามคือ แล้วเราจะเลือกใช้แบบไหนดี &quest;<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">อันนี้ก็แล้วแต่ความถนัด นักพัฒนาบางคนอาจจะชอบใช้ผ่านคำสั่ง command line แต่โดยส่วนตัวแนะนำให้ใช้ Git GUI มากกว่า เหตุผลก็เพราะว่า ทำงานได้เร็วกว่า ลดโอกาสเกิดข้อผิดพลาดน้อยลง เพราะไม่ต้องพิมพ์คำสั่งให้วุ่นวาย เหมือนกับที่ผู้พัฒนา Git GUI เจ้าหนึ่งเขาบอกว่า<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<blockquote class&equals;"wp-block-quote"><p>Say goodbye to the command line &&num;8211&semi; simplify distributed version control with a Git client and quickly bring everyone up to speed&period;<&sol;p><&sol;blockquote>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">เลือกโปรแกรม Git GUI ที่ใช่สำหรับคุณ<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ปัจจุบันโปรแกรม Git GUI มีให้เลือกใช้งานหลากหลายครับ ลักษณะการทำงานโดยรวมไม่ได้แตกต่างกันมาก อาจจะต้องทดลองใช้งานเอง และดูว่าเราชอบ หรือเวลาใช้งานจริง ๆ เราเข้ากันได้กับ UI ของโปรแกรมไหน ตัวอย่างรายชื่อโปรแกรมตามด้านล่างครับ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>Github Desktop <a href&equals;"https&colon;&sol;&sol;desktop&period;github&period;com">https&colon;&sol;&sol;desktop&period;github&period;com<&sol;a><&sol;li><li>Sourcetree <a href&equals;"https&colon;&sol;&sol;www&period;sourcetreeapp&period;com">https&colon;&sol;&sol;www&period;sourcetreeapp&period;com<&sol;a><&sol;li><li>Gitkraken <a href&equals;"https&colon;&sol;&sol;www&period;gitkraken&period;com&sol;git-client">https&colon;&sol;&sol;www&period;gitkraken&period;com&sol;git-client<&sol;a><&sol;li><li>Git Fork <a href&equals;"https&colon;&sol;&sol;git-fork&period;com">https&colon;&sol;&sol;git-fork&period;com<&sol;a><&sol;li><li>Git scm <a href&equals;"https&colon;&sol;&sol;git-scm&period;com&sol;downloads&sol;guis">https&colon;&sol;&sol;git-scm&period;com&sol;downloads&sol;guis<&sol;a><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">เข้าใจวงจรการใช้งาน Git &lpar; Git Life Cycle &rpar;<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">การเริ่มต้นใช้งาน Git จะไม่ใช่เรื่องยากและวุ่นวายเลย ถ้าเราเข้าใจ วงจรการใช้งานของมัน เพราะท้ายที่สุดแล้ว พื้นฐานการใช้งานจริง ๆ ก็จะวนอยู่ประมาณนั้น ตามภาพด้านล่างคือรูปแบบวงจรการใช้งาน Git และอธิบายการทำงานโดยอ้างอิงจากการใช้งาน Git GUI นะครับ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;ใช้งาน-Git-ฉบับใช้งานจริง-940x332&period;png" alt&equals;"" class&equals;"wp-image-5639" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;ใช้งาน-Git-ฉบับใช้งานจริง&period;png" data-full-size&equals;"1228x434" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li><strong>Working Directory Untracked By Git<&sol;strong> คือ เราสร้างโฟลเด้อสำหรับเก็บไฟล์งานของโปรเจคต่าง ๆ ไว้ในเครื่องของเรา โดยที่ Git ยังไม่ได้มีการทำงานใด ๆ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li><strong>Working Directory Tracked By Git<&sol;strong> คือ การที่เราเริ่มให้ Git นั้นเข้ามาทำงาน และเริ่มขบวนการตรวจสอบไฟล์ต่าง ๆ ที่ถูกเพิ่มเข้ามา หรือแก้ไข ภายในโฟลเด้อนี้แล้ว สำหรับ Git GUI ก็คือการ Add&comma; New หรือ Clone Repository นั่นเอง ถือว่าเป็นการ Init Working Directory<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li><strong>Staging Area<&sol;strong> คือ เมื่อเราอนุญาติให้ Git ทำงาน หรือ Track ไฟล์ใน <strong>Working Directory<&sol;strong> เรียบร้อยแล้ว การที่เราแก้ไข หรือเพิ่มไฟล์เข้าไปใน <strong>Working Directory<&sol;strong> สถานะของไฟล์นั้น ๆ เปลี่ยนเป็น <strong><strong>Staging Area<&sol;strong><&sol;strong> ไฟล์ที่อยู่ในสถานะ <strong>Staging Area<&sol;strong> คือไฟล์ที่เราสามารถ Commit เพื่อเก็บเป็นเวอร์ชั่น หรือเก็บประวัติการแก้ไขแต่ละครั้งได้<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li><strong>Local Repository<&sol;strong> คือ ทุกครั้งที่เรา เพิ่ม หรือ แก้ไขไฟล์ และ Commit ข้อมูลการแก้ไขนั้น ๆ จะถูกเก็บไว้ใน Local Repository ก็คือภายในเครื่องของเราเองนี่แหล่ะ และพร้อมสำหรับการ Push หรือ การส่งขึ้นไปเก็บไว้บน Server &lpar; ตั้งแต่ขั้นตอนแรก จนถึงขั้นตอนนี้ คือการเก็บข้อมูลในโฟลเด้อเดียวกัน ในเครื่องของเราเองทั้งหมด &rpar;<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li><strong>Remote Repository<&sol;strong> คือ หลังจากที่เราทำงานไปได้ซักพัก เราอาจจะมีการแก้ไข เพิ่มไฟล์ นู่นนี่นั้น และ Commit ไป 10 กว่าครั้งแล้ว และอยากจะพัก 10 นาที เราก็จัดการใช้คำสั่ง Push เพื่อนำการแก้ไขแต่ละเวอร์ชั่นทั้งหมด ขึ้นไปเก็บไฟล์บน Remote Server ในขั้นตอนของการ Push เราสามารถ Push ทุกครั้งที่ Commit ก็ได้เช่นกันนะครับ ไม่จำเป็นต้อง Commit ไว้หลายเวอร์ชั่น แล้วค่อย Push ก็ได้<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">เริ่มใช้งาน Git ปฏิบัติจริง &lpar; Github Dekstop GUI &amp&semi; Gitlab Repository &rpar;<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ในตัวอย่างการใช้งานจริงนี้ จะยกตัวอย่างการใช้งาน โดยใช้โปรแกรม Github Desktop GUI ร่วมกับ Github Repository สำหรับท่านที่ต้องการใช้ Gitlab สามารถอ่านวิธีการใช้ Github Desktop ร่วมกับ Gitlab ที่กระทู้นี้ครับ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;วิธีใช้งาน-github-desktop-ร่วมกับ-gitlab-reposity&sol;" target&equals;"&lowbar;blank">วิธีใช้งาน Github Desktop ร่วมกับ Gitlab Reposity<&sol;a><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>หลังจากติดตั้ง Github Desktop และสมัครสมาชิก Github เรียบร้อยแล้ว ให้เปิดโปรแกรม Github Dekstop ขึ้นมาครับ เข้าสู่ระบบให้เรียบร้อย จากนั้นเลือก <strong>File -> New Repository<&sol;strong> ตั้งชื่อ Repository ในที่นี่ผมจะตั้งชื่อว่า <em>hello-git-2020<&sol;em> และกำหนด <strong>Local Path<&sol;strong> ไปยังที่เก็บไฟล์โปรเจคของเรา หรือจะเป็นโฟลเด้อเปล่า ๆ ก่อนก็ได้ จากนั้นกดปุ่ม <strong>&&num;8216&semi;Create Repository&&num;8217&semi;<&sol;strong> <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-1-1&period;png" alt&equals;"" class&equals;"wp-image-5649" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-1-1&period;png" data-full-size&equals;"774x468" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>หลังจากที่เราสร้าง Github Repository เรียบร้อยแล้ว โฟลเด้อที่เราชี้ Local Path ไป จะอยู่ใน <strong>Working Directory Tracked By Git<&sol;strong> เรียบร้อยแล้ว และจะเจอหน้าตาของโปรแกรมตามรูปด้านล่าง ให้สังเกตุว่าจะแบ่ง 3 ส่วน หลัก ๆ คือ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-3-940x41&period;png" alt&equals;"" class&equals;"wp-image-5652" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-3&period;png" data-full-size&equals;"2196x96" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ol class&equals;"wp-block-list"><li><strong>Current Repository<&sol;strong> คือ โปรเจคที่เรากำลังทำงานอยู่ ถ้าเราทำงานหลายโปรเจค เราสามารถเปลี่ยนการทำงานไปยังโปรเจคอื่น ๆ ได้จากเมนูนี้<&sol;li><li><strong>Current Branch<&sol;strong> คือ สาขาหรือเวอร์ชั่นที่เรากำลังทำงานอยู่ สำหรับ Github จะมีสาขาเริ่มต้นให้คือ main &lpar; ก่อนหน้านี้ใช้คำว่า master &rpar; เราสามารถแบ่งการทำงานให้กับโปรแกรมเมอร์แต่ละคนด้วยการแยกเป็นแต่ละสาขาออกไปได้<&sol;li><li>และ ส่วนสุดท้ายจะเป็นการแสดงคำสั่งการทำงานในส่วนนั้น อาจจะเป็น<strong> Fetch Origin&comma; Publish Repository&comma; Publish Branch&comma; Push&comma; Pull<&sol;strong> เป็นต้น<&sol;li><&sol;ol>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;30px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ต่อไปเราจะเริ่มด้วยการสร้างไฟล์เข้าไปในโปรเจค ให้สังเกตุปุ่มซ้ายมือ <strong>&&num;8216&semi;Open in Visual Studio Code&&num;8217&semi;<&sol;strong> หมายถึงเราจะเปิดโปรแกรม VS Code เพื่อแก้ไข หรือ เพิ่มไฟล์ต่าง ๆ ผ่านโปรแกรมนี้ กรณีที่ท่านลงโปรแกรมอื่น ก็อาจจะแสดงเป็นชื่อของโปรแกรมอื่น ส่วนนี้เราสามารถตั้งค่าได้ว่าจะใช้ Git ร่วมกับโปรแกรมไหน ให้คลิกที่ปุ่มนี้เลยครับ<&sol;li><li>ให้เราทดสอบโดยการเพิ่มไฟล์เข้าไปในโปรเจค โดยในตัวอย่าง จะทดสอบสร้างไฟล์ index&period;html ตามภาพด้านล่างครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-4-940x411&period;png" alt&equals;"" class&equals;"wp-image-5655" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-4&period;png" data-full-size&equals;"1266x554" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>หลังจากที่เราแก้ไขและกดบันทึกไฟล์เรียบร้อยแล้ว ให้กลับมาที่โปรแกรม Github Desktop จะสังเกตุว่า มีปุ่ม <strong>&&num;8216&semi;commit to main&&num;8217&semi;<&sol;strong> โผล่มาแล้ว ให้เราพิมพ์ comment เข้าไปว่าเราแก้ไขอะไรบ้าง จากนั้นกดปุ่ม commit to main เพื่อบันทึกการแก้ไขไว้ในเครื่อง และกดปุ่ม <strong>&&num;8216&semi;Publish Repository&&num;8217&semi;<&sol;strong> เพื่ออัพโหลดโปรเจคของเราขึ้นไปบน Github Server หลังจากที่เรา Publish เรียบร้อยแล้ว จะสังเกตุว่า มีปุ่ม <strong>&&num;8216&semi;View on Github&&num;8217&semi;<&sol;strong> โผล่มา ถ้าลองกดปุ่มนี้ดู ก็จะเห็นว่าโปรเจคของเราขึ้นไปอยู่บน Github Server เรียบร้อยแล้ว ตามภาพด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-6-940x421&period;png" alt&equals;"" class&equals;"wp-image-5656" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;10&sol;Git-คืออะไร-6&period;png" data-full-size&equals;"1828x818" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ขั้นตอนการทำงานโดยรวม เมื่อให้ Git เข้ามาจัดการโปรเจค การทำงานก็จะวนอยู่ประมาณนี้ครับ คือ <em>สร้าง Repository -> แยก Branch ให้แต่ละคนในทีม -> เพิ่ม แก้ไข ไฟล์งาน -> commit เป็นแต่ละเวอร์ชั่น -> จากนั้นก็ Push ขึ้นไป Remote Repository<&sol;em><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ในกระทู้ต่อไป สำหรับการใช้งาน Git จะพูดถึงการแยก Branch&comma; Merge และแก้ไข Conflict ครับ วันนี้เมื่อยแล้ว<&sol;p>&NewLine;