Loading...

Git 和 GitHub 是什麼?軟體開發常聽到的這兩個名詞有什麼關係?這篇Git和GitHub教學,將介紹工程師必備技能「版本控制系統」Git,還有以 Git 為核心技術基礎的「雲端版本控制服務平台」GitHub 該如何使用。認識軟體工程師的在軟體開發流程的頭號課題:如何管理程式碼。

軟體開發流程分成不同的階段,通常是很多人一起合作的過程。在這麼複雜的流程中,工程師究竟如何交流程式碼?

也許在你的學生時代,你曾經使用以下方式和小組同學交流期末專案檔案,然後再另外使用通訊軟體討論檔案裡的內容,但如果職場上的工程師,使用這種方式交換意見,你能想像那會是多麼混亂嗎?

在上圖中的例子中,作者顯然運用了「備份」和「檔案名稱」來讓協作者能查找不同版本的檔案,這種傳統作法有以下缺點:

  • 無法得知檔案版本之間的差異
  • 無法得知備份的原因
  • 無法追蹤修改者和修改的內容

上面的例子只是單一檔案,而一個軟體可能會由超過 100 個檔案組合而成,如果沒有好的管理方式,情況想必會更加的混亂。

結論是,工程師絕對需要程式碼管理系統,而好的程式碼管理系統會大幅影響到開發效率。因此,「版本控制系統」(version control system) 是業界的最佳實踐之一。

工程師必備技能:版本控制系統

接下來我們會先描述一個使用版本控制的情境,並帶出常用術語,在下個單元會再介紹怎麼設定版本控制的軟體與指令。

記錄各版本的差異

當你為軟體追加一個新功能時,可能會同時在許多檔案的不同地方修改程式碼,所有的程式碼都修改到位之後,軟體才會出現有意義的版本差異,在版本控制系統中,稱呼這組更動為 commit,代表你在這次更動中提交的程式碼。

針對你正在開發的專案,版本記錄系統會追蹤每次 commit 的:

  • 更動前 v.s. 更動後的程式碼
  • 修改者
  • 修改時間
  • 修改原因(修改者需要自行撰寫 commit message)

另外,版本控制系統的記錄是以「行」為單位,追蹤同一個檔案裡每一行程式碼的更動歷史。這樣工程師才能對具體的程式碼進行討論。例如以下是 Movielist 專案裡的某一次 commit 記錄:

切換版本

當新版程式出現了錯誤,版本控制系統也可以非常快速地還原至舊版本:

回滾 (rollback) 指的是「回復到上一個版本」,這個術語在資料庫管理中很常出現

利用分支同時開發不同功能

版本控制也可以使用「分支 (branch)」和「合併 (merge)」的技巧,讓開發者們能同時開發多個系統和功能,但在各自工作時,彼此之間的程式碼不會互相干擾。

舉例來說,可能你的網站已經正式對外營運,主線 (master) 上是營運中的穩定版本,而開發團隊繼續在分支上開發新功能,直到功能測試完畢後,才合併到分支上,成為使用者體驗的一部分。

下圖是某個專案的版本控制軟體截圖,給大家看看分支的真實呈現,在線圖上每一個點都是一個 commit (意即一組程式碼更動),其中分支 feature/payment 是一個獨立功能,負責的工程師在這個分支上持續開發,直到功能測試完成了,才整併到 dev 分支上;而 dev 這個分支又可能代表整個開發中的產品:

分支要怎麼設計是由團隊決定的,在合作開發的時候,需要與協作者講定這些分支策略。

明確的工作流程 (workflow)版本控制系統讓工程師能夠協作開發並且充分交流,同時,使用版本控制系統把程式碼交流給其他人有明確的流程,遵守這套流程,甚至文化,是工程師的基本素養。

因應不同的情境,每家公司可能都有不同的分支管理策略,例如開源專案或內部專案可能有不同的分支需求,經典的工作流程如 Git flow 和 GitHub flow 是常被討論的案例。

在目前的學習階段,由於暫時不會遇到大型專案,你還不需要煩腦版本控制的協作功能,然而,建議你開始使用版本控制的基本功能來管理自己的程式碼,從現在開始建立使用版本控制的習慣。

版本控制系統:Git

Git 是一套免費、開源、且有許多人使用的版本控制軟體,普遍適合各種開發流程,受到多數人喜愛。

使用 Git 的專案包括:Linux Kernel, Apache, Debian, Drupal, Eclipse, Fedora, Gnome, KDE, Perl, PHP, PostgreSQL, Ruby on Rails, Node.js, jQuery, YUI... 等等。諸如 Google, facebook, Microsoft, Twitter, Linkedin, NetFlix 等公司皆使用 Git 作為版本控制系統。

