2018年2月13日星期二

GitHub 及 EGit ( PART 8 / 8 ) + GitHub 完整流程

接上回【GitHub 及 EGit ( PART 7 / 8) + GitHub 介面及功能

講解過 Git、講解過 EGit、也操作過 GitHub,是時候示範一次完整流程是怎樣。

完整流程分兩種角色︰
一個扮演 Repo owner 角色,另一個扮演 contributor 角色。

現在先看官方宣傳片……


宣傳概念,假設人物去解決甚麼問題,以故事形式簡介 GitHub 整個流程。
這裡會分段解說影片,以 Eclipse + Egit + GitHub 實現完整過程。
GitHub_Demo_01

開始的 39 秒,介紹出場人物 Sam, Vijay, Melinda 及 Mike,他們定位為 contributor 角色。

GitHub_Demo_02

Eddie 持有拖拉機,定位應該是 Repo owner 角色 (傳說中的碼農嗎?)。

———————————簡易的分隔線————————————

在 GitHub 的實現 1


GitHub_Demo_Eclipse_01

假設 IntegrityKnight 這個帳號是 Eddie,testing1232 是 Sam 的團隊,而 IntegrityKnight 持有 Tractor 這 Repo。因此,IntegrityKnight 在 GitHub 建立一個名為 Tractor 的 Repo。

開新 Repo 方法,請參考以前教學,思考如何改造成現在的例子。
https://javatoybox.blogspot.hk/2017/08/github-egit-part-2.html#Create_Repositories

———————————簡易的分隔線————————————

GitHub_Demo_03.png

0:42 秒,介紹 Tractor 資訊。他有個想法,希望資料可以分享出去。
拖拉機 Harvester L700,有 sensors 及 processors 收集 dignostic data。
希望把收集到的濕氣資料,可以分享給其他人。

———————————簡易的分隔線————————————

在 GitHub 實現 2


設定 Eclipse 與 GitHub 連接


GitHub_Demo_Eclipse_02

在 Eclipse 建立 SSH Key。

GitHub_Demo_Eclipse_03

把 SSH Public Key 貼上 GitHub。

GitHub_Demo_Eclipse_04

在 Eclipse 設定 Upstream 及滙入 Project

請參考以前教學︰
https://javatoybox.blogspot.hk/2017/08/github-egit-part-2.html#Eclipse_Create_SSH_Key
https://javatoybox.blogspot.hk/2017/08/github-egit-part-3-git-stage.html#Import_Project

新增資料,模擬測試


GitHub_Demo_Eclipse_05

首先,要有資料。Harvester L700 有收集濕氣資料功能,用笨一點的方法,人手把資料打上去,制成 HTML 版本,Push 上 GitHub。

註︰Push 失敗請參考這裡
push_not_permitted
https://javatoybox.blogspot.com/2017/10/github-egit-part-5-git-branch.html#push_not_permitted

———————————簡易的分隔線————————————

GitHub_Demo_04.png

1:00 發出 Issue,說他想分享濕氣資料。

———————————簡易的分隔線————————————

在 GitHub 實現 3


GitHub_Demo_Eclipse_06

想要「分享」這個功能!這稱為 Feature request。在 GitHub 發個【 New issue 】試試。

GitHub_Demo_Eclipse_07

填上討論主題及內文,貼上合適標籤。

Repo owner 可以用 Labels 標籤,方便分類及搜尋,這裡用 enhancement。
https://help.github.com/articles/about-labels/

———————————簡易的分隔線————————————

GitHub_Demo_05.png

她覺得 Vijay 很適合這個工作,問一下 Vijay 有沒有興趣接手這工作。

GitHub_Demo_06.png

Vijay 很樂意接收這工作,開工了。

———————————簡易的分隔線————————————

在 GitHub 實現 4


GitHub_Demo_Eclipse_08

現在登入 testing1232 帳號,模擬 contributor 角色,在 Issues 那一頁找尋討論主題。

