ມາພັດທະນາ Desktop Application ດ້ວຍ Electronjs ກັນເຖາະ!

ສະບາຍດີ ນັກພັດທະນາທຸກຄົນທີ່ເຂົ້າມາອ່ານວັນນີ້ເຮົາຈະມາຮູ້ຈັກ ແລະ ໃຊ້ງານ Electronjs ທີ່ໃຊ້ພັດທະນາ cross-platform desktop application ໂດ້ຍໃຊ້ HTML, javascript ແລະ CSS ທີ່ເຮົາໃຊ້ພັດທະນາເວັບນັ້ນເອງ.

Introduction

ໃນປັດຈຸບັນ Tecnology ການພັດທະນາເວັບແມ່ນໄປໄກຢ່າງກ້າວກະໂດດເຊິ່ງມັນເຮັດໃຫ້ນັກພັດທະນາທີ່ສ້າງເວັບເປັນກໍ່ສາມາດສ້າງ mobile application ແລະ desktop application ໄດ້ເລີຍ ໂດຍບໍ່ຕ້ອງໄປສຶກສາພາສາອື່ນເພີ່ມຕື່ມຕົວຢ່າງເຊັ່ນ: Kotlin ໄວ້ສຳລັບພັດທະນາ android application, C#, java swing ພັດທະນາ Desktop application ໂດຍທີ່ application ທີ່ພັດທະນາດ້ວຍ web tecnology ນັ້ນ ເປັນ cross-platform application ນັ້ນກໍ່ຄືພັດທະນາຄັ້ງດຽວແຕ່ສາມາດນຳໄປໃຊ້ໄດ້ທັງ Android, IOS, Windows, macOs, Linux . ແລະ ໃນບົດຄວາມນີ້ຈະສະເໜີການພັດທະນາ Desktop Application ດ້ວຍ Electronjs

What is Electronjs ?

Electronjs ເປັນ framework ທີ່ເຮັດໃຫ້ນັກພັດທະນາຂຽນ cross-platform Desktop application ໂດຍໃຊ້ Javascript, HTML ແລະ CSS ເຊິ່ງ electronjs ຖືກນຳໃຊ້ແພ່ຫຼາຍໃນປັດຈຸບັນຕົວຢ່າງ application ທີ່ໃຊ້ electronjs ພັດທະນາ: Atom editor, VsCode, Slack, skype, … etc. ຈະເຫັນວ່າ application ໃຫຍ່ໆລະດັບໂລກກໍ່ໃຊ້ກັນ. ແລ້ວແບບນີ້ເຮົາຈະບໍ່ໃຊ້ໄດ້ຈັງໃດ!. ມາເລີ່ມຕົ້ນໃຊ້ກັນເລີຍ

Getting start build desktop app with electronjs

ການເລີ່ມຕົ້ນໃຊ້ງານ electronjs ງ່າຍກວ່າທີ່ທຸກຄົນຄິດໂດຍເລີ່ມຕົ້ນງ່າຍໆໂດຍສ້າງ project ຂຶ້ນມາ

$ mkdir -p electron-desktop
$ cd electron-desktop
$ npm init

ຫຼັງຈາກນັ້ນເພີ່ມ file index.html ແລະ main.js ໜ້າຕາ project ກໍ່ຈະປະມານນີ້

your-app/
 ├── package.json 
 ├── main.js 
 └── index.html

ຫຼັງຈາກນັ້ນແກ້ໄຂ package.json ໂດຍ main field ໃຫ້ກຳນົດເປັນ main.js ໜ້າຕາກໍ່ຈະປະມານນີ້

{ 
   "name": "your-app",
   "version": "0.1.0",
   "main": "main.js" 
}

install electronjs

$ npm install --save-dev electron

ເມື່ອຕິດຕັ້ງ electron ແລ້ວກໍ່ກຳນົດ script ໃນການ run application ຂອງເຮົາທີ່ package.json

{   "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {     
       "start": "electron ."   
  }
}

ຫຼັງຈາກນັ້ນກໍ່ເພີ່ມ code ລົງໄປທີ່ main.js ເຊິ່ງເປັນ file ທີ່ໃຊ້ກຳນົດໜ້າຕາຂອງ window ທີ່ເປີດ Application ຂອງເຮົາຂື້ນມານັ້ນເອງ

main.js

