Cara menggunakan desktop app with html

Pada tutorial sebelumnya kita sudah berkenalan sedikit dengan Framework ElectronJS yaitu framework untuk membuat aplikasi desktop dengan menggunakan bahasa pemrograman HTML, CSS dan Javascript. Saat ini saya akan memberikan tutorial bagaimana membangun aplikasi desktop dengan menggunakan bahasa pemrograman PHP dengan bantuan ElectronJS ini. Setelah mencari berbagai sumber, akhirnya saya menemukan salah satu library yang bisa membantu kita mengeksekusi bahasa PHP ke dalam ElectronJS sehingga bisa menjadi aplikasi desktop. ElectronJS secara sederhana merupakan sebuah engine layaknya browser. Bowser ini dapat menjalan...

 Pada kesempatan kali ini Konsep Koding akan berbagi tutorial mengenai cara membuat website menjadi aplikasi Desktop, mungkin bagi teman-teman yang memiliki sebuah Website dan ingin menjadikan website anda menjadi aplikasi Desktop karena suatu alasan. Anda menemukan tutorial yang tepat karena pada tutorial kali ini saya akan memberikan tutorial yang lengkap dan simpel bagaimana cara membuat sebuah website menjadi aplikasi Desktop yang keren. Contoh beberapa aplikasi Desktop yang terkenal menggunakan Webview anatara lain : Mattermost dan Rambox.

Persiapan

Apa yang ada butuhkan untuk menjadikan Website anda menjadi Aplikasi Desktop:

1. Install Node

2. Install NPM

Ketika menginstall Node maka anda akan otomatis menginstall NPM, jadi ikut link di atas. Untuk menginstall NODE dan NPM di komputer anda jika anda belum pernah menginstall sebelumnya.

Menginstall Nativefier

Nativefier adalah alat baris perintah untuk dengan mudah membuat aplikasi desktop untuk situs web apa pun dengan konfigurasi minimal. Aplikasi dibungkus oleh Electron (yang menggunakan Chromium di bawah tenda) dalam OS yang dapat dijalankan (.app, .exe, dll) untuk digunakan di Windows, macOS dan Linux.

Jadi anda bisa membuat Aplikasi Desktop untuk Mac, Windows dan Linux dari Web anda, selain itu nativefier menggunakan Electron yang merupakan Javascript.

Buka terimnal atau CMD anda kemudian tuliskan perintah di bawah ini :

npm install nativefier -g

Tunggu proses instalalsi sampai selesai.

Membuat Desktop Dari Web Anda

Setelah anda berhasil menginstall Nativefier di Laptop/PC anda buka terminal dan ketikan perintah di bawah ini :

nativefier www.konsepkoding.com

Jika berhasil akan seperti ini di terminal anda:

Dan ini adalah hasilnya ketika saya install aplikasi Desktop saya:

Sekian semoga dapat bermanfaat dan membantu kamu yang sedang membuat aplikasi Desktop dari Web mu dengan mudah dan simpel menggunakan Javscript.

Sejak kemunculan Nodejs, Javascript menjadi bisa digunakan untuk membuat aplikasi selain web seperti Desktop, Mobile, IoT, Server, Game, dll.

Pada kesempatan ini, kita akan membahas framework apa saja yang digunakan untuk membuat aplikasi Desktop dengan Javascript.

Mari kita mulai…

1. Electron

Electron (dikenal juga dengan Atom Shell) merupakan framework yang dibuat oleh Github. Electron menggunakan Nodejs sebagai backend dan Chromium sebagai front-end.

Contoh aplikasi yang dibuat dengan Electron:

• Atom,
• Visual Studio Code,
• Github Desktop,
• Skype Dekstop,
• Slack Desktop,
• Discord,
• Light Table,
• dll.

Selengkapnya kamu bisa lihat di halaman ini.

Electron memiliki dokumentasi yang lengkap dan juga tersedia dalam bahasa indonesia. Dokumentasi ini dapat dibuka melalui https://electronjs.org/docs

2. NW.js

NW.js sebelumnya dikenal dengan sebutan node-webkit adalah sebuah framework yang sama seperi Electron.

NW.js menggunakan Nodejs dan Chromium seperti Eelectron.

Perbedaannya, NW.js dibuat oleh Intel sedangkan Electron dibuat oleh Github.

Dokumentasi NW.js dapat kamu baca di halaman ini.

3. App.js

App.js juga sama seperti Electron dan NW.js. Namun, project App.js ini sepertinya sudah lama ditinggalkan.

Karena itu, di websitenya menyarankan untuk menggunakan NW.js dan Electron.

