GitHub for your better coding

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

บทความนี้ประกอบไปด้วยขั้นตอนต่อไปนี้
1. GitHub คืออะไร
2. เริ่มต้นมี GitHub เป็นของตนเอง
3.สร้าง Repository
4.Download Git Client
5.การใช้งาน GitGUI Client:SourceTree
6.Clone Repository
7.Commit Code
8.Push Code
9.Fetch and Pull

GitHub คืออะไร?

GitHub เป็น Source Control อย่างหนึ่ง เป็นพื้นที่สำหรับจัดเก็บซอสโค้ดโดยเฉพาะ อารมณ์ก็คือ DropBox หรือ Google Drive สำหรับซอสโค้ดนั่นแหละ

ข้อดีของมันมีหลายอย่างเช่นเวลาเราบันทึกไฟล์โปรเจคของเราไว้ในเครื่อง เวลาเครื่องมีปัญหา ล้างเครื่องใหม่ เราก็สามารถดึงซอสโค้ดมาจาก GitHub ของเราได้โดยตรง หรือเราสามารถแบ่งบันซอสโค้ด หรือทำงานร่วมกันกับเพื่อน หรือนักพัฒนาคนอื่น ๆ ผ่าน GitHub ได้ด้วยเช่นกัน

https://github.com/

เริ่มต้นมี GitHub เป็นของตนเอง

เริ่มจากการสร้างแอดเคาท์ที่ https://github.com/ ซะก่อนโดยเจ้า GitHub เปิดให้เราใช้ได้ฟรี หากโปรเจคหรือข้อมูลของเราตั้งสถานะเป็น Public หรือเปิดให้ใครก็ได้เข้าถึง แต่ถ้าอยากทำเป็น Private ไม่อยากให้ใครค้นหาได้ต้องเสียตังคจ่ายรายเดือนหรือรายปี สามารถสร้างแบบ private ได้ไม่จำกัดจำนวน

อัตราการค่าใช้จ่ายแบบรายเดือนและรายปี

สร้าง Repository

repository หรือบางคนเรียกสั้นๆว่า repo แปลตรงตัวก็คือที่เก็บ เราจะต้องสร้างที่เก็บงาน หรือที่เก็บโปรเจคของเราก่อน โดยเราสามารถสร้างที่เก็บของเราได้ไม่จำกัดจำนวน (ตามเงื่อไขคือ เป็นสถานะสาธารณะได้ไม่จำกัดจำนวน repo) กดสร้างที่ปุ่มเขียวๆ ขวามือ ตั้งชื่อ repo ของเราและอาจกำหนดคำอธิบายไว้ด้วยก็ได้ เรียบร้อยแล้วกด create repository

เราจะได้หน้า repo ที่เราสร้างขึ้นมา GitHub จะมีเครื่องมือให้เราใช้งานเกี่ยวกับ Source Control มากมาย แต่ตอนนี้เราจะต้องไปตั้งค่า Git Client ที่เครื่องของเราซะก่อน โดยเราจะใช้ URL ที่ GitHub เตรียมไว้ให้เพื่อบอกว่า repo ของเราอยู่ที่ใหน

Download Git Client

Git Client เป็นโปรแกรมสำหรับสื่อสารกับ GitHub หรือ Source Control ตัวอื่นๆ มีหลากหลายตัวทั้งตัวฟรี และตัวที่ต้องเสียเงิน มีทั้งแบบ command line และแบบ GUI โดยเราสามารถเลือกใช้ได้แล้วแต่ความชื่นชอบและความถนัด (โดยฟังชั่นหลัก และสำคัญก็คือการส่งโค้ดและการดึงโค้ดจาก server ซึ่งสามารถทำได้ทั้งหมดทุกตัวที่มี)

https://git-scm.com/downloads/guis

การใช้งาน GitGUI Client:SourceTree

หนึ่งในตัว GUI Client ดาวโหลดได้ที่ https://www.sourcetreeapp.com/

SourceTree จาก https://www.sourcetreeapp.com/

Clone Repository

หลังจากการติดตั้ง SourceTree สำเร็จ เราจะต้องทำการเพิ่ม repo ที่เราสร้างไว้แล้ว กดที่ปุ่ม Clone/New และใส่ URL ที่เราได้จาก GitHub ลงไปที่ช่อง Source Path/URL

เลือก Destination path กำหนดตำแหน่งที่เก็บไฟลในเครื่องของเราตามที่เราต้องการ เสร็จแล้วกด Clone ได้เลย

ตั้งค่า Source และ Destination path

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

ทำการเชื่อมต่อกับ repo ที่สร้างไว้เรียบร้อย

เราจะทำการใส่ข้อมูลลงไปในโฟลเดอร์ที่เราตั้งค่าให้เชื่อมต่อกับ repo ในตอนตั้งค่า ในตัวอย่างจะเป็นการสร้างโปรเจคจาก Visual Studio ลงในโฟลเดอร์ที่ตั้งค่าไว้

