NetBeans用SSH複製git儲存庫：以GitLab為例 / Clone git Repository via SSH in NetBeans: a GitLab Example

之前我寫過在NetBeans裡面用HTTP來複製(clone) git保存庫的作法，這篇則是要介紹使用SSH來複製保存庫的另一種作法。雖然SSH連線需要比較多設定，但較適合正式開發時使用。而這次要連接的對象也不是公開的GitHub，而是私人使用的git保存庫GitLab，但介面跟作法都跟GitHub大同小異就是了。

關於Git的基本知識 / About Git technology

我在之前幾篇文章中都有介紹過git，首先這三篇是使用TortoiseGit作為git工具的入門介紹：

• GitHub入門 Part.1 版本控制介紹
• GitHub入門 Part.2 工具安裝與環境配置
• GitHub入門 Part.3 GIT版本控制實作教學

TortoiseGit是很強大的git工具，比NetBeans內建的git還要好用，像是要取代分支(branch)檔案時特別方便：

• Git取代分支檔案的方法

但是如果要開發的話，還是使用NetBeans這種IDE會比較適合。所以我就寫了以NetBeans使用git的教學：

• Git合作開發從NetBeans開始！NetBeans複製git專案教學

然而這篇是用HTTP存取git儲存庫，這種作法雖然簡單，但是使用HTTP的缺點是不能上傳大檔案。git使用HTTP傳輸檔案時，http.postBuffer預設值只能夠上傳1MB，而伺服器端通常也不允許過大的檔案，GitHub最多一次上傳100MB，而GitLab使用的Nigix則是預設只能上傳20MB。上傳過大檔案時會發生411錯誤，必須要同時修改git客戶端跟伺服器端的設定才能解決。雖然修改過後可以用TortoiseGit來連線，但在NetBeans上卻仍然不能上傳大檔案。

最後我只好回頭改用SSH的方式連接，一併把SSH連接時使用不同連接埠的方法也找了出來。請照著以下步驟一起來操作吧。

環境說明 / Environment

首先必須說明git的客戶端與伺服器端的基本資訊。

Git客戶端：NetBeans / Git client: NetBeans

• NetBeans 網站
• NetBeans下載：建議下載All版本，可以同時支援JavaScript與PHP
• NetBeans的Git功能說明：Using Git Support in NetBeans IDE

我目前使用的是NetBeans 8.0版本。但是Git功能並沒有多大改變，前幾版使用時應該差不多。

我現在大部分以專案進行的開發都是使用NetBeans，不論是寫網頁、JavaScript、PHP、Java都能夠支援。例如最近一篇編譯WISE就是用NetBeans來進行。相對的，我反而比較不推薦使用大學很常教的Eclipse，它在開發網頁應用的支援較差。

Git伺服器端：GitLab / Git server: GitLab

• GitLab專案網站

如果要架設GitLab的話，有兩種方式可以選擇：

• 小惡魔 – 電腦技術 – 工作筆記 – AppleBOY：GitLab 快速安裝：從既有作業系統上架設GitLab的方法
• Turnkey Linux GitLab：以虛擬機器架設GitLab，例如用OpenVZ架設。

如果不想架設的話，也可以直接使用GitLab的雲端空間：

• GitLab.com：雲端私人儲存庫，剛好跟GitHub強調開放原始碼的運作方式打對臺

本篇我採用OpenVZ架設Turnkey Linux GitLab，設定IP為192.168.11.102，SSH連接埠為22，Domain Name為 git2.pudding.dlll.nccu.edu.tw。這些都是區域網路的設定，僅供本篇測試用，其他人是連不到這個網站的喔。

步驟說明 / Steps description

如果要用SSH來連接Git，我們必須要先用SSH金鑰製作工具產生公鑰跟私鑰，然後將公鑰上傳到Git伺服器端(也就是本篇的GitLab)，而Git客戶端(也就是本篇的NetBeans)要存取伺服器端時，則需要搭配私鑰來連接。

Step 1. 產生SSH的公鑰與私鑰 / Create SSH public key and private key

我在「GitHub入門 Part.2 工具安裝與環境配置 」這一篇中有介紹如何用PuTTYgen (PuTTY Key Generator)產生公私鑰。

