electron --- make a desktop application

現在都在給人家傳教使用electron((X

github page

之前的編輯器介紹部分也有做介紹visual studio code, bracket, Atom, 這一系列編輯器base on electron

那就來介紹一下何謂electron吧

把你在網頁上運行的程式碼可以做成桌面APP

只要簡單幾行程式碼，可以達成前後端溝通，底層控制，而且跟網頁執行情況一樣

簡而言之，他就是包含了一個可以進行底層運作的瀏覽器，底層實作是透過nodejs， 渲染畫面則是用了chromium來實作，背後支援團隊是github

原本項目的名稱為atom-shell，之後再改名為electron，目前已經有很多家的企業採用electron為製作desktop application

打著Build cross platform desktop apps with web technologies的electron，其實從之前就有一直關注，我有時會利用它來撰寫一些比較簡易的桌面APP來玩

基本安裝

yarn [global] add electron

因為最新的electron使用node7 的版本，意味著基本的ES6都支援了，連ES7的async/await都可以玩的到

以下是簡易的開啟一個視窗的功能

啊...另外由於我懶得用typescript再重新進行compile過程，所以接下來都是用香草js來進行實作

const { app, BrowserWindow } = require('electron');

function createWindow() {

    // 設定寬*高

    let mainWindow = new BrowserWindow({width:1024, height: 768});

    // 將畫面放到最大

    mainWindow.maximize()

    // 主頁面設定，相當於web首頁

    mainWindow.loadURL('file://' + __dirname + '/index.html')


    // 開啟除錯工具

    mainWindow.webContents.openDevTools();


    // 當關閉時清空memory

    mainWindow.on('closed', ()=>{

        mainWindow = null

    })

}

// 當底層準備好時即可啟動視窗

app.on('ready', ()=>{

    createWindow()

})

導向至index.html，相當於首頁的位置，剩下的就是看個人的webapp發揮功力

在進行electron實作當然不僅只有web app渲染就完畢啦，畢竟可是desktop applocation，如果只有web app那還不如直接架站方便許多，接下來講的就是IPC(Inter-Process Communication，行程間通訊)溝通的方式

後端實作

// IPC

const { ipcMain } = require('electron')

// 異步方式回傳資料

ipcMain.on('asynchronous-message', (event, arg) => {

console.log(arg) // prints "ping"

// 用event方式回傳

event.sender.send('asynchronous-reply', 'pong')

})

// 同步方式回傳資料

ipcMain.on('synchronous-message', (event, arg) => {

console.log(arg) // prints "ping"

// 將資料設定

event.returnValue = 'pong'

})

前端實作

<script>

// In renderer process (web page).

const { ipcRenderer } = require('electron')

// 使用同步方式取得底層回傳

console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

// 使用異步方式取得回傳

ipcRenderer.on('asynchronous-reply', (event, arg) => {

console.log(arg) // prints "pong"

})

ipcRenderer.send('asynchronous-message', 'ping')

</script>

有些native module是無法透過前端直接進行，例如說fs的寫入檔案就無法，所以必須透過IPC處理資料後再進行操作

雖然在web app可以直接透過require來進行module loading，不過是無法直接使用native層級的module，這點在進行實作時就必須特別注意

最近在忙著進行專案項目以及middleware的設計，shellscript、python和nodejs輪流交替著使用，偶爾還要切出來做一下前端的事情，閒暇時偶爾做些tools來幫助自己完成一些工作上的事情。

看有些啥東西可以再慢慢放上來，python小玩具、nodejs debug方式、rabbit mq、dbus通訊...

這幾個月已經沒有再做angular2(4)的東西了，一來要重新調整版本，二來最近在處理案子上的東西很忙，比較沒有啥心情想練習....