十分鐘系列

1. 相容於 node.js 的
網頁型桌面程式設計
( 使用 Electron.js 開發 )
陳鍾誠
2017 年 10 月 23 日
程式人《十分鐘系列》程式人《十分鐘系列》
本文衍生自維基百科

2. 這年頭
● 大家的焦點好像都在《 APP 和網
站》，傳統的視窗程式愈來愈少人
關注了 ...

3. 這種現象
● 和《手機興起，微軟衰落》
的大環境應該有密切的關係！

4. 但是
●桌機上的《視窗程式》，終
究還是有需要的 ...

5. 不過令人感到困擾的是
● 傳統微軟的 WinForm 已然過時，
微軟的 WPF 看來也快過時了，
但新的 Xamarin 又前途未卜 ...

6. 開放原始碼的 Qt 視窗開發工具
● 感覺很強大
● 而且還支援 JavaScript/QML ，甚至可
以在 Android/iOS 上跑 …
● 但很可惜難以支援 Node.js 的 npm
套件 ...

7. 對於已經把主力
●轉到 Node/JavaScript 的我
●不能使用 npm 套件的 Qt 似乎
沒有足夠的吸引力！

8. 於是
●我把眼光轉到 electron.js
這個開發工具上 ...

9. 這學期
●我就用 electron.js
來教視窗程式設計了。

10. 當然
● 這是經過測試評估的結果 ...

11. 到底
●甚麼是 electron.js 呢？

12. 簡單的說
● Electron.js 就是一套可以讓你用
HTML/CSS/JavaScript 等 web 開發技術，來
開發桌面應用的工具
● 而且 Electron.js 和 node.js 幾乎完全
相容，幾乎可以使用全部的 npm 套件！

13. 以下是 electron.js 的官網
https://electron.atom.io/

14. 要使用 electron.js 開發視窗程式
●您首先必須安裝 node.js
–https://nodejs.org/

15. 裝好後、使用 npm 指令
●安裝 electron.js
–npm install -g electron

16. 安裝完畢之後
●就可以開始寫 electron.js
的專案程式了！

17. 問題是
●怎麼開始寫呢？

18. 這常常是現今學程式的人
●需要面對的第一個問題！

19. 解決方法通常是
●上官網看看範例在哪裡
●然後下載來執行看看！

20. 以下是 electron.js 的官網範例

21. 執行範例後你會看到下列畫面

22. 基本上只是個 Hello 程度的專案而已
● 其檔案列表如下：

23. 讓我們詳細看看內容

24. 首先看 package.json
這和 node.js 的 package.json 幾乎一模一樣
其中的 main 欄位指出了主程式是 main.js

25. 如果您還不熟悉 node.js
可以參考另一篇十分鐘系列
https://www.slideshare.net/ccckmit/javascript-npm

26. 當我們打入
●electron 《專案路徑》
–例如 : electron .
的時候，就會執行該主程式

27. 在主程式 main.js 中
會用 loadURL() 函數載入網頁

28. 於是我們就可以
●啟動《網頁型視窗介面》了
–像是範例中的 index.html

29. 上述範例的 index.html 如下
注意這裡可以引入像
node.js 一樣的模組
( 這是和一般 HTML 不一樣的地方 )

30. 該範例基本上只是用來顯示
Node/Electron/Chromium 的版本號而已
● 所以你才會看到下列畫面

31. 現在
●你已經看完第一個範例了

32. 但是
●應該還有很多疑問 ...

33. 為了釐清這些疑問
●您可以下載我課程用的範例

34. 課程範例網址如下
https://github.com/cccnqu/wp106a

35. 請使用下列 git 指令取得範例
● git clone https://github.com/cccnqu/wp106a.git

36. 然後、讓我們一個一個範例執行

37. 第一個範例就是
剛剛的 Hello 等級範例

38. 不過我把主程式 main.js 簡化了一下
看起來應該簡單清楚多了

