Teknologi Web berkembang semakin pesat beberapa tahun terakhir, bahkan teknologi web sekarang ini tidak hanya digunakan untuk keperluan membangun website (web-base application) saja, melainkan juga digunakan untuk membangun aplikasi di platform mobile hingga desktop.
<blockquote>Pernah kebayang gak buat aplikasi desktop menggunakan teknologi Web (seperti HTML, CSS dan JavaScript) ?</blockquote>
Perkenalkan, <a title="Github Electron" href="http://electron.atom.io/" target="_blank">Electron</a> sebuah framework yang memudahkan developer untuk membuat aplikasi desktop lintas-perangkat (cross-platform) seperti pada Linux, Windows dan MacOS dengan menggunakan teknologi web (JavaScript).

Electron pada dasarnya menggunakan <a title="Node.js" href="https://nodejs.org" target="_blank">Node.js</a> dan <a title="Chromium" href="https://www.chromium.org/" target="_blank">Chromium.</a> Iya benar, sebenarnya aplikasi kita akan jalan di atas sebuah browser. Jadi ide dasarnya adalah mengabungkan kemudahan membuat website dengan kekuatan native desktop app yang dapat berinteraksi secara langsung dengan sistem operasi.

Electron sekarang telah dipakai untuk membuat beragam aplikasi desktop, seperti <a title="Atom" href="https://atom.io/" target="_blank">Atom</a>, <a title="Visual Code Studio" href="https://code.visualstudio.com/" target="_blank">Visual Code Studio</a>, <a title="Slack" href="https://slack.com/downloads" target="_blank">Slack</a> hingga <a title="Wordpress Desktop" href="https://apps.wordpress.com/desktop/" target="_blank">Wordpress Desktop</a>, lihat daftar aplikasi lain yang dibangun menggunakan Electron : <a href="http://electron.atom.io/apps/" target="_blank">electron.atom.io/apps</a>
<blockquote>Gagasan utama dibuatnya Electron menurut Saya adalah : Jika kita bisa membuat website, kita juga bisa membuat aplikasi desktop dengan mudah menggunakan Electron, tanpa bersusah payah belajar bahasa pemprograman baru, cukup lanjutkan apa yang telah kita pelajari.</blockquote>
Untuk memulai menggunakan Electron, kita harus meng-install Node.js serta <a title="npm" href="https://www.npmjs.com/" target="_blank">npm</a> (node package manager) untuk mengatur dependency -nya.

Pada tutorial kali ini Saya menggunakan <a title="TeaLinuxOS" href="http://tealinuxos.org/" target="_blank">TeaLinuxOS</a>, sistem operasi (distro) turunan Ubuntu yang dirancang spesial untuk dunia pemprograman (bukan promosi ya :D).
Catatan : Kita juga bisa menggunakan sistem operasi lain seperti Windows dan MacOS untuk bermain dengan Electron.

Buka Terminal kita (CTRL + ALT + T)

Untuk menginstall Node.js, kita membutuhkan <a title="curl" href="https://curl.haxx.se/" target="_blank">curl</a> :
<pre>sudo apt-get install curl</pre>
Ambil paket setup Node.js dengan perintah berikut ini :
<pre class="language-bash"><code class="language-bash">curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -</code></pre>
Catatan : Kita akan menginstall Node.js versi 6 sekian-sekian.
Setelah paket terunduh, pasang dengan perintah berikut :
<pre class="language-bash"><code class="language-bash">sudo apt-get install -y nodejs
</code></pre>
Sekarang Node.js sekaligus npm telah terpasang pada mesin kita.

