Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron dalam 15 Menit

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.

Pernah kebayang gak buat aplikasi desktop menggunakan teknologi Web (seperti HTML, CSS dan JavaScript) ?

Perkenalkan, Electron 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 Node.js dan Chromium. 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 Atom, Visual Code Studio, Slack hingga Wordpress Desktop, lihat daftar aplikasi lain yang dibangun menggunakan Electron : electron.atom.io/apps

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.

Untuk memulai menggunakan Electron, kita harus meng-install Node.js serta npm (node package manager) untuk mengatur dependency -nya.

Pada tutorial kali ini Saya menggunakan TeaLinuxOS, 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 curl :

sudo apt-get install curl

Ambil paket setup Node.js dengan perintah berikut ini :

curl -sL https://deb.nodesource.com/setup_6.x ,[object Object], ,[object Object], -E ,[object Object], -

Catatan : Kita akan menginstall Node.js versi 6 sekian-sekian. Setelah paket terunduh, pasang dengan perintah berikut :

[object Object], ,[object Object], ,[object Object], -y nodejs

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 : nodejs.org/en/download (:

Untuk memastikan Node.js dan npm terpasang dengan benar, kita dapat melakukan perintah berikut :

node -v

npm -v

Setelah selesai menginstall Node.js

Buat suatu directory / folder untuk proyek kita

mkdir codepolitan-desktop

Masuk kedalam foldernya

cd codepolitan-desktop

Pada tutorial kali ini kita akan menggunakan dua cara, yaitu

• Cara Gampang, karena kita akan menggunakan tools CLI (Command Line Interface) yang mudah, cepat dan tanpa coding.
• Cara Seru, karena kita akan memasang kerangka kerja proyek Electron, lalu menulis code, menjalakannya sampai memaketnya menjadi executable sehingga memahami bagaimana Eletron berkerja.

Cara Gampang

Cara gampang / mudah ini kita akan menggunakan tools bernama Nativefier yang akan membuat website apapun seperti CodePolitan atau HACKTIV8 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

npm install nativefier -g

Keterangan : npm akan menginstall nativefier secara globally 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 :

nativefier "http://codepolitan.com"

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 :

nativefier --name "Codepolitan.com - Media Edukasi dan Informasi Pemrograman Indonesia" "http://codepolitan.com"

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.

"Lho kok gak ada coding-coding -nya sama sekali ? kurang seru nih!"

Kalo kamu berfikir demikian, mari kita buat hal serupa dengan cara yang lebih seru.

Cara Seru

Langkah awal sebelum mulai coding, kita siapkan dulu berkas-berkas dengan mengunduh boilerplate 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 : Electron-Quick-Start

Clone dengan Git menggunakan perintah :

* Bagi kamu yang belum pernah menggunakan Git, kamu bisa kepoin di Memulai Dasar Git ** Guna memfokuskan tutorial ini untuk mengenal Electron kamu dapat dengan mudah memasang Git dengan perintah :

sudo apt-get install git

*** Untuk pengguna Windows dan MacOS, dapat mengunduh installer Git di laman unduh git

Mari kita clone proyek tersebut :

git clone https://github.com/electron/electron-quick-start

atau unduh Electron-Quick-Start di halaman GitHub-nya, jika kita tidak ingin menggunakan Git.

Masuk kedalam foldernya

cd eletron-quick-start

Install dependency-nya dengan perintah :

npm install

Untuk memastikan proses instalasi berhasil dengan baik, mari kita uji dengan jalankan proyek ini dengan perintah :

npm start

Jika semua berhasil, maka akan tampil seperti ini :

Coba kita buka folder tersebut dengan code editor favorit kita.

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.

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

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.

Jalankan kembali proyek kita dengan

npm start

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 Electron-packager , tambahkan pada proyek kita dengan perintah :

npm install electron-packager --save-dev

Atau secara globally

sudo npm install electron-packager -g

Setelah terpasang, cukup jalankan perintah dengan format seperti ini :

electron-packager < sourcedir > < appname >   --platform= --arch= [optional flags...]

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

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

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 electron-builder .

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 (Single Page Aplication), seperti ReactJS, AngularJS, VueJS, 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 : dikyarga/electron-quick-start Kamu juga dapat mengunduh contoh atau demo proyek yang sudah jadi di :

1. Untuk Linux / Ubuntu / TeaLinuxOS / Debian dan turunanya : codepolitan_com_media_edukasi_linux_x64.zip
2. Untuk Windows : codepolitanseru-win32-x64.zip
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!