Build cross-platform

desktop apps with

JavaScript, HTML,
and CSS
Ajang Rahmat
Founder Kelas Robot Sumber Gambar: https://www.electronjs.org/
Salam kenal_
Nama : Ajang Rahmat
Kesibukan : Author Kelas Robot
: Mahasiswa Informatika UNSIA
Asal : Sumedang, Jawa Barat
Hobi : Microcontroller
: Internet of Things
: Artificial Intelligence
: AIoT

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.2
Pembahasan

1. Pengenalan ElectronJS
2. Persiapan Instalasi ElectronJS
3. Memulai ElectronJS
4. Hubungkan ke MQTT
5. Export ke .EXE

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.3
 Pengenalan

ElectronJS_

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.4
Delphi

https://www.embarcadero.com/pr
oducts/delphi

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.5
VB6

https://winworldpc.com/product/
microsoft-visual-bas/60

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.6
VB.net

https://www.contohapps.com/202
0/12/belajar-vbnet-mengenal-obj
ek-pada.html

VB.NET Tutorial
https://www.youtube.com/playlist?li
st=PLXzMpPdJyzlCrdlavWHtmUak
NTZVC36x7

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.7
Python Framework

PyQT

Tkinter

Kivy

PyGUI

https://dev.to/codesharedot/best-
python-framework-for-building-a
-desktop-application-and-gui-58n
5

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.8
ElectronJS…

“If you can build a website, you can build a

desktop app.”

Electron is a framework for creating native

applications with web technologies like JavaScript,
HTML, and CSS.
Sumber: https://www.electronjs.org/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.9
 ElectronJS…

NodeJS Chromium

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.10
 NodeJS…

Node.js® is a JavaScript runtime

built on Chrome's V8 JavaScript
engine.
Sumber: https://nodejs.org/en/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.11
 Kelebihan ElectronJS…

Sumber: https://www.electronjs.org/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.12
 Kelebihan ElectronJS…

Sumber: https://www.electronjs.org/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.13
 Persiapan Instalasi

ElectronJS_

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.14
 Download Install NodeJS

1. Download langsung dari web resmi NodeJS

https://nodejs.org/en/download/
2. Tutorial Download dan Install NodeJS
https://www.youtube.com/watch?v=qAL4Lu867cg

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.15
 Tes Instalasi NodeJS

Buka CMD / Terminal masukan perintah node --version

dan npm --version

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.16
 Download Install VSCode

1. Download langsung dari web resmi VSCode

https://code.visualstudio.com/download

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.17
 Memulai

ElectronJS_

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.18
 Membuat Project Baru

Gunakan perintah npm init -y

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.19
 Menginstall Electron

Gunakan perintah npm install electron --save-dev

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.20
 Edit package.json

{
"name": "mqtt-gui",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^20.1.1"
}
}

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.21
 buat file main.js

console.log('Hello World')

Untuk menjalankan, gunakan perintah npm start

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.22
 main.js | Import Dependencies

Tambahkan Library Electron dan path.

const { app, BrowserWindow } = require('electron')

const path = require('path')

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.23
 main.js | createWindow Function

Buat fungsi createWindow

function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('./index.html')
}

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.24
 main.js | Menjalankan Fungsi

Arrow Function untuk menjalankan fungsi

app.whenReady().then(() => {
createWindow()

app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

})

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.25
 main.js | Close Window

Arrow Function ketika Window di Close

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.26
 buat file index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.27
 Hubungkan ke

MQTT_

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.28
 Menginstall MQTT

Gunakan perintah npm install mqtt --save-dev

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.29
 buat file preload.js

const mqtt = require('mqtt')

window.mqtt = mqtt

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.30
 buat file renderer.js

const clientId = 'ardumeka08213121'

const host = 'mqtt://broker.emqx.io:1883'

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.31
 renderer.js | MQTT Option

const options = {
keepalive: 30,
clientId: clientId,
protocolId: 'MQTT',
protocolVersion: 4,
clean: true,
reconnectPeriod: 1000,
connectTimeout: 30 * 1000,
will: {
topic: 'WillMsg',
payload: 'Connection Closed abnormally..!',
qos: 0,
retain: false
},
rejectUnauthorized: false
}

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.32
 renderer.js | MQTT Connection

console.log(mqtt)
console.log('connecting mqtt client')
const client = mqtt.connect(host, options)

client.on('error', (err) => {

console.error('Connection error: ', err)
client.end()
})
client.on('reconnect', () => {
console.log('Reconnecting...')
})
client.on('connect', () => {
console.log('Client connected:' + options.clientId)
})

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.33
 renderer.js | MQTT Subscribe

client.subscribe('ardumeka/8792121/suhu', {
qos: 0
})

client.on('message', (topic, message, packet) => {

console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
})

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.34
 renderer.js | MQTT Publish

if (client.connected) {
client.publish("ardumeka/8792121/led", "LED ON", {
qos: parseInt(0, 10),
retain: false
})
console.log("LED ON Terkirim")
}

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.35
 Export to

EXE_

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.36
 Export To EXE

"scripts": {
"start": "electron .",
"package-mac": "electron-packager . --overwrite --platform=darwin
--arch=x64 --icon=assets/icons/mac/icon.icns --prune=true
--out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite
--platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true
--out=release-builds --version-string.CompanyName=CE
--version-string.FileDescription=CE --version-string.ProductName=\"Electron
Tutorial App\"",
"package-linux": "electron-packager . electron-tutorial-app --overwrite
--asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png
--prune=true --out=release-builds"
}

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.37
 Referensi_
1. https://www.security.org/home-security-systems/what-is-a-home-s
ecurity-system/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | KelasRobot.com - Hal.38