Tutorial Belajar Membuat Aplikasi Desktop Cross Platform Dengan Nodejs dan Electron js

by | Oct 11, 2022 | Electronjs, Nodejs

Saat ini banyak sekali bermunculaan cara membuat sofware aplikasi dengan cara instant. Tidak perlu coding dengan bahasa aslinya. Seperti ketka kita membuat aplikasi android, kita bisa menggunakan bahasa bahasa lain seperti html dan javascript dengan bantuan phonegap ,ionic , ataupun cordova.

Kali ini kami akan mencoba membuat sofware cross platform yang bisa di jalankan di windows, linux maupun mac os dengan menggunakan electronjs. Enak bukan? satu coding bisa di jalankan di tiga os. Enaknya lagi jika anda sudah megnenal javascript dan html, layout atau interface dari electron js adalah dengan html file.

Apa itu electron js?

Kalau di lihat dari basic nya, electron js sendiri adalah menggunakan 2 dukungan yaitu menggunakan chromium sebagai antarmukanya dan node.js sebagai corenya. Sehingga aplikasi kita ini berjalan di browser atau dengan kata lain web programming akan tetapi bisa berjalan di server kita. Kelebihanya adalah jelas sofware kita akan berinteraksi dengan PC kita. Berbeda dengan jika kita menjalankan website, maka aplikasi kita berhubungan dengan servernya.

Ok tanpa basi basi mari kita langsung mencoba untuk mempraktekanya. Akan tetapi terlebih dahulu kita install sofware/ componen yang dibutuhkan

Install NodeJS

Tahap pertama yang harus kita lakukan adalah install nodejs. Anda bisa langsung menuju ke https://nodejs.org/en/ . Sesuaikan dengan os yang rekan rekan miliki. kali ini saya menggunakan windows, sehingga saya akan memilih nodejs yang di install di windows.

Untuk menginstalnya sangat mudah. Anda tinggal download saja installernya, kemudian anda install. Anda tinggal next saja semua instruksi yang ada. Jika anda masih kesulitan dalam menginstall nya silahkan lihat video tutorial yang ada di youtube ini. https://www.youtube.com/watch?v=2tYG5N1Mc8w

Persiapan Pembuatan Aplikasi

      • Tahap pertama adalah salahkan anda membuat dulu sebuah directory untuk bekerja. semisal anda akan membuat projectnya di C:\projectpertama
      • Setelah itu anda buka comand promtnya. setelah itu silahkan reken rekan semua masuk ke direktory C:\projectpertama  Caranya adalah dengan ketikan cd projectpertama
      • Setelah anda masuk ke dalam folder project pertama sekarang keitkan perintah npm init  C:\projectpertama>npm init
      • Setelah itu isikan data datnya. yang perlu anda isi adalah pada bagian  package name , Author silahkan di isi sesuai dengan keinginan anda yang lain bisa di tinggalkan.
      • Setelah itu anda harus mengiinstal electron js package dengan perintah berikut npm install electron -save-dev  C:\projectpertama>npm install electron –save-dev
      • Setelah itu buka file pakcage.json denga text editor anda  kemudian cari di bagian script, ditambahkan dengan “start”: “electron .”

Tahap Koding

Setelah itu anda bisa membuat file main.js , preload.js dan file index.html 

File main.js bisa anda isikan seperti contoh di bawah ini.

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

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

app.whenReady().then(() = > ;{
  createWindow()
  //Untuk Mac os perlu melakukan create Window saat active
  app.on('activate', () = > ;{
    if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
    }
  })
})

