Electron เขียน Desktop Apps ด้วย Web เทคโนโลยี HTML/Javascript

ต้องเรียกว่ายุคสมัยนี้ หากใครเป็น Software Developer แล้วเขียนโปรแกรมได้บน Platform เดียวเช่น Windows ก็คงถือว่าเริ่มจะ Outdated แล้ว

ในอดีตกาลนั้น การเขียนโปรแกรม Desktop ซึ่งก็คือเป็นโปรแกรมหรือ App ที่ใช้งานบน PC/Mac ซึ่งโดยส่วนใหญ่แล้วจะใช้ C/C++, VB, .NET, Java หรือ Objective-C/Swift

ซึ่งจากที่กล่าวไว้ข้างบนนั้นส่วนใหญ่เวลาเขียนมาแล้ว จะเจาะจงว่ามันจะทำงานได้บน OS เดียวเท่านั้น จะมีก็แต่

– Java ที่สามารถเขียนครั้งเดียวแล้วนำไปใช้บน OS อื่นๆได้(ผมไม่แน่ใจว่า Java สามารถใช้งานบน OSX ของ Mac ได้มั้ย)
– C/C++ ก็สามารถเขียนแล้วใช้งานบน Windows/Linux ได้แต่อาจจะต้องใช้ framework ต่างๆช่วยเพื่อให้ Code นั้นไม่ยึดติดกับ OS ใดๆ

แต่เนื่องจากว่ายุค Wep app ครองโลกแบบนี้ และด้วยความที่ HTML, CSS, Javascript ซึ่งเป็น Building Blocks ของ Web techs นั้น ง่ายต่อการทำ UI และสามารถทำงานใต้ Web Browser ใดๆก็ตามที่รองรับมาตรฐานของการพัฒนา Web (HTML5/Es6/Es6) ทำให้ตัว Web techs นั้นมีความได้เปรียบเรื่องการพัฒนา App ให้ Cross Platform

ทางโปรเจค Electron นั้นก็ได้ใช้จุดแข็งตรงนี้มาพัฒนาเป็น Framework ที่ทำให้ Developer สามารถพัฒนาโปรแกรมบน Desktop แบบ Cross Platfrom ด้วย HTML,CSS,Javascript แบบเดียวกับที่ใช้ทำ Web app

จริงๆแล้ว Electron นั้นคือการนำ Open Source ที่นิยมมากสำหรับสาย Web นั่นก็คือ Chromium และ Node.Js มาเป็น Framework เดียว ซึ่งทำให้เราใช้มันสำหรับทำได้ทั้ง UI หรือ Non-UI รวมถึง UI Frameworks ต่างๆเช่น Angular/Polymer/React ก็สามารถนำมาใช้ได้หมด รวมทั้ง Node.Js modules ต่างๆ

เราลองมาเริ่มกัน

เริ่มจากเข้าไปเวปหลัก http://electron.atom.io/ ก่อนเลยครับ
จากนั้นลองทำตาม Quick Start

เพื่อทำการติดตั้งโปรเจคตัวอย่าง

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

คำสั่งที่ให้ตัว Electron ทำงานคือ “npm start” และผลจาก sample app คือ ….ทาด้าาาาา..

Hellow World พร้อม Debugger..ในรูปแบบ Desktop App

มาดูอีกทีแล้วทำไมต้องเราใช้ “npm start” ในการสั่งเปิด App ด้วย จริงๆแล้วเราสามารถสั่งจาก Electron ได้เลยประมาณนี้

$ ./node_modules/.bin/electron .

มาดูรายละเอียดของโครงสร้างของ App กัน

ไฟล์ที่สำคัญคือ

index.html แน่นอนครับเป็นหน้า UI หลัก
main.js แน่นอนครับเป็น Entry point ของโปรแกรมเรา
package.json เป็นไฟล์ Config สำหรับ NodeJs

มาลองดูไฟล์ main.js กันก่อนครับ จะเห็นว่ามีการสร้าง BrowserWindow ขนาด 800×600 แล้วทำการโหลด index.html เป็นหน้าแรก ซึ่ง BrowserWindow คือการเปิด Web Browser Window (ที่ใช้ Chromium ในการ render นั่นเอง)

function createWindow () {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600})

 // and load the index.html of the app.
 mainWindow.loadURL(`file://${__dirname}/index.html`)

 // Open the DevTools.
mainWindow.webContents.openDevTools()

 // Emitted when the window is closed.
 mainWindow.on('closed', function () {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 mainWindow = null
 })
}

และ Code “mainWindow.webContents.openDevTools() น่าจะเป็นการ Debugger Window ที่นี่เราลองลบบรรทัดนี้ดูแล้วรันใหม่ ก็จะเห็นว่า Debugger หายไปแล้ว

ที่นี้มาลองดู index.html กันครับ ดูแล้วก็ไม่มีอะไรมาก

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!– All of the Node.js APIs are available in this renderer process. –>
We are using node document.write(process.versions.node),
Chromium document.write(process.versions.chrome),
and Electron document.write(process.versions.electron).
</body>

// You can also require other files to run in this process
require(‘./renderer.js’)

</html>