Electron.js
วันนี้เราจะมาสร้าง Destop app ด้วย Electron.js กันนะครับ โดยปกติผมจะถนัดใช้ C# และ Microsoft Visual Studio ในการสร้าง App เสียมากกว่านะครับ Electron.js เป็น platform ที่ใช้ Node.ja และ javascript มีความสามารถ cross platform เสียด้วยนะครับ ใครเป็น dev สาย Web app อยู่แล้วอยากทำ Destop App ก็สบายเลย
เร่ิมต้นเราจะต้องลง Node.js กันก่อนครับใครยังไม่มีสามารถลงได้ตาม link ด้านล่างนะครับ
หลังจากลงเสร็จแล้วผมจะเปิด VSCode ขึ้นมาแล้วเปิด teminal ของ vscode แล้วพิมพ์คำสั่งด้านล่างนี้ครับ
npm i -D electron@latestเสร็จแล้วผมจะ Create application ด้วยคำสั่ง
mkdir testElectronApp && cd testElectronApp
npm initเมื่อใช้คำสั่ง npm init ก็เคาะ enter ไปเรื่อยๆ เลยครับ เราจะได้ไฟล์ package.json มาแล้วเราก็เข้าไปแก้ package.json ดังนี้ครับ
"main": "main.js"
"scripts": {
"start": "electron ."
}เสร็จแล้ว install the electron package into your app’s devDependencies.
npm install --save-dev electronต่อไปเราจะมาเริ่มเขียนโคดกันแล้วนะครับ ผมจะเร่ิมต้นด้วยการสร้าง folder สำหรับเก็บโคดเราก่อนเลย
mkdir src
mkdir src/js
mkdir src/styleหลังจากนั้นผมจะเร่ิมสร้างไฟล์ 4 ไฟล์คือ
main.js คือไฟล์ script หลักของเรา เรียกใช้ script อื่น
const { app, BrowserWindow } = require('electron')
const path = require('path')const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'src/js/preload.js'),
devTools:true,
nodeIntegration:true,
contextIsolation:false
}
})
mainWindow.loadFile('src/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
src/index.html คือไฟล์ หน้าตาโปรแกรมของเรา
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="style/style.css">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>src/js/preload.js คือไฟล์ การทำงานส่วน preload ก่อนเรียกใช้ index.html
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})src/style/style.css คือไฟล์ syle css ของ app เรา
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}หลังจากนั้น ลองใช้คำสั่ง npm start เราจะได้ app หน้าตาแบบรูปด้านล่าง
Renderer process modules
Communicate asynchronously from a renderer process to the main process.
สร้างไฟล์ src/js/renderer.js
const {ipcRenderer} = require('electron')
const ipc = ipcRendererclickme.addEventListener('click',()=>{
console.log('hi')
ipc.send('ipcClickme')
})
แก้ไขไฟล์ main
const { app, BrowserWindow, ipcMain} = require('electron')
const ipc = ipcMainเพิ่ม ipc.on ‘ipcClickme’ ที่รับมาจาก ipc.send(‘ipcClickme’) ในไฟล์ renderer.js
ipc.on('ipcClickme',()=>{
console.log('ipc main')
})เพิ่ม script ในไฟล์ index.html
<script src="js/renderer.js"></script>เสร็จแล้วทดสอบรันดู บน windows กดปุ่มลัด ctl + shift + i เพื่อเปิด tab Inspect
สำหรับ macOS กดปุ่มลัด command + option + i
ผลลัพธ์จะเห็น console log ขึ้นดังรูปด้านล่าง
แต่ถ้าอยากส่งค่าผ่าน parameter ก็สามารถทำได้ แก้ไขในไฟล์ renderer.js
ipc.send('ipcClickme',{'name':'blue'})ส่วนในไฟล์ main.js รับค่าดังนี้
ipc.on('ipcClickme',(e, msg)=>{
console.log('ipc main:'+msg.name)
})ขั้นตอนต่อไปเราจะ build app ให้เป็น executable file สำหรับนำไปใช้งาน เป็น destop app กัน
เริ่มต้นด้วยการลง electron-forge ตามคำสั่งด้านล่างนี้เลย
npm install --save-dev @electron-forge/cli
npx electron-forge importเสร็จแล้วก็ใช้คำสั่ง electron-forge import มันจะเข้าแก้ไขในส่วนที่จำเป็นในไฟล์ package.json เสร็จแล้วให้เราใช้คำสั่ง
npm run makeexecutable file จะอยู่ใน folder output
เสร็จแล้วครับ การสร้าง Desptop App ง่ายๆด้วย Electron ขั้นตอนต่อไปเราจะมาทำ app ที่ยากขึ้นอีก