GitHub_Demo_Eclipse_09

填回覆,按 Comment,很簡單,對吧?

註︰回覆支援 Markdown,多點去其他 Repo 參觀學習,看看 Issue 能做甚麼。

———————————簡易的分隔線————————————

GitHub_Demo_07.png

他說,要有一個不會互相影響的地方做實驗。

GitHub_Demo_08.png

因此開一個「分支」出來改造 Tractor,添加新功能。

———————————簡易的分隔線————————————

在 GitHub 實現 5


GitHub_Demo_Eclipse_10

【不互相影響】。Fork 一份去自己帳號就能做到。

GitHub_Demo_Eclipse_11

fork 後,建立 Eclipse 與 GitHub 的 Upstream 及滙入 Project,這個動作做過多次,懂怎做?
https://javatoybox.blogspot.hk/2017/08/github-egit-part-2.html#Eclipse_Create_SSH_Key
https://javatoybox.blogspot.hk/2017/08/github-egit-part-3-git-stage.html#Import_Project

GitHub_Demo_Fork.png

在 GitHub 看到有興趣的 Repo,按 fork 可以抄一份。
註︰git 沒有 fork 這個概念,fork 是 GitHub 的産物。fork 不需要審批,不需要任何人允許,這是開源世界的偉大。

GitHub_Demo_Eclipse_12

