Git
沒那麼難吧
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6386053/60245890_301272497451775_7285782036155990016_n_1_.jpg)
JT
我4助教
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020813/GitLOGO.png)
你渴望版控嗎?
還沒有用Git嗎?
如果你是一個人開發,還行
但如果是一群人開發...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020810/版控重要性說明圖.jpg)
組長辛苦了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020837/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020927/愛與正義.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020942/程式版本控管.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020949/MagicalGit.png)
第一集 Magical Git 要開播了ㄛ^^
本次Git教學分為四大部分
- 安裝Git
- Git常用指令
- Git分支概念
- CI/CD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6692669/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020968/幼稚園也會的.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020969/如何安裝Git.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020974/Level1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021065/Screenshot_2019-04-13_Git_-_Downloads.png)
https://git-scm.com/downloads
Linux
# apt-get install git
Lab1 : Install Git on your PC
請完成 安裝git到你的電腦
並將步驟截圖繳交到Tronclass
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021125/國小生也會的.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021139/Git常用指令.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021124/Level2.png)
常用指令有這些
$ git init
$ git status
$ git add
$ git commit
$ git push
$ git pull
$ git clone
$ git init
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038796/init.png)
在專案目錄下,初始化git專案
野生的.git出現了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021152/pasted-from-clipboard.png)
記錄著您的專案的前世今生。
$ git status
告訴您此專案的詳細資訊。
$ git add <檔案名稱>
將某檔案加入到我們的git專案內。
$ git commit
輸入這次改了什麼東西,不然以後會忘記。
當然也可以用 $ git commit -m <更改內容>
$ git push
將更新過的檔案push到雲端。
$ git pull
將雲端上最新的檔案拉下來。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6691380/pasted-from-clipboard.png)
流程圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021343/pasted-from-clipboard.png)
Git Push 五步驟
- 到達指定資料夾並設定好資料
- pull到雲端最新的版本
- add更改後的檔案
- commit此次版本更改的訊息
- push此次版本到雲端
跟著魔法少女一起用Github建立第一個Git專案吧!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021204/pasted-from-clipboard.png)
魔法少女出任務
設定個人資訊
git config --global user.name "你的姓名"
git config --global user.email "你的Email"
1.設定本地端的git資訊
點擊New新增新的respository
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021217/pasted-from-clipboard.png)
記得先註冊帳號
2.在Github上新增新的respository,名字隨便你取
Create it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021232/pasted-from-clipboard.png)
Copy it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021245/pasted-from-clipboard.png)
Clone it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038814/clone.png)
$ git clone 剛剛複製的網址
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021292/pasted-from-clipboard.png)
3.成功Clone你的Github專案到本地端
用剛剛學到的指令push看看
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038818/addpush.png)
第一次push可能會要你輸入Github帳號密碼
4.push隨便的東西上去
出來了嗎?出來了!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021322/pasted-from-clipboard.png)
然後 線上新增一個README
5.確定Github上有收到你push的東西,並且線上新增readme
然後他就死掉了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038824/沒有Pull的Push.png)
所以記得pull最新版本哦
pull完長這樣
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038832/pull.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021338/pasted-from-clipboard.png)
6.pull看看最新的檔案
流程圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021343/pasted-from-clipboard.png)
Lab2 : Create a new respository and practice git
請完成 "魔法少女出任務"
並將步驟截圖繳交到Tronclass
Github專案的網址也一起給我
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021350/大學生才會的.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021352/Git分支概念.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021349/Level3.png)
組長辛苦了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6020837/pasted-from-clipboard.png)
你走你的大馬路,我過我的人行道
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022012/pasted-from-clipboard.png)
大家都有自己要做的事情。
分支常用指令
- $ git branch
- $ git merge
- $ git checkout
新增branch
合併branch
切換branch
跟著魔法少女一起用Github建立第一個Git分支專案吧!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6021204/pasted-from-clipboard.png)
新★魔法少女出任務
用之前學的指令試試看
發現有問題!!!
這是因為雲端還沒有這個branch
用他建議的指令 or 直接在Github建立新的branch
1.建立新分支
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038858/newbranchandpush.png)
設定好並push上去
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038867/排解branchpush錯誤.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022056/pasted-from-clipboard.png)
2.排解錯誤並成功將新分支與Github專案同步
用merge把master和develope合併看看吧!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038890/merge.png)
3.利用merge將master 與 develope合併
記得要切換到master再合併
阿 合併出現衝突了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038910/衝突.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022086/pasted-from-clipboard.png)
4.請製造一個合併衝突並排解
當衝突發生時
1.將發生衝突的檔案打開,處理內容 (別忘了刪除<<<、===、>>>)
2.使用 git add 將處理好的檔案加入追蹤
3.如有多個衝突檔案,反覆步驟 1~2 直到所有衝突處理完畢
4.git commit 提交合併
5.完成
●多人協作合併時發生衝突,建議和對方一同討論衝突發生原因,不要獨斷處理衝突
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6691387/pasted-from-clipboard.png)
為了阻止悲劇再度發生
請不要使用此指令。
最常見的
是master和master的衝突
A
B
Master
有一天 A和B同時pull master 並同時開發
Master
A先push了最新版master B就不能push了
這時B必須要pull A的master 並處理兩者間的衝突
才能push他的最新版!
當然如果是不同檔案 就不會有衝突。
現在的branch狀況
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022088/pasted-from-clipboard.png)
使用 gitk 指令看到現在這個branch的狀況圖
$ gitk --all
5.利用gitk --all查看分支合併圖
為了阻止悲劇再度發生
請不要使用此指令。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6692676/pasted-from-clipboard.png)
.Gitignore 忽略清單
如果有些資訊非常的隱密,不想公開讓大家知道,可以試試看設定.gitignore清單。
例如DB的網址和帳密、api的secret token這一類可能會被別組拿去破壞並使用的東西,我們要將他保護好。
Github Issue Tracker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022098/pasted-from-clipboard.png)
6.利用Github Issue Tracker創建第一個Issue!
Issue Tracker 是什麼?
- Issue tracker 系統就像是一個討論區,主要用來討論紀錄開發者開發過程中遇到或是其他使用者使用上遇到的問題
- 開發者可以自己新增 Issue,並指派自己或是其他開發者負責處理這個 Issue
- 其他使用者也可新增 Issue,告知開發團隊他們所遇到的問題
為什麼要用 Issue Tracker?
- 有了 Issue Tracker 以後,當開發者不知道要做什麼的時候,就可以到 Issue Tracker 上面去看看還有沒有他們該做而忘記做的事情
- 對於那些提出問題或意見的其他使用者,Issue Tracker 系統也可以讓他們方便的了解目前問題的解決進度,或是新功能的開發狀況
你害怕打指令嗎?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022101/pasted-from-clipboard.png)
Github Desktop是你的救星
Lab3 : Create a new branch
請完成 "新★魔法少女出任務"
並將步驟截圖繳交到Tronclass
Github專案的網址也一起給我
#branch的衝突請自行製造
#記得新增一個issue讓助教看看
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022111/研究生才會的.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022104/CICD.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022103/Level4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6692685/未命名-3.jpg)
Continuous Integration
Continuous Delivery
Continuous Deployment
持續驗證系統開發結果
整合自動化發佈或部署
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022114/測試工程師.jpg)
測試工程師?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022114/測試工程師.jpg)
Pythonの單元測試
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022127/pasted-from-clipboard.png)
import unittest
來進行測試吧!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022323/pasted-from-clipboard.png)
測試結果會長這樣
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6038918/unittest.png)
測試有OK 萬事都OK
每一次的整合與測試都是大挑戰
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022112/pasted-from-clipboard.png)
那就讓程式去做這些事情
CI with Github
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022337/pasted-from-clipboard.png)
您的程式醫生,檢查程式的毛病。
流程圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022342/pasted-from-clipboard.png)
新★魔法少女出任務Ⅴ改
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022348/pasted-from-clipboard.png)
跟魔法少女一起拿到超酷炫的綠色passing徽章吧!
I want it!!! ><
Sign up with Github
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022354/pasted-from-clipboard.png)
1.用Github帳號註冊Travis CI
Sync and select your project
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022392/pasted-from-clipboard.png)
2.和Github同步,並選擇你的專案。
Setting build trigger
打開到這裡就會自動開啟build trigger了
3.確認開啟build trigger通知後,以後的push都會自動跑這邊的功能了!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022396/pasted-from-clipboard.png)
Setting .travis.yml
4.新增並設定 .travis.yml 到專案中
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022399/pasted-from-clipboard.png)
Setting README
5.將passing徽章的MK碼複製並貼到Readme檔案中
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022401/pasted-from-clipboard.png)
Auto run after push.
6.push後他會自動執行Travis專案
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022403/pasted-from-clipboard.png)
After building, you'll get passing!
7.在這次build成功之後 就拿到綠色徽章了!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022408/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022409/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022342/pasted-from-clipboard.png)
這樣 你就滿足了嗎?
不夠懶!還要更懶!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022442/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022443/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022448/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022455/pasted-from-clipboard.png)
git push
Trigger : Auto test
Trigger : Auto deploy
USER
GIT
CI
Server?
Heroku
一個每天可以用18小時的免費雲端
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022800/pasted-from-clipboard.png)
魔法少女出任務◆超
跟著魔法少女一起讓程式全部自動化
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022800/pasted-from-clipboard.png)
Sign up.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022823/pasted-from-clipboard.png)
1.註冊Heroku
Create a new app
2.在Heroku上建立一個新的App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022827/pasted-from-clipboard.png)
Setting and connecting with your github.
3.在App設定裡連結Github帳戶、Github repo和啟動CI等待功能。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022832/pasted-from-clipboard.png)
Get your Heroku API Key
4.在個人設定中拿到自己的API Key
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022838/pasted-from-clipboard.png)
Setting Procfile
5.創建並設定Heroku的資訊檔 Procfile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6717471/pasted-from-clipboard.png)
Travis CI上成功了
6.push 見證奇蹟發生。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022863/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022865/pasted-from-clipboard.png)
Heroku上也成功了 並且出現你的APP網址
今天起,不會再打開Server了
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022868/pasted-from-clipboard.png)
程式都幫我做好了><
流程圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022442/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022443/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022448/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1041479/images/6022455/pasted-from-clipboard.png)
git push
Trigger : Auto test
Trigger : Auto deploy
USER
GIT
CI
Server
Lab4 : CI/CD
請完成 "新★魔法少女出任務Ⅴ改"
以及"魔法少女出任務◆超"
並將步驟截圖繳交到Tronclass
#TravisCI為第一階段
#Heroku算加分題
Git-沒那麼難吧
By jimting