Aplikasi Sederhana Hello World dengan Electronjs

Hello Word dengan electron? yup, sobat semua, masih sehat dan bisa tersenyum kan? semoga terus makin pintar ya… hehe. Bagi kamu yang udah baca artikel sebelumnya tentang program yang bisa dibangun di lintas platform dengan electron , pasti udah gak sabar ya pengen coba gimana proses buat aplikasi sederhananya?! Yuk kita coba!

Nah, kita akan buat aplikasi Hello Word. Disini kita akan belajar proses apa aja yang dibutuhkan untuk mebuat suatu aplikasi yang dibangun dengan electron. Bagi sobat yang nantinya udah ngerti, mau nyoba aplikasi yang lebih muantap lagi tinggal cari aja tuh source code nya di GitHub, banyak kok.

Tahapan Membangun Aplikasi dengan Electronjs

Sebelum memasuki tahapan pembuatan aplikasi sederhana ini, pastikan sobat sekalian sudah menginstall software yang dibutuhkan ya, seperti Nodejs dengan npm nya, text editor, serta CMD yang ada di komputer sobat sekalian sudah dapat berjalan semestinya. Yuk kita mulai membuat aplikasi Hello World.

• Tahap pertama yang perlu kita lakukan adalah mengoneksikan komputer kita ke internet. Ingat ya sobat, koneksi internet kita tidak boleh terputus saat pembuatan aplikasi karena ada beberapa proses yang memerlukan koneksi internet.
• Tahap kedua buat sebuah folder misalnya di direktori C dengan nama “sederhana”.

• Tahap ketiga bukalah jendela command prompt (cmd), kemudian masuklah ke dalam folder “sederhana” yang telah kita buat di local di C tadi dengan mengetikkan cd C:\sederhana. Untuk sobat yang memakai Mac silahkan disesuaikan ya.

• Tahap keempat ketikkan C:\sederhana>npm init, kemudian enter maka akan muncul tampilan sebagai berikut :

• Tahap kelima isilah package name (sesuai nama folder), description(opsional), entry point(main.js), test command dan git repository (kosongkan aja), keywords dan author (opsional, sesuai keinginan). Kemudian klik enter maka akan muncul tampilan berikut :

• Tahap keenam klik enter sekali lagi untuk menginstal electron package, kemudian ketikkan C:\sederhana>npm install electron –save-dev enter dan tunggu proses instalasi selesai. Ingat ya sobat disini tidak boleh terputus koneksi internet, jika terputus, maka instalasi akan gagal. Berikut hasilnya :

• Tahap ketujuh lihat kembali folder “sederhana” terdapat satu buah folder dan dua buah file package JSON disana. Bukalah file package yang besarnya 1KB pada text editor, disini saya menggunakan Visual Studio Code

Pada baris ke 7 gantilah  "test": "echo \"Error: no test specified\" && exit 1"  menjadi "start": "electron ." 

• Tahap kedelapan buatlah file main.js pada folder “sederhana”, caranya terserah sobat sekalian, jika menggunakan notepad++ bisa dibuat di dalam folder dengan nama main dan extensi js. Pada Visual Studio Code bisa langsung dibuat dalam text editor. Kemudian ketikkan code berikut:

Bagi sobat yang ingin copas juga boleh disini :

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
var ipcMain = require('electron').ipcMain;
global.sharedObj = {prop1:null};
ipcMain.on('show-prop1', function(event){
   console.log(global.sharedObj.prop1);
});
let win
function createWindow() {
   win = new BrowserWindow({width: 800, height: 500, frame: true, fullscreen: false})
   win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html') ,
      protocol: 'file:',
      slashes: true
   }))
   win.webContents.openDevTools()
   win.on('closed',() => {
    win=null
   })
}
app.on('ready', createWindow)

Keterangan :

function createWindow() : Adalah perintah untuk membuat jendela, oleh karena itu pada Browser Window dibuat tinggi dan lebar jendela, sobat bisa sesuaikan dengan keinginan.

frame : true untuk menghasilkan menu pada jendela 

fullscreen : false agar jendela tidak fullscreen, sobat bisa saja ganti jadi true jika ingin menampilkan menu penuh pada layar.

pathname: path.join(__dirname, ‘index.html’) , untuk membaca file index.html yang akan kita buat. file index inilah yang akan dijalankan seperti layaknya dalam pembuatan website.

• Tahapan kesembilan buatlah file index.html pada folder yang sama dan isi code sebegai berikut:

Nah, sekarang sobat bisa menjalankan programnya melalui cmd. Masuk kembali ke cmd dan ketikkan C:\sederhana>npm start dan inilah hasilnya:

Nah, gimana sobat? sobat sekalian bisa mengedit tampilannya dari file index.html yang sudah dibuat tadi sesuai dengan tampilan yang diinginkan ya. Semoga bermanfaat. Sampai ketemu di artikel selanjutnya.