Catatan : Node.js dan npm dapat digunakan juga pada sistem operasi berbasis Windows dan MacOS dengan Installer yang dapat di unduh disini : <a href="https://nodejs.org/en/download/">nodejs.org/en/download</a> (:

Untuk memastikan Node.js dan npm terpasang dengan benar, kita dapat melakukan perintah berikut :
<pre>node -v</pre>
<pre>npm -v</pre>
<img src="https://static.cdn-cdpl.com/source/2140/screenshot%20-%20191116%20-%2023%3A57%3A57.png?1479574754208" alt="screenshot - 191116 - 23:57:57" />
Setelah selesai menginstall Node.js

Buat suatu directory / folder untuk proyek kita
<pre>mkdir codepolitan-desktop</pre>
Masuk kedalam foldernya
<pre>cd codepolitan-desktop</pre>
Pada tutorial kali ini kita akan menggunakan dua cara, yaitu
<ul>
 	<li>Cara Gampang, karena kita akan menggunakan tools CLI (Command Line Interface) yang mudah, cepat dan tanpa coding.</li>
 	<li>Cara Seru, karena kita akan memasang kerangka kerja proyek Electron, lalu menulis code, menjalakannya sampai memaketnya menjadi executable sehingga memahami bagaimana Eletron berkerja.</li>
</ul>
<h2>Cara Gampang</h2>
Cara gampang / mudah ini kita akan menggunakan tools bernama <a title="Nativefier" href="https://github.com/jiahaog/nativefier" target="_blank">Nativefier</a> yang akan membuat website apapun seperti <a title="CodePolitan" href="https://www.codepolitan.com/" target="_blank">CodePolitan</a> atau <a title="HACKTIV8 " href="https://hacktiv8.com/" target="_blank">HACKTIV8</a> atau yang lainya menjadi desktop app dengan mudah dan cepat. Nativefier pada dasarnya membungkus web tersebut ke dalam Electron dengan sedikit perintah pada console terminal.

Untuk memasang Nativefier, cukup ketikan perintah
<pre>npm install nativefier -g</pre>
Keterangan : npm akan menginstall nativefier <a title="Install npm dependency globally" href="https://docs.npmjs.com/getting-started/installing-npm-packages-globally" target="_blank">secara globally</a> dengan paramater "-g" sehingga dapat digunakan dimana saja directory kita berada (tidak hanya pada directory proyek kita).

Untuk menjalakanya sangat sederhana, cukup ketikan Nativefier di ikuti URL websitenya, seperti ini :
<pre>nativefier "http://codepolitan.com"</pre>
Keterangan : Nativefier akan secara otomatis membaca nama dari website tersebut, namun kita juga dapat menginisialisasi nama aplikasi kita dengan menambahkan parameter --name, menjadi seperti ini :
<pre>nativefier --name "Codepolitan.com - Media Edukasi dan Informasi Pemrograman Indonesia" "http://codepolitan.com"</pre>
Tunggu sejenak proses berjalan, setelah selesai Nativefier akan membuat sebuah directory yang berisi source dan juga executable aplikasi kita, cukup klik dua kali untuk menjalakanya. Tadaa, aplikasi web rasa desktop kita sudah jadi.

<img src="https://static.cdn-cdpl.com/source/2140/cuplikan%20layar_2016-11-20_01-51-00.png?1479581671209" alt="cuplikan layar_2016-11-20_01-51-00" />
<blockquote>"Lho kok gak ada coding-coding -nya sama sekali ? kurang seru nih!"</blockquote>
Kalo kamu berfikir demikian, mari kita buat hal serupa dengan cara yang lebih seru.
<h2>Cara Seru</h2>
Langkah awal sebelum mulai coding, kita siapkan dulu berkas-berkas dengan mengunduh <a title="Boilerplate Code" href="https://en.wikipedia.org/wiki/Boilerplate_code" target="_blank">boilerplate</a> dari Electron, jadi telah ada template atau kerangka dasar yang sudah siap gunakan untuk belajar membuat aplikasi pada Electron, jadi tidak perlu repot-repot mulai dari nol. Berikut boilerplate Eletron detailnya : <a title="Electron Quick Start" href="https://github.com/electron/electron-quick-start" target="_blank">Electron-Quick-Start</a>

Clone dengan Git menggunakan perintah :

* Bagi kamu yang belum pernah menggunakan Git, kamu bisa kepoin di <a title="Memulai Dasar Git" href="https://git-scm.com/book/id/v1/Memulai-Git-Dasar-Git" target="_blank">Memulai Dasar Git</a>
** Guna memfokuskan tutorial ini untuk mengenal Electron kamu dapat dengan mudah memasang Git dengan perintah :
<pre>sudo apt-get install git</pre>
*** Untuk pengguna Windows dan MacOS, dapat mengunduh installer Git di laman <a title="Unduh Git" href="https://git-scm.com/downloads" target="_blank">unduh git</a>

Mari kita clone proyek tersebut :
<pre>git clone https://github.com/electron/electron-quick-start</pre>
atau unduh <a title="Electron Quick Start" href="https://github.com/electron/electron-quick-start" target="_blank">Electron-Quick-Start</a> di halaman GitHub-nya, jika kita tidak ingin menggunakan Git.

Masuk kedalam foldernya
<pre>cd eletron-quick-start</pre>
Install dependency-nya dengan perintah :
<pre>npm install</pre>
Untuk memastikan proses instalasi berhasil dengan baik, mari kita uji dengan jalankan proyek ini dengan perintah :
<pre>npm start</pre>
Jika semua berhasil, maka akan tampil seperti ini :
<img src="https://static.cdn-cdpl.com/source/2140/electron-quick-start-npm-start.png?1479585661942" alt="electron-quick-start-npm-start" />

Coba kita buka folder tersebut dengan code editor favorit kita.

<img src="https://static.cdn-cdpl.com/source/2140/screenshot%20-%20191116%20-%2021%3A37%3A51.png?1479571275119" alt="screenshot - 191116 - 21:37:51" />

Kita tidak harus memahami semua folder dan fungsi setiap file pada pengenalan saat ini, fokus pada file main.js yang menjadi file utama dan dijalan diawal ketika proyek dijalankan.

Pada file main.js telah diberi komentar untuk menerangkan fungsi masing-masing baris kode. Saya telah mentranslasikan komentar tersebut kedalam bahasa Indonesia supaya lebih mudah dipahami.

<script src="https://gist.github.com/dikyarga/3554dfaec63bbbbc316473eef290ecd8.js"></script>

Pada code main.js memanggil file index.html yang akan dimuat saat semua proses telah selesai dan siap (on ready) digunakan.

Ketika membuka file index.html, kita akan menjumpai markup HTML pada umumnya, meliputi HTML, CSS dan JS

<script src="https://gist.github.com/dikyarga/97bfb1912cc0e74c9f4f82ea5df187f2.js"></script>

Coba ubah-ubah isi file tersebut kemudian jalankan ulang proyek kita untuk melihat bagaiman dia berkerja :D

Okay, balik ke pembuatan aplikasi kita.

Ingat kita akan membuat aplikasi yang sebenarnya adalah aplikasi berbasis web menjadi desktop, Electron telah menyediakan method < webview >, bahasa gampangnya, kita akan meng-embed halaman web kedalam aplikasi kita. Berikut coding-an setelah di otak-atik, Saya sudah menambahkan keterangan pada komentar di sisipan baris code-nya.

<script src="https://gist.github.com/dikyarga/6369a88bc08cfcddb2bd44791980c918.js"></script>

Jalankan kembali proyek kita dengan
<pre>npm start</pre>
Sebenarnya proyek kita sudah bisa digunakan sampai disini, tapi bagaimana cara mendistribusikan aplikasi kita ke pengguna ?
Kita perlu membungkus atau memaketnya untuk menjadi executable.

Untuk itu kita butuh <a href="https://github.com/electron-userland/electron-packager">Electron-packager</a> , tambahkan pada proyek kita dengan perintah :
<pre>npm install electron-packager --save-dev</pre>
Atau secara globally
<pre>sudo npm install electron-packager -g</pre>
Setelah terpasang, cukup jalankan perintah dengan format seperti ini :
<pre><code>electron-packager < sourcedir > < appname > --platform= --arch= [optional flags...]</code></pre>

Keterangan :

1. electron-packager adalah nama perintah untuk menjalakanya
2. ```<sourcedir>``` adalah lokasi sumber proyek kita, cukup isi dengan " ./ " ketika kita menjalakan perintah pada folder proyek kita.
3. ```<appname>``` adalah nama aplikasi yang hendak kita paket, gunakan tanda petik "" untuk membungkus namanya.
4. --platform adalah sistem operasi target proyek kita
	 * linux : untuk OS berbasis Linux seperti Ubuntu, Debian dan turunannya
	 * darwin : untuk MacOS X
 	 * win32 : untuk OS Windows
5. --arch atau singkatan dari architecture atau arsitektur komputer target
	 * ia32 : untuk 32 bit
	 * x64 : untuk 64 bit

6. Opsi-opsi lain seperti
	 * --all : untuk memaket kesemua sistem operasi sekaligus semua arsitekturnya, karena perintah ini sama saja dengan --platform=all --arch=all
 	 * Penjelasan opsi lebih lengkap kita dapat lihat disini [usage.txt](https://github.com/electron-userland/electron-packager/blob/master/usage.txt)


Contoh, Saya menggunakan platform Linux dan berarsitektur 64bit
```electron-packager ./ "codepolitanseru" --platform=linux --arch=x64```

![](https://static.cdn-cdpl.com/source/2140/screenshot%20-%20201116%20-%2003%3A09%3A09.png)

Setelah itu akan terbentuk folder baru dengan nama yang sesuai kita perintahkan. Sampai disini aplikasi kita telah siap digunakan. Namun, agar lebih manis dan user-friendly, kita dapat membuat menjadi wizard-installer sekaligus dapat mempunyai fitur auto-update jika aplikasi kita mengalami perkembangan dengan menggunakan <a title="Electron Builder" href="https://github.com/electron-userland/electron-builder" target="_blank">electron-builder</a> .

Untuk membuat aplikasi desktop yang sebenarnya, tentu masih banyak yang harus kita oprek, seperti menambahkan icon, memasang spash-screen, berinteraksi dengan sistem bawaan sistem operasi, seperti File-manager, Printer, sistem notifikasi, dll. Kita juga dapat menggunakan framework SPA (<a title="Single Page Aplication" href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank">Single Page Aplication</a>), seperti <a title="ReactJS" href="https://facebook.github.io/react/" target="_blank">ReactJS</a>, <a title="AngularJS" href="https://angularjs.org/" target="_blank">AngularJS</a>, <a title="VueJS" href="http://vuejs.org/" target="_blank">VueJS</a>, dll.

Tentu Saya tidak akan membahasnya sekarang, karena tutorial ini sudah sangat gondrong menurut Saya. Semoga Saya dapat meneruskan tutorial ini dan sampai jumpa di tutorial berikutnya :D

BONUS! Source Code dan Demo

Kamu dapat melihat dan mengunduh source-code aplikasi yang hendak kita buat di GitHub Saya : <a title="dikyarga/electron-quick-start" href="https://github.com/dikyarga/electron-quick-start" target="_blank">dikyarga/electron-quick-start</a>
Kamu juga dapat mengunduh contoh atau demo proyek yang sudah jadi di :

1. Untuk Linux / Ubuntu / TeaLinuxOS / Debian dan turunanya : <a title="Diky Arga Cloud" href="http://cloud.dikyarga.com/demo-tutorial/codepolitan_com_media_edukasi_linux_x64.zip" target="_blank">codepolitan_com_media_edukasi_linux_x64.zip</a>
2. Untuk Windows : <a title="Diky Arga Demo Cloud Storage" href="http://cloud.dikyarga.com/demo-tutorial/codepolitanseru-win32-x64.zip" target="_blank">codepolitanseru-win32-x64.zip</a>
3. Untuk MacOS : segera :D setelah punya Mac :v

Jika ada pertanyaan silahkan berkomentar dibawah dan jangan lupa share tutorial ini jika dirasa bermanfaat.

Terimakasih!

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron dalam 15 Menit

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Program Beasiswa Belajar Generative AI Chapter 4 hadir sebagai kelanjutan dari komitmen jangka panjang kolaborasi antara CODEPOLITAN dengan mitra global: Google.org, AVPN, dan Asian Development Bank (ADB). Program ini tetap dijalankan secara terpusat melalui ekosistem RuangAI.

Pada Chapter 4 ini, kami membawa semangat kolaborasi ke tingkat yang lebih tinggi. Selain tetap menyediakan kurikulum fundamental Generative AI berstandar Google untuk empat kategori utama peserta (Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM), RuangAI kini melakukan ekspansi strategis dengan menggandeng berbagai komunitas di seluruh Indonesia.

Program beasiswa fundamental Generative AI berstandar Google untuk Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM yang siap naik level di era AI.

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron dalam 15 Menit

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron dalam 15 Menit