Bangun Aplikasi Desktop dengan Electron: 3 Proyek Praktis JavaScript
Daftar Isi
- Pengantar Electron dan Aplikasi Desktop
- Persiapan Lingkungan Pengembangan
- Membuat Proyek Electron Pertama
- Memahami Struktur Proyek Electron
- Proyek 1: Aplikasi To-Do List Sederhana
- Proyek 2: Aplikasi Catatan dengan Penyimpanan Lokal
- Proyek 3: Pemutar Musik Desktop
- Interaksi Main dan Renderer Process
- Manajemen Jendela dan Menu
- Akses File System dan Penyimpanan
- Debugging dan Developer Tools
- Packaging dan Distribusi Aplikasi
- Best Practices dalam Pengembangan Electron
- Sumber Belajar dan Contoh Source Code
1. Pengantar Electron dan Aplikasi Desktop
Electron adalah framework open-source yang memungkinkan Anda membangun aplikasi desktop cross-platform menggunakan teknologi web seperti JavaScript, HTML, dan CSS.
Dengan Electron, Anda dapat membuat aplikasi desktop yang berjalan di Windows, macOS, dan Linux dengan basis kode yang sama.
2. Persiapan Lingkungan Pengembangan
Pastikan Anda sudah menyiapkan:
- Node.js dan npm versi terbaru (nodejs.org).
- Editor kode seperti Visual Studio Code.
- Terminal atau command prompt untuk menjalankan perintah.
3. Membuat Proyek Electron Pertama
Ikuti langkah berikut untuk membuat aplikasi Electron sederhana:
- Buat folder proyek dan inisialisasi npm:
mkdir my-electron-app cd my-electron-app npm init -y
- Install Electron sebagai dev dependency:
npm install electron --save-dev
- Buat file
main.jssebagai entry point aplikasi:const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, }); win.loadFile('index.html'); } app.whenReady().then(createWindow); - Buat file
index.htmldengan konten sederhana:<!DOCTYPE html> <html> <head> <title>My Electron App</title> </head> <body> <h1>Halo, Electron!</h1> </body> </html> - Tambahkan script start di
package.json:"scripts": { "start": "electron ." } - Jalankan aplikasi dengan perintah:
npm start
4. Memahami Struktur Proyek Electron
Struktur proyek Electron sederhana biasanya terdiri dari:
main.js- file utama yang menjalankan proses utama (main process).index.html- file HTML yang ditampilkan di jendela aplikasi (renderer process).package.json- konfigurasi proyek dan script npm.assets/- folder untuk menyimpan gambar, ikon, dan file statis lainnya.
5. Proyek 1: Aplikasi To-Do List Sederhana
Buat aplikasi to-do list yang memungkinkan pengguna menambah, menghapus, dan menandai tugas selesai.
Langkah 1: Setup Proyek
Buat folder proyek baru dan inisialisasi npm, lalu install Electron.
Langkah 2: Buat File main.js
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 400,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
Langkah 3: Buat File index.html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
ul { list-style: none; padding: 0; }
li { padding: 8px 0; }
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h1>To-Do List</h1>
<input id="taskInput" type="text" placeholder="Tambah tugas..." />
<button onclick="addTask()">Tambah</button>
<ul id="taskList"></ul>
<script>
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
function addTask() {
const taskText = taskInput.value.trim();
if (!taskText) return;
const li = document.createElement('li');
li.textContent = taskText;
li.onclick = () => li.classList.toggle('done');
li.ondblclick = () => li.remove();
taskList.appendChild(li);
taskInput.value = '';
}
</script>
</body>
</html>
Klik tombol "Tambah" untuk menambah tugas, klik sekali untuk menandai selesai, dan klik dua kali untuk menghapus.
6. Proyek 2: Aplikasi Catatan dengan Penyimpanan Lokal
Buat aplikasi catatan yang menyimpan data di localStorage agar data tetap ada saat aplikasi ditutup.
Langkah 1: Setup Proyek
Gunakan struktur proyek seperti proyek pertama, tambahkan script untuk menyimpan dan mengambil data dari localStorage.
Langkah 2: Modifikasi index.html
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Catatan</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
ul { list-style: none; padding: 0; }
li { padding: 8px 0; }
</style>
</head>
<body>
<h1>Catatan</h1>
<textarea id="noteInput" rows="5" cols="30" placeholder="Tulis catatan..."></textarea>
<button onclick="saveNote()">Simpan</button>
<h2>Catatan Tersimpan</h2>
<ul id="noteList"></ul>
<script>
const noteInput = document.getElementById('noteInput');
const noteList = document.getElementById('noteList');
function saveNote() {
const note = noteInput.value.trim();
if (!note) return;
let notes = JSON.parse(localStorage.getItem('notes') || '[]');
notes.push(note);
localStorage.setItem('notes', JSON.stringify(notes));
noteInput.value = '';
renderNotes();
}
function renderNotes() {
let notes = JSON.parse(localStorage.getItem('notes') || '[]');
noteList.innerHTML = '';
notes.forEach((note, index) => {
const li = document.createElement('li');
li.textContent = note;
li.onclick = () => {
notes.splice(index, 1);
localStorage.setItem('notes', JSON.stringify(notes));
renderNotes();
};
noteList.appendChild(li);
});
}
renderNotes();
</script>
</body>
</html>
Klik tombol "Simpan" untuk menambah catatan, klik catatan untuk menghapusnya.
7. Proyek 3: Pemutar Musik Desktop
Buat aplikasi pemutar musik sederhana dengan Electron yang dapat memutar file audio lokal.
Langkah 1: Setup Proyek
Buat proyek Electron baru dan siapkan file utama.
Langkah 2: Buat File main.js
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
Langkah 3: Buat File index.html
<!DOCTYPE html>
<html>
<head>
<title>Pemutar Musik</title>
</head>
<body>
<h1>Pemutar Musik</h1>
<input type="file" id="audioFile" accept="audio/*" />
<audio id="audioPlayer" controls></audio>
<script>
const audioFile = document.getElementById('audioFile');
const audioPlayer = document.getElementById('audioPlayer');
audioFile.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
audioPlayer.src = url;
audioPlayer.play();
}
});
</script>
</body>
</html>
Pilih file audio dari komputer Anda dan mainkan dengan pemutar musik sederhana ini.
8. Interaksi Main dan Renderer Process
Electron memiliki dua proses utama: main process yang mengatur jendela dan renderer process yang menjalankan UI. Komunikasi antar proses menggunakan IPC.
Contoh IPC
// main.js
const { ipcMain } = require('electron');
ipcMain.on('ping', (event) => {
event.reply('pong');
});
// renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.send('ping');
ipcRenderer.on('pong', () => {
console.log('Pong diterima dari main process');
});
9. Manajemen Jendela dan Menu
Pelajari cara membuat dan mengatur jendela aplikasi serta menambahkan menu kustom.
10. Akses File System dan Penyimpanan
Gunakan modul Node.js seperti fs untuk membaca dan menulis file lokal dari aplikasi Electron.
11. Debugging dan Developer Tools
Gunakan DevTools Chrome dan fitur debugging Electron untuk memeriksa dan memperbaiki aplikasi.
12. Packaging dan Distribusi Aplikasi
Pelajari cara mengemas aplikasi Electron menjadi installer untuk Windows, macOS, dan Linux menggunakan Electron Builder atau Electron Forge.
13. Best Practices dalam Pengembangan Electron
- Pisahkan logika main dan renderer dengan jelas.
- Gunakan IPC dengan aman untuk komunikasi antar proses.
- Optimalkan performa dengan preload scripts dan context isolation.
- Jaga keamanan dengan menghindari penggunaan nodeIntegration di renderer.
14. Sumber Belajar dan Contoh Source Code
Berikut beberapa sumber belajar dan channel yang sangat membantu untuk menguasai Electron dan pengembangan aplikasi desktop dengan JavaScript: