Aplikasi Desktop dengan HTML, CSS, dan Javascript

HTML, CSS, dan Javascript tidak dapat dipungkiri merupakan salah satu teknologi yang paling mudah dan menarik untuk membangun antarmuka pengguna. Sayangnya, jika ingin membangun aplikasi yang bukan web (desktop), kita tidak dapat menggunakan teknologi tersebut. Teknologi web identik dengan browser, dan hanya dapat dijalankan oleh browser.

Untungnya, dengan popularitas pengembangan web sekarang, telah banyak teknologi-teknologi tradisional yang dipindahkan ke web (lihat juga: Atwood’s Law). Salah satu teknologi tradisional yang dipindahkan yaitu pengembangan aplikasi desktop, yang sekarang telah dimungkinkan untuk dilakukan dengan teknologi Web. Bagaimana cara kita melakukannya? Mari kita lihat.

Kebutuhan Dasar

Sebelum mulai mengembangkan aplikasi desktop menggunakan teknologi web, terlebih dahulu kita harus mempersiapkan beberapa hal, yaitu:

1. NodeJS, sebagai sistem (platform) untuk membantu kita dalam melakukan kompilasi, manajemen pustaka, dan banyak fungsi lainnya untuk mempermudah pengembangan web. NodeJS juga akan kita gunakan sebagai penyedia layanan Sistem Operasi seperti akses file, yang secara tradisional tidak disediakan oleh web.
2. GruntJS, sebagai build tools utama yang akan kita gunakan. Lebih lengkapnya mengenai build tools, baca di sini.

Cara instalasi NodeJS sangat sederhana, cukup download file instalasi dan jalankan, sama persis dengan instalasi perangkat lunak lain pada umumnya. Untuk GruntJS, pastikan anda telah memiliki NodeJS, kemudian buka command line dan jalankan perintah berikut:

npm install -g grunt-cli

Kemudian biarkan npm, perangkat lunak manajemen pustaka dari NodeJS, melakukan pekerjaannya.

Persiapan Kode

Selesai mempersiapkan kebutuhan dasar, kita akan mencoba membuat aplikasi awal dengan menggunakan NodeJS. Jalankan perintah npm init di dalam sebuah direktkori baru untuk memberitahukan Node bahwa kita ingin membuat sebuah aplikasi web baru:

C:\projects\node>mkdir desktop
C:\projects\node>cd desktop
C:\projects\node\desktop>npm init

Selesai menjalankan npm init, kita akan diminta untuk menjawab berbagai pertanyaan sehingga Node dapat membuat kerangka aplikasi yang benar. Jawab pertanyaan-pertanyaan tersebut sesuai dengan keinginan. Awalnya, kita akan diberikan penjelasan mengenai apa yang akan dilakukan:

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.


See `npm help json` for definitive documentation on these fields
and exactly what they do.


Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.


Press ^C at any time to quit.

(Jika ingin berhenti dan batal membuat aplikasi, kita dapat menekan Ctrl+C kapanpun.) Kemudian pertanyaan mengenai nama aplikasi yang diinginkan akan diberikan:

name: (desktop) DesktopApp

Selanutnya, versi aplikasi: version: (0.0.0) 0.0.1
Lalu deskripsi singkatnya:

description: Desktop Application with node-webkit Demo