市面上也有許多以 Git 為核心技術基礎的雲端服務平台,例如 GitHubGitLabBitbucket,你不只可以把程式碼上傳到這些平台與人交流,你也可以在這些平台上找到開源專案,觀摩其他人的程式碼,或甚至加入開源專案的協作。

Git 安裝教學 (Mac 版)

如果你使用 Mac 電腦,可以選擇用以下兩種方式之一來安裝 Git:

  1. 直接到 Git 官方網站上下載並手動安裝:https://git-scm.com/download/mac
  2. 透過 Homebrew 下載安裝 (建議)

我們建議使用第二種方式。Homebrew 是一個套件管理軟體,可以負責管理、下載 Mac 原生系統內沒有安裝的套件,尤其是對於使用 Mac 的軟體工程師來說, Homebrew 更是不可或缺的工具。

打開 Terminal

首先請打開 Mac 內建的 terminal,請在你的應用程式庫裡找到一個叫 terminal 的軟體:

打開之後會看見類似以下的畫面:

下文中在示範指令時,會用 $ 符號來表示新的一行,請注意在複製指令時,不要把 $ 一起複製進去。

安裝 Homebrew

我們需要先 Terminal 中用以下指令安裝 Homebrew,請直接貼上指令並按下 Enter:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

按下 Enter

過程的訊息不用深究,但當畫面停下來時,要仔細看最後一行。

如果看到「Press RETURN to continue or any other key to abort」,RETURN 代表 Enter 按鋌,請依照指令按下 Enter。

有可能會需要輸入管理者密碼:

如果最後停下來的地方又變成可以輸入指令的模式,就代表成功安裝了:

測試 Homebrew 安裝完成

要怎麼確認安裝成功呢?可以輸入 brew --version,看看會不會回報版本資訊,如果有回報資訊,就代表這個程式已經安裝到你的電腦裡:

安裝 Git

安裝完 Homebrew 後,使用以下指令安裝 Git:

$ brew install git

在系統安裝的過程中,terminal 畫面也會一直跑訊息。

確認 Git 安裝成功

等到訊息跑完後,再用 git --version 來確認有回報資訊,就代表安裝完成了。

設定 Git 使用者名稱和信箱

在進行程式碼的版本更新時,Git 會紀錄修改者是誰,因此需要登錄你的 name 和 email,請在 Terminal 或 Git bash 中輸入以下指令:

$ git config --global user.name "your name"   # Please enter your name
$ git config --global user.email "your email"  # Please enter your email

請使用以下指令確認輸入的資料是否正確:

$ git config --list

這行指令會列出目前的設定,若設定成功,其中應該會出現:

user.name= [your_username]
user.email= [your_email@email.com]

現在你的電腦裡已經安裝了版本控制系統了。

提交程式碼:git commit

現在要用 Git 來管理程式碼。在開始前,請確認你的指令列的目錄要進入練習用的資料夾 git_proj 裡:

為專案註冊 Git 版本控制

現在在我們的測試專案 git_proj 下,輸入 git init 指令。這個動作會將這個資料夾註冊到版本控制內,也就是建立一個 Git 儲存庫 (repository):

[~/git_proj] $ git init
Initialized empty Git repository in ~/Desktop/git_proj/.git/

請使用以下指令確認資料夾內有一個名為 .git 的資料夾,表示登記成功:

[~/git_proj] $ ls -a
.             ..          .git           file_1.txt

ls 是列出子目錄,而加上副指令 -a 指定要一併列出隱藏的目錄,隱藏的目錄名稱開頭會有 .,例如 .git

查看 Git Status

登記專案之後,你可以用 git status 確認目前 Git 的狀態,輸入指令並按下 enter 之後,請仔細看一下跑出來的訊息:

[~/git_proj] $ git status
On branch master

No commits yet

Untracked files:
 (use "git add <file>..." to include in what will be committed)

   file_1.txt

nothing added to commit but untracked files present (use "git add" to track)

這段訊息告知了幾件事:

  • 你目前的位址在 master 這條分支上 (關於分支,我們暫時不深入解釋)
  • 還沒有任何的提交 (commit)
  • 還沒列入追蹤的檔案有 file_1.txt,請你用 git add <file> ... 指令來加入想提交的檔案

Git 已經告訴你需要做什麼了,接下來我們會順著它的指示來提交程式碼。在過程中,若你搞不清楚自己在哪一個步驟,隨時都可以停下來使用 git status,看看會有什麼訊息或建議跑出來。

提交程式碼

現在我們要將 file_1.txt 的內容提交到 Git repository 裡,這個流程需要兩道指令:

git add

首先使用 git add 指令:

[~/git_proj] $ git add file_1.txt

由於逐一輸入檔案名稱很麻煩,也可以直接打 git add .:

[~/git_proj] $ git add .

用 git status 確認目前狀態:

[~/git_proj] $ git status
On branch master

No commits yet

Changes to be committed:
 (use "git rm --cached <file>..." to unstage)

   new file:   file_1


你會看見檔案名稱變成綠色,而且提示改成「Changes to be committed」,表示檔案已經位在 staging area,準備送進 repository。

git commit

git commit 指令用法如下:

[~/git_proj] $ git commit -m "create file_1"
[master (root-commit) 6afdffa] create file_1
1 file changed, 1 insertion(+)
create mode 100644 file_1

-m 是 --message 的縮寫,可以為這筆 commit 附上這一筆 commit 的說明。

其中的 6afdffa 是一組 <SHA-1> 編碼,用來識別每一筆 commit,在你的電腦上你會看見不同的 SHA 碼。

恭喜你已經完成第一筆 commit ,此時再次檢查 git status,由於你沒有更動任何的程式碼,它會告訴你 nothing to commit, working tree clean:

[~/git_proj] $ git status
On branch master
nothing to commit, working tree clean

以 Movie List 為例 將專案加入版本控制

若你熟悉了 Git 的基本指令,我們會以在AC學期二的 Movie List 專案為例,建立 Git repository,並且建立 commit,接下來我們會將 local repository 放上雲端,讓你可以和朋友交流你的專案程式碼。

雲端版本控制服務:GitHub

GitHub 是一個以 Git 為基礎的服務平台,為開發者提供雲端版本控制服務(Repository Hosting)的平台,開源專案可以享有免費服務,若不想要外人看到專案內容,也可選擇 GitHub 的付費方案。

除了 GitHub,市面上也有類似的雲端版本控制服務如 BitbucketGitLab 等。

建立你的 GitHub 帳號

輸入暱稱、信箱、密碼之後點選註冊(Sign up for GitHub),3. 記得選免費方案,也就是選擇成為開源專案,然後點選 Continue

接著會來到問卷調查專區,可自由選擇填寫,點選 Submit

註冊完成以後,需要完成信箱認證,帳號才會開通。

在 GitHub 上建立專案 Repository

完成信箱認證後,登入平台,點選 Start a project。

輸入 repository 的名稱以及描述,其他選項不用更動:

按下 Create repository ,若看到以下畫面,表示已成功建立 repository:

將專案「推」上 GitHub

現在,你在本地有一個 local repository,而在 GitHub 上有一個 remote repository,下一步是將兩者連結起來。

在剛才創建的 GitHub repository 裡,已經為你提供了操作指令,由於我們在自己的電腦上已經有了 repository,所以要使用下圖紅色方框內的指令:

指令一共有兩行,第一行是使用 git remote add 指令把遠端的 HTTPS 網址註冊起來,並且將這個遠端主機命名為 origin,origin 是可以改的:

[~/my-movie-list] $ git remote add origin [your github repo]

請回到你的 Terminal / Git Bash 貼上指令並按下 enter。

接著我們可以用 git remote -v 確認,你會看到 origin 這個名稱指向了 GitHub 位址:

[~/my-movie-list] $ git remote -v
origin [your GitHub repo] (fetch)
origin [your GitHub repo] (push)

接著要使用 git push 把本地 repository「推」到遠端,指令後的兩個參數分別是主機位置 origin 和想推到遠端的分支 master(由於我們暫時不會開其他的分支,預設是 master):

[~/my-movie-list] $ git push -u origin master
Username for 'https://github.com': [your github account]
Password for '[your github account]':

-u 是 --set-upstream 的縮寫,一旦設定過 upstream,以後就不用每次都要打 origin master。

若是第一次使用 git push,還必須驗證 GitHub 的帳號和密碼。

完成之後,可以再次利用 git status 檢查:

[~/my-movie-list] $ git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean

多了一行 Your branch is up-to-date with 'origin/master',表示遠端的 origin/master 已更新到最新進度。

此時回到 GitHub 的專案頁面,你會看見專案出現在遠端了,任何人只要進入這個頁面,都可以看見你的專案程式碼:

恭喜你!你現在可以分享整個專案的細節了,有了 remote repository,討論程式碼都會容易許多!

現在你已經對版本控制系統有基本的認識了,想要進階了解如何在軟體開發實戰使用Git和GitHub,可以透過3分鐘小測驗,找到你學習全端開發的入口

(本文擷取自 AC全端 Web App 開發課程 學期二:JavaScript前端完整技能 )

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者