Membuat Website Apapun Menjadi Aplikasi Desktop dengan Electron

 

Membuat Website Apapun Menjadi Aplikasi Desktop dengan Electron dalam 15 Menit

Teknologi Web berkembang pesat beberapa tahun terakhir, bahkan teknologi web sekarang ini tidak hanya digunakan untuk keperluan membangun situs web ( aplikasi berbasis web ) saja, melainkan juga digunakan untuk membangun aplikasi di platform seluler hingga desktop .

Pernah membuat aplikasi desktop menggunakan teknologi Web (seperti HTML, CSS dan JavaScript)?

Diperkenalkan, 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 kartun menggunakan Node.js dan Chromium. Iya benar, sebenarnya aplikasi kita akan jalan di atas sebuah browser . Jadi ide adalah berhasil mengabungkan situs web dengan kekuatan aplikasi desktop asli yang dapat dilakukan 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 yang dibuatnya Electron menurut Saya adalah: Jika kita bisa membuat situs web, kita juga bisa membuat aplikasi desktop dengan mudah menggunakan Electron, tanpa bersusah payah belajar bahasa pemprograman baru, cukup apa yang telah kita gunakan.

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

Pada tutorial kali ini Saya menggunakan TeaLinuxOS , sistem operasi ( distro ) turunan Ubuntu yang dirancang khusus untuk pemprograman dunia (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 :

Ambil paket setup Node.js dengan perintah berikut ini:

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

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

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

Setelah selesai menginstall Node.js

Buat direktori / folder untuk proyek kita

Masuk kedalam foldernya

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 mengubah kerangka kerja proyek Electron, lalu menulis kode , menjalakannya sampai memaketnya menjadi executable sehingga memahami bagaimana Eletron berkerja.

Cara Gampang

Cara gampang / Mudah Penyanyi kitd akan using alat Bernama Nativefier Yang situs akan MEMBUAT apapun seperti CodePolitan ATAU  HACKTIV8 ATAU Yang lainya Menjadi aplikasi desktop DENGAN Mudah Dan Cepat. Nativefier pada kenyataan membungkus web tersebut ke dalam Electron dengan sedikit perintah pada console terminal .

Untuk memutakhirkan Nativefier, cukup ketikan perintah

Keterangan : npm akan menginstall nativefier secara global dengan parameter "-g" sehingga dapat digunakan dimana saja direktori kita berada (tidak hanya pada direktori proyek kita).

Untuk menjalakanya sangat sederhana, cukup ketikan Nativefier di ikuti URL websitenya, seperti ini:

Keterangan : Nativefier akan secara otomatis membaca nama dari situs tersebut, namun kita juga dapat menginisialisasi nama aplikasi kita dengan menambahkan parameter --name, menjadi seperti ini:

Tunggu proses berjalan, setelah selesai Nativefier akan membuat sebuah direktori yang berisi source dan juga aplikasi yang dapat dieksekusi , 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 digunakan 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 untuk Memulai Dasar Git ** Guna memfokuskan tutorial ini untuk mengenal Electron kamu dapat dengan mudah memodifikasikan Git dengan perintah:

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

Mari kita clone proyek tersebut:

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

Masuk kedalam foldernya

Instal dependensi -nya dengan perintah:

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

Jika semua berhasil, maka akan tampil seperti ini:

Coba kita buka folder tersebut dengan editor kode 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 lebih mudah terimplementasikan.

Pada kode 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, termasuk HTML, CSS dan JS

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

Oke, balik ke pembuatan aplikasi kita.

Ingat kita akan membuat aplikasi yang sebenarnya adalah aplikasi berbasis web menjadi desktop , Electron telah menyediakan metode <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

Sebenarnya proyek kita sudah bisa digunakan sampai disini, tapi bagaimana cara penerapan kita ke pengguna? Kita perlu membungkus atau memaketnya untuk menjadi executable .

Untuk itu kita butuh Electron-packager , tambahkan pada proyek kita dengan perintah:

Atau secara global

Setelah terpasang, cukup jalankan perintah dengan format seperti ini:

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 ingin 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 memaketkan sistem operasi sekaligus arsitekturnya, karena perintah ini sama saja dengan --platform = all --arch = all

·         Penjelasan opsi lebih lengkap kita dapat lihat disini usage.txt

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

Setelah itu akan terbentuk folder baru dengan nama yang sesuai dengan perintah perintahkan. Sampai disini aplikasi kita telah siap digunakan. Namun, agar lebih manis dan ramah pengguna , kita juga dapat menjadi wizard-installer sekaligus dapat memiliki fitur update otomatis 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 , mengubah spash-screen , dapat diatur 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 bekerja tutorial ini dan sampai jumpa di tutorial berikutnya: D

BONUS! Kode Sumber dan Demo

Kamu dapat melihat dan mengunduh source-code aplikasi yang kita inginkan 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 berbagi tutorial ini jika dirasa bermanfaat.

Terima kasih!