NCKU Web Programming - Env

1ee211172ad7e550d0f83987c842dbe0?s=47 Hsin Yi, Chen
September 24, 2014

NCKU Web Programming - Env

2014 在成大

1ee211172ad7e550d0f83987c842dbe0?s=128

Hsin Yi, Chen

September 24, 2014
Tweet

Transcript

  1. Environment @hychen 成功⼤大學 電機系 Web Programming , 2014

  2. 我是誰 • 陳信屹, 網路上暱稱 hychen • 前⼀一份⼯工作在 Canonical Ltd,同事分佈在24個國家,常 需要利⽤用線上協作⼯工具與其他⼈人⼯工作。

    • More about me • about.me/hychen
  3. 你會學到 • 基本的 Linux 操作 • 為什麼要⽤用版本控制,為什麼⽤用 Git • 如何⽤用

    Git 管理你的產出 • 如何⽤用 Github 散佈你的產出 • Git 能搭配幾種⼯工作流程 • 利⽤用 Github gh-pages 製作個⼈人簡介⾴頁⾯面
  4. 基本 Linux 操作

  5. Linux • 作業系統核⼼心 • Unix-Like 以及相容 POSIX • 可運作在⾮非常多的硬體上 •

    作者 Linus , 芬蘭⼈人 • 想了解更多可以去修資⼯工系⿈黃敬群⽼老師的課
  6. Linux Distributions • Arch • Gentoo • Redhat • CentOS

    / Fedora • Debian • Ubuntu / Mint • More and more
  7. Linux Distributions • Initial System • Package Management Tool •

    Shell (CLI/GUI) • Installer • Utilities • Graphic Desktop Environment, Editor, etc…
  8. Linux Distributions

  9. Shell • 常⾒見的有 • 指令界⾯面: bash / dash / zsh

    • 圖形界⾯面: Gnome Shell / Unity
  10. 檔案系統結構 • / :: 最上層,⼜又稱根⺫⽬目錄(root) • /etc :: 系統設定 •

    /usr :: 應⽤用程式 • /tmp :: ⽤用來份任何暫存檔 • /home :: 使⽤用者⺫⽬目錄 • /home/userA :: 帳號名稱叫userA的家⺫⽬目錄 Linux 沒有 D 槽
  11. 常⽤用指令: 了解資訊 • 我是誰 • user@host$ whoami • 我在哪個⺫⽬目錄 •

    user@host$ pwd • ⺫⽬目錄下⾯面有什麼 • user@host$ ls
  12. 常⽤用指令:移動 • 切換到特定⺫⽬目錄 • user@host$ cd [dir] • 返回到上個⺫⽬目錄 •

    user@host$ cd - • 切換到家⺫⽬目錄 • user@host$ cd ~
  13. 常⽤用指令: 編輯檔案 • 查看檔案內容 • user@host$ cat [file] • 替換檔案內容

    • user@host$ sed -i s/原始字串/新字串/ [file] • ⽤用⽂文字編輯器 • user@host$ nano [file] • 看指令怎麼⽤用 • user@host$ man [cmd]
  14. CLI常⾒見編輯器 • VI/VIM <- 編輯器之神 • Emacs <- 神的編輯器 •

    Nano <- ⽐比較容易上⼿手的編輯器
  15. Q/A

  16. 延伸閱讀 • ⿃鳥哥的私房菜 • 摩托學園 • Emacs 介紹 by Kanru

    • Vim Hacks by c9s • Linux Command Line Cheat Sheet by DavidChild
  17. 版本控制

  18. ⽤用檔名或⺫⽬目錄名稱管理 • 期末作業_初稿_2014-03-11.xls • 期末作業_定稿_2014-03-12.xls • 期末作業_完稿_2014-05-12(應該是這版).xls • 期末作業_完稿_2014-05-12(絕對是這版!!!).xls

  19. 如果要跟⼈人⼀一起修改呢? • 期末作業_初稿_2014-03-11-⼩小明.xls • 期末作業_定稿_2014-03-12-⼩小張.xls • 期末作業_完稿_2014-05-12(應該是這版).xls • 期末作業_完稿_2014-05-12(絕對是這版!!!).xls

  20. 多⼈人協作⼀一直是個挑戰 • 多⼈人要編輯/撰寫⼀一份⽂文件時 • 由負責的⼈人先完成第⼀一版 • 召開會議找來相關⼈人員進⾏行討論並於彙整眾⼈人意⾒見後,修 改完成第⼆二版 • ⽤用電⼦子郵件轉寄給予眾⼈人確認

    • ⼀一份⽂文件必須幾經往返,才能做成最終版本 • ⼜又稱為回合制 (turn-based)
  21. 多⼈人協作⼀一份⽂文件⼀一直是個挑戰 • Wikipidia (turn-based) • Google Document (real-time) • Hackpad

    (real-time) • Dropbox (real-time) • more and more….
  22. 對軟體開發的⼈人來說 多⼈人協作也是⼀一個挑戰

  23. 想像⼀一下
 你要怎麼跟 ⼀一千個⼈人 合作寫⼀一個軟體

  24. WTF/lines 最有效的軟體品質測量法 WTF :: What The Fuck

  25. • 在軟體開發的過程中,程式碼每天不斷地產出,過程中會 發⽣生以下情況: • 檔案被別⼈人或⾃自⼰己覆蓋,甚⾄至遺失 • 想復原前幾天寫的版本 • 想知道跟昨天寫的差在哪裡 •

    是誰改了這段程式碼,為什麼 • 軟體發⾏行,需要分成維護版跟開發版
  26. 因此要有⼀一套⼯工具 • 可以隨時復原修改,回到之前的版本 • 多⼈人協作時,不會把別⼈人的東⻄西蓋掉 • 保留修改歷史記錄,以供查詢 • 軟體發⾏行時,可以⽅方便管理不同版本

  27. ⽽而對於修這堂課的你來說

  28. 從個⼈人的⾓角度來看 • 隨時可備份⾃自⼰己寫的作業 • 隨時可測試不同的可能性 • 隨時可回朔到特定版本 • 可以查閱⾃自⼰己改了什麼 •

    可以利⽤用Github gh-pages 產⽣生靜態⾴頁⾯面 • 這會是這堂課的課後作業
  29. 從與別⼈人合作的⾓角度來看 • 知道別⼈人改了什麼 • 容易找到誰出包 • ⾃自動合併其他⼈人的產出 • 少做多玩 :)

  30. 並不是只能管理源碼 • 也可以⽤用來 • 翻譯⽂文章 • 寫多重結局的連載⼩小說 • 管理待辦事項 •

    寫書 • GitBook - Using Git To Publish Your Book • A textbook on informal homotopy type theory • Open Government • 寫徵婚啟事 • More and more…
  31. 版本控制管理⼯工具

  32. Working-Directory • ⼯工作⺫⽬目錄,⼜又稱⼯工作環境 • 有時叫 Working-Tree • 編輯源碼,轉寫⽂文件,測試或編譯的地⽅方 • ⺫⽬目錄下通常會有⼀一個隱藏⺫⽬目錄,儲存版本控制的

    metadata • E.X. .git , .svn
  33. 變動(Changes) • Who Did • When Did • Why •

    Directory Structure Changes • File Changes • Added lines • Deleted lines • Modified lines
  34. 變動(Changes) • Who Did • When Did • Why •

    Directory Structure Changes • File Changes • Added lines • Deleted lines • Modified lines Diff
  35. Diff / Patch • Diff - File/Directory Difference • Patch

    - Apply Difference to File/Directory • The Traditional Way Of Software Development • <<demo>>
  36. 分⽀支 • ⼀一個專案在開發週期會因為不同⺫⽬目的 • 增加或變動或減少檔案,⽂文件 • 需要保留不同階段的副本 • 這些⺫⽬目的包括但不限於(接下⾴頁)

  37. 分⽀支 • 新功能 • 整合⽤用 • 修 Bug • 即將發⾏行(release)

    • ⾃自動測試 • ⾃自動打包
  38. 標籤 • 重要的⾥里程碑 • 正式穩定發⾏行版本 • 正式測試發⾏行版本 • Etc.

  39. Repository • 所有跑起來這個專案需要的東⻄西 • 所有源碼、圖檔、⽂文件、設定檔範例等等 • 暫存檔、Log 檔不需要存進 Repository •

    編譯後的產物視情況看要不要放進 Repository • E.X. Ubuntu Packages
  40. Repository (con.) • 記錄專案有哪些 • 分⽀支(Branch) • 標籤(Tag) • 記錄每次修改(Changeset)

    • 誰改變什麼 • 在什麼時候 • 為了什麼原因
  41. Local VCS • RCS • copy and past • 資料夾管理

    • 無法協同開發
  42. Centralized VCS • CVS / SVN / Perforce • server/client

    based • lock/auto-merge • 做什麼事都要跟 server 連線 • server 掛了,⼤大家就下班了 • 好像也不是什麼壞事?
  43. Distributed VCS • Git / Hg / Bzr • server/client

    based • lock/auto-merge • 隨時隨地都可以提交變動 • 可以有多種⼯工作流程
  44. 回顧⼀一下 • Repository :: 版本資料庫 • Working-Tree :: ⼯工作⺫⽬目錄 •

    Branch :: 分⽀支,依不同情境開發 • Changes :: 變更的資料集 • Tag :: 重要⾥里程碑
  45. 回顧⼀一下 • Local VCS : RCS • Centralized VCS :

    CVS, SVN, Perforce • Distributed VCS : Git, Mercurial, Bazzar
  46. 回顧⼀一下 • 集中式VCS,沒網路就不能開發,不能提交變動,不能看 歷史記錄 • 坐⾼高鐵,飛機的時候 • 網路故障的時候 • 咖啡店沒網路的時候

    • 分散式VCS即使沒網路,照常可以提交變動,可以看歷史 記錄
  47. Git,Why?

  48. Git • 由 Linux 作者為了管理 Linux Kernel ⽽而開發 • ⺫⽬目前為主流版本控制⼯工具

    • ⽀支援 Linux / Mac / Windows • 有許多圖形化界⾯面 • 很多編輯器都有整合⽀支援
  49. 很多專案在⽤用 • Git • Linux Kernel • Android • Perl

    • Ruby • PostgreSQL • Debian • Chef • Mozilla • More….
  50. Why Git is Better Than X • Git 很快 •

    Git 很省空間 • 分散式,可以離線⼯工作 • 適⽤用任何⼯工作流程 • 我們有Github https://thkoch2001.github.io/whygitisbetter/
  51. Github • github 是專⾨門提供線上 git 軟體使⽤用服務 ( Git Hosting )

    的公司,透過 github,你可以將程式碼⽤用 git 的⽅方式把程 式碼儲存在 guthub • 獲得矽⾕谷知名創投 Andreessen Horowitz ⼀一億美⾦金投資 • [原因: 如果能看作品,誰要看履歷] • 來源請⾒見社交網路求職術 • http://github.com
  52. Github • not only git server, but also provide •

    fancy web interface • wiki • issue tracking • social • follow master • watch master
  53. Git 基本概念

  54. Version Control System (VCS) • Repository :: 版本資料庫 • Working-Directory

    :: ⼯工作⺫⽬目錄 • Branch :: 分⽀支,依不同情境開發 • Changes :: 變更的資料集 • Tag :: 重要⾥里程碑
  55. Remote Git Repository • 放在 server 上的版本資料庫 • server 可以有很多個,所以版本資料庫也可以有很多個

    • 換⾔言之你可以同⼀一份程式碼放在很多個server 上 • 通常叫 origin
  56. Local Git Repository • ⼯工作⺫⽬目錄下的 .git • 任何Changes都被存在在 .git •

    不會被⾃自動同步到遠端版本資料庫
  57. Git Branch • 分為 Remote Branch 跟 Local Branch •

    Remote Branch 跟 Local Branch 可以是對應也可以是不 對應 • 取決於你的設定檔 • Branch 名稱通常被叫 master (主幹)
  58. Git Snapshot git is a content-tracking system, a mini filesystem

  59. Git Snapshot git is a content-tracking system, a mini filesystem

  60. Git Commit • 是專案的快照 • 不同快照之間檔案之間⺫⽬目錄會有差異 • 會有⼀一個 SHA1 的

    Checksum • 這保證了檔案跟資料結構的完整性
  61. Git Commit • commit 8f19e93f6e608f60b71cf0a01cab7f8122638b7c • Refs: [master], {origin/master}, {origin/HEAD}

    • Author: Shrikant Sharat <shrikantsharat.k@gmail.com> • Date: Sat Jun 28 17:55:11 2014 +0530
 ! • fixed curl url for installation ! • README.mkd | 2 +- • 1 file changed, 1 insertion(+), 1 deletion(-)
  62. Staging Area • ⼜又稱 Index • 被加進這裡的是即將被提交的變動(Changes) • 有時你改了很多東⻄西,但只要某些檔案或部分修改要 commit

  63. 三個階段 git add git checkout git commit

  64. Remote Repository Local Repository Work Directory git commit git push

    git pull Remote Operation
  65. None
  66. branch iss53 branch 
 master Commit

  67. ⽤用 Git 表⽰示臺北捷運 http://gugod.org/2009/12/git-graphing/

  68. Git Reference • ⽤用來對應到特定的 Commit • HEAD : 對應到本地端⼯工作⺫⽬目錄當前的 Commit

    • Branch 名稱指向該 Branch 最新的 Commit • Tag 名稱就如名⼦子⼀一樣,只是個指向某個 Commit 的標籤
  69. Q / A

  70. Git Components • Remote Repository : 遠端版本檔案庫 • Remote Tag

    : 在遠端檔案庫的標籤 • Remote Branch : 在遠端的分⽀支 • Working-Tree : 在本地的⼯工作環境 • Commit : 變動的資料集 • Local Repository : 本地版本資料庫 • Local Branch : 本地分⽀支 • Local Tag : 本地標籤 • Staging Area :: 準備 commit 的變動
  71. Git 基本操作 https://xatier.github.io/git_intro/slides.html#9

  72. tig gui interface fo git command line tool

  73. source: https://xatier.github.io/git_intro/slides.html#9

  74. source: https://xatier.github.io/git_intro/slides.html#9

  75. source: https://xatier.github.io/git_intro/slides.html#9

  76. source: https://xatier.github.io/git_intro/slides.html#9

  77. source: https://xatier.github.io/git_intro/slides.html#9

  78. source: https://xatier.github.io/git_intro/slides.html#9

  79. source: https://xatier.github.io/git_intro/slides.html#9

  80. source: https://xatier.github.io/git_intro/slides.html#9

  81. source: https://xatier.github.io/git_intro/slides.html#9

  82. source: https://xatier.github.io/git_intro/slides.html#9

  83. source: https://xatier.github.io/git_intro/slides.html#9

  84. source: https://xatier.github.io/git_intro/slides.html#9

  85. Git Commands Summary

  86. Config • .gitignore • git config - get and set

    repository or global options
  87. Repository Management • git int - Create an empty Git

    repository or reinitialize an existing one • git remote - Manage set of tracked repositories • git clone - Clone a repository into a new directory • git fetch - Download objects and refs from another repository • git push - Update remote refs along with associated objects • git pull = git fetch + git merge
  88. Working-Tree Management • git add - Add file contents to

    the index • git rm - Remove file contents to the index • git mv - Move or rename a file, a directory, or a symlink • git commit - Record changes to the repository • git reset - Reset current HEAD to the specified state • git merge - Join two or more development histories together
  89. Information • git status - Show the working tree status

    • git log - Show commit logs • git diff - how changes between commits, commit and working tree, etc
  90. Branch / Tag • git branch - List, create, or

    delete branches • git checkout - Checkout a branch or paths to the working tree • git tag - Create, list, delete or verify a tag object signed with GPG
  91. Go Try it And Learn Branching

  92. 整合進⼯工作流程

  93. Repository 的管理

  94. ⽐比較簡單的⼯工作流程 集中式

  95. ⽐比較主流的⼯工作流程 這次出的作業會⽤用到這個流程

  96. 以Mozilla Gia 為例 http://yurenju-blog.logdown.com/posts/161043-building-firefox-os-gaia- development-environment

  97. Remote Repository B Remote Repository A fork Send the changes

    to another people pull request merged
  98. The project maintainer initializes the official repository https://www.atlassian.com/git/tutorials/comparing- workflows/forking-workflow

  99. Developers work on their features https://www.atlassian.com/git/tutorials/comparing- workflows/forking-workflow

  100. Developers publish their features https://www.atlassian.com/git/tutorials/comparing- workflows/forking-workflow

  101. The project maintainer integrates their features https://www.atlassian.com/git/tutorials/comparing- workflows/forking-workflow

  102. Developers synchronize with the official repository https://www.atlassian.com/git/tutorials/comparing- workflows/forking-workflow

  103. 分⽀支的規矩 • 何時做branch,這是個⼤大問題 • 開發新功能,branch • 整合功能,branch • 修產品線上的 bug,branch

    • just follow git-flow • then google :p
  104. 今⽇日作業

  105. 兩個重要的Repository • 本課程介紹 • https://github.com/NCKU-EE-WebPrograming/ about-course • 個⼈人簡介網⾴頁模板 • https://github.com/NCKU-EE-WebPrograming/

    about-me
  106. 作業1 • 註冊 Github 帳號 • 閱讀 Fork A Repo,了解怎麼

    Fork • 閱讀 https://pages.github.com/ 了解什麼是 gh-pages • fork https://github.com/NCKU-EE-WebPrograming/ about-me • git clone https://github.com/$your-id/about-me.git • 建⽴立 gh-pages branch
  107. • (optional) 利⽤用 sed 或是 nano, vim or emacs 修改

    index.html 把 • 把 {{YourName}} 換成你的名字 • 把 {{GithubUrl}} 換成你的 github url • 注意: 這個步驟可以跳過 • git push https://github.com/$your-id/about-me.git • 等待⼀一會兒,你便能在 $your-id.github.io/about-me 看 到網⾴頁
  108. 作業2 • fork https://github.com/NCKU-EE-WebPrograming/ about-course • git clone https://github.com/$your-id/about-course.git •

    修改 README.md , 把剛才作業建⽴立好的網⾴頁連結加在 修課學⽣生後⾯面 • git add ; git commit • git push https://github.com/$your-id/about-course
  109. 作業2(con.) • 在Github上送 Pull Request • Pull Request 使⽤用⽅方式請閱讀 Github

    Pull Request
  110. 作業範例 • VCS: https://github.com/hychen/about.git/ • Gh-Pages: http://hychen.github.com/about-me

  111. 延伸閱讀 • ihower Git 版本控制系統 • Pro Git • ⿃鳥哥的

    Linux 私房菜 • Github Help • Git Workflows and Tutorials | Atlassian Git Tutorial • Github - Try It • Learn Git Branching From Game
  112. Q / A

  113. License: CC0