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

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

#Hacktiv8TutorialContest

#FunFact : this tutorial read more than 3.333 views in two day after published

< Any Questions ? />

#Hacktiv8TutorialContest

Open Your Mind with Open Source Software

- doscom.org

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron

By Diky Arga

Made with Slides.com

Membuat Website Apapun menjadi Aplikasi Desktop dengan Electron

This slide is for #Hacktiv8TutorialContest presentation

  • 2,056

More from Diky Arga