{{ message }}

Cara Membuat Aplikasi Desktop Dengan Teknologi Web Menggunakan NW.js

31/07/2017 | Web Tools
Cara Membuat Aplikasi Desktop Dengan Teknologi Web Menggunakan NW.js

Pada saat ini Teknologi Web (HTML, CSS, Javascript) bukan hanya dapat digunakan untuk membuat Aplikasi yang dijalankan sebagai Website saja. Dengan bantuan tools seperti NW.js kita bahkan dapat membuat Aplikasi Desktop yg berdiri sendiri tanpa adanya Web Browser (Firefox/Chrome).

NW.js adalah sebuah tools yg dikembangkan dari pendahulunya yaitu Node-Webkit. Konsepnya adalah menjalankan aplikasi HTML 5 pada sebuah window browserless yaitu sebuah web browser tanpa menubar yg terintegrasi dengan Webkit (Chrome Engine) dan NodeJS. Aplikasi HTML 5 adalah sebuah aplikasi web yg dapat Anda tulis dengan bahasa pemrograman HTML, CSS dan Javascript atau mungkin juga ditambah dengan berbagai library seperti JQuery dan Bootstrap. Dengan terintegrasinya NodeJS disini, maka segala kemampuan server side programming dan segala bentuk manipulasi diluar web browser dapat dilakukan.  Namun demikian selain hanya menjalankan HTML 5 sebagai aplikasi desktop dengan sedikit trik yg akan kita bahas, kita dapat juga membundle aplikasi HTML 5 ini menjadi sebuah file *.exe yg portable. Dalam kata lain kita dapat membuat aplikasi windows executable seperti “aplikasiku.exe”.

Baiklah kita langsung saja dengan bagaimana cara membuat aplikasi desktop menggunakan tools NW.js ini. Pertama download dulu NW.js di website resminya http://nwjs.io. Downloadlah sesuai dengan arsitektur sistem operasi Anda 32/64 bit. Sebagai catatan jika Anda membuatnya menggunakan versi 64bit maka aplikasi Anda tidak akan dapat berjalan pada sistem operasi Windows 32bit. Tetapi jika Anda menggunakan versi 32bit maka aplikasi Anda dapat berjalan dikeduanya yaitu Windows 64bit dan juga 32bit. Setelah terdownload extractlah isi file zipnya dengan program kompresi file Anda, disini saya extract di “c:/nwjs”.

Buatlah sebuah folder yaitu direktori yg akan dijadikan direktori project aplikasi web Anda. disini saya membuat direktori “c:/nwjs/aplikasiku”. Lalu saya masuk ke direktori aplikasiku dan membuat file dengan nama “package.json” dan saya mengisinya dengan kode konfigurasi sebagai berikut;

{
 "name": "Halo Dunia",
 "main": "index.html",
 "window": {
     "width": 1024,
     "height": 768
 }
}

name adalah nama dari Aplikasi, sedangkan main adalah file utama yg akan dipanggil pertama kali ketika aplikasi dijalankan. Disini file utamanya saya isikan dengan “index.html” maka saya membuat file ini juga di direktori aplikasiku. Berikut ini isi kode html sederhana di index.html;

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Aplikasiku</title>
 </head>
 <body>
   <h1>Halo Dunia</h1>
 </body>
</html>

Setelah itu saya akan mencoba untuk merunning aplikasi ini dengan menggunakan nw.exe. Caranya buka Command Prompt Anda lalu masuklah ke direktori nwjs.

cd c:/nwjs

Setelah itu ketik perintah berikut;

nw aplikasiku

Jika berhasil maka aplikasi Anda akan berjalan dengan baik. Perlu diketahui bahwa nw.exe dapat merunning sebuah aplikasi web dengan memanggil nama foldernya atau memanggil 1 file zip (pengganti folder) yg berisi file-file web, selama di dalam folder/zip tersebut ada package.json yg memberitahu dimana file utama yg akan dipanggil pertama kali disimpan.

Terakhir saya akan memberikan trik untuk membuat aplikasi Anda menjadi sebuah file *.exe, sehingga aplikasi ini menjadi portable dan dapat Anda copy ke komputer lain dan untuk menjalankannya cukup dengan membuka aplikasiku.exe. Caranya pertama silakan kompres file package.json dan index.html menjadi sebuah file zip, misalnya diberi nama aplikasiku.zip. Lalu copy file tersebut ke “c:/nwjs/aplikasiku.zip”. Lalu ketikan perintah berikut;

copy /b nw.exe+aplikasiku.zip aplikasiku.exe

Maka kedua file tersebut akan menyatu menjadi sebuah file *.exe yaitu aplikasiku.exe. Jadi sekarang Anda dapat dengan mudah menjalankan aplikasi web Anda menjadi sebuah aplikasi desktop cukup dengan melakukan double click pada aplikasiku.exe.

Catatan, mungkin Anda masih bingung jika NW.js dapat membundle dan merunning aplikasi web tanpa menggunakan web server seperti Apache. Maka bagaimana caranya Anda dapat membuat aplikasi yg berhubungan dengan database. Apakah dengan NW.js kita dapat menulis/menyisipkan PHP didalam HTML? jawabannya adalah tidak bisa. Yg dapat ditulis disini adalah aplikasi HTML5 yaitu dengan teknologi HTML, CSS, Javascript dan tidak ada interpreter PHP di dalamnya. Untuk berhubungan dengan database Anda dapat menggunakan;

  1. NodeJS API
    Nama NW.js berasal dari penggabungan antara NodeJS dan Webkit. Webkit adalah runtimenya web browser Chrome yg memiliki kemampuan menampilkan dan menjalankan aplikasi web. Sedangkan NodeJS adalah sebuah Javascript platform yg memungkinkan Javascript dapat dijadikan sebagai Server Side Programming dan berhubungan dengan database. Dengan menggunakan NodeJS maka Anda dapat membundle jadi satu aplikasi Anda karena di NW.js terdapat interpreter NodeJS didalamnya.
  2. Web Service API
    Memanggil Server Side API yg ditulis dengan bahasa pemrograman server side terpisah sama saja seperti Anda memanggil API ketika Anda membuat aplikasi mobile Android/iOS. Jadi dengan metode ini Anda bisa tetap menggunakan bahasa server side kesukaan Anda misalnya PHP, ASP ataupun Ruby. Adapun secara teknis Anda dapat memanggil Web Service API menggunakan metode AJAX pada Javascript.