不過這裡我們簡單一點，我隨便產生一個公鑰與私鑰直接給大家下載：

• 公鑰 puli-public-key.txt：Box.net、OneDrive、Mega
• 私鑰 puli-private-key.ppk：Box.net、OneDrive、Mega

這個公鑰與私鑰僅供測試使用，正式開發環境請不要用它，不然其他人也可以用這個私鑰去連接你的私人git儲存庫喔。

Step 2. 加入SSH公鑰到GitLab / Add SSH public key to GitLab

接著登入GitLab，進入帳號中的SSH Keys。一般來說SSH Keys的網址是：

• http://[your-gitlab-domain-name]/keys

請按下右上角的「Add new」新增公鑰。

新增公鑰並非是上傳檔案，而是要用複製貼上的方式來將公鑰貼到Key的欄位。至於Title欄位可以填寫一個容易記得的名字即可，例如「puli-public-key」。

請用文字編輯器(像是Notepad++)來開啟公鑰檔案，複製裡面全部的內容，貼到網頁中Key的欄位內。

或是複製以下文字框裡面的內容，裡面的文字跟我上面分享的公鑰是一樣的：

ssh-rsa AAAAB3NzaC1yc2EAAAABJQAAAQEAjZdfpJ2obdqQrk+3OQBf+7S4uT9/tPsLBetp1Dk+ovarfEkiQgbt2JpM8sk8TbNuB4W2lzhtId6Qc0vhRaX4awHkLCJvlQhVFBo7DXFqJr8eYWa0JdQbEaqFjkS4AJpo4dc7NLumSDhwtaFRUw0vNuSDgO4LBYnHQv4FGbAv8Rgt9j+l11AVAzBS5k1F4eOyP03LJl375RBDMIr9LzUQsVPaGVPwXtDLoUEq2pLAhU7qEvyzzefhPhiCP6qHlI177bIUHP87phVbTgL5pLSnAngJ3wUwg1s3sr0n4w3MBvZRKBxDdO1sJbQaqO7DUEqpJCji+jTMOlHIovaaZV4qew== rsa-key-20150806

 

完成之後應該會像是這樣子，然後按下「Save」儲存。

新增完成。

讓我們回到要複製的git儲存庫首頁。在這裡可以找到連接git儲存庫的連接網址，以SSH來說，通常會是「git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git」。請記下這個連接網址，下一步設定git客戶端的時候，我們就會用這個網址來連接git儲存庫。

Step 3. 使用NetBeans連接Git儲存庫 / Connect Git Repository in NetBeans

接著我們來設定Git客戶端：NetBeans。開啟NetBeans之後，從Team > Git > Clone… 找到複製的功能。

接下來是很重要的關鍵設定。

首先，Repository URL本來應該設定剛剛看到的連接網址「git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git」，但如果伺服器必須指定SSH連接埠的話，那就要改用不同的形式：

• 原本的連接網址格式：[user@]host.xz:path/to/repo.git/
  例如：git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git
• SSH的連接網址格式： ssh://host.xz[:port]/path/to/repo.git/
  例如：ssh://git2.pudding.dlll.nccu.edu.tw:22/pudding/test.git

接著Username請務必輸入git，請不要用GitLab的帳號。

然後Pirvate Key File則選擇剛剛產生的SSH私鑰 puli-private-key.ppk。

下面還可以在Clone into: 設定檔案的位置。

設定完成之後就按下「Next >」進入下一步。

這時候應該會跳出一個Warning，要加入GitLab伺服器的連線授權。請按下「Yes」即可。

看到這個畫面表示正常連接，按「Next >」進入下一步。

這樣就完成了，按下「Finish」確定。

複製完成之後，接下來再建立專案，請按下「Create Project」。

後續的步驟就跟「Git合作開發從NetBeans開始！NetBeans複製git專案教學」的「Part 2. 新增NetBeans專案」一樣了，請參考之前的文章繼續操作吧。

只要第一次設定後，Git連接方式就會保存在NetBeans裡面，以後每次存取Git儲存庫就不用重複輸入帳號密碼了。

