Buat Website Apapun menjadi Aplikasi Desktop dengan Electron
#Hacktiv8TutorialContest
Diky Arga Anggara
Mahasiswa Teknik Informatika, Universitas Dian Nuswantoro, Semarang
Open Source Enthusiast
Bagian dari Dinus Open Source Community (Doscom.org)
Bagian dari Mozilla Foundation, sebagai Firefox Student Ambassador & Mozilla Tech Speaker
Part-time Front-end programmer di GNEWS.id > MailTarget.co ( VueJS )
Coding + Cycling =
www.dikyarga.com | @dikyarga
Teknologi Web berkembang sangat pesat
Teknologi Web ke Platform Mobile App
Apakah Teknologi Web [ juga ] ke Platform Desktop ?
Credit image : www.promaticsindia.com
Aplikasi yang dibangun dengan Electron
Persiapan sebelum lepas landas :D
Niat
Komputer dengan OS, GNU/Linux, Windows, MacOS atau ketiganya :D
Node.JS
npm (Node Package Manager)
Git [ optional ]
curl [ optional ]
Apa yang kita butuhkan ?
Kok ribetz ?
Makanya pakai OS yang di rancang untuk coding - TeaLinuxOS
Cara Gampang
Sebuah Electron tool's untuk membungkus website menjadi native desktop app.
Cara Install
npm install -g nativefierCara Pakai
nativefier "http://hacktiv8.com/"* Inisialisasi nama aplikasi dengan paramater --name
nativefier --name="Hacktiv8 - Belajar Full Stack JS" "http://hacktiv8.com/"Cara yang Lebih Seru
Electron telah menyediakan boilerplate untuk mempercepat memulai belajar menggunakan Electron
Cara Install
- Clone boilerplate Electron-quick-start
- Install dependency -nya
- Uji dengan menjalankannya
git clone https://github.com/electron/electron-quick-startnpm installnpm startCara yang Lebih Seru II
Bagaimana boilerplate Electron ini berkerja ?
Fokus pada dua file terlebih dahulu :
- package.json : berisi informasi aplikasi
- main.js : file utama yang di eksekusi oleh Electron
- index.html : file yang di panggil saat Electron telah siap
<webview>
<webview autoresize="on"
style="width: 100%; height: 95vh;"
src="https://hacktiv8.com/">
</webview>Cara yang Lebih Seru III
Bagaimana cara mendistribusikan aplikasi kita ?
Untuk memaket aplikasi kita menjadi executable file
Cara install :
Cara pakai :
contoh :
sudo npm install -g electron-packager electron-packager < sourcedir > < appname > --platform= --arch= [optional flags...]electron-packager ./ "hacktiv8seru" --platform=linux --arch=x64Keterangan :
-
electron-packager adalah nama perintah untuk menjalakanya
-
<sourcedir> adalah lokasi sumber proyek kita, cukup isi dengan " ./ " ketika kita menjalakan perintah pada folder proyek kita.
-
<appname> adalah nama aplikasi yang hendak kita paket, gunakan tanda petik "" untuk membungkus naamanya.
-
--platform adalah sistem operasi target proyek kita linux :
-
Linux seperti Ubuntu, Debian dan turunannya
-
darwin : untuk MacOS X
-
win32 : untuk OS Windows
-
-
--arch atau singkatan dari architecture atau arsitektur komputer target ia32 : untuk 32 bit x64 : untuk 64 bit opsi-opsi lain seperti --all : untuk memaket kesemua sistem operasi sekaligus semua arsitekturnya, karena perintah ini sama saja dengan
-
--platform=all --arch=all lebih lengkap kita dapat lihat disini : usage.txt
Ayo buat aplikasi kita jadi daring
Proyek : Membuat profile-site
Lalu, apa selanjutnya ?
- Tambahin icon aplikasi.
- Tambahin splash-screen.
- Berinteraksi dengan OS
- File manager
- Perangkat keras (printer)
- Sistem notifikasi bawaan
- dll
- Menggunakan SPA Framework / Library, seperti ReactJS, AngularJS atau VueJS.
Bonus!
Source Code + Demo File
< Thank-you />
< Any Questions ? />
Open Your Mind with Open Source Software
- doscom.org
Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron MozSpace
By Diky Arga
Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron MozSpace
Ini slide presentasi saya tentang pengenalan Electron di Mozilla Community Space Jakarta #MozSpace
