Basic Git part 10

Git Remote

เราจะสร้าง project เล็กๆขึ้นมา จากนั้นก็จะนำมันไปเก็บไว้บน GitHub (แบบ public)

GitHub คืออะไร?
ง่ายๆก็คือที่เก็บไฟล์ของเรานั่นแหละ ซึ่ง online อยู่ใน internet หรือตามความหมายของมันเอง ก็ได้อธิบายไว้ว่า GitHub คือ code hosting platform สำหรับ version control ช่วยให้เพื่อนๆและคนอื่นๆทำงานร่วมกันไม่ว่าจะอยู่ที่ใดๆบนโลกใบนี้

ก็สมัคร GitHub ไปตามวิธีการ จะได้หน้านี้ขึ้นมาหลังจาก logged เรียบร้อยแล้ว

กดไปที่ปุ่ม start a project เลย ให้เราไปกำหนดพื้นที่ที่จะวาง project ของเราลงไปก่อน (บน GitHub) นั่นก็คือไปตั้งชื่อ repository name (อันความจริงแล้วที่เก็บจริงๆอยู่ตรงไหนบน server GitHub นั่นไม่ใช่สิ่งที่เราสนใจ) ผมขอใช้ชื่อว่า act-shop

เราจะได้สิ่งนี้มา ให้เรียกมันง่ายๆว่า remote URL หรือใครจะเข้าใจว่ามันคือ location ของ project ก็ไม่ผิด อย่างนั้นก็เรียกมันว่า remote repository ก็ย่อมได้

ตอนนี้เรามีสถานที่เก็บ project บน internet แล้วและพร้อมใช้งาน คำถามคือ ใช้งานอย่างไร?

จากที่เราเรียนรู้ร่วมกันมา (โดยไม่มีใครแย้ง) คือเรามีถังที่เรียกว่า repository เก็บไว้ที่เครื่องของเราถูกต้องไหม

"ถูกต้องครับ"

และเราเรียกถังใบนั้นว่า local repository ถูกต้องไหม?

"ถูกต้องค่ะ"

คือเล่นกับถัง (เรียกย่อๆว่า local repo) นี้แค่ใบเดียวมาตลอดใช่ไหม?

"แม่นแบ้ว"

เอาล่ะ ตอนนี้เราจะ copy เอาของในถังทั้งหมดที่อยู่แค่ในเครื่องของเราไปไว้ในถังที่มันอยู่ใน internet เพื่อแบ่งปันพัฒนามันกับเพื่อนๆหรือเก็บเป็นของส่วนตัวไว้เพื่อ clone มันมาพัฒนาต่อไม่ว่าเราจะอยู่ในที่ใดๆบนโลก

มาเริ่มสร้าง project ในเครื่องกันก่อน (เพราะตอนนี้เรายังไม่มีอะไรเลย) ผมสร้างไฟล์แรกชื่อ index.html แล้วเพิ่มโค้ดบางส่วนเข้าไป จากนั้น

git init
git add index.html
git commit -m "first commit"

สมมติว่าตอนนี้ของพร้อมแล้ว เราก็จะเอาของขึ้น remote หรือก็คือสถานที่ที่เราจะเอา project ไปวางไว้บน internet

แต่ก่อนอื่นมาดูภาพต่อไปนี้

***หมายเหตุ
ภาพนี้นำมาจาก https://greenido.wordpress.com/2013/07/22/git-101-useful-commands/

ตอนนี้ของอยู่ที่ (local) repository ถูกไหม ตามภาพคือเรากำลังจะ push ไปยัง remote repository

แต่ก่อนจะทำสิ่งนี้ บอกกับ .git ของเราก่อนว่า remote ที่เราเพิ่งไปสร้างขึ้นน่ะมันอยู่ที่ไหน และพอเอาขึ้นไปแล้วจะให้เรียก ณ สถานที่นั้น (url) ด้วยชื่อว่าอะไร (ตำราเรียก shortname) คำสั่งโดยทั่วไปก่อนจะ push ก็คือ

git remote add origin https://github.com/proSbeginner/act-shop.git

โดยที่
git remote add คือคำสั่งที่จะนำไปวาง ณ remote URL
origin คือชื่อที่เราตั้งขึ้น โดยจะตั้งว่าอะไรก็ได้
ส่วน https://github.com/pro... อะไรนี่ก็คือ remote URL

บอกตรงเลยว่าไม่มีอะไรเกิดขึ้นบน remote หรอก ลองตรวจสอบดูได้โดยการพิมพ์

git remote show origin

กลับไปดูภาพ Git flow diagram เราต้องใช้ push เพื่อส่งของจากเครื่องเราขึ้นสู่ GitHub ถูกต้องไหม พิมพ์ไป

git push origin master

โดยที่
git push คือคำสั่งนำของขึ้นไปวาง
origin คือชื่อ (shortname) ของ remote URL
ส่วน master คือชื่อ branch (ในที่นี้คือ branch แรกของเราเลยบน remote)

