{"id":8157,"date":"2025-05-22T16:33:14","date_gmt":"2025-05-22T09:33:14","guid":{"rendered":"https:\/\/binus.ac.id\/bekasi\/?p=8157"},"modified":"2025-05-22T16:33:14","modified_gmt":"2025-05-22T09:33:14","slug":"mengenal-electron-js-membuat-aplikasi-desktop-dengan-teknologi-web","status":"publish","type":"post","link":"https:\/\/beta.binus.ac.id\/bekasi\/2025\/05\/22\/mengenal-electron-js-membuat-aplikasi-desktop-dengan-teknologi-web\/","title":{"rendered":"Mengenal Electron.js: Membuat Aplikasi Desktop dengan Teknologi Web"},"content":{"rendered":"<p><strong>Apa Itu Electron.js?<\/strong><\/p>\n<p><strong>Electron.js<\/strong> adalah framework open-source yang memungkinkan pengembang membangun aplikasi desktop lintas platform menggunakan teknologi web seperti <strong>HTML<\/strong>, <strong>CSS<\/strong>, dan <strong>JavaScript<\/strong>. Dengan Electron, kamu bisa membuat aplikasi desktop untuk Windows, macOS, dan Linux hanya dengan satu codebase.<\/p>\n<p>Framework ini pertama kali dikembangkan oleh GitHub dan digunakan untuk membangun aplikasi populer seperti:<\/p>\n<ul>\n<li><strong>Visual Studio Code<\/strong> (Microsoft)<\/li>\n<li><strong>Slack<\/strong><\/li>\n<li><strong>Discord<\/strong><\/li>\n<li><strong>Postman<\/strong><\/li>\n<li><strong>Figma (versi desktop)<\/strong><\/li>\n<\/ul>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>Bagaimana Cara Kerja Electron?<\/strong><\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8158 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2025\/05\/Picture3.jpg\" alt=\"\" width=\"459\" height=\"168\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2025\/05\/Picture3.jpg 459w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2025\/05\/Picture3-300x110.jpg 300w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><span style=\"font-size: 10pt\">Figure 1. Contoh struktur file sederhana<\/span><\/p>\n<p>Electron menggabungkan dua komponen utama:<\/p>\n<ol>\n<li><strong>Chromium<\/strong> \u2013 sebagai browser engine untuk merender antarmuka pengguna (UI).<\/li>\n<li><strong>Node.js<\/strong> \u2013 untuk menangani proses backend dan akses ke sistem file, database, dll.<\/li>\n<\/ol>\n<p>Ketika aplikasi Electron dijalankan:<\/p>\n<ul>\n<li><strong>Main Process<\/strong>: Mengontrol siklus hidup aplikasi, mengatur jendela, dan menjalankan kode backend (Node.js).<\/li>\n<li><strong>Renderer Process<\/strong>: Menjalankan antarmuka pengguna dan menangani interaksi pengguna menggunakan HTML\/CSS\/JS (mirip browser).<\/li>\n<\/ul>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8159 aligncenter\" src=\"http:\/\/binus.ac.id\/bekasi\/wp-content\/uploads\/2025\/05\/Picture4.jpg\" alt=\"\" width=\"298\" height=\"298\" srcset=\"https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2025\/05\/Picture4.jpg 298w, https:\/\/beta.binus.ac.id\/bekasi\/wp-content\/uploads\/sites\/90\/2025\/05\/Picture4-150x150.jpg 150w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><span style=\"font-size: 10pt\">Figure 2. Perbandingan kelebihan dan kekurangan electron js<\/span><\/p>\n<p><strong>Kapan Sebaiknya Menggunakan Electron.js?<\/strong><\/p>\n<p>\u2705 <strong>Cocok digunakan jika:<\/strong><\/p>\n<ul>\n<li>Kamu ingin membuat aplikasi desktop dari proyek web yang sudah ada.<\/li>\n<li>Kamu ingin prototyping cepat lintas platform.<\/li>\n<li>Kamu membangun aplikasi internal perusahaan atau tool pribadi.<\/li>\n<\/ul>\n<p>\u274c <strong>Tidak disarankan jika:<\/strong><\/p>\n<ul>\n<li>Aplikasi kamu harus ringan (&lt;50 MB).<\/li>\n<li>Membutuhkan performa tinggi atau akses sistem tingkat rendah.<\/li>\n<li>Target pengguna kamu memiliki perangkat dengan spesifikasi rendah.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 10pt\">Referensi:<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 10pt\"><a href=\"https:\/\/www.electronjs.org\/docs\">https:\/\/www.electronjs.org\/docs<\/a><\/span><\/li>\n<li><span style=\"font-size: 10pt\"><a href=\"https:\/\/github.com\/electron\/electron\">https:\/\/github.com\/electron\/electron<\/a><\/span><\/li>\n<li><span style=\"font-size: 10pt\"><a href=\"https:\/\/www.axon.dev\/blog\/what-is-electron-js-how-does-electron-work\">https:\/\/www.axon.dev\/blog\/what-is-electron-js-how-does-electron-work<\/a><\/span><\/li>\n<li><span style=\"font-size: 10pt\"><a href=\"https:\/\/brainhub.eu\/library\/what-is-electron-js\">https:\/\/brainhub.eu\/library\/what-is-electron-js<\/a><\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Apa Itu Electron.js? Electron.js adalah framework open-source yang memungkinkan pengembang membangun aplikasi desktop lintas platform menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Dengan Electron, kamu bisa membuat aplikasi desktop untuk Windows, macOS, dan Linux hanya dengan satu codebase. Framework ini pertama kali dikembangkan oleh GitHub dan digunakan untuk membangun aplikasi populer seperti: Visual Studio [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8159,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-8157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-science-software-engineering"],"_links":{"self":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/8157"}],"collection":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/comments?post=8157"}],"version-history":[{"count":0,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/posts\/8157\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media\/8159"}],"wp:attachment":[{"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/media?parent=8157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/categories?post=8157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beta.binus.ac.id\/bekasi\/wp-json\/wp\/v2\/tags?post=8157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}