Node-webkit : 用 HTML+JavaScript 撰寫「視窗程式」的好工具

簡介

最近我愈來愈喜歡用 JavaScript 寫程式，不單只是用來寫網站，包含命令列程式、視窗程式、遊戲程式等等，我都希望可以用 JavaScript 來撰寫。

於是我嘗試了幾個東西，像是安裝 Visual Studio Express 2013 (Desktop) 、 node-qt 、 node-webkit 等等環境。

雖然 MSDN 網站中寫說 JavaScript 是 Visual Studio 2013 的第一級語言 ，但是在我安裝 Visual Studio Express 2013 Desktop 後發現，沒辦法建立 WinForm 或 WPF 的 javascript 專案，甚至根本找不到建立 JavaScript 專案的方法。

後來我才知道，原來 Desktop 版本不支援 JavaScript 專案，聽說針對 Win8 設計的 Visual Studio Express 2013 版本有支援用 javascript 開發 windows store app 這種類型的「視窗程式」，可惜我還沒有時間安裝與試用。

然後、當我嘗試 node-qt 時，卻發現該專案還在 0.02 版，感覺不太成熟，安裝上也有問題，只好就放棄了。

接著、我嘗試了 node-webkit ，不試不知道，一試就上癮了，我覺得這個東西有很大的潛力，值得好好研究一番啊！

因此、今天筆者將為各位看官介紹 node-webkit 這個專案的背景與用法。

Node-webkit 的起源與設計理念

以下是 node-webkit 的 github 專案網址，使用前建議先讀讀該網頁的 README.md 介紹，該文件中清楚的介紹了 node-webkit 的安裝、用法、範例與程式的寫法等等。而且在最後還註明了這個專案是由 Intel 、Gnor Tech 、eFounders 等三個組織贊助的，所以看來並不是泛泛之輩啊！

• http://github.com/rogerwang/node-webkit

這個專案的發起人是任職於 Intel 開源技術中心 (OTC) 的「王文睿」 (Roger Wang)，以下是位於 CSDN 上的一則專訪，說明了王文睿創建 node-webkit 時的想法。

• 【开源专访】Node-Webkit作者王文睿：桌面应用的全新开发方式

2011 年時王文睿希望為「三星 Tizen 作業系統」的 WebRuntime 增加 API 時想到，為何不用 node.js 來擴充 WebRuntime 呢？於是他利用 Intel 的鼓勵創新計畫活動，將 10% 時間投入到 node-webkit 上，結果就創建了這個專案。

既然 Chrome 瀏覽器與 node.js 都採用 V8 這個 JavaScript 立即編譯引擎，那麼將兩者合併應該可以共用 V8 的引擎環境 (Context) 和事件處理循環，兩者整合後 node-webkit 就誕生了。

Node-webkit 目前支援了 Linux、 Windows 與 MacOS 等三大平台，並且可以輕易運用 npm 套件安裝 node.js 的 資源，整個計畫實踐得相當完整。

哪些程式適合採用 node-webkit 呢？

雖然在 HTML5 的幫助底下，瀏覽器已經變得相當強大，但是畢竟在調用系統函數上有困難 (否則會有安全問題) ，而且受限於 Web 的遠程 Client-Server 互動特性，很多原本簡單的動作，像是儲存檔案、開啟攝影機、取得衛星定位、取得螢幕快照等等都變得相對困難。

幸運的是，這些問題在採用 Node-webkit 技術後都可以輕易的完成，而且可以在 HTML 檔案裏直接加入 <script>…</script> 標記就能把 node.js 裏可以寫的 JavaScript 程式完整的放進來，真的是相當好用啊！

雖然我認為這是非常重要的專案，但可惜的是 node-webkit 專案的主要參與人員目前仍只有「王文睿」一位 (這恐怕是資本社會的一個問題，我猜是因為這個專案還沒有辦法營利吧)。

如果您想寫一個以 HTML 當主要介面，而且可以透過呼叫系統或 node.js 函數的程式，那麼就相當適合採用 node-webkit ，像是 MSN、Skype、QQ、網路遊戲等等，都蠻適合採用 node-webkit 的。

以下是一些採用 node-webkit 專案的程式清單，像是 Light Table、Soundnode App 、 Web2Executable、Intel® XDK、Fenix Web Server、LexiMail、Candy Reader (PDF)、Playlist、Huayra-StopMotion、Hyro、 …. 與很多網路遊戲都採用了 node-webkit。

• List of apps and companies using node webkit

可惜的是，目前 node-webkit 還不支援 Android、 iOS 等行動裝置 (不過我在想 Raspberry Pi、 Banana Pi 等裝置應該有機會吧，如果拿來做手機的話) ，想要用 Web 技術作行動裝置本地程式的朋友，還是得依靠 Titanium 或 PhoneGap 等專案。

由於 node-webkit 吸引到越來越多的使用者，所以目前王文睿在 Intel 開源技術中心已經是專職在開發 node-webkit ，而不只是業餘的興趣了！ (這應該算是一件好事)

Node-webkit 的安裝

熟悉 node.js 的人可能會想，用 npm install node-webkit 來安裝 node-webkit，但這種想法是錯的！

Node-webkit 的安裝方法是到 http://github.com/rogerwang/node-webkit 這個專案首頁中的 Download 部份去找到下載連結，然後下載後解開就行了。

像是我所下載的是 nodewebkit v0.9.2 的 Windows 版本，連結如下：

• http://dl.node-webkit.org/v0.9.2/node-webkit-v0.9.2-win-ia32.zip

下載完後直接解壓縮，可以得到下列檔案：

其中的 nw.exe 就是 node-webkit 的主要程式。

Node-webkit 的範例

在 node-webkit 的 github 專案中，並沒有包含範例程式。範例程式是分開放在另一個 github 專案中的，網址如下：

• http://github.com/zcbenz/nw-sample-apps

您可以按下 Download Zip 連結下載這些範例，解壓縮後會看到下列資料夾與檔案。

如果您還沒有設定 nw.exe 的路徑到系統路徑下，請記得設好，然後就可以切換到該範例資料夾中，用 `nw ` 來執行某個「資料夾」，以下是我們用 `nw file-explorer` 指令執行 file-explorer 這個範例的結果：

當然、其他的範例也可以比照這種方法執行，像是 frameless-window, menus, mini-code-edit, mp3-encoder 等範例都可以很順利的執行。 (不過筆者在執行 webgl 這個範例的時候失敗了，我也不知道問題出在哪裡？)

結語

現在、您應該已經瞭解 node-webkit 這個專案的由來以及用法了，但是、到底要怎麼樣撰寫 node-webkit 的程式呢？

且讓我先賣個關子，將這個主題延到下一期在說明，敬請期待喔！