จัดไปตามที่มันขอ เสร็จแล้วก็จะได้แบบนี้

ตอนนี้ใครอยากจะ clone หรือ download เป็น .zip ไปใช้ก็ได้ ก็กดปุ่มสีเขียว (ด้านขวา) ที่เขียนว่า clone or download นั่นแหละครับ และนี่แหละคือการแชร์ project ล่ะ

ต่อไปเป็นภาค clone สมมติว่าที่เครื่องของเราไม่มีถัง repo เลยสักใบ ปรากฏว่าเราไปเห็น project ของเพื่อนหรือของใครก็ไม่รู้ (หรือของเราที่ไปฝากไว้กับ GitHub) บน internet น่าสนใจมาก อยากสอยเอามาดู ก็ให้เราไปกดปุ่มเขียวที่เขียนว่า clone or download นั่นแหละ แล้วก็คัดลอกเอา URL มันมา (จริงๆดาวน์โหลดลงมาเลยก็ได้ แต่ที่จะสาธิตนี้คืออยากใช้คำสั่ง git clone เท่านั้นเอง)

คัดลอก URL ที่เราสนใจก่อน

ตอนนี้ในเครื่องเรายังไม่มีอะไรเลย

พิมพ์ไปว่า

git clone https://github.com/proSbeginner/act-shop.git

โดยที่

git clone เป็นคำสั่งไป copy ถังบน remote (github server) มาทั้งใบ

ส่วน https://github.com/pro... ก็คือ remote URL

ตรวจด้วย git remote show พิมพ์

git remote show origin

เอาล่ะผมขอเอาภาพ Git flow diagram มาถามว่า ณ ตอนนี้เพื่อนๆเห็นถังกี่ใบ?

ตอบนะตอบ แต่ผมขอตัวไปนอนก่อน สวัสดี

Basic Git part 9

Git Merge with Conflict

จงกลับไป ณ iss53

สมมติว่าแก้ไขไฟล์ index.html อีก

คราวนี้มาถึงของดี เพราะว่า iss53 นั้นท่ายากกว่า hotfix ที่ผ่านมาครับ สมมติว่าเราพอใจจะ merge มันกับ master เช่นเดียวกับชะตากรรมของ hotfix

git checkout master

git merge iss53

มันพยายามรวมกัน แต่มันรวมกันไม่ได้ เพราะว่าเกิดความไม่เข้ากันของ content ขึ้นมาเสียก่อน เรียกว่าเกิด conflict

ซึ่งเราเองต้องไปตัดสินใจแก้ไขความสับสนนี้ก่อน แล้วจึงจะสั่ง commit ได้

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

=======

จาก source ส่วนบนเกิดจาก master branch ที่ header pointer ขี้อยู่ และส่วนล่างเกิดจาก iss53 branch ที่ iss53 pointer ขี้อยู่

โดยผมตัดสินใจแก้ไขให้เป็นแบบนี้ (พิจารณาแล้วลบพวกสัญลักษณ์ที่ git สร้างไว้ออกด้วยนะครับ)

แก้ไขแล้วก็ต้องสร้าง snapshot ใหม่ พิมพ์

git add index.html

จากนั้นสั่ง

git commit

อันนี้เป็นโปรแกรม vm ซึ่งคิดว่าชาว linux คงคุ้นเคยกันดี สำหรับในกรณีนี้ผมไม่ขอกล่าวถึง เราจะออกจาก vm ได้โดยการพิมพ์

:wq

เป็นอันว่าเรียบร้อย merge สำเร็จ

***หมายเหตุ
ในรูป c6 ก็คือ commit object กับ snapshot ตัวใหม่ที่เราสั่ง git add นั่นเองครับ

สุดท้ายลบ iss53 ทิ้งไป

จบแล้วสำหรับการ merge ที่เจ๊อะ conflict สวัสดีจ้า

Basic Git part 8

Git Merge

โอกาสนี้เราจะมาเรียนรู้การรวม branch ที่แตกย่อยออกมานี้เข้าด้วยกัน สายการพัฒนาจะได้รวมมาบรรจบกัน

ครับ ในเรื่องนี้เขามีตัวอย่างให้ สมมติงานของเรา life ไปแล้ว คือไปอยู่บน production เรียบร้อย ปรากฏว่าเกิดปัญหาขึ้นมา ซึ่งจะต้องรีบแก้ไขโดยด่วน (hotfix) มีขั้นตอนดังต่อไปนี้

1. ตรงไปยัง production branch
2. สร้าง branch ใหม่ขึ้นมาชื่อ hotfix
3. จัดการปัญหา เมื่อทดสอบแล้วมันโอเค ก็ merge มันเข้ากับ branch หลักเสีย
4. switch กลับไปยัง original branch แล้วทำงานต่อไป

