Blog #6: GitHub คืออะไร (SourceTree) สำหรับมือใหม่

Git, GitHub, GitLab สำหรับการใช้ผ่าน SourceTree (Step bt Step)

Fig 1. Git + SourceTree

Overview

1. ทำไมต้องรู้จัก Git, GitHub
2. Git คืออะไร ?
3. GitHub คืออะไร ?
4. Git-GUI Client (SourceTree)
5. พื้นฐานการใช้ Git GUI และ Source Tree อย่างง่าย (Add, Commit, Push)
6. วิธีการย้อนดู Version หรือ Commit ก่อนหน้านี้ (Checkout)
7. สรุป

1. ทำไมต้องรู้จัก Git, GitHub

เมื่อนักพัฒนา (Developer) กำลังเขียนโปรแกรมเราอาจจะต้องการ save project เป็น version ถ้าเรายังไม่เคยรู้จัก Git เราอาจจะ save project โดยการ zip file แล้วเขียนวันที่ หรือไม่ก็ complete final บ้างแหละ เพื่อให้เราย้อนกลับไปดูอีกทีว่าจะให้ code โปรเจกนี้ version ไหน แต่ถ้าเรารู้จัก Git, GitHub เราจะหมดปัญหานี้ทันที เนื่องจาก Git สามารถ Save งานเราเป็น Version ได้ โดยที่เราเก็บไว้ที่เดียวกัน และอีกทั้งย้อน Version เพื่อมาใช้ได้อีกด้วย

2. Git คืออะไร ?

Git คือ Version Control แบบ Distributed ตัวหนึ่ง ซึ่งเป็นระบบที่ใช้ backup code และควบคุมการเปลี่ยนแปลง Files (เช่น Text File, Binary File, Python File โดยจะเรียกว่ารวมว่า Source Code) ภายใน Project ซึ่งความสามารถมีดังนี้

Track version ได้

• เมื่อเราจัดเก็บ Source Code เข้าในระบบ Git จะเรียกว่า Git Repository โดยระบบจะจัดเก็บและจดจำการเปลี่ยนแปลงไฟท์ ในแต่ละ version เพื่อให้เราสามารถย้อนกลับไปใช้ version เก่าได้ อีกทั้งยังสามารถดูว่าใครเป็นคนแก้ไขไฟท์ได้อีกด้วย

Teamwork

• โดยระบบของ Git สามารถแบ่งกันทำงานคนละ Branches ได้ เมื่อเรา Push ขึ้นไปเก็บที่ Remote Repository(Git Hosting) เมื่อเพื่อนร่วมทีม Pull Branches ของเราลงมาก็จะสามารถได้ version ล่าสุดของเราไปพัฒนาต่อได้

3. GitHub คืออะไร ?

GitHub เป็นเว็บไซต์ที่สามารถใช้ Git (version control repository) ที่อยู่บน internet มีการทำงานแบบเดียวกับ Git เลย แต่สามารถเข้าถึงข้อมูลและจัดการไปผ่าน website โดยไม่ต้องเสียเงิน

Fig 2. https://github.com

4. Git-GUI Client

สำหรับคนที่ไม่ชอบ Command line หรือ งง อยู่กับระบบของ Git อยู่ แนะนำซอฟต์แวร์ที่จะช่วยให้จัดการ Git ได้ง่ายขึ้นคือ Source Tree

Fig 3. https://www.sourcetreeapp.com

ก่อนอื่นต้องสมัครการใช้งาน GitHub และ Source Tree และดาวน์โหลดโปรแกรม Source Tree ซึ่งสามารถใช้ได้บน Windows, MacOS

5. พื้นฐานการใช้ Git GUI และ Source Tree อย่างง่าย

• Step 1: เมื่อเรา login ในเว็บ Github แล้วเราจะสามารถสร้าง Git Repository โดยที่คลิกที่ปุ่ม Start a project

Fig 4. Start a project

• Step 2: หลังจากนั้นเราตั้งชื่อ Folder หรือ Repository name แล้วก็กรอกคำอธิบายของ Repository นี้

Fig 5. Setup Repository

• Step 3: Copy url ของ Repository เรา เพื่อให้ SourceTree สามารถเข้าถึง Repository นี้ได้

Fig 6. Repository จะมีไฟท์ README.md

• Step 4: เมื่อเรา Login SourceTree แล้วนำ url จาก GitHub มากรอกใน Source URL แล้วเลือก Path ที่เราจะจัดเก็บ แล้วกดปุ่ม Clone project

Fig 7. Clone project ใน Repository

Fig 8. Clone project ใน Repository

