Framework Electron adalah sebuah kerangka kerja yang memungkinkan pengembang untuk membuat aplikasi desktop lintas platform menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Mari kita jelajahi dasar-dasar penggunaan Electron dengan contoh kode sederhana.

Apa Itu Framework Electron?

Electron menggabungkan mesin rendering Chromium untuk antarmuka pengguna aplikasi dan Node.js untuk menjalankan logika aplikasi di latar belakang. Ini memungkinkan pengembang untuk memanfaatkan kekuatan dari web modern dan juga akses langsung ke sistem operasi.

Contoh Kode Dasar

Mari kita buat aplikasi sederhana yang menampilkan jendela kosong menggunakan Electron.

 

  1. Instalasi Electron

Pastikan Anda telah menginstal Node.js. Lalu, buat folder proyek dan jalankan perintah berikut di terminal:

 
npm init -y
npm install electron

  1. Buat file main.js

 

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

  1. Buat file index.html
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Electron</title>
</head>
<body>
  <h1>Hello Electron!</h1>
</body>
</html>

  1. Tambahkan Skrip di package.json
 
"scripts": {
  "start": "electron ."
}

  1. Jalankan Aplikasi

Jalankan aplikasi dengan perintah:

 
npm start

 

Kelebihan Framework Electron

  • Lintas Platform: Aplikasi Electron dapat dijalankan di Windows, macOS, dan Linux.
  • Fleksibilitas: Memungkinkan pengembang untuk menggunakan teknologi web dan akses ke sistem operasi.
  • Komunitas yang Kuat: Dukungan kuat dari komunitas dan dokumentasi yang baik.

 

Tantangan dalam Menggunakan Electron

  • Konsumsi Memori: Aplikasi Electron cenderung memiliki konsumsi memori yang lebih besar.
  • Pembungkusan Aplikasi: Proses pembuatan paket instalasi bisa rumit.

 

Kesimpulan

Framework Electron memberikan alat yang kuat untuk membangun aplikasi desktop lintas platform dengan menggunakan teknologi web. Dengan contoh kode sederhana di atas, Anda dapat mulai menjelajahi potensi Electron dalam membangun aplikasi desktop modern.