結論：需要學習使用IDE跟版本控制 / Conclusion: Learn to use IDE and version control

最近實驗室又加入了新進成員，而許多人也需要開發系統作為畢業論文。由於我們系所並不是強調軟體工程的科系，所以進來的學弟妹雖然能夠看得懂程式碼，但是在開發上仍顯得生澀。

選擇好用的IDE與版本控制工具能夠降低開發過程中繁雜的操作，程式設計師主要是在邏輯思維上下工夫，而不是像打字員一樣複製大量的程式碼，還難以維護。而IDE與版本控制也是未來踏入業界開發團隊中，與他人合作開發系統時必須要具備的技能。作為未來進入職場的投資，請務必多多熟悉IDE與版本控制的操作吧。

(more...)

如何閱讀JavaScript/CSS壓縮程式碼？快使用程式碼格式化工具 / How to Maxify/Parsing/Format Minified Code

為了閱讀被壓縮(minify)的JavaScript與CSS程式碼，我們可以使用線上工具Code Formatter或是NetBeans的format指令來為程式碼進行排版。

You can use some tools to maxify/parse/format the minified JavaScript or CSS codes, for example, Online Code Formatter or NetBeans.

關於壓縮程式碼 / Minify Code

JavaScript與CSS程式碼的特性在於必須下載到使用者客戶端才能執行，因此降低程式碼的大小是很常見的方式。JavaScript跟CSS通常是以壓縮(minify)的形態發佈給大家使用。被壓縮的程式碼檔案名稱通常會加上「.min」，而原始碼通常會加上「.src」，舉例來說：

這是jQuery 1.11.1原始碼的樣子。檔案大小是276KB。

這是jQuery 1.11.1壓縮程式碼的樣子。檔案大小是93.5KB，幾乎是原始碼的1/3大小。

壓縮程式碼中會移除註解、刪除空白與換行、縮短變數名稱（例如變數用了var book，會縮短成var a）。我之前也介紹過使用YUI Compressor與Minify壓縮程式碼的方法。而現在壓縮JavaScript跟CSS已經是主流用法，像是Fat-Free Framework中也直接內建了壓縮工具，非常方便。

為什麼要閱讀被壓縮的程式碼？ / To Read Minified Code

雖然像是jQuery這種知名的函式庫會提供非壓縮的原始碼供大家閱讀研究，但是還是很多專案並沒有提供解壓縮的原始碼，而只有被壓縮的程式碼可以看。

我最近在研究如何撰寫CKeditor的plugin，可惜他的教學跟文件寫的並不是很好。後來我覺得比起研究文件，不如直接修改程式碼，說不定還比較快。

可惜的是，大部分CKeditor中plugin的程式碼都是壓縮後的結果，閱讀起來不太容易，我們需要一些解壓縮(maxify)工具來輔助我們閱讀這些程式碼。

在此介紹兩種格式化被壓縮程式碼的方便工具：NetBeans的format指令跟線上工具。

NetBeans的格式化指令 / “Format” in NetBeans

我使用的是NetBeansIDE 8.0。要格式化被壓縮的JavaScript程式碼的做法如下：

1. 開啟JavaScript檔案
   
2. 開啟Source > Format 
   
3. 變成了漂亮的排版
   

不過你可以注意到下面還是有一團程式碼沒有解壓縮到，這似乎是NetBeans的限制。此外，NetBeans也不能解壓縮CSS程式碼，使用範圍有限。

使用Code Formatter解壓縮 / Maxify Code on Online Code Formatter

這個工具名稱叫做「Format, Beautify, Maxify, Unpack or Deobfuscate JavaScript/jQuery/HTML/JSON/CSS Codes」，有點長，還是用網址上的Code Formatter來稱呼好了。

這工具用法很簡單。首先先把壓縮的程式碼貼在框框中，然後按下下面的按鈕「Click here to Format/Beautify/Maxify Your JavaScript/jQuery/JSON//HTML Codes」。

程式碼就以漂亮的版面排版好了，而且NetBeans沒解開的後面部分也排版的漂漂亮亮，這樣就能夠更輕易地閱讀程式碼了，真是令人開心呢。