แล้วจะไฟท์ใน Folder ที่เราจัดเก็บจะสังเกตุได้ว่า มีไฟท์ README.md อยู่ใน Folder เช่นเดียวกันกับใน GitHub (Fig 6.)

Fig 9. ใน Folder ในเครื่องเรา

Git Add Files

• Step 5: หลังจากนี้เราจะ Add files “main.py” หรือ Source Code ของเราเข้าไปใน Folder ที่เรา Clone มาจาก GitHub

Fig 10. add file “main.py”

Git Commit Files

• Step 6: ขั้นตอนถัดมาเราก็กด check box ไฟท์ที่เราต้องการอัพขึ้น Git Repository ของเราเพื่อ backup files แล้วก็กรอก Commit files เข้าไปโดยกรอกให้เราเข้าใจว่าการ Commit ครั้งนี้เราแก้อะไร หรือ ทำอะไรไปบ้าง

Fig 11. กด commit files

Git Push Files

• Step 7: เมื่อเรา Add files และ Commit files ที่เราจะอัพเสร็จแล้วต่อมาก็มาที่ Branches ที่เราจะอัพ โดยที่ Branches มีหน้าที่ช่วยให้นักพัฒนาสะดวกขึ้นเหมือนการทำงานแบบ Save คนละที่แต่เป็น Project เดียวกัน จากนั้นก็กด Push ขึ้นได้เลย เพื่อให้ Source Code อันใหม่ Upload ไปที่ Git Repository ของเรา

Fig 12. Push source code ขึ้น GitHub

Fig 13. เลือก Branch ที่จะ Push

Check GitHub

• Step 9: ไปที่ Git Repository ของเราจะเห็นได้ว่ามีไฟท์ “main.py” อยู่ใน Repository เราแล้ว นั้นหมายความว่าคุณ Push git สำเร็จแล้ว ดังรูป Fig 14.

Fig 14. GitHub

6. วิธีการย้อน Commit ด้วย Git Checkout

เริ่มจากการสร้างไฟท์ “func_sum.py” แล้วจัดเก็บไว้ใน Folder ที่เรา Clone project มา หลังจากนั้นไปให้เช็คใน SourceTree โดยระบบของ Git จะตรวจสอบเจอไฟท์ใหม่ที่เราเขียนขึ้นมาดังรูป Fig 16. โดยไฟท์ที่ยัง Uncommit

Fig 15. สร้างไฟท์ “func_sum.py”

Fig 16. Git จะตรวจพบไฟท์ที่ยังไม่ได้ commit

หลังจากนั้นเราก็ Add Files และ Commit Files ที่ยังไม่ได้ยัง Uncommit

Fig 17. Commit new files

แล้วทำการ Push ไฟท์ใหม่ขึ้นไปใน GitHub ดังรูป Fig 18.

Fig 18. Push new files

ตรวจสอบในเว็บ GitHub จะพบไฟท์ใหม่ได้ถูก Push ขึ้นเรียบร้อยแล้ว ดังรูป Fig 19.

Fig 19. ใน GitHub จะเห็นไฟท์ชื่อ func_sum.py ขึ้นไปอยู่ใน Repo. แล้ว

การย้อน Commit ด้วย Git Checkout

เมื่อเราไปที่ SourceTree แล้ว Checkout (Fig 20.) ที่ Commit ก่อนหน้านี้ไฟท์ ในเครื่องเราจะถูก update ไปยัง Git commit เดิม

Fig 20. Git Checkout

เมื่อเรากด Checkout commit เก่าแล้ว สิ่งที่น่าจะเปลี่ยนแปลงไปไฟท์คือไฟท์ “func_sum.py” ก็จะหายไปเนื่องจาก Commit นั้นที่เราย้อนไป ตอนนั้นยังไม่มีไฟท์ หรือ Code ส่วนนั้นอยู่นั้นดังรูป Fig 21. นี้ก็คือการย้อน Version ของ Git

Fig 21. Folder ที่ Clone มาจะถูกย้อน Commit ไปด้วย

7. สรุป

ถ้าเข้าใจ GitHub และ SourceTree พอสมควรแล้วจะเห็นได้ว่าเราสามารถอัพขึ้น Cloud โดยที่เราไม่ต้องกลัวมาหายอีกต่อไปและอีกทั้งยังสามารถย้อนประวัติในการ Commit ของเราซึ่งเป็นประโยชน์มากสำหรับนักพัฒนา (Developer) หวังว่าจะเข้าใจหรือช่วยอะไรได้บ้าง ส่วนใครสนใจการใช้ Git ด้วย Command line เดี๋ยวจะมีอีก Blog ให้อีกทีนะครับ