Node.js adalah sebuah platform berbasiskan Chrome Javascript Runtime untuk membantu programmer membuat aplikasi network dengan cepat dan mudah. Umumnya Node.js digunakan untuk mengembangkan aplikasinetwork/real time server seperti chat server, web server, back-end server, atau REST service. Sedangkan front-end-nya dapat merupakan aplikasi berbasis web (HTML/Javascript/CSS), aplikasi mobile devais (misalnya: iOS, Android, dll.), mau pun aplikasi desktop.
node-webkit merupakan sebuah aplikasi runtime berbasis Chromium dan node.js. Kalau biasanya HTML/Javascript/CSS digunakan untuk membuat halaman web atau aplikasi web, dengan node-webkit teknologi yang sama dapat digunakan selayaknya sebuah aplikasi desktop.
Hal ini dimungkinkan karena node-webkit bertugas menangani masalah keamanan yang kita temui di web-browser, misalnya, browser tidak dapat mengakses file yang tersimpan di harddisk lokal sembarangan tanpa izin dari penggunanya. Tugas lain node-webkit adalah “membungkus” aplikasi dengan teknologi web tersebut ini menjadi satu buah aplikasi desktop. Dengan kata lain, platform-nya adalah node.js sedangkan yang bertugas menangani fungsi-fungsi sebuah User Interface aplikasi adalah WebKit.
Diharapkan artikel ini dapat membantu Anda untuk membuat aplikasi untuk Windows Desktop menggunakan Javascript, HTML, dan CSS.
Persiapan
Saat ini saya menggunakan Windows 7 untuk tutorial ini, tetapi tidak tertutup kemungkinan aplikasi yang sama dapat berjalan di Mac OS maupun Linux. Sebelum kita memulai, berikut adalah tahap yang dipersiapkan.
- Install Node.js. Artikel ini tidak membahas bagaiman menginstall Node.js di OS Anda. Silahkan Google atau ikuti panduan dari website Node.js.
- Install Yeoman:
npm install -g yeoman
- Install Yeoman Node WebKit Generator:
npm install -g generator-node-webkit
- Install Node WebKit:
npm install -g nodewebkit
- Install Grunt CommandLineInterface:
npm install -g grunt-cli
Sekarang saatnya membuat folder khusus untuk aplikasi yang akan kita buat:
D:\> mkdir contohapp; cd contohapp
Yeoman
Yeoman digunakan untuk membantu membuat struktur aplikasi di dalam folder yang telah dibuat. Isi setiap pertanyaan sesuai keinginan Anda. Kalau belum ada account di GitHub, tekan enter untuk melewati.
D:\contohapp> yo node-webkit
Setelah proses download dan setup yang dilakukan Yeoman, buka editor code favorit Anda. Saya menggunakan Adobe Brackets yang merupakan editor open source ringan dan dapat didownload dari: http://brackets.io. Bisa Anda lihat struktur aplikasi node-webkit kita sudah terbuat rapi secara otomatis oleh Yeoman Node WebKit Generator.
Brackets – Struktur Folder
Node WebKit
Ada dua cara menjalankan aplikasi desktop yang akan kita buat ini. Menggunakan Node WebKit dari command line, atau membuatnya jadi satu paket yang dapat dijalankan langsung selayaknya aplikasi desktop lain. Dalam tahap pengembangan, sebaiknya kita menggunakan command line dahulu dan memaketkannya setelah aplikasi siap untuk dipakai umum. Node WebKit yang akan disertakan pada aplikasi desktop nanti terletak di dalam folder
D:\contohapp\resources\node-webkit\Windows>
Dari command line, ketik perintah berikut di bawah ini. Perintah ini akan menjalankan aplikasi Node WebKit dengan
index.html yang didapat dari geretor Yeoman. D:\contohapp> nodewebkit app
Aplikasi Node WebKit
Terlihat seperti web browser tanpa menu ya. Sekarang coba edit file
D:\contohapp\apps\views\index.html seperti mengedit file HTML untuk web. Bila perlu, tambahkan file HTML di dalam folder tersebut. Kemudian dari command prompt tekan CTRL-C dan jalankan kembali perintah nodewebkit app. Anda juga bisa menambahkan, misalnya jQuery atau merubah file main.css untuk dicoba.
Sekarang mari kita hilangkan toolbar sehingga aplikasi ini tidak terlihat seperti web browser. Caranya adalah dengan mengedit file
D:\contohapp\apps\package.json. File ini berfungsi sebagai setting utama bagaimana aplikasi Node WebKit akan dijalankan di desktop. Sekarang tambahkan toolbar: false di dalam file ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| { "name": "contoh-app", "main": "views/index.html", "version": "0.0.1", "single-instance": true, "window": { "title": "Contoh App", "width": 450, "height": 450, "min_width": 450, "min_height": 450, "toolbar": false }, "chromium-args": "--child-clean-exit"} |
Coba jalankan kembali menggukana perintah
nodewebkit app. Dan hasilnya akan seperti gambar berikut.
Tanpa Toolbar
Grunt
Sekarang mari kita coba lihat bagaimana caranya menjadikan aplikasi ini satu paket yang siap pakai. Disinilah tugasGrunt yang sudah kita install tadi. Jalankan perintah berikut:
D:\contohapp> grunt dist-win
Anda akan mendapatkat error dari grunt seperti di gambar berikut:
Grunt Task Error
Hal ini disebabkan karena pada saat menggunakan Yeoman, kita memberi nama aplikasi
Contoh App dengan spasi. Cara memperbaikinya adalah dengan mengedit file Gruntfile.js. Ganti baris berikut:
152
| exec('copy /b tmp\\nw.exe+tmp\\app.nw tmp\\Contoh App.exe && del tmp\\app.nw tmp\\nw.exe', function (error, stdout, stderr) { |
dan hilangkan spasi di nama file
tmp\\Contoh App.exe menjadi satu kata: tmp\\ContohApp.exe menjadi:
152
| exec('copy /b tmp\\nw.exe+tmp\\app.nw tmp\\ContohApp.exe && del tmp\\app.nw tmp\\nw.exe', function (error, stdout, stderr) { |
Kemudian jalankan kembali.
D:\contohapp> grunt dist-win
Hasilnya adalah paket aplikasi Windows yang terletak di folder
D:\contohapp\dist> dalam bentuk file zip.
Unzip file ini dan jalankan file
ContohApp.exe yang baru saja kita buat. Untuk Mac OS, gunakan perintah grunt dist-mac.
Pada tahap ini seharusnya Anda telah berhasil membuat sebuah aplikasi desktop Windows menggunakan Node WebKit. Pada artikel berikutnya, kita akan mencoba membuat sebuah aplikasi sederhana menggunakan Javascript, HTML, dan CSS yang dapat dijalankan di desktop. https://bacabaja.wordpress.com/2014/03/19/tutorial-pengenalan-nodejs-nodewbkit/
