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 好用之處!!