ພ້ອມກັນນັ້ນທີ່ index.html ກໍ່ໃຫ້ເພີ່ມ code html ແລະ css ເພື່ອກຳໜ້າຕາຂອງ desktop application ຂອງເຮົາຂຶ້ນມາໂດຍທີ່ນີ້ຈະໃຫ້ສະແດງຄຳວ່າ `Hello World!

index.html

ຫຼັງຈາກນັ້ນກໍ່ run desktop application ຂອງເຮົາຂຶ້ນມາ

$ yarn start

ຜົນທີ່ໄດ້ກໍ່ຈະປະມານນີ້

ຈະສັ່ງເກດເຫັນວ່າ desktop ທີ່ສ້າງຂຶ້ນມານັ້ນມັນກໍ່ browser ດີໆນີ້ເອງ ເພາະ electron ໃຊ້ Chromium ໃນການສ້າງ GUI ໃຫ້ກັບ application ທີ່ເຮົາສ້າງຂຶ້ນມາແຕ່ electron ເຮັດໃຫ້ເຮົາສາມາດ config Chromium GUI ໄດ້ຕາມຕ້ອງການ. ຈົນເຖິງການຕິດຕໍ່ກັບ hardware ໃນ computer ເລີຍທີດຽວ.

ສ່ວນສຳຄັນຂອງ main.js ຄື win.loadFile(“index.html”) ເປັນການບອກ electron load file index.html ຂຶ້ນມາສະແດງນັ້ນກໍ່ຄືໜ້າຕາຂອງ application ຂອງເຮົານັ້ນເອງ ນອກຈາກນີ້ແລ້ວຍັງສາມາດ load ຈາກ url ໄດ້ອີກໂດຍປ່ຽນເປັນ win.loadURL(“your_url”) ແລະ ກຳນົດບໍ່ເປີດ devtool ອອກມາສະແດງກໍ່ win.webContents.closeDevTools() ຜົນທີ່ໄດ້ກໍ່ສ່ວຍງາມຢ່າງທີ່ເຫັນ.

hello world desktop application

ສ່ວນ option ຕ່າງໆນອກຈາກນີ້ໄປຫາອ່ານໄດ້ທີ່

Documentation | Electron

ມີຫຼາຍ option ໃຫ້ເລືອກໃຊ້ງານຕາມຄວາມຕ້ອງການ .

ຈະເຫັນໄດ້ວ່າເມື່ອເຮົາພັດທະນາ web application ຂຶ້ນມາແລ້ວສາມາດ build ເປັນ desktop application ໄດ້ເລີຍໂດຍທີ່ web UI ເຮົາກໍ່ພຽງແຕ່ອອກແບບໃຫ້ເປັນ desktop component ເທົ່ານີ້ກໍ່ໃຊ້ໄດ້ແລ້ວ ງ່າຍໆບໍ່ມີຫຍັງສັບຊ້ອນ.

Export electron desktop application

ເມື່ອເຮົາພັດທະນາ Desktop application ໂດຍໃຊ້ electron ແລ້ວ . ຕໍ່ມາກໍ່ຄືການ package ໃຫ້ເປັນ installer ເພື່ອໃຫ້ສາມາດນຳໄປຕິດຕັ້ງກັບລະບົບປະຕິບັດການຕ່າງໆຄືກັບ application ທົ່ວໄປ ໂດຍໃນສ່ວນນີ້ເຮົາກໍ່ໃຊ້ electron-builder

ກຳນົດ package.json

ແກ້ໄຂ package.json ໃຫ້ຖືກຕ້ອງຕາມມາດຕະຖານຂອງມັນເສຍກ່ອນໂດຍຕ້ອງມີ filed name, version, description, `author

install electron-builder

$ yarn add electron-builder --dev

ກຳນົດ builder

ໂດຍການເພີ່ມລົງໄປທີ່ filed build ຂອງ package.json ພ້ອມທັງກຳນົດ script run ດັ່ງລຸ່ມນີ້

ຫຼັງຈາກນັ້ນກໍ່ສັ່ງ build ໄດ້ເລີຍ

$ yarn dist

ເຮົາກໍ່ຈະໄດ້ installer ຄົບຕາມທີ່ກຳນົດໄວ້! ງ່າຍບໍ່ຫລ່ະ!? ສຳລັບ option ຕ່າງໆກໍ່ໄປຫາອ່ານໄດ້ທີ່

Common Configuration - electron-builder

ມາຮອດຈຸດນີ້ກໍ່ເປັນອັນວ່າຜູ້ອ່ານຮູ້ແລ້ວວ່າຈະໄປທາງໃດຕໍ່ . ນີ້ຄືຈຸດປະສົງຂອງບົດຄວາມນີ້ ຖ້າມີຄຳຖາມສາມາດ commant ສອບຖາມກັນເຂົ້າມາໄດ້ . ຂອບໃຈທີ່ອ່ານໄວ້ເຈີກັນໃນບົດຄວາມຕໍ່ໄປ . ໄປແລ້ວ!!!………..