:::
顯示具有 IDE 標籤的文章。 顯示所有文章

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

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

image

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


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

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

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

但是如果要開發的話,還是使用NetBeans這種IDE會比較適合。所以我就寫了以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 8.0版本。但是Git功能並沒有多大改變,前幾版使用時應該差不多。

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

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

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

如果不想架設的話,也可以直接使用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

image

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

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

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

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

image

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

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

image

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

image

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

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

 

2015-08-07_011436

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

image

新增完成。

image

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

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

image

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

image

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

首先,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 >」進入下一步。

image

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

image

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

image

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

image

複製完成之後,接下來再建立專案,請按下「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

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

image

為了閱讀被壓縮(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」,舉例來說:

image

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

image

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

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

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

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

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

2014-09-05_164627

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

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


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

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

  1. 開啟JavaScript檔案
    2014-09-05_170730
  2. 開啟Source > Format 
    2014-09-05_170801
  3. 變成了漂亮的排版
    2014-09-05_170855

不過你可以注意到下面還是有一團程式碼沒有解壓縮到,這似乎是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來稱呼好了。

image

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

image

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

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

(more...)

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

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

2014-08-18_154048

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

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

Git專案 / Git Project

2014-08-18_152111 - Copy

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

總結上述,以下是Git專案的資訊:

NetBeans環境 / NetBeans Version

2014-08-18_152321

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

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


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

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

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

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

2014-08-18_152403

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

2014-08-18_152450 - Copy

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

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

2014-08-18_152557 - Copy

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

2014-08-18_152609 - Copy

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

2014-08-18_152634 - Copy

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

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

2014-08-18_152648

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

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

2014-08-18_152739

在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版本控制之中,這個動作很重要。

2014-08-18_152810

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

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

2014-08-18_152833 - Copy

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

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

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

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

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的滑鼠中鍵字體縮放功能 / Disable NetBeans Zoom Text In / Out Keymap

image

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

image

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

image

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

Step 3. 按下OK

image

這樣就完成囉。

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

(more...)