39. 接著讓我們看
範例 02-calculator

40. 會寫網頁的應該已經猜到怎麼做的了
裡面用了 eval 來計算運算式
計算使用者輸入
的運算式欄位

41. 接著是第三個範例 - 電子鐘

42. 電子鐘主要用了 setTimeout 函數
讓時間可以每秒更新一次

43. 第四個範例是翻譯系統

44. 我們把一個小字典直接寫在程式裡面

45. 但是以上這幾個範例
● 其實都只是瀏覽器就能做的事！

46. 接下來才會碰到一些
● 原本瀏覽器不太方便做的事

47. 像是
● 開關檔案
● 顯示對跨框選取檔案
● 印表機與 PDF 列印
● 抓取畫面並存檔
● 開很多網頁並互相通訊 …

48. 所以接下來
● 讓我們開始看一些有使用到桌面功能
的範例程式 ...

49. 首先是媒體播放程式 05-media

50. 雖然看起來網頁也做得到

51. 但是程式中用到了開檔對話框
dialog.showOpenDialog()

52. 這是原本瀏覽器所不支援的功能

53. 接著我們在 06-editor 範例中
同樣用對話框來製作開檔功能

54. 而且開檔存檔功能
是放在《主功能表》上的

55. 其功能表的程式碼如下

56. 功能表裏還可以
輕易地掛入一些預設功能

57. 然後我們在 06-editor/b 中
繼續延伸出《開新檔案》與《另存新檔》的功能

58. 接著引入一個稱為 marked 的 npm 模組

59. marked 可以用來把 markdown 格式轉為 HTML

60. 於是我們寫了一個 markdown 編輯器
利用 marked 將文件轉為 HTML 呈現

61. 當然、執行這個程式前必須先安裝 marked

62. 我們會在程式裡
用 marked 將 markdown 轉為 html

63. 您除了可以做先前的檔案功能之外
● 還可以按滑鼠右鍵檢視開過那些檔案
並且可以點選超連結連到另一個檔案

64. 當然也可以編輯 markdown 原始碼
然後進行檢視或存檔的動作

65. 從 markdown 編輯器的範例中
● 您應該可以看到在 electron.js 中
使用 npm 模組是非常容易的事情！

66. 接著讓我們再看幾個例子

67. 像是自製瀏覽器

68. 您可以使用 webview
這個特殊的 HTML 標記

69. 然後加上對應的控制程式

70. 就能完成
●一個內嵌瀏覽器了

71. 接著是印表功能的範例

72. 按下 print 時會出現列印視窗

73. 您也可以儲存為 PDF 後檢視
然後再決定要不要印 ...

74. 這些功能的程式碼也都不難
因為都內建在 electron.js 裏面了

75. 然後也可以做抓取螢幕畫面的程式

76. 主要程式碼片段如下

77. 如果您想做個像《檔案總管》的程式
當然也是可行的

78. 只是程式碼會比較長

79. 這樣
● 我們就看完了不少 Electron.js 的
程式範例了

80. 但是最後
●請您必須注意一件事 ...

81. Node.js
● 是單行程 Single Process 的架構

82. Electron.js
● 則通常不只包含一個 Process

83. Electron.js
● 其主程式為一個行程 ( 稱為 Main Process)
● 每個 BrowserWindow 載入網頁又是一個行
程 ( 稱為 Render Process)

84. Render Process
● 可以透過 remote 物件存取主行程的內容

85. 也可以透過 ipc 互相通訊

86. 透過 Electron.js
● 我們就可以輕易地寫出《網頁型的
視窗程式》
● 並且可以任意的存取 node.js 的
npm 套件或程式了。

87. 這樣
● 原本使用 node.js 的朋友們
● 就可以輕易地寫出桌面程式了！

88. 這就是我們今天的
●十分鐘系列！

89. 希望您會喜歡！

90. 我們下回見！

91. Bye Bye!