希望這些工具能夠幫助程式開發者更容易閱讀程式碼。學程式的第一步就是模仿別人怎麼寫，加油！

(more...)

Git合作開發從NetBeans開始！NetBeans複製git專案教學 / Clone Git Project in NetBeans

本文介紹如何在NetBeans中複製Git專案到本機端，然後建立NetBeans專案，以便開始進行程式的開發。

This article describes how to clone Git project and then create a NetBeans project in NetBeans.

Git專案 / Git Project

本文以我最近要開始的新專案「PHP File Host」為例子來做示範。這是一個存放在GitHub的開放原始碼專案，大家可以任意複製(Clone)裡面的程式碼到本機端來修改。要複製Git專案的方法很多，有HTTPS、SSH與Subversion等通訊協定。在NetBeans裡面，我們可以用HTTPS通訊協定來進行複製，連線方式在GitHub專案網頁的右方下面「HTTPS clone URL」。

總結上述，以下是Git專案的資訊：

• Git專案網頁：PHP File Host
• HTTPS複製網址：https://github.com/pulipulichen/php-file-host.git

NetBeans環境 / NetBeans Version

NetBeans是我現在主要的IDE開發環境，他也是一個開放原始碼的自由軟體。NetBeans不僅支援語法標亮、自動完成(auto-completion)，從7.4版之後也開始支援Git。以往我使用TotoiseGIT來管理GIT的工作，現在逐漸都改以NetBeans來進行操作。

為了讓大家能夠更輕易以NetBeans來開始使用Git專案，本文將介紹如何複製Git專案到NetBeans中，並直接建立一個NetBeans專案來使用。

• NetBeans 網站
• NetBeans下載：建議下載All版本，可以同時支援JavaScript與PHP
• NetBeans的Git功能說明：Using Git Support in NetBeans IDE

在NetBeans中複製Git專案 / Clone Git Project in NetBeans

以下介紹如何在NetBeans中複製Git專案。大致上操作步驟分成兩個部分：從Git複製專案檔案、以及在NetBeans中建立NetBeans專案。

Git專案主要負責程式碼的版本控制，NetBeans專案通常還包括一些專案程式碼指定編碼、伺服器上傳連線等資訊，而這些資訊並不建議放到Git專案中公開，兩者要分開處理。

Part 1. 複製Git專案 / Clone Git Project

在NetBeans中，請進入Team > Git > Clone…

接著會開啟Clone Repository對話視窗。在這裡我們先進行Remote Repository設定。要輸入的欄位包括：

• Repository URL: 請輸入剛剛的HTTPS複製網址「https://github.com/pulipulichen/php-file-host.git」
• User與Password：登入GitHub的身份認證。
• Clone into：存放專案的目錄。NetBeans會在這個目錄底下再建立一個Git專案的目錄。舉例來說，我的XAMPP網頁擺在「D:\xampp\htdocs」，那麼Git專案就會出現在「D:\xampp\htdocs\php-file-host」底下。

接下來選擇要複製的Remote Branches。一般是選擇該專案的代表master分支即可。直接按「Next >」按鈕吧。

然後最後是確定目標資料夾 Destination Directory。這邊會帶入剛剛的設定，只要按「Finish」按鈕完成即可。

複製完成之後，NetBeans會問你是否要建立NetBeans專案。打勾「Open Sources in Favorites」，然後按下「Create Project…」，接下來就進入新增專案的步驟。

Part 2. 新增NetBeans專案 / Create NetBeans Project

NetBeans會顯示「Net Project」對話視窗。在這邊我們要選擇與該專案相對應的程式語言類型。PHP File Host是一個PHP程式語言的專案，而且已經有Git專案過來的檔案，因此我在PHP目錄底下選擇專案類型「PHP Application with Existing Sources」。

然後按下「Next >」按鈕進入下一步。

在Name and Location這邊要設定的東西蠻多的。

首先我們要指定Sources Folder，請設定剛剛跟Git專案複製的目標資料夾路徑「D:\xampp\htdocs\php-file-host」。接著NetBeans會自動帶入下面的資訊。

