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 ต่างๆ

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

  1. เริ่มจากเข้าไปเวปหลัก http://electron.atom.io/ ก่อนเลยครับ
  2. จากนั้นลองทำตาม 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

Screen Shot 2559-06-11 at 9.55.57 AM

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

$ ./node_modules/.bin/electron .

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

Screen Shot 2559-06-11 at 10.50.34 AM

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

  • 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 หายไปแล้ว

Screen Shot 2559-06-11 at 11.01.21 AM.png

ที่นี้มาลองดู 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>

เรามาลองแก้ HTML ง่ายๆกันเพื่อทำ Contact card app เอาไว้แนะนำตัว

Screen Shot 2559-10-08 at 9.32.48 AM.png

ผลที่ได้ก็คือ

Screen Shot 2559-06-11 at 11.42.28 AM

เมื่อกดปุ่ม More Info.. จะทำการเปิด MessageBox เพื่อแสดงข้อความ

Screen Shot 2559-06-11 at 11.44.51 AM

สรุปได้ว่าเราสามารถเขียน App ที่มี ประสพการณ์แบบ Desktop ด้วย HTML/Javasctipt ได้ง่ายๆ(?) โดยใช้ Framework Electron ครับ….

13409222

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s