สร้างโปรเจคใหม่ โดยตั้งค่า location ตามที่ได้ตั้งค่าไว้กับ SourceTree

Commit Code

เมื่อเราสร้างโปรเจค หรือเขียนงานไปได้เรียบร้อยแล้ว กลับมาที่ SourceTree จะแสดงรายการที่มีการเปลี่ยนแปลงไปจากเเดิม (เป็นโฟลเดอร์เปล่า) ตามรูปด้านล่านมีการเพิ่มไฟลเข้ามา 13 ไฟล์จากการสร้างโปรเจคในขั้นตอนก่อนหน้า

SourceTree แสดงการเปลี่ยนแปลงของโฟลเดอร์งานที่เราตั้งไว้

Push Code

ทำการส่งงานของเราขึ้นไปยัง GitHub โดยการเลือกไฟลที่ต้องการส่ง ในที่นี้ต้องการเลือกทั้งหมดเราจะกด Stage All และทำการคอมเม้นด้านล่างและกดปุ่ม Commit ขวาล่าง

เลือกไฟล์ที่ต้องการ commit ใส่ comment และกดคอมมิท

หากเป็นการติดตั้งครั้งแรก โปรแกรม SourceTree จะไม่ทราบว่าเราคือใคร ให้ทำการกรอกข้อมูลอีเมลเพื่อยืนยันตัวตน เป็น Default information ก่อนโดยไปที่เมนู Tools->Option->General->Default user information ให้ใส่เมลที่ได้ทำการสมัครไว้กับ GitHub เอาไว้ลงไป

ใส่ Email address ของเราลงไปสำหรับค่าปริยายของโปรแกรม SourceTree

เมื่อกรอด Default user เรียบร้อยแล้ว (ทำครั้งเดียว ครั้งหน้าไม่ต้องกรอกใหม่) ระบบจะทำการ commit โค้ดที่เราสร้าง หรือแก้ไขลงในโฟลเดอร์ให้เรา การ commit เป็นการบันทึกการเปลี่ยนแปลงในเครื่องคอมพิวเตอร์ของเราเท่านั้น ยังไม่ได้ทำการส่งข้อมูลออกจากเครื่องไปยัง GitHub ที่เราสร้างไว้ในเวบ เราต้องทำการ Push โค้ดทั้งหมดซะก่อนโดยทำการกดปุ่ม Push ที่แถบเครื่องมือด้านบน

ทำการ Commit เสร็จแล้วต่อไปเป็นการ Push โค้ดไปยัง Server

จะปรากกฏหน้าต่างเลือก Branches เราสามารถเลือกแยกบันทึกโค้ดของเราออกเป็นเวอร์ชั่นต่างๆได้ เช่น เราทดลองใส่ฟังชั่นใหม่เข้าไปและไม่อยากให้มีผลไปยังเวอร์ชั่นก่อนหน้านี้เราก็สามารถเลือกบันทึกแยก Branch อื่นๆได้

แต่ตอนนี้เรามีแค่ Branch เดียว เลือก Master แล้วกด Push

เลือก Branch และกด Push

SourceTree จะถาม Username และ Password ที่เราใช้ในการใช้งาน GitHub.com ให้เราทำการกรอกข้อมูลลงไป

กรอกข้อมูล username และ password

กลับไปที่เว็บ GitHub เราจะเห็นว่าหน้าตาของแทบ Code เราเปลี่ยนไป มีข้อมูลของไฟลที่เราสร้างขึ้นอยู่บนเว็บเรียบร้อยแล้ว

หน้าตาของ GitHub เมื่อเราทำการ Push โค้ดสำเร็จ
หน้าตาของ SourceTree เมื่อเราทำการ Push โค้ดเรียบร้อย

Fetch and Pull

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

คำสั่ง Fetch เป็นการดึงข้อมูลจาก Repo มาตรวจสอบก่อนว่ามีโค้ดเวอร์ชั่นใหม่หรือไม่ ถ้ามีโปรแกรมจะแสดงข้อมูลว่ามีกี่ไฟล์ที่เปลี่ยนไป ไม่ตรงกับไฟลในเครื่องของเรา

คำสั่ง Pull เป็นคำสั่งดึงข้อมูลจาก Repo เช่นกัน โดยคำสั่งนี้จะแตกต่างกับ Fetch ตรงที่จะไม่แสดงข้อมูลที่ของไฟลที่เปลี่ยนแปลงก่อน แต่จะเป็นการดึงข้อมูลมาใส่เครื่องเราเลยทั้งหมด

คำสั่งทั้งสองสามารถเรียก Fetch และตามด้วย Pull หรือเราจะกด Pull ปุ่มเดียวก็ได้ ทั้งสองขั้นตอน จะเป็นการดึงข้อมูลจาก Repo มาที่เครื่องเราเหมือนกัน

กระบวนการทำงานคร่าวๆ ก็จะเป็นไปตามภาพด้านล่างครับ

ภาพแสดงการทำงานของ Push , Fetch และ Pull