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

How it feels to learn JavaScript in 2016 - Jose Aguinaga

Teknologi Web ke Platform Mobile App

Apakah Teknologi Web [ juga ] ke Platform Desktop ?

Credit image : www.promaticsindia.com

Aplikasi yang dibangun dengan Electron

electron.atom.io/apps/

Persiapan sebelum lepas landas :D

  1. Niat

  2. Komputer dengan OS, GNU/Linux, Windows, MacOS atau ketiganya :D

  3. Node.JS

  4. npm (Node Package Manager)

  5. Git [ optional ]

  6. curl [ optional ]

Apa yang kita butuhkan ?

Kok ribetz ?

Makanya pakai  OS yang di rancang untuk coding - TeaLinuxOS

Cara Gampang

Nativefier

Sebuah Electron tool's untuk membungkus website menjadi native desktop app.

Cara Install

 

npm install -g nativefier

Cara 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 Quick Start

Electron telah menyediakan boilerplate untuk mempercepat memulai belajar menggunakan Electron

 

Cara Install

  1. Clone boilerplate Electron-quick-start
     
  2. Install dependency -nya
     
  3. Uji dengan menjalankannya
git clone https://github.com/electron/electron-quick-start
npm install
npm start

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


Electron-packager

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

Keterangan :

  • 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

Source Code :

https://github.com/dikyarga/electron-quick-start

Demo File untuk  sistem operasi :

  • Debian / Linux Distribution : Unduh
  • Windows : Unduh
  • MacOS : Tunggu, setelah punya MacBook :D

< Thank-you />

< Any Questions ? />

Open Your Mind with Open Source Software

- doscom.org

Made with Slides.com