開新分支,這種分支通常稱為 Feature branch,可以參考人們常常掛在口邊的 git flow 。
在 git 新手階段不用在意,當熟習運用 git 後,再去實踐 git flow。( 請參考http://nvie.com/posts/a-successful-git-branching-model/ )

回想一下,曾經看過的網頁或 Blog,是不是都有 Facebook、Google+、Twitter 等等 Share 按鈕?
這裡用 HTML 方法實作,程式碼也比較簡單。

分支名稱要命名為【gh-pages】有原因,反正合併後甚麼名都不重要。
https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

———————————簡易的分隔線————————————

GitHub_Demo_09.png

看起來很有趣,實際上有點複雜。

———————————簡易的分隔線————————————

在 GitHub 實現 6


GitHub_Demo_Eclipse_13
  1. checkout【gh-pages】分支,修改 index.html

  2. 加上 程式碼後 ( 請參考 https://developers.google.com/+/web/share/ ),做 Add index。

  3. 寫 Commit message,第一行標題,第二行空行,第三行內文。

  4. Commit 去 Local Repo。
註︰手殘,用 Testing1232 模擬時,忘了修改 user 設定。
https://javatoybox.blogspot.hk/2017/08/github-egit-part-2.html#Git_user_setting

 GitHub_Demo_Eclipse_14

Commit Id︰2493e44 等於影片中,Vijay 插旗位置。再次提醒,因手殘沒改到 Author 名,所以請各位腦內補完。

GitHub_Demo_Eclipse_15

Push 上 GitHub。

註︰Push 失敗請參考這裡
push_not_permitted
https://javatoybox.blogspot.com/2017/10/github-egit-part-5-git-branch.html#push_not_permitted

———————————簡易的分隔線————————————

GitHub_Demo_10.png

有沒有看到影片的 Tab 已轉為 Pull Request?
只是視覺效果,實際上,在 Github 造一個 New pull request 有點出入。

———————————簡易的分隔線————————————

在 GitHub 實現 7


GitHub_Demo_Eclipse_16

轉 Branch 後,按【New pull request】。

 GitHub_Demo_Eclipse_17

這裡一定要留心注意!別弄錯要合併的 Branch 及對方 Repo 的 Branch。填上其他資訊,就像平常 Commit 一樣。最後按【Create pull request】。

GitHub_Demo_Eclipse_18

按完【Create pull request】後,出現以上畫面,有沒有發現改動?

  1. 現在的位置是對方的 Repo 頁。

  2. 這裡本來應該是【Add a Google plus share icon】,我按【Edit】修改過標題。

  3. 內文改動過,加了參考的 issue,及模仿影片中的對方。


———————————簡易的分隔線————————————

GitHub_Demo_11.png

Melinda 有意見,想增加範圍。

———————————簡易的分隔線————————————

在 GitHub 實現 8


有必要在這裡糾正一個過失,之前設定 Sam, Vijay, Melinda 及 Mike 是一個團隊。對,是【團隊】,是核心成員。

如何把 contributors 組成一個【團隊】呢?
這個【團隊】跟街邊的路人甲乙丙有甚麼分別?
路人甲乙丙就不能對開源項目做貢獻嗎?

先答第一個問題,教大家開放 Push 權限給【團員】及用 https 做 Cloning。

Which remote URL should I use?
https://help.github.com/articles/which-remote-url-should-i-use/

邀請成為團隊一分子


GitHub_invite_01

先決條件!對方一定要有 GitHub 帳號,然後跟步驟做。黃色高亮部份是注意事項,Push 權限是每個 Repo 計,不同 Repo 需個別再設定。

GitHub_invite_02

甚麼都做不了,等對方允許。複製 invite link 可以用其他方式給對方,例如 whatsapp、line 之類。

GitHub_invite_03

這是對方收到的 E-mail 邀請信,沒甚麼特別,只是附上一條 Link 給對方【接受】或【不接受】。

GitHub_invite_04

點連結後看到的畫面,總言之,按【Accept invitation】。

GitHub_invite_05

接受後,會跳到 Repo 頁,還提示持有 Push 的權限。

GitHub_invite_06

跟以前 SSH 的做方差不多,這次用 HTTPS 做 Clone。以 https 方法設定 upstream

GitHub_invite_07

把複製回來的網址,粘上【Clone a Git repository】,Protocol 是 https,其餘步驟跟 ssh 一樣。

GitHub_invite_08

這是測試【團隊】功能,可不可以 Push,所以在 master branch 打點字做測試。按【Commit】。

GitHub_invite_09

很緊張,Push 成不成功呢?按 Push 時,要求入兩次帳號密碼,第一次是登入 GitHub,第二次 push 入 Repo。

GitHub_invite_10

成功以 https 方法做 Push!

——————————— https 方法做 Push 失敗 ( start )————————————

GitHub_invite_error_01

檢查過沒有打錯帳號密碼,為甚麼會失敗。

GitHub_invite_error_02

右下角有通知,說有解決方案。它會叫你更新,要更新甚麼呢?我用的 Eclipse 代號 oxygen,等它出現列表時,選 Collaboration,看看有甚麼跟 git 有關都裝,然後從新啟動 Eclipse。

GitHub_invite_error_03

這是我的 git 插件,以便參考。

———————————簡易的分隔線————————————

Private email address︰


GitHubHttps_error_1.png

跟指示上 GitHub 修改設定,或用回 SSH。

GitHubHttps_error_2.png

算了,返正用 Blogger 已經暴露了用 google E-mail,把下【Block command line push……】取消吧!

GitHubHttps_error_3.png

如果真的想隱藏身份,開一些專業專攻帳號,還好玩樂用帳號跟其他帳號是沒有關連……狠一點,用 VM 每次轉 MAC address + Tor browser 科學上網。

——————————— https 方法做 Push 失敗 ( end )————————————

【團隊】跟街邊的路人甲乙丙有甚麼分別?


GitHub_invite_11

要用 https,先決條件是有 GitHub 帳號。因為路人甲乙丙沒有 GitHub 帳號,而 SSH 方式認 Key 不認人。

路人甲乙丙就不能對開源項目做貢獻嗎?


因此,為不同的路人甲乙丙準備 SSH Key,就可以 Push 進 Repo。

———————————簡易的分隔線————————————

GitHub_Demo_12.png

她要加範圍,這裡理解成加多個 tiwtter 的 share button。

———————————簡易的分隔線————————————

在 GitHub 實現 9


GitHub_Demo_Eclipse_19

我用 SSH,因為每次 push 打密碼很煩。

GitHub_Demo_Eclipse_20

如果想更新 pull request 怎麼辦?直接修改要合併的 branch。

回想一下 merge 是甚麼。
做 pull request 時,選合併用的 branch 作修改,修改後的 branch 會反映在 GitHub 的 Pull request 中。

———————————簡易的分隔線————————————

GitHub_Demo_13.png

每個人都覺很好,贊成修改。這裡簡化得太多,實際上要做的事還有幾個步驟。

———————————簡易的分隔線————————————

在 GitHub 實現 10


GitHub_Demo_Eclipse_21

這個步驟叫 code review,pull 到自己電腦 Eclipse 看完後,到 GitHub 按【Approve】,不需在 GitHub 審核程式碼。

———————————簡易的分隔線————————————

GitHub_Demo_14.png

等等!這樣不對吧!那是 Eddie 的 Tractor︰
  1. Eddie 還沒有 Approve 過改動。

  2. Vijay 只有自己的 Repo ( fork 過來的 Repo )有 write 權限 ,不能直接 merge 進 Eddie 的 Tractor。
GitHub_Demo_16.png

如果自己的 Repo 能被人亂改,假設影片中,那個不是雷達而是炸彈的話,不是很危險嗎?
GitHub 獨有的 pull request 制度,不是用來解決這種嗎?
pull request 不用 Repo 主人 approve,沒有人 review 過,這種事容許嗎?

因此請大家將就一下,現在要改寫故事,請把 Vijay 腦補成 Eddie, Eddie 會自己做 merge Pull Request。

———————————簡易的分隔線————————————

在 GitHub 實現 11


GitHub_Demo_Eclipse_22

Eddie 要做的事很簡單,review code 後,覺得沒問題按 Approve。

GitHub_Demo_Eclipse_23

最常用的 merge 做做看,選【Merge pull request】。圖片中看不到,有個建議是自動測試程式碼,這是進階應用,以後有機會再試。

GitHub_Demo_Eclipse_24

寫 commit message,做完【Confirm merge】後,Pull 到  Eclipse 看 History 結果。我承認,我手殘,Share moisture date 那一行是多餘。

 GitHub_Demo_Eclipse_25

請保持冷靜及清醒,那有可能做一次 merge 會影響全世界。還是那句,他不是做雷達,而是炸彈的話,這樣就不得了。

———————————簡易的分隔線————————————

最終調整


GitHub_Demo_Eclipse_26

每個 Repo 的 Setting 中,往下拉會看到有一個 option 叫 GitHub Pages,這個功能可以把特定 branch 設置成網頁。選 master branch 後 Save,之後會上邊有你的網址。
例如這個︰https://integrityknight.github.io/Tractor/

GitHub_Demo_Eclipse_27

很醜對不對?成功踏出了第一步比甚麼都重要,而且用最簡單的方法滿足 share data 這個要求,就算不是滿分,也能確保合格。

GitHub_Demo_Eclipse_28

還沒完,還要 close issue 才算完滿流程,有兩個方法︰
  1. 去 GitHub 的網頁,手動按 Close issue。

  2. 在 Commit 打 Keyword,當然,要有 push 權限才能這樣做。SSH 又好,https 又好,都可以這樣做。

GitHub_Demo_Eclipse_29

Closing issues using keywords
https://help.github.com/articles/closing-issues-using-keywords/

———————————簡易的分隔線————————————

總結︰


GitHub_Demo_18

Share 按得很爽嗎?一個鍵背後要多少努力……

GitHub_Demo_19

很累……現在才跟我說這是入門?!戰鬥才剛剛開始……

沒有留言:

發佈留言

設有留言驗證及審查,檢閱後,才會顯示留言。
本人惰性很高,留言或許會石沉大海。