แต่อันที่จริงแล้วเรามักจะมี staging layer อยู่ (อันนี้ไม่เกี่ยวกับ git staging area นะ) หมายความว่ามีการ clone โปรเจ็กต์ที่อยู่ในสภาพแวดล้อมของ production layer อยู่แล้ว ผิดก็แต่ข้อมูลมันเป็นข้อมูลทดสอบ มิได้เป็นข้อมูลจริงอย่าง production layer ไม่ เราก็ควรไปทำที่ชั้น staging layer นี้แล้วค่อยจัดการ upgrade ให้เป็นของที่แก้ไขเรียบร้อยแล้วสำหรับ production layer ต่อไป

อันนี้เป็นโจทย์ที่ดีนะครับ น่าจะได้ลองกันทุกคน เพื่อความเข้าใจ

https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging

เราจะมาเริ่มต้นกันใหม่เพื่อทำโจทย์นี้ มีเวลาก็เอาไลน์ยิงขึ้น notebook หรือ PC แล้วจึงทำเองอ่านเองก่อน (แค่หน้าเดียว) ติดไหนค่อยกลับมาอ่านในไลน์นะครับ

เคร เรามาเริ่มต้นทุกอย่างใหม่ ผมตั้งชื่อ working directory นี้ว่า my_project_2

จากนั้นสร้างไฟล์หนึ่งขึ้นมาชื่อว่า index.html

เสก git ให้รู้จักมัน ก็จะมี git reporitory หรือว่าถึง หรือว่า repo (อันเดียวกัน) เกิดขึ้น

โยนไฟล์นี้เข้าไปใน staging area แล้วก็ commit ซะ

ได้เป็น committed แรก จากนั้นลองเปิด source tree ดู

แก้ไขและ commit อีกสองครั้ง ให้ได้ตามภาพต่อไปนี้

แก้ไขและ commit เป็นครั้งที่ สอง

แก้ไขและ commit เป็นครั้งที่ สาม

ตรวจสอบด้วย git log

สมมติว่าเกิด issue เกิดขึ้น ขอเรียกว่า iss53 ก็จะขอแยก branch ใหม่ให้ชื่อว่า iss53 พิมพ์

git branch iss53 เพื่อสร้าง branch ใหม่
git checkout iss53 เพื่อย้าย header pointer หรือก็คือการ switch branch

จะเข้าภาพนี้ตามโจทย์ที่ให้ไป

แก้ไขไฟล์ index.html เพิ่มอีกครั้ง สมมติว่าเป็นการ fix issue นี้

save ไฟล์ index.html แล้ว commit

จะได้รูปตามหนังสือ

ทำไปถึงจุดนี้ สมมติว่าเกิดปัญหาขึ้น ซึ่งต้องเร่งแก้ไข (สมมติ) ซึ่งเป็นอีกปัญหาหนึ่งที่มาจาก master branch ดังนั้นเราจะ switch กลับไปที่ master branch ก่อนแล้วค่อยสร้าง branch ใหม่ขึ้นมาอีก สมมติให้ชื่อว่า hotfix ก็แล้วกัน

ตอนนี้เราอยู่ที่ hotfix branch แล้ว ต่อไปเราจะแก้ไข index.html เพิ่มอีกเล็กน้อยแล้ว commit เข้ามา ก็จะกลายเป็นรูปนี้

สมมติว่าตอนนี้เราได้แก้ไขปัญหาเริ่งด่วนนี้เรียบร้อย เราก็จะ merge หรือก็คือการรวม branches เข้าด้วยกัน ในที่นี้เราพอใจที่จะรวม master branch เข้ากับ hotfix branch ครับ คือต้องการให้กลายเป็นรูปนี้

1. ตอนนี้เราอยู่ที่ hotfix branch นะครับ ให้เรากลับไปยัง master branch ก่อน

git checkout master

2. จากนั้นเราจึงบอกกับ header ว่า (มันชี้ที่ master branch) จับ hotfix มารวมซะ

git merge hotfix

การ merge นี้หมายความว่า เราจะยืนบน branch (master) ที่มี version น้อยกว่า branch ที่เราสนใจ (hotfix) จากนั้นย้าย master pointer ไปชี้ที่เดียวกับ branch ที่เราสนใจชี้อยู่นั่นแหละครับ

ให้เพื่อนๆสังเกตคำที่มันเขียนว่า fast-forward ที่ปรากฏขึ้นใน command prompt นะครับ คำนี้หมายความว่า git แค่ย้าย pointer ไปชี้ยัง branch เป้าหมายเท่านั้น คือทำง่ายๆไม่มีอะไรซับซ้อน

พอเป็นแบบนี้ตอนนี้เท่ากับว่า master กับ hotfix branches นั้นชี้ commited จุดเดียวกัน เราก็จัดการลบ hotfix ทิ้งเสีย เพราะหมดประโยชน์แล้ว

git branch -d hotfix

เอาล่ะ เสร็จกิจเร่งแล้ว เราจะกลับไปทำงานต่อที่ iss53 branch แต่เอาไว้ part ต่อไป