Node-webkit : 用 HTML+JavaScript 撰寫「視窗程式」的好工具 by 陳鍾誠 | CodeData
top

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 等三個組織贊助的,所以看來並不是泛泛之輩啊!

這個專案的發起人是任職於 Intel 開源技術中心 (OTC) 的「王文睿」 (Roger Wang),以下是位於 CSDN 上的一則專訪,說明了王文睿創建 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。

可惜的是,目前 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 的安裝方法是到 https://github.com/rogerwang/node-webkit 這個專案首頁中的 Download 部份去找到下載連結,然後下載後解開就行了。

nodewebkit_download

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

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

node-webkit_folder

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

Node-webkit 的範例

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

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

node-webkit_samples

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

node-webkit_fileexplorer_sample

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

結語

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

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

分享:
按讚!加入 CodeData Facebook 粉絲群

相關文章

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

熱門論壇文章

熱門技術文章