Dokumentasi App.js bisa kamu baca di halaman ini.

4. Meteor

Meteor adalah framework javascript untuk membuat aplikasi mobile, web, dan dekstop. Meteor awalnya bernama Skybreak. Lalu pada bulan april 2012, framework ini dinamai ulang dengan Meteor.

Meteor dikembangkan oleh Meteor Development Group, sebuah startup yang diinkubasi oleh Y Combinator.

Contoh aplikasi yang dibuat dengan Meteor:

• Mixmax;
• Codefights;
• Rocket Chat;
• Dispatch.
• dll.

Selengkapnya kamu bisa lihat di halaman ini.

5. Proton Native

Proton Native adalah framework Javascript yang dikembangkan oleh Gustav Hansen ( kusti8). Proton Native didesain sebagai alternatif untuk Electron.

Proton Native menggunakan Widget native dari sistem operasi. Sehingga tidak memerlukan Chromium seperti Electron. Ini akan membuat performanya labih baik dan ringan.

Proton Native menggunakan library:

• Libui/ Libui-nodeuntuk membuat native widget menggunakan GTK3, Cocoa, dan Windows API;
• React-reconcileruntuk state management dan rendering.

Proton Native menggunakan React, sehingga kita juga dapat menggunakan JSX di sana. Berikut ini contoh kode program dengan Proton Native:

import React, { Component } from 'react';

import { render, Window, App, Button } from 'proton-native';

class Example extends Component {
  render() {
    return (
      <App>
        <Window title="Example" size={{w: 300, h: 300}} menuBar={false}>
          <Button stretchy={false} onClick={() => console.log('Hello')}>
            Button
          </Button>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Penjelasan lengkapnya dapat kamu baca pada .

6. Vuido

Vuido adalah framework untuk membuat aplikasi Desktop yang berbasis Vue.js. Aplikasi yang dibuat dengan Vuido dapat berjalan di atas Windows, OS X, dan Linux. Vuido menggunakan native komponen juga seperti Proton Native.

Vuido juga menggunakan library Libui/ Libui-nodeuntuk membuat tampilan GUI.

Berikut ini contoh demo aplikasi yang dibuat dengan Vuido:

Untuk dokumentasi Vuido, kamu bisa baca di website resminya https://vuido.mimec.org/.

7. DeskGap

DeskGap merupakan alternatif untuk Electron. DeskGap tidak menggunakan Chromium seperti Electron. DeskGap menggunakan WebView untuk menampilkan HTML, sehingga lebih ringan dibandingkan Electron.

Pada MacOS DeskGap menggunakan WKWebView, pada Windows menggunakan IWebBrowser2atau WebViewControl(jika tersedia), dan pada Linux akan menggunakan WebKitWebView.

Platform yang didukung DeskGap terbatas dan juga dokumentasinyabelum begitu lengkap.

Kekurangannya mungkin saat kita ingin menggunakan CSS terbaru, WebView kadang tidak mendukung.

Contoh demo aplikasi desktop dengan DeskGap:

8. Carlo

Carlomerupakan altenatif untuk Electron yang menggunakan Google Chrome dan Chromium.

Perbedaanya dengan Electron:

Carlo menggunakan Google Chrome atau Chromium yang terinstal di sistem operasi. Sedangkan Electron membawa sendiri Chromium di dalamnya.

Ini membuat ukuran paket node_modules Carlo lebih kecil dibandingkan Eelectron. Elektron memakan sekitar 130MB untuk node_modules sedangkan Carlo hanya 2MB saja.

Contoh aplikasi desktop dengan Carlo:

9. NodeGui

NodeGuiadalah library open source yang berbasis Qt 5 dan mendukung styling seperti CSS. NodeGui merupakan kombinasi dari Nodejs dan Qt. Aplikasi yang dibuat dengan NodeGui dapat berjalan di atas Mac, Linux, dan Windows.

NodeGui memiliki renderer khusus untuk React yang bernama React NodeGui, sehingga kita bisa menggunakan React untuk membuat aplikasi dengan NodeGui.

Kamu Akan Pilih yang Mana?

Bingung mau pilih yang mana?

Berikut ini kesimpulan dari saya:

Jika kamu menginkan panduan dan dokumentasi yang lengkap, saya sarankan memilih Electron. Karena komunitasnya banyak dan dokumentasinya juga tesedia dalam bahasa indonesia.

Jika kamu ingin menggunakan WebView, maka saya sarangkan menggunakan DeskGap. Tapi mungkin tidak mendukung CSS terbaru.

Jika kamu menginginkan aplikasimu dapat digunakan juga untuk mobile dan web, saya sarankan menggunakan Meteor.