推 aoeeoak: 很棒的分享 08/13 18:17
※ [本文轉錄自 Soft_Job 看板 #1JumouLS ]
作者: neversay (子不語) 看板: Soft_Job
標題: [心得]線上整合開發平台 — Nitrous.IO
時間: Thu Aug 7 13:20:43 2014
網誌圖文版：
http://neversaycoding.tumblr.com/post/93957660027/nitrous-io
上次介紹了Koding這個線上程式整合環境（Online IDE）之後，有熱心網友推薦了
其他線上IDE網站，於是我也去註冊並使用，發現這個網站也非常好用，跟Koding比
起來各有千秋。
與Koding帶有前衛的實驗性質相比，這個平台注重實用與效率，編輯環境更貼近程
式開發者的習慣，用了幾天之後覺得真心不錯，所以也來寫篇文章介紹它 —
Nitrous.IO。
我覺得線上IDE與一般如Eclipse或Sublime Text等IDE軟體不同的地方在於：
1.線上IDE將所有東西都放在雲端的虛擬伺服器上，包括雲端檔案系統與終端介面。
這好處除了不會因為本機檔案損毀而讓辛苦的成果完蛋，開發者也可以直接透過終
端介面在虛擬伺服器開啟網頁服務，讓外部人員直接瀏覽成果，而不會發生本機開
發得好好，在展示主機上卻爛掉的狀況。
2.許多線上IDE也整合了溝通或社交介面，讓團隊成員可以線上討論，還有與非團
隊成員在社交圈中討論。這樣我們可以從線上記錄回憶之前討論的事項，免得出現
雞同鴨講或鬼打牆的靈異事件。
3.線上IDE的版本都是最新且相同的，保證不會出現在我的機器上能跑在你那邊卻不
能，或是發生諸如
http://social.msdn.microsoft.com/Forums/zh-TW/d0c34bd3-a652-44ee-9f7a-e1ca2cfb81b5?forum=800
等慘事。
4.通常線上IDE的環境已經把必須套件都安裝設定完成，初學者不用困在一堆與開發
沒有太大關係的套件設定檔地獄裡。（雖然遲早都會碰到，但是第一天就碰到著實扼
殺了不少新手的學習熱誠）
5.省錢。要在本機上開發並將伺服器架起來，硬體設備至少要有點底蘊，或者拿汰換
的主機下來使用，或者新買台實體主機來用。線上IDE所使用的虛擬伺服器其效能通常
可滿足絕大多數的情況，對本機的硬體要求甚低，你甚至可以買便宜的Chromebook
在線上IDE上開發！
--------------------------------------------------------------------------
列了這幾點，我非常建議程式新手找個免費的線上IDE來當做自己的出發點，一邊學
習程式設計一邊摸索並適應伺服器的工具程式。練功先學蹲馬步，過了這關之後就
海闊天空了。
像我現在就在Nitrous.IO上練習Node入門這本書的題目與內容。越練習越感受到線
上IDE的方便之處。
好了，讓我以Nitrous.IO當例子，來試試申請帳號，配置虛擬機器，並且下載
與啟動一個Node.js專案當做初窺門徑的練習吧。
(以下圖文步驟，圖檔連結省略)
1.進入Nitrous.IO網站之後，第一件事就是要建立帳號。Nitrous.IO可以使用Github，
Google或者LinkedIn的帳號登入，如果有以上網站的帳號，可以用Single Sign-on串
連帳號免去以後要分開登入的麻煩。
2.我主要是用Github來做帳號的整合。因為我已經登入Github了，所以它會直接將
我轉到Github的授權網頁，在這邊按下”Authorize application”，還剩幾步就差
不多完成了。
3.接著他會要你輸入Github的登入密碼以確認你就是本人。
4.認證與授權步驟都完成後，頁面會轉回Nitrous.IO的帳號密碼創設頁面，當你取了
帳號密碼之後就完成創帳號的步驟了，基本上以後只要Github沒登出，登入
Nitrous.IO是不用輸入帳號密碼的，這就是Single Sign-on的方便之處。
5.帳號創設之後，Nitrous.IO要求你做的第一件事情就是建立第一個虛擬機器。目前
它提供五種預設的伺服器型態，分別是Ruby/Rails，Node.js，Python/Django，Go以
及PHP。跟Koding平台一個虛擬機器包所有功能不同。Nitrous.IO的虛擬機器一台預設
安裝的套件是固定的，你可以透過管理介面安裝新的套件以擴充功能。
6.在Nitrous.IO上，每個使用者擁有一個叫N2O的資源單位，平均開一台新的虛擬機器
需要140點N2O，若是要替虛擬機器擴充硬碟或記憶體，就需要更多的N2O來購買。而一
般使用者一開始只擁有140點N2O而已。你可以透過介紹新朋友來此開帳號，連結各個社
交平台，作問卷訪問等得到N2O。但最直接的方式就是付錢買N2O，畢竟Nitrous.IO的
工程師也是要吃飯的。
不過若是新使用者或輕度玩家，一台虛擬伺服器應該就夠用了。
7.當你創造完第一個虛擬機器後，就會進入Dashboard頁面，在這裡你只要點了
”IDE”按鈕就能進入線上IDE頁面。如果只是純粹想登入虛擬機器執行命令，那點
”Terminal”就能快速進入終端機介面。
-------------------------------------------------------------------------
經歷以上步驟我們終於來到線上IDE頁面。 Nitrous.IO的IDE毫不花俏，它將所有網
站開發團隊需要用到的功能全部整合在一個樸素的工作環境中，由左向右依序是檔
案管理，文字編輯，溝通平台。以及正下方的虛擬伺服器終端介面。
這個頁面樸素歸樸素，但是一個老練的前端程式開發者需要的功能全都具備了，虛
擬機器的效能也讓人滿意，可說是一款成熟又穩重的產品。
在這個整合環境底下，有趣的地方是右邊的溝通介面，它可以邀請其他Nitrous.IO
的註冊使用者成為你的虛擬伺服器的管理員，被邀請者可以任意瀏覽更改你的虛擬
伺服器上的任何檔案，包括SSH的認證金鑰！
另一點就是它會將包括你在內的成員的任何活動，包括開啟檔案，登入登出以及對
話內容記下來，這樣就可以快速追蹤誰正在作什麼，以前作過什麼。
簡單介紹完了整合環境，就讓我們藉由複製Github上的Node.js專案來體驗一下線
上IDE的優勢。
1.首先，在Nitrous.IO的Dashboard創造一個新的虛擬伺服器，在創造頁面上選擇
Node.js型的機器，然後創造它。如果你已經有機器的話可以透過管理介面安裝
Node.js，方法如下：
a.在IDE介面最上方的選單選擇Autoparts，並選擇Manage Packages開啟Manage
Packages
b.在套件過濾欄位裡鍵入”Node.js”，就會發現Node.js套件可以選擇安裝。
按下”install”之後等待安裝完成，就可以使用Node.js了！
2.在IDE頁面下，游標在終端介面那邊按一下，轉換鍵盤的輸入焦點。然後輸入git
指令從Github裡面把範例專案拉下來：
git clone https://github.com/neversay/nodejs-sample.git
3.將專案拉下來後，在左方檔案管理員把目錄nodejs-sample展開，對檔案example1.js
點兩下打開它，在編輯器畫面中修改它的程式碼。
4.將第七行
}).listen(3000);
改成
}).listen(4000);
之後用Ctrl加S鍵快速儲存檔案（真是窩心，居然在瀏覽器裡面一樣可以用一般文字
編輯器的快捷鍵）
5.將鍵盤焦點轉回到終端介面，用系統指令 cd nodejs-sample 進入nodejs-sample
檔案夾，然後用以下指令開啟Node.js伺服器：
node example1.js
6.開啟Node.js伺服器後，在IDE上端的選單裡打開Preview選項，然後選擇Port 4000
7.完成了！你的瀏覽器會開啟新視窗，並且把結果”Hello World”印在新視窗裡！
恭喜你！你已經完成了Node入門這本書的第一個範例了！ 要停止Node.js的程式，只要將焦點
回到終端介面，按下Ctrl+C就能終止它了。
------------------------------------------------------------------------
接下來，你可以照著Node入門這本書的範例，一步一步將Node.js的基本功能實作完。
體驗Node.js特殊的編程方法。
若是讀者想要嘗試更多不同的線上IDE，這邊有一些文章
http://www.hongkiat.com/blog/cloud-ide-developers/
http://www.chromebookhq.com/five-best-online-ides-making-the-switch-to-a-chromebook/
介紹了世界上最受歡迎的線上IDE，以及Wikipedia上的列表：
http://en.wikipedia.org/wiki/Online_JavaScript_IDE
這些線上IDE或雲端IDE都各有擅場，但基本操作都跟Nitrous.IO以及Koding差不多，
所以在摸熟這幾個免費線上IDE之後，要熟悉新的線上IDE就不是一件值得費心的事
情了！
Happy Coding Day!
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 50.156.87.148
※ 文章網址: http://www.ptt.cc/bbs/Soft_Job/M.1407388856.A.55C.html
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 轉錄者: neversay (50.156.87.148), 08/07/2014 13:21:48