Cara Membuat Aplikasi Desktop Berbasis HTML - 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 “tirtaganteng.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”.
| TUTORIAL MEMBUAT APLIKASI DESKTOP BERBASIS HTML |
|---|
Buatlah sebuah folder yaitu direktori yg akan dijadikan direktori project aplikasi web Anda. disini saya membuat direktori “c:/nwjs/tirtaganteng”. Lalu saya masuk ke direktori tirtaganteng dan membuat file dengan nama “package.json” dan saya mengisinya dengan kode konfigurasi sebagai berikut:
{
"name": "Tirta ganteng Banget",
"main": "tirtaganteng.html",
"window": {
"width": 2000,
"height": 1000
}
}name adalah nama dari Aplikasi, sedangkan main adalah file utama yg akan dipanggil pertama kali ketika aplikasi dijalankan. Disini file utamanya saya isikan dengan “tirtaganteng.html” maka saya membuat file ini juga di direktori tirtaganteng. Berikut ini isi kode html sederhana di tirtaganteng.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tirta Ganteng Banget</title>
</head>
<body>
<h1>Hay Sayang</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.
1.cd c:\nwjs.
2.kemudian buka aplikasi dengan cara ketik perintah berikut : nw tirtaganteng.
3.Akan muncuk windows baru yang menampilkan hasil dari aplikasi.
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 tirtaganteng.exe. Caranya pertama silakan kompres file package.json dan index.html menjadi sebuah file zip, misalnya diberi nama tirtaganteng.zip. Lalu copy file tersebut ke “c:/nwjs/tirtaganteng.zip”. Lalu ketikan perintah berikut:
4. copy /b nw.exe+tirtaganteng.zip tirtaganteng.exe
Maka kedua file tersebut akan menyatu menjadi sebuah file *.exe yaitu tirtaganteng.exe. Jadi sekarang Anda dapat dengan mudah menjalankan aplikasi web Anda menjadi sebuah aplikasi desktop cukup dengan melakukan double click pada tirtaganteng.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.
Baca juga : Cara Mengubah Icon Aplikasi Desktop
Demikian artikel tentang Cara Membuat Aplikasi Desktop Berbasis HTML, semoga bermanfaat.
Share this
SUBSCRIBE TO OUR NEWSLETTER