Dan kemudian file awal yang akan dijalankan aplikasi (perhatikan bahwa penulis menggantikan index.js menjadi index.html:

entry point: (index.js) index.html

Selanjutnya adalah pertanyaan mengenai perintah untuk menjalankan test, repositori git, dan keyword untuk aplikasi yang akan kita kosongkan untuk menyederhanakan contoh:

test command:
git repository:
keywords:

Lalu isikan nama pengembang kode dan lisensi yang diinginkan:

author: Alex Xandra Albert Sim
license: (BSD-2-Clause)

Selesai mengisikan seluruh hal tersebut, kita akan diberikan keterangan dari hal yang dilakukan oleh aplikasi:

About to write to C:\projects\node\desktop\package.json:


{
  "name": "DesktopApp",
  "version": "0.0.1",
  "description": "Desktop Application with node-webkit Demo ",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex Xandra Albert Sim",
  "license": "BSD-2-Clause"
}

Untuk sekarang, kita hanya akan mengiyakan saja ketika program meminta persetujuan kita:

Is this ok? (yes) yes

Selesai menjalankan seluruh langkah di atas, kita akan memiliki dua buah file dalam direktori desktop, yaitu:

1. index.html, merupakan file HTML utama yang akan kita gunakan untuk membangun aplikasi.
2. package.json, merupakan file yang berisikan keterangan mengenai aplikasi kita (istilah kerennya, metadata).

Sekarang gantikan isi dari index.html dengan kode berikut, sebagai “Hello World” dari aplikasi:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>We are using node.js <script type="text/javascript">document.write(process.version)</script></p>
</body>
</html>

Untuk mencoba hasilnya, buka file di browser. Kita akan melihat tampilan seperti berikut:

Persiapan Build Tools

Selanjutnya kita akan mempersiapkan berbagai tools yang dibutuhkan untuk membuat kode HTML kita dapat dijalankan seolah-olah aplikasi desktop. Teknologi yang akan kita gunakan yaitu node-webkit.
Untungnya, dengan adanya GruntJS, kita dapat langsung menggunakan Grunt untuk melakukan berbagai hal “berat” yang diperlukan untuk menggabungkan kode HTML kita dengan node-webkit. Pertama-tama, kita jalankan perintah untuk instalasi GruntJS pada repositori kode kita terlebih dahulu. Jalankan perintah berikut pada command line di direktori yang sama dengan kode:

npm install grunt --save-dev

Sekali lagi, biarkan npm melakukan hal yang dibutuhkan untuk instalasi Grunt pada repositori kita. Selesai melakukan hal tersebut, lakukan lagi instalasi terhadap grunt-node-webkit-builder, yang menghubungkan GruntJS dengan node-webkit. Perintah yang harus kita jalankan yaitu:

npm install grunt-node-webkit-builder --save-dev

Setelah melakukan instalasi tools yang diperlukan, sekarang mari kita merapikan struktur direktori kita. Jalankan langkah-langkah berikut untuk merapikan direktori:

1. Buat dua buah direktori, dengan nama build dan source. Kita akan menyimpan seluruh kode HTML/CSS/Javascript ke dalam direktori source kedepannya, dan direktori build akan menjadi tempat penyimpanan hasil kompilasi program.
2. Pindahkan index.html dan package.json ke dalam direktori source.

Hasil akhir dari direktori yang akan kita dapatkan adalah sebagai berikut:

Catatan: Direktori node_modules dibuat secara otomatis oleh npm ketika kita melakukan instalasi grunt dan grunt-node-webkit-builder.

Bagaimana dengan Gruntfile.js? File ini akan kita buat sekarang (sebenarnya penulis lupa menuliskan tentang file tersebut sebelumnya :p). Buat Gruntfile.js dan isikan dengan kode berikut, untuk konfigurasi Grunt:

module.exports = function(grunt) {
    grunt.initConfig({
        nodewebkit: {
            options: {
                build_dir: './build/', // tempat simpan hasil kompilasi
                mac: true,             // compile untuk mac
                win: true,             // compile untuk windows
                linux32: true,         // compile untuk linux (32-bit)
                linux64: true          // compile untuk linux (64-bit)
            },
            src: './source/**/*'
        },
    });


    grunt.loadNpmTasks('grunt-node-webkit-builder');
    grunt.registerTask('default', ['nodewebkit']);
}

Yang kita lakukan pada kode di atas pada dasarnya adalah menginformasikan kepada Grunt target kompilasi yang diinginkan (kompilasi ke mac? windows? linux?) dan kemudian di mana kita menyimpan kode kita (src) dan di mana hasil kompilasi akan disimpan (build_dir).

Build and Compile

Selesai mempersiapkan tools kompilasi, sekarang kita dapat melakukan kompilasi dengan perintah berikut:

grunt

dan Grunt akan melakukan kompilasi untuk kita secara otomatis:

C:\projects\node\desktop>grunt
Running "nodewebkit:src" (nodewebkit) task
Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-win-ia32.zip
Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-osx-ia32.zip
Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-linux-ia32.tar.gz
Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-linux-x64.tar.gz


// Maasih banyak lainnya


>> Created a new release with node-webkit (0.7.5) for win, mac, linux32, linux64


>> @ C:\projects\node\desktop\build\releases\DesktopApp


Done, without errors.

Sekarang kita dapat masuk ke direktori build/releases dan melihat hasil kompilasi kita. Coba jalankan aplikasi untuk sistem operasi anda, dan lihat hasilnya:

Selanjutnya, jika ingin menambahkan kode CSS maupun Javascript, kita cukup menambahkan kode seperti kita membuat apliikasi web. Jelasnya, seluruh kode kita harus disimpan pada direktori source.
Untuk melengkapi pengetahuan, baca juga cara memanggil modul NodeJS dari aplikasi node-webkit, sehinggga kita dapat menggunakan modul yang tidak dapat diakses aplikasi web tradisional. Lihat juga aplikasi-aplikasi menarik yang dikembangkan dengan cara ini.

Posted by Iskandar

Tweet