接著我們要確認Default Encoding為UTF-8。如果沒有設定NetBeans專案的話，NetBeans會用非UTF-8的編碼來開啟檔案，造成檔案看起來會是亂碼。

然後請打勾「Put NetBeans metadata into a separate directory」，然後指定另一個地方存放NetBeans專案的資訊，不要跟Git專案擺在同一個地方。這是為了避免NetBeans專案資訊被納入Git版本控制之中，這個動作很重要。

最後就是運作環境設定 Run Configuration。由於我的專案會先在本機端的XAMPP底下運作測試，所以設定Run As: Local Web Site即可。如果你實際運作的伺服器在遠端，那也可以在此步驟設定遠端伺服器的連線方式。不過遠端伺服器設定比較複雜，在此就先不說明。

其他沒有特別要設定的地方，按下「Finish」完成。

NetBeans會顯示剛剛設定的php-file-host專案，複製Git專案的工作就大功告成囉。

其他的Git操作 / How to use Git in NetBeans

當然，除了clone (複製)之外，NetBeans也支援很多Git的操作動作。以下舉例來說常用的指令與其位置：

• commit: Team > commit ，我還特地設了熱鍵Alt+C，讓自己更方便就能commit
  
• Pull & Push: Team > Remote > Pull or Push
  
• 比較檔案差異 Diff: Team > Diff > Diff To…  (可以取代「Git取代分支檔案的方法」一文中以TortoiseGIT的操作動作)
  

Git詳細的說明請參考「Using Git Support in NetBeans IDE」一文。我也還在持續摸索中，有任何心得歡迎在下面討論喔。

結語：IDE的重要性 / Conclusion: The Importance of IDE

以前常常會聽到有人會以「只要筆記本(notepad)就可以寫網頁」來當作自豪的特技，我覺得這只能說是程式設計師的基本，只能拿來跟外行人炫耀。但是如果要往更進階前進，你就必須學習使用IDE。

就目前為止，我主要使用的IDE有Aptana Studio 2 (第三版是是完全不同的東西)跟NetBeans，在我工作中，這些IDE有幾個我非常仰賴的重要工具：

• 全文搜尋(full text search)：當我要找某個函式要如何使用時，全文搜尋是很重要的。特別是像NetBeans能夠解讀程式碼，可以在你使用函式時顯示對應的註解說明，這個功能在閱讀程式(trace code)是非常好用的輔助工具。
• 正規表達式(regular expression)的搜尋與取代：當要取代換行、找尋某個函式的使用處的時候，正規表達式非常重要。
• 自動完成(auto-completion)：有了語法自動完成，你就不用煩惱每次都為函式或變數少打一個字而帶來的bug。
• 程式導航(navigation or outline)：像是地圖一樣地顯示程式的組成，這在檢視大程式的時候十分有用。
• Git版本控制功能：一個不做版本控制的專案不僅無法持久發展，也很難跟別人協同開發。

因此我會建議每一位致力於寫程式的朋友，請務必要熟悉一些好用的IDE。如果你跟我一樣是寫PHP與JavaScript，那我建議你就從NetBeans開始吧。

(more...)

關閉NetBeans的滑鼠中鍵字體縮放功能 / Disable NetBeans Zoom Text In / Out Keymap

在NetBeans上用滑鼠中鍵滾動捲軸時，往往會不小心因為按著中鍵滾動而導致觸發了文字縮放功能。本文章參考stackoverflow中fivedigit的解答，以圖文說明如何關閉這個功能。

To prevent from triggering off zooming text function in NetBean, this article aims to disable this function by modifying keymap configuration.

作法指導 / Guiding

Step 1. 進入Tools > Options

Step 2. 進入Keymap分頁進行調整

此處動作比較複雜。進入Keymap分頁之後，你會發現有很多快捷鍵的設定。請先在Search輸入「Zoom」，以找到我們要修改的Zoom Text In與Zoom Text Out。然後按下右邊的「…」按鈕，選擇「Clear」。兩個功能都要做「Clear」喔。

Step 3. 按下OK

這樣就完成囉。

請使用NetBeans的人先把這個功能關掉吧，不然每次滾動捲軸時真的是常常誤觸呢！

(more...)