Mengenal Electron: Desktop App pakai HTML & JS

Kalau kamu udah bisa bikin halaman web, sebenarnya kamu udah pegang modal buat bikin desktop app juga. Serius. Electron itu framework yang bikin kamu bisa bangun aplikasi desktop cross-platform pakai HTML, CSS, dan JavaScript yang persis sama kayak yang kamu pakai di browser. Aplikasi sekelas Visual Studio Code, Slack, dan Discord itu semuanya dibangun pakai Electron. Nah, di sini kita bakal kupas cara kerjanya sekalian bikin app pertama kamu.

Apa Itu Electron?

Intinya Electron nggabungin dua teknologi gede: Chromium (mesin yang jalanin Google Chrome) dan Node.js (runtime JavaScript yang jalan di luar browser). Chromium yang ngurusin tampilan antarmuka, sementara Node.js yang ngasih akses ke sistem operasi — kayak baca file, buka jendela, atau manggil API.

Hasilnya? Satu kode bisa kamu bungkus jadi aplikasi buat Windows, macOS, dan Linux sekaligus. Kamu nggak perlu belajar bahasa baru kayak C++ atau Swift cuma buat bikin desktop app.

Dua Proses yang Wajib Kamu Paham

Konsep paling dasar di Electron itu pemisahan antara main process dan renderer process. Bagian ini wajib kamu pahami dulu sebelum nulis kode, soalnya nyambung ke mana-mana nanti.

Main process: satu proses utama yang jalanin Node.js secara penuh. Tugasnya bikin jendela aplikasi, ngatur menu, dan ngakses sistem operasi. File entry-nya biasanya dikasih nama main.js.
Renderer process: tiap jendela punya satu renderer, yang pada dasarnya cuma halaman web biasa. Di sinilah HTML dan CSS kamu ditampilin.

Dua proses ini sengaja nggak bisa saling manggil secara langsung, demi keamanan. Jadi komunikasinya lewat jembatan bernama IPC (Inter-Process Communication), dibantu sama yang namanya preload script.

Nyiapin Proyek Pertama

Pastikan dulu Node.js udah kepasang di komputer kamu. Kalau kamu masih baru banget sama JavaScript, mending baca dulu belajar JavaScript dasar untuk pemula biar nanti nggak bingung.

Bikin folder baru, terus inisialisasi proyeknya:

mkdir aplikasi-pertama
cd aplikasi-pertama
npm init -y
npm install --save-dev electron

Buka file package.json, ubah bagian main, terus tambahin skrip start:

{
  "name": "aplikasi-pertama",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Bikin File Main

File ini ibarat otaknya aplikasi. Tugasnya bikin jendela dan muat halaman HTML.

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");

function buatJendela() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

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

app.whenReady().then(() => {
  buatJendela();

  // Di macOS, buat jendela baru saat ikon diklik
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) buatJendela();
  });
});

// Keluar saat semua jendela ditutup, kecuali di macOS
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

Bikin Tampilan HTML

Bikin file index.html. Isinya sama persis kayak halaman web biasa, nggak ada yang aneh-aneh.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Aplikasi Pertamaku</title>
  </head>
  <body>
    <h1>Halo dari Electron</h1>
    <p id="versi"></p>
    <script>
      document.getElementById("versi").textContent =
        "Versi Node: " + window.api.versiNode();
    </script>
  </body>
</html>

Jembatani Pakai Preload

Demi keamanan, renderer nggak boleh ngakses Node.js secara langsung. Makanya kita cuma ekspos beberapa fungsi terbatas lewat preload script.

// preload.js
const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("api", {
  versiNode: () => process.versions.node,
});

Dengan contextBridge, cuma fungsi yang kamu izinin yang bisa dipanggil dari halaman. Ini penting banget buat nyegah kode jahat di halaman web ngobrak-abrik seluruh sistem kamu.

Jalanin Aplikasinya

Sekarang tinggal jalanin:

npm start

Bakal muncul satu jendela desktop yang nampilin tulisan "Halo dari Electron" plus versi Node yang lagi jalan. Selamat, kamu baru aja bikin desktop app pertama kamu!

Kelebihan dan Kekurangan

Electron emang praktis, tapi kamu tetap perlu tahu trade-off-nya biar nggak kaget di tengah jalan.

Kelebihan:

Satu basis kode langsung jalan di tiga sistem operasi.
Modalnya cuma skill web yang kemungkinan udah kamu kuasai.
Ekosistem npm yang luas banget.

Kekurangan:

Ukuran aplikasinya lumayan gede, soalnya bawa Chromium sendiri.
Konsumsi memorinya lebih boros dibanding aplikasi native.

Tapi buat banyak kasus, kepraktisan waktu ngembangin jauh lebih berharga ketimbang selisih ukuran file tadi.

FAQ

Apakah Electron gratis?

Gratis, kok. Electron itu open source di bawah lisensi MIT, jadi kamu bebas pakai buat proyek pribadi maupun komersial.

Apakah saya wajib pakai framework seperti React?

Nggak wajib sama sekali. Electron kan cuma nampilin halaman web, jadi kamu bebas pakai HTML polos kayak contoh di atas, atau nambahin React, Vue, dan Svelte kalau emang butuh.

Bagaimana cara membagikan aplikasi ke pengguna lain?

Kamu perlu mem-package aplikasinya jadi installer dulu. Bahasan yang satu ini kita pisah di cara package & distribusi aplikasi Electron.

Penutup

Electron nurunin tembok yang dulu misahin developer web dari dunia desktop app. Begitu kamu ngerti main process, renderer, dan preload, sebenarnya kamu udah pegang fondasi yang cukup buat bikin aplikasi yang beneran serius.

Satu tips praktis: selalu mulai dengan nodeIntegration dimatiin dan contextIsolation diaktifin (dua-duanya udah jadi default di Electron modern, kok). Kebiasaan kecil ini yang bakal jagain aplikasi kamu tetap aman sejak awal.

Mengenal Electron: Bikin Aplikasi Desktop dengan HTML & JS