Electron 是什麼?

Electron 是 Github 開發的一套應用程式框架,使用 Node.js 做為後端,以及 Chromium 為前端作為桌面端的應用程式開發。也因為是使用 Web 技術開發,所以相對於前端開發者很容易入門,能夠使用自己熟悉的 Html、CSS、Javascript,來開發。使用 HTML 和 CSS 實現應用的 GUI 界面,用 JavaScript 調用豐富的原生 API 實現桌面應用。

另外,知名的文字編輯器Atom、微軟的 VS Code、SimpleNote、wordpress 桌面端軟體,都是使用 Electron 為框架編寫的喔!既然 Electron 那麼好用,我們就盡快開始吧~

從運行官方 Electron “快速入門”應用程式開始!

先前準備:

1.Node.js
2.Git
3.文字編輯器或其他IDE(本教學以VS Code做示範)

1.先建立一個專案資料夾(electron project),並點擊右鍵使用 VS Code 打開。

2.打開 VS Code 內建的終端機輸入以下指令,把官方提供的範例(electron-quick-start)從 github 複製下來。

git clone https://github.com/electron/electron-quick-start

3.將終端機位置切換到應用程式的資料夾,也就是剛剛下載的 “eletron-quick-start”。

cd electron-quick-start

4.使用 npm 安裝 electron 相關套件。

npm install

5.執行專案中的應用程式,這時可以發現我們已經完成好開發環境並運行 Electron 框架的應用程式了,接下來會詳細介紹建構一個以Electron 框架所需要的東西與結構,並教大家如何修改預設的程式。

npm start

Electron 架構

照著上面的步驟做可能還是不太清楚它的運作原理以及架構,所以我們先來一探究竟 Electron 的架構。

一個基礎的Electron包含三個檔案:

electronApp
  ├── package.json(設定資料)
  ├── index.html (GUI 介面)
  └── main.js (主程式)

就如同網頁一樣,Html 負責處理圖形化介面(給使用者看的)、js 處理功能(程式部分) 而 package.json 則為程序的啟動入口文件,包含名稱(name).版本(version).說明(description).作者(Author)等資訊。

動手來修改囉~

先來看看 main.js 預先已經有一些程式了,看到 createWindow 的 function ,大概也能略知一二,是用來訂定應用程式的視窗,我們可以試著修改一下

mainWindow = new BrowserWindow({width:寬度,height:高度})

一樣重新執行 “npm start”,應該可以發現視窗大小改變了,這樣你大概就能了解這部分的運作,接下來我們換到 index.html 試試。

同樣,預設已經有填入一些東西了,我們可以先試試加入一些 html 或是修改一下來玩玩。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的第一個 Electron 框架軟體</title>
  </head>
  <body>
    <h1>Eelctron 初體驗</h1>
    <button>點我!!</button>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

當然,CSS 也是支援的~

相信到這裡,應該對 Electron 框架有多少的認識了,希望這個教學能夠當作一個踏入 Electron 世界的敲門磚,當然 Electron 的功能不僅僅只有這些,這個教學主要是給入門的朋友看的,如果有興趣的話也歡迎繼續學習下去,挖掘 Electron 好用之處!!