app.on('window-all-closed', () = > ;{
  //Selain macc os perlu memanggil method quit untuk benar benar close aplikasi
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Dalam code diatas kita akan melihat ada parameter width dan height, itu bisa kita set sesuai dengan ukuran windows yang teman teman inginkan. Jika ingin memperbesar, tinggal tambah saja . Dan apa bila ingin memperkecil rekan rekan tinggal kurangi ukuranya.

Dan disana kita meilhat da kode pathname: path.join(__dirname, ‘index.html’)  maka kita harus membikin file index.html untuk menampilkan interface form aplikasi yang akan kita buat. File index.html bisa rekan rekan sesuaikan isinya. Anda bisa menggunkan nya dengan bootstrap dan framework lainya. Jika anda ingin standar, maka anda bisa menuliskan html standar seperti kode dibawan ini.

Code untuk preload.js


window.addEventListener('DOMContentLoaded', () = > {
  const replaceText = (selector, text) = > {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

Index.html

Setelah semuanya selesai , anda bisa menjalankan script diatas dengan cara mengetikan di cmd promt dengan perintah npm start C:\projectpertama>npm start

Gimana sobat ? apakah sofware anda berhasil di jalankan, silahkan anda mencobanya sendiri ya. semoga berhasil.

Browser Window Property / Customize Window

Browser window properti digunakan untuk mengatur tampilan dari window. Kita bisa mengcustumize tampilan dari winod sesuai dengan keinginan kita.
Berikut beberapa pengaturan yang bisa kita gunakan untuk windows
Menghilangkan frame window

const win = new BrowserWindow({ frame: false })

Custom Style Dari title bar

const win = new BrowserWindow({ titleBarStyle: 'hidden' })

Mengatur overlay

const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: true
})

 

const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

Memuat Window Transparant

const win = new BrowserWindow({ transparent: true })

Contoh Proerti lain : backgroundColor, autoHideMenuBar, alwaysOnTop ,movable , resizable , movable , closable , fullscreenable, webPreferences .

Selain kita mengatur lewat properti yang ada di browser window, kita juga bisa mengcustomize pengaturan window denganmenggunakan method diluar property.

win.setBackgroundColor("#000")
win.setAutoHideMenuBar(true)
win.setAlwaysOnTop(true)
win.setMovable(true)
win.setResizable(true)

Selain menggunakan 2 cara itu, kita juga bisa mengganti / mencustomize property dengan menggunakan ipcrender yang akan kita bahas pada pembahasan lain.

Masih banyak properti yang bisa kita gunakn untuk pengaturan window. Untuk lebih jelas silahkan buka dokumentasinya di sini https://www.electronjs.org/de/docs/latest/api/browser-window#new-browserwindowoptions

Membuat Modal dengan Menggunakan Parent dan child windows

Di electron js, kita bisa dengan mudah membuat sebuah child window. Window tambahan selain window utama dengan memanfaatkan option parent dan child yang ada pada pengaturan browser window.
Contoh code pembuatan child window

const { BrowserWindow } = require('electron')
const windowUtama= new BrowserWindow()
const child = new BrowserWindow({ parent: windowUtama})
child.show()
top.show()

Kode diatas akan otomatis menampilkan window kedua yang diberikan variable child. Untuk menjadikan window kedua sebagai dialog / modal atau tidak bisa diklik saat child window keluar, maka kita bisa menambahkan option modal : true. Silahkan lihat contoh dibawah ini.

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
 const child = new BrowserWindow({ autoHideMenuBar:true, modal: true, parent : win , width : 400 , height : 300, resizable : false ,alwaysOnTop :true })
child.loadURL('https://github.com')
  
child.show()

Komunikasi Antara HTML dengan Main Process Dengan IPC

Tentunya kita akan butuh jembatan untuk komunikasi antara html file dengan mainproses. Didalam electron js kita bisa menggunakan IPC / Inter Process Comumunication. Bagaimana cara penggunaanya.
Pertama tama silahkan teman teman membuat button di html dan silahkan tambahkan dengan sebuah id

<button id="Connect">Konek Ke Main Process< / button>

Setelah itu kita bikin kode javascript nya dan kita letakan de bawah button tersebut
Terlebih dahulu kita import ipcRender untuk dibagian html

const ipcRenderer = require('electron').ipcRenderer;

Agar bisa mengimport module yang ada do core nodejs, maka kita perlu menambahkan option di webPreferences pada main prosesnya

nodeIntegration: true,
contextIsolation : false,

Untuk kode javascript dari file htmlnya kurang lebih sebagai berikut

const ipcRenderer = require('electron').ipcRenderer;

const changeButton = document.getElementById('Connect');
changeButton.addEventListener('click',() = > {
    ipcRenderer.send('konek');
});

Di dalam kode javascript diatas ada kode ipcRenderer.send(‘konek’) . Konek bisa anda ganti sesuai dengan keinginan saja. karena itu hanya sebagai penanda / label antar komunikasi.

Dibagian main proses kita perlu mengimpor ipcMain

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

Kemudian kita bisa menangkap request dari ipcRenderer dengan menggunakakn

ipcMain.on("konek",() = > {
  console.log("konek")
})

Kita juga bisa mempasing argument dari ipcRenderer dengan code berikut

const ipcRenderer = require('electron').ipcRenderer;

const changeButton = document.getElementById('Connect');
changeButton.addEventListener('click',() = > {
    let args ="Data yang di kirim"
    ipcRenderer.send('konek',args );
});

Dan untuk menerima argument tersebut kita bisa menerimanya dengan ipcMain seperti kode berikut

ipcMain.on("konek",(even,args) = > {
  console.log(args)
})

Bagaiman jika kita butuh callback atau laporan kalau proses komunikasi antara html dan main proses selesai?

Maka pada ipc main kita perlu mengirimkan balik sebuah data ke html proses dengan kode seperti dibawah ini

ipcMain.on("konek",(even,args) = > {
  console.log(args)
  even.sender.send("onkonek" , "proses sudah terkoneksi")
})

Dan untuk menerimanya, kita tambahakan kode baru

ipcRenderer.on("onkonek", function (even, args) { 
	alert(args)
});

Anda juga bisa menggunakan Asnyc wait dan method untuk ipcRender yang awalnya menggunakan send diganti menjadi invoke . Kode bisa anda lihat di bawah ini.

buttonConnect.addEventListener('click',async() = > {
	const x = await ipcRenderer.invoke("konek"  ,"#000")
	alert(x)
})

Dibagian main juga ada perbedaan. Awalnya menggunakan ipcMain.on , kita ganti dengan menggunakan  . Dan kita return value yang akan di passing ke html

ipcMain.handle("konek", (event,args1) = > {
   return "foo"
})

Instance Events , Method dan Property

Kali ini kita kembali ke bahasan di browser window dan akan membahas tentang instance event , Static Method , Instance Methode dan instance property. kita mulai dari instance Events.

Instance Events

Ada banyak sekali instance events di electron. Diantaranya adalah . page-title-updated , closed , resized,moved, maximize dan lain lain. Dan untuk lebih detail tentang instance event ini, silahkan kunjungi https://www.electronjs.org/de/docs/latest/api/browser-window#instance-events. Kemudian bagai mana cara penggunaan instance event?

    win.on('resized',() = > {
        console.log("window berubah ukurannya")
    })

    win.on('close', function(e) {
        // import dialog terlebih dahulu pada module electron
        const choice = dialog.showMessageBoxSync(this,
        {
            type: 'question', 
            buttons: ['Yes', 'No'],
            title: 'Confirm',
            message: 'Are you sure you want to quit?'
        });
        if (choice === 1) {
            e.preventDefault();
        }
    });

Stataic Method

Ada beberapa static method yang ada di browser window.  BrowserWindow.getAllWindows() , BrowserWindow.getFocusedWindow() , BrowserWindow.fromId(id) , BrowserWindow.fromWebContents(webContents) , BrowserWindow.fromBrowserView(browserView) . Untuk keterangan lebih jelas bisa lihat di halaman ini https://www.electronjs.org/de/docs/latest/api/browser-window#static-methods.

Contoh penggunaan getAllWindows() / mendapatkan semua window yang aktif. output berupa array

const window = BrowserWindow.getAllWindows()
console.log(window[0].title)

Contoh penggunaan getFocusedWindow() / mendapatkan window yang sedang fokus

const window = BrowserWindow.getFocusedWindow()
console.log(window.id)

Contoh penggunaan fromId(id) / mendapatkan window berdasarkan id

const window = BrowserWindow.fromId(1)
console.log(window.title)

Instance Properties dan Instance Method

Untuk menggunakan Instance Properties dan Instance Method, kita tiggal panggi variable dari browse window, kemudian panggil properties atau method. Contoh penggunaan adalah

const win = new BrowserWindow({ height: 600, width: 600 })
win.namaproperties()
win.namamethod()

Untuk lebih jelas tentang properties silahkan kunjungi https://www.electronjs.org/de/docs/latest/api/browser-window#instance-properties
Untuk lebih jelas tentang method silahkan kunjungi https://www.electronjs.org/de/docs/latest/api/browser-window#instance-methods

App Event

Contoh app event yang bisa kita gunakan di electron js dianaranya adalah ready , window-all-closed ,browser-window-blur , browser-window-focus . Untuk detail semua event di app electron bisa lihat di https://www.electronjs.org/docs/latest/api/app#events.

Cara penggunaan app event di electron adalah

app.on('NamaEvent',() = > ){
   console.log("NamaEvent")
})

App Method

Contoh app method yang bisa di gunakan dalam electron js adalah app.quit() , app.exit() , app.relaunch() , app.relaunch() , app.whenReady() , app.focus() . Untuk detail tentang semua method yang ada dalam app bisa lihat di dokumentasi nya https://www.electronjs.org/docs/latest/api/app#methods

Membuat Aplication Menu

Untuk membuat menu, terlebih dahulu teman teman semua mengimport module menu di electron

const Menu = require('electron')

Dan untuk membuat menu teman teman semua bisa menggunakan Static method buildFromTemplate dan setApplicationMenu Contoh cara membuat menu

const template =[
	{ 
		label : 'demo',
		click : function(){
		  console.log("Demo")
		}
	  
	}
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Contoh menu untuk membuka browser dan masuk ke url tertentu

const template =[
   { 
	label : 'demo',
	click : async function(){
            const { shell } = require('electron')
            await shell.openExternal('https://riffamedia.com')
	}
	  
   }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Selain itu electron juga menyediakan role yang langsung bisa kita pakai di projek

Role untuk semua os

{ type: 'separator'},
{ role: 'undo' },
{ role: 'redo' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },     
{ role: 'delete' },
{ role: 'selectAll' }     
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ role: 'togglefullscreen' }
{ role: 'minimize' },
{ role: 'zoom' },
{ role: 'close' }

Role khusus untuk mac. Dan untuk menggunakan role ini anda bisa mendeteksi apakah os adalah mac dengan kode berikut

const isMac = process.platform === 'darwin'
isMac ? { role: 'close' } : { role: 'quit' }
...isMac ? [{ role: 'close' }] : [{ role: 'quit' }]

{ type: 'separator' },
{ role: 'about' },
{ role: 'services' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ role: 'quit' }
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },  
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
{ role: 'front' },
{ role: 'window' }

Membuat Context Menu

Membuat menu di electron kita menggunakan method dan cara yang berbeda. Berikut adalah contoh code untuk bikin context menu.
CARA PERTAMA
Pertama tama kita import dulu sub module MenuItem dan juga bikin dulu menu baru dan saya masukan kedalam sebuah variable ctxmenu

const MenuItem= require('electron')

const ctxmenu = new Menu()

Kemudian kita bisa menggunakan method insert maupun apend untuk menambahkan menu. dan untuk fungsi dalam click masih sama penulisanya saat kita membikin aplication menu

ctxmenu.append(new MenuItem({
	id : 1,
	label : "Context Menu",
	click : ()=>{
		console.log(ctxmenu.getMenuItemById(2).label)
	}
}))
ctxmenu.insert(1,new MenuItem({
	id : 2,
	label : "Insert Menu"
}))
ctxmenu.append(new MenuItem({
	id : 3,
	label : "Close Menu",
	click : ()=>{
		ctxmenu.closePopup(win)
	}
}))

ctxmenu.append(new MenuItem({
	id : 4,
	label : "Get Aplication Menu",
	click : ()=>{
	  console.log( Menu.getApplicationMenu())
	}
}))
ctxmenu.append(new MenuItem({
	id : 5,
	label : "Menu Items",
	click : ()=>{
	  console.log( ctxmenu.items[0].label)
	}
}))
ctxmenu.append(new MenuItem({
	id : 6,
	label : "Menu Checkboxxxxx",
	type : 'checkbox',
	checked : true,
	click : ()=>{
	  console.log( "Check Box")
	}
}))

Setelah menu kita tuliskan semua, kita bisa menampilkan menu tersebut degan cara berikut ini

win.webContents.on('context-menu',function(e,params){
  ctxmenu.popup(win,params.x,params.y)
})

Selain event diatas kita juga bisa menambahkan 2 method saat menu akan di buka maupun menua akan di tutup

ctxmenu.on('menu-will-show',()=>{
	console.log("menu will show")
})
ctxmenu.on('menu-will-close',()=>{
	console.log("menu will close")
})

CARA KEDUA
Selain cara diatas , kita bisa membuat context menu dengan IPC. jadi kode kita letakkan di main dan juga di render . Adapun kodenya adalah sebagai berikut
Kode untuk index.html / render

window.addEventListener('contextmenu', (e) => {
	e.preventDefault()
	ipcRenderer.send('show-context-menu')
})

Kode untuk main.js

ipcMain.on('show-context-menu', (event) => {
	const template = [
	  {
		label: 'Menu Item 1',
		click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
	  },
	  { type: 'separator' },
	  { label: 'Menu Item 2', type: 'checkbox', checked: true }
	]
	const menu = Menu.buildFromTemplate(template)
	menu.popup(BrowserWindow.fromWebContents(event.sender))
})

Karena di main.js terdapat method send yang di kirim ke render js, maka di index.html nya kita berikan event untuk ipcrendernya

ipcRenderer.on('context-menu-command', (e, command) => {
	alert(command)
})

Tahap Compile Untuk Distribusi

Setelah semua berjalan dengan baik, saatnya kita compile project kita agar bisa di distribusikan ke orang lain. Tentunya akan repot jika kita share dalam bentuk code. Pengguna harus installnodejs dan lain sebagainya. Untuk itu mari kita langsung kita praktekkan bagaimana cara mendistribusikannya.

Pertama tama kita install dulu package untuk compile yaitu electron-packager dengan perintah npm install –save-dev electron-packager . Setelah itu kita jalankan perintah untuk mencompilenya

npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  • <sourcedir> adalah lokasi project kita berada
  • <appname> disikan dengan nama aplikasi kita, yang bisa kita lihat di package.json
  • <platform> bisa kita isi linux, darwin ( mac os ) dan win32 ( windows )
  • <arch> adalah arsitekturnya. Bisa kita isi dengan ia32  untuk 32 bit dan x64 untuk 64 bit
  • Jika kita ingin mengcompile ke semua arsitektur, maka kita bisa menggunakan –platform=all –arch=all

Dalam kasus ini command promt saya berada pada project ini. Project dengan nama halloword dan platform windows untuk 64 bit. Jadi saya mengeksekusinya dengan perintah

npx electron-packager ./ “halloword” –platform=win32 –arch=x64

 

Ok sobat semuanya silahkan mencoba untuk membuat aplikasi anda sendiri dengan electron js. Semoga bermanfaat