การตั้งค่าสำหรับ Electron บน Windows

หลังจากอยู่บนสวรรค์มานานใช้งาน electron บน Mac มานาน พอมาเจอ windows ยิ่งกว่านรก ฮ่าๆๆ
เพราะการตั้งค่าต่างๆ ต่างกันนิดนึง แต่เล่นงมไปหลายวันเลย วันนี้เลยมาแชร์ เพื่อจะช่วยให้คนอื่นๆ ไม่ต้องไปผ่านทางแสนโหดร้ายแบบนั้นอีก

0 ติดตั้ง python 2.7 cmd แบบ admin
1  npm install --global --production windows-build-tools ติดตั้ง windows-build-tools  ของ windows

 จะช่วยแก้ปัญหา ติดตั้งไม่ได้ buffertools 

2 พอลงเสร็จแล้วก็ลอง npm install หรือ npm i

3 หากเจอ error ประมาณ

Uncaught Error: A dynamic link library (DLL) initialization routine failed.

แสดงว่าเราต้อง rebuild  native module 

npm i -g node-gyp

ติดตั้ง electron-rebuild  ด้วยคำสั่ง
 npm i -g electron-rebuild
แล้วสั่ง

electron-rebuild

 npm install electron-prebuilt --save-dev 

//// เพิ่มเติมสำหรับปัญหา buffertool แต่โดยปกติ ใช้ electron-rebuild  ก็พอ
electron-rebuild -f -w ./node_modules/buffertool

Electron : Cross-Platform Desktop App การตั้งค่าเบื้องต้น

 การตั้งค่าเบื้องต้น

สำหรับคนที่อยากจะลองใช้ได้เลยสามารถ git clone มาได้ที่

git clone https://github.com/electron/electron-quick-start

แล้วใช้ คำสั่ง npm install && npm start เพื่อลองเปิดโปรแกรม

หน้าตาเริ่มต้นของ Electron

หรือถ้าใครชอบท่ายากจะเริ่มต้นจาก npm init ก็เชิญทางนี้ได้เลย

1  npm init 

จะตั้งค่าเริ่มต้นโปรเจคให้จะกด Enter รั่วๆ เอาค่าเริ่มต้น หรือแก้ไขได้ตามใจ แล้วสดได้ก็พิม yes ยืนยันการตั้งค่าให้มัน 

ไฟล์ package.json ที่ได้มาหลังจากใช้คำสั่ง npm init

2 npm install electron --save-dev 

ติดตั้ง elctron เข้าในโปรเจค

สังเกตว่าจะมี devDependencies electron เพิ่มเข้ามา

"devDependencies": {

"electron": "^1.6.11"

}







3 npm install electron -g 

เพื่มติดตั้ง electron ในเครื่องเราเพื่อจะให้เรียกใช้คำสั่งต่างๆ ผ่าน command-line ได้

4 สร้าง index.js ขึ้นมา

const electron = require('electron')

// Module to control application life.

const app = electron.app

// Module to create native browser window.

const BrowserWindow = electron.BrowserWindow

const path = require('path')

const url = require('url')

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let mainWindow

function createWindow () {

// Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))

// 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

})

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', function () {

// On OS X it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', function () {

// On OS X it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (mainWindow === null) {

createWindow()

}

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

5 ตามด้วย index.html อยากโชว์อะไรแก่ชาวโลกด้วยภาษา html ก็จัดเลย



6 electron .
ลองรัน app ขึ้นมา

โปรเจคแรกปรากฏตัวแล้ว!!!

7 เพิ่มความเท่อีกนิด ไปสร้าง command start ไว้ใน package.json จะได้เรียกใช้ง่ายๆ บอกเลยต่อไปจะได้ทำแบบนี้อีกเยอะ เพราะเราต้องเรียกคำสั่งอีกมาก

8 ต่อไปจะเป็นการ pack โปรแกรมออกมา จริงๆก็มีหลายวิธี ตอนนี้เสนอวิธีหนึ่งคือการใช้ electron-packer

npm install electron-packager --save-dev

ตามด้วย

npm install electron-packager -g

ถ้าสุดก็เรียกใช้คำสั่ง electron-packager .

ก็จะได้โปรเจคที่ build ออกมาเรียบร้อยแล้ว

จบแล้วจ้าาาาา !!