Coding Gun

การติดตั้งและใช้งาน Github Desktop

Github Desktop คือเครื่องมือที่ใช้จัดการ Git ผ่านทาง GUI เหมือนกับ Sourcetree

วิธีติดตั้ง Github Desktop

  1. Download ตัว Installer ได้ที่ Github Desktop

    Download Github Desktop Installer

  2. เมื่อเราทำการเปิดตัวติดตั้ง เริ่มต้นโปรแกรมจะให้เรา Sign-in ด้วย Github Account หากไม่มีสามารถสร้างใหม่หรือกด Skip this step ได้

    Github Installtion step 1
    Log-in to Github

  3. Configure Git เมื่อเราทำการ Log-in เรียบร้อยแล้ว ให้ตั้งค่าสำหรับการ Commit Git

    Github Installtion step 2
    Configure Git

  4. เพียงเท่านี้เราก็จะเริ่มต้นใช้งาน Github Desktop กันได้เลย โดยมีตัวเลือกให้ทั้ง Creat a New Repository หรือจะทำการ Clone a Repository ที่เรามีอยู่แล้วก็ได้

    Github Installtion step 3
    Github Get started

Github Desktop เริ่มต้นนำเข้า Project

  1. ทำการ Clone Repository ให้เลือกเมนู File > Cone repository..

    Github Clone Repo

    จากนั้นต่าง Pop-up ให้เลือก Repo ที่เราต้องการ และกดปุ่ม Clone

    Github Clone Repo

    เมื่อเรียบร้อยแล้วจะได้แบบนี้

    Github Clone Repo

เพิ่ม Branch

ถ้าเราต้องการสร้าง Branch ขึ้นมาใหม่ให้ทำตามขั้นตอนต่างๆ ดังนี้

  1. Create New Branch ใหม่โดยกดที่ปุ่ม Current branch ด้านบน จากนั้นให้พิมพ์ชื่อ Branch ระบบจะแสดงปุ่ม Create new branch ขึ้นมาให้ ดังรูป

    Github Clone Repo

    เพียงเท่านี้เราก็ได้จะ Branch ใหม่มาใช้งาน

    Github Creat feature branch

  2. Publish Branch เมื่อเราสร้าง Branch ใหม่ขึ้นมาแล้ว จะมีปุ่มสีฟ้าขึ้นมาให้ Publish Branch เพื่อให้สมาชิกใน Repository ของเรา สามารถใช้งาน Branch นี้ได้ แต่หากเราไม่ทำการ Publish จะมีเพียงแค่เราเท่านั้นที่สามารถเข้าใช้งานได้ และจะอยู่แค่ใน Locally เท่านั้น

    Github Publish New Branch

  3. ทดสอบการแก้ไข Code ให้เราไปที่ Current repository > คลิกขวาที่ Repo > Open in Visual Studio Code

    Github Commit code

    ลองทำการเพิ่ม ข้อความลงในไฟล์ ดังตัวอย่าง

    Github Commit code

  4. หน้าจอ Github Desktop จะอัพเดทสิ่งที่เราแก้ไขทันที ซี่งเราสามารถกด Commit ได้เลยที่ปุ่มซ้ายล่าง

    Github Commit code

    จากนั้น Github จะแสดงกล่อง Push ขึ้นมาให้ เราสามารถกด push ได้เลย

    Github Push code

Pull Request

เมื่อเราต้องการทำ Pull Request ซึ่งจะมีขั้นตอนต่างๆ ดังนี้

  1. Creat Pull Request โดยให้กดปุ่ม Preview Pull Request จากนั้นจะมี Pop-up แสดง Code ที่เรา Push ก่อนหน้านี้

    Github Creat Pull Request

    Github Creat Pull Request

    เมื่อกดปุ่ม Create pull request แล้ว Github จะเปิด Browser Github เพื่อให้เราสร้าง Pull Request

    Github Creat Pull Request

    หน้าจอแสดงผล Pull Request ของ Branch feature01 ซึ่งเราสามารถ Merge Pull Request เข้ากับ Branch Main ได้ที่นี่

    Github Pull Request from Feature Branch

Github Desktop Multiple Accounts

การเพิ่ม Account ใน GitHub Desktop จะช่วยให้เราทำงานกับ Github ได้สะดวกขึ้น โดยมีขั้นตอนต่างๆ ดังนี้

  1. เปิดโปรแกรม GitHub Desktop

  2. ไปที่เมนู File > Options... ( บน Windows) หรือ GitHub Desktop > Preferences... (บน MacOS)

  3. ไปที่แท็บ “Accounts”

  4. ล็อกอินผ่าน Browser

  5. อนุญาตให้ GitHub Desktop เข้าถึงบัญชีของคุณด้วยการคลิก Authorize GitHub Desktop

  6. กลับมาที่ GitHub Desktop

เมื่อเข้าสู่ระบบสำเร็จ โปรแกรมจะกลับมาที่ GitHub Desktop โดย Account ใหม่ของคุณจะถูกเพิ่มไว้ในแท็บ Accounts

Github Desktop Rebase

เราสามารถทำ Git Rebase บน GitHub Desktop ได้เลย ซึ่ง Feature นี้จะช่วยให้คุณรวมการเปลี่ยนแปลงจาก branch อื่นเข้ามาใน branch ปัจจุบันได้โดยไม่ต้องสร้าง merge commit(Clean History) อ่านบทความเกี่ยวกับ Git Rebase ต่อได้ที่บทความนี้

GitHub Desktop รองรับการ Rebase เฉพาะตินที่คุณกำลังจะสลับ branch แล้วเลือก “Bring changes from main into your branch” เท่านั้น และยังไม่สามารถทำ interactive rebase หรือ rebase แบบ custom ได้โดยตรง จาก UI

ซึ่งวิธีการทำ Git Rebase มีดังนี้

  1. เปิด GitHub Desktop และเลือก repository

  2. ตรวจสอบว่าอยู่ใน branch ที่ต้องการ rebase แล้วรึยัง เช่น สมมุติว่าตอนนี้คุณอยู่ที่ feature/login

  3. ถ้ามีการเปลี่ยนแปลงใน main โปรแกรมจะแสดง

    Bring changes from main into feature/login-ui
    

    Github Rebase

    คลิกปุ่มนี้ โปรแกรมจะทำการ Rebase(นำ Commits จาก branch main เข้าไปไว้ใน branch feature/login)

  4. ถ้ามี conflict เกิดขึ้นจะมีหน้าต่างแสดงไฟล์ที่ต้องแก้ไข คุณสามารถเลือก Open in Editor แล้วทำการแก้ไข จากนั้นคลิก Mark as Resolved ได้เลย

    Github Merge Conflict

    Github Merge Conflict

    Github Merge Conflict

  5. เมื่อแก้ conflict ครบแล้ว ระบบจะทำการ rebase ต่อจนเสร็จสิ้น จากนั้นจะเข้าสู้ขั้นต้อนการ Commit ปกติ

    Github Merge Conflict

Phanupong Permpimol
Follow me