NavigasiBangun aplikasi desktop dengan Electron
Dalam beberapa tahun terakhir, pengembangan aplikasi desktop semakin mudah dilakukan berkat hadirnya berbagai framework modern. Salah satu yang populer adalah Electron, sebuah framework open-source yang memungkinkan developer membuat aplikasi desktop menggunakan teknologi web seperti HTML, CSS, dan JavaScript.
Menariknya, dengan Electron kita juga dapat membangun aplikasi yang menggunakan file Excel sebagai database — cocok untuk aplikasi skala kecil hingga menengah, terutama bagi pengguna non-teknis yang sudah familiar dengan Microsoft Excel.
Pada artikel ini, kita akan membahas konsep dasar pembuatan aplikasi desktop menggunakan Electron yang menyimpan dan mengelola data melalui file Excel.
Apa itu Electron?
Electron adalah framework yang dikembangkan oleh GitHub yang memungkinkan developer membangun aplikasi desktop cross-platform (Windows, macOS, Linux) menggunakan teknologi web. Beberapa aplikasi besar yang dibuat dengan Electron antara lain:
-
Visual Studio Code
-
Slack Desktop
-
WhatsApp Desktop
-
Discord
Karena berbasis web, Electron menjadi pilihan ideal bagi developer yang sudah menguasai HTML, CSS, dan JavaScript.
Jika Anda berencana membangun aplikasi desktop menggunakan Electron, memahami struktur file dan folder di dalam proyek adalah hal yang sangat penting. Banyak pemula yang langsung mencoba coding tanpa mengetahui fungsi setiap file, sehingga membuat aplikasi menjadi berantakan dan sulit dikembangkan.Struktur Proyek Electron yang Wajib Dipahami
Secara umum, inilah struktur dasar proyek Electron yang sering digunakan:
my-electron-app/
│
├─ package.json
├─ main.js
├─ preload.js
├─ index.html
├─ renderer.js
│
├─ /assets
│ ├─ icon.png
│ └─ styles.css
│
├─ /src
│ ├─ pages/
│ └─ components/
│
├─ /db
│ └─ data.xlsx
│
└─ node_modules/
| Nama File/Folder | Fungsi Utama |
|---|---|
| package.json | Identitas aplikasi dan daftar library Electron yang digunakan. |
| main.js | Otak aplikasi → menjalankan Main Process, membuat window, dan mengontrol aplikasi. |
| preload.js | Sebagai jembatan aman antara Main Process dan UI (Renderer). |
| index.html | Tampilan utama aplikasi (UI), sama seperti halaman website. |
| renderer.js | Logika UI seperti event button, pengolahan data, dan manipulasi DOM. |
| /assets | Menyimpan icon, gambar, CSS, font, atau file pendukung visual. |
| /src | Tempat menyimpan modul, komponen, halaman, dan fungsi tambahan agar project rapi. |
| /db | Menyimpan file database. Jika berbasis Excel, maka di sini tersimpan .xlsx |
| node_modules/ | Kumpulan library hasil install NPM. Jangan pernah edit folder ini. |
Analisis Mendalam: Kenapa Struktur Ini Penting?
Memiliki struktur proyek yang baik memberikan beberapa keuntungan:
| Manfaat | Penjelasan |
|---|---|
| Mudah dikembangkan | File terorganisir, sehingga memudahkan penambahan fitur baru. |
| Lebih aman | Memisahkan Main & Renderer Process mencegah celah keamanan. |
| Scalable | Ketika aplikasi bertambah besar, struktur tidak mudah berantakan. |
| Professional | Meniru standar aplikasi besar seperti VSCode dan Slack. |
| Main Process (main.js) | Renderer Process (renderer.js) |
|---|---|
| Mengontrol aplikasi & system | Mengatur tampilan UI |
| Bisa akses fitur OS (file system, native API) | Fokus pada antarmuka dan interaksi user |
| Berlaku seperti backend | Berlaku seperti frontend |
Memahami struktur file pada proyek Electron adalah fondasi sebelum mulai membuat fitur.
Dengan struktur yang benar:
✔ aplikasi lebih mudah dikelola
✔ aman dari konflik file
✔ siap dikembangkan menjadi skala besar
✔ cocok untuk aplikasi offline maupun online
Electron memadukan kemampuan web & desktop, sehingga menjadi pilihan tepat untuk UMKM, bisnis internal, startup, hingga aplikasi produksi.
Comments