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 AtomVisual Code StudioSlack 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 | sudo -E bash -

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

sudo apt-get install -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

screenshot - 191116 - 23:57:57

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

Cara gampang / mudah ini kita akan menggunakan tools bernama Nativefieryang 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.

cuplikan layar_2016-11-20_01-51-00

"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 :

electron-quick-start-npm-start

Coba kita buka folder tersebut dengan code editor favorit kita.

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.

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     --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

  5. --arch atau singkatan dari architecture atau arsitektur komputer target

  6. Opsi-opsi lain seperti

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 ReactJSAngularJSVueJS, 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.

" property='og:description'/>

BLOG

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron dalam 15 Menit

Komentar

Tinggalkan Komentar

Email

Subject

Comment