ทำความรู้จัก Git & GitHub พร้อมการใช้งานร่วมกับ VS Code เบื้องต้น

มาทำความรู้จักกับ Git และ GitHub กันเลย

stackpython
4 min readJul 2, 2020

Git คืออะไร

Git คือ Version Control ตัวหนึ่งซึ่งจะเป็นระบบที่มีหน้าที่ทำการจัดเก็บการเปลี่ยนแปลงของไฟล์ใน Project และมีการ backup ให้เราสามารถที่จะเรียกดูหรือทำการย้อนกลับไปดูเวอร์ชั่นต่างๆของ Project ที่ใด เวลาใดก็ได้ ดังนั้น Version Control ก็เหมาะอย่างยิ่งสำหรับนักพัฒนาไม่ว่าจะเป็นทั้งในรูปเเบบเดี่ยวหรือกลุ่มก็ตาม และนอกจากนั้นก็ยังสามารถเรียกดูได้ ว่าใครเป็นคนเขียนหรือใครเป็นคนแก้ไข Project ในส่วนต่าง

GitHub คืออะไร

GitHub คือ เว็บเซิฟเวอร์ที่ให้บริการในการฝากไฟล์ Git หรือพูดง่ายๆก็คือ Git ที่อยู่บนเว็บไซต์นั่นเอง ซึ่งจะทำให้เราสามารถใช้ Git ร่วมกับคนอื่นได้โดยผ่านเว็บไซต์ซึ่งจะมักนิยมใช้กันมาก ในการเก็บ Project Open Source ต่างๆ

วิธีการติดตั้ง Git

ให้เข้าไปที่ :

จากนั้นทำการกด Download ในหน้าจอคอมพิวเตอร์ด้านล่าง

เมื่อทำการ Download เสร็จเรียบร้อย ให้เปิดขึ้นมา

จากนั้นให้ กด Next รัวๆเลยจ้า จนมาถึงที่ให้กด Install รอจนเสร็จ

เท่านี้ก็ถือว่าลงเรียบร้อยจ้า จากนั้นเราจะทำการเช็คว่าเราติดตั้ง Git เสร็จเเล้วจิงหรือเปล่า ให้เราทำการเปิด Command prompt ขึ้นมาจากนั้น ใช้คำสั่ง

git --version

ถ้ามี version ของ Git แสดงขึ้นมา ก็เเสดงว่าตัว Git ของเราพร้อมใช้งานนั้นเอง ซึ่งการจะเช็คนั้นก็สามารถเช็คได้ใน Terminal ของ VS Code ได้เหมือนกันจ้า

จากนั้นให้ทำการ Config user.name กับ user.email ด้วยคำสั่ง

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

เพื่อเป็นการ Setup ชื่อและอีเมล์สำหรับใช้งาน Git เสร็จเเล้วก็ทำการเช็คด้วยคำสั่ง

git config --list

เพื่อเช็คว่าเราทำการ Config user.name กับ user.email ได้หรือไม่ ซึ่งถ้าใน list มีรายการ user.name และ user.email อยู่เเสดงว่า config เรียบร้อย

วิธีการใช้งานร่วมกับ VS Code เบื้องต้น

เมื่อเราใช้ Git ร่วมกับ VS Code จะทำให้เราสามารถใช้งาน Git ได้ง่ายมากยิ่งขึ้นเนื่องจากตัว VS Code มีเครื่องมือที่สามารถช่วยทำให้การใช้งาน Git ได้สะดวกขึ้น เเล้วเครื่องมือเหล่านั้น มีอะไรบ้างไปดูกัน

เริ่มจากสร้าง Project ขึ้นมาก่อนเลยซึ่งผมจะทำ Project พร้อมกับไฟล์ .py ที่เราต้องการอัพขึ้น GitHub

จากนั้นให้เปิด GitHub ขึ้นมา ทำการ Sign in โดยใช้ email ให้ตรงกับที่เราทำการ Config ไว้ เมื่อ Sign in เสร็จให้เลือกที่ new repository

จากนั้นก็เลือกกรอกรายระเอียดต่างๆ ของ repository

หลังจากกด Create repository ก็จะได้หน้าตาเเบบรูปด้างล่างนี้

