Menjalankan aplikasi HTML5 dan Javascript secara native dengan NW.js


ChemDy - NW.js atau yang sebelumnya disebut node-webkit adalah sebuah runtime app dengan based chromium dan node.js. Nw.js memungkinkan kita untuk memanggil modul node.js secara langsung dari DOM (Document Object Model). Sehingga kita dapat menjalankan aplikasi HTML5 dan javascript secara native.
NW.js tersedia untuk GNU/Linux, Windows dan Mac OSX.
Salah satu aplikasi yang dibangun dengan NW.js adalah game edukasi Adcensys versi desktop.
Adcensys (The Adventure of Alchemist-Colloidal System)

Berikut adalah langkah-langkah membangun native app dengan NW.js (saya menggunakan Ubuntu Linux)

1. Siapkan project aplikasi kita, kemudian masukan dalam folder www dan letakkan di direktori home.
2. Unduh NW.js sesuai dengan sistem operasi dan arsitektur yang digunakan.
https://nwjs.io/downloads/
3. Ekstrak NW.js
4. Ubah nama folder NW.js dan binary file "nw" didalamnya sesuai dengan aplikasi kita. Contoh:
mv nwjs-v0.22.1-linux-ia32 Linux-Game
mv Linux-Game/nw Linux-Game/Game
5. Pindahkan folder www aplikasi kita ke dalam folder NW.js
mkdir Linux-Game/www
mv www/* Linux-Game/www
6. Buat manifest file (package.json)
Bisa menggunakan npm
cd Linux-Game
npm init
Kemudian masukan nama, versi, deskripsi, entry point, dan lain-lain. Untuk entry point masukkan halaman index project kita, saya menggunakan index.html

Atau bisa juga membuat manifest file secara manual dengan editor kemudian simpan dengan nama "package.json". Isikan dengan kode berikut dan ganti teks warna merah.
{
  "name": "adcensys-linux",
  "version": "3.4.2",
  "description": "just another game about chemistry",
  "main": "www/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Olin Amin Suryana",
  "license": "ISC"
}

7. Jalankan aplikasi HTML5 dan javascript kita secara native
./nw

Untuk tutorial diatas saya menggunakan Linux Ubuntu 16.04, jika menggunakan sistem operasi lain bisa disesuaikan. Karena secara garis besar tahap-tahapnya sama.
Previous
Next Post »