จากนั้นให้กับไปที่ VS Code เเล้วทำการเรียก Terminal ขึ้นมา จากนั้นใช้คำสั่ง

git init

หรือทำการกด ctrl+shift+P เเล้วเลือก Git: Initialize repository ตามรูปด้านล่าง

จากนั้นให้เลือกที่ Project ของเรา ซึ่งสามารถเลือกทำได้ทั้ง 2 วิธ ีเมื่อทำเสร็จด้านหลังไฟล์จะมีตัว U สีเขียวขึ้นมาเเสดงว่า Git init เรียบร้อย

จากนั้นให้กลับไปที่ Terminal แล้วใช้คำสั่ง

git add . 
git commit -m "first commit"
git remote add origin https://github.com/anuchit1999/test1.git
git push -u origin master

ตามลำดับ เเละเมื่อใช้คำสั่งสุดท้าย จะมีการให้ Sign in GitHub อีกครั้งโดยจะหน้าเป็นหน้าต่าง เหมือนภาพด้านล่าง ก็ให้ทำการ Sign in ให้เรียบร้อย

เมื่อเสร็จเเล้วให้ไปดูที่ GitHub จะเห็นได้ว่า ไฟล์ test.py ที่เราสร้างขึ้น ได้อัพขึ้นมายัง GitHub เเล้ว

เเละเมื่อต้องการอัพเดท Project ก็ต้องทำวนกับคำสั่งเดิมๆ เเต่เราจะมาใช้เครื่องใน VS Code ที่จะช่วยให้คุณสามารถอัพเดทโดย ไม่ต้องยุ้งกับ code ในคราวต่อๆไป

เริ่มจาก การ Commit ให้ลองพิมพ์ code ลงไปใน test.py จากนั้นกด save จะปรากฎ ตัว M สีส้มขึ้นมา จากนั้นไปที่ Source Control ให้พิมพ์ ข้อความ การอัพเดทในเเต่ละครั้ง ที่ ช่องข้อความด้านบนจากนั้นกด ที่เครื่องหมายถูก จะถือว่าเป็นการ commit เเบบง่ายๆโดยไม่ต้องเข้าไปยุ้งกับ code

ต่อไปจะเป็นการ Push ซึ่งการ Push นั้นจะทำให้ข้อมูลใน VS Code ที่ ถูกการ commit เเล้วอัพขึ้นสู่ GitHub ทันที ซึ่งเป็นการอัพที่สุดเเสนจะง่ายดายเลยครับ

และเมื่อไปเช็คดูใน GitHub จะเห็นได้ว่า code ที่เราพิมพ์ไปใน VS Code ถูกอัพขึ้น GitHub เรียบร้อยเเล้ว

เเละถ้าหากมีการอัพเดทจากฝั่งอื่น ซึ่งเราอยากดึงเข้ามาไว้ใน VS Code ให้กดที่ Pull เช่น ถ้าลองเเก้ไขที่ GitHub ดู

จากนั้นเข้าไปกด Pull

จะเห็นได้ว่าข้อมูลที่เราทำการเเก้ไข้ใน GitHub จะถูกดึงลงมาที่ VS Code

หรือถ้าหากว่ามีการ เเก้ไข้ทั้ง GitHub เเละ VS Code พร้อมๆกัน ให้กดไปที่ Sync

เมื่อกด Sync เเล้วข้อมูลที่ถูกดึงมาอาจจะต้องทำการเรียงก่อนเเละ commit ใหม่ จากนั้นจึงค่อยทำการ Sync อีกรอบจ้า

ขอบคุณมากครับที่เข้ามาอ่านบทความของทางเพจ Stackpython ทั้งนี้ หากสงสัยตรงไหนเกี่ยวกับเนื้อหาในบทความสามารถติดต่อสอบถามทางเพจเราได้เลยครับ

ตอนนี้เรายังมีหลักสูตร Python Web Development with Flask ความรู้แน่น ๆ เนื้อหาจัดเต็ม ถ้าสนใจก็คลิ๊กเพื่อดูรายละเอียดและ Inbox เข้ามาคุยกันได้ที่ Facebook ได้เลยครับ

<>Nu STACKPYTHON</>

--

--