Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com
» » Aplikasi Desktop dengan HTML, CSS, dan Javascript

Aplikasi Desktop dengan HTML, CSS, dan Javascript

internet
Monday 9 February 2015
Belum ada komentar

 

 

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:
    

  1. npm install -g grunt-cli
    2.
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:
    

  1. C:\projects\node>mkdir desktop
    2. 

  2. C:\projects\node>cd desktop
    3. 

  3. C:\projects\node\desktop>npm init
    4.
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:
    

  1. This utility will walk you through creating a package.json file.
    2. 

  2. It only covers the most common items, and tries to guess sane defaults.
    3. 

  3. 

    4. 

  4. See `npm help json` for definitive documentation on these fields
    5. 

  5. and exactly what they do.
    6. 

  6. 

    7. 

  7. Use `npm install <pkg> --save` afterwards to install a package and
    8. 

  8. save it as a dependency in the package.json file.
    9. 

  9. 

    10. 

  10. Press ^C at any time to quit.
    11.
(Jika ingin berhenti dan batal membuat aplikasi, kita dapat menekan Ctrl+C kapanpun.) Kemudian pertanyaan mengenai nama aplikasi yang diinginkan akan diberikan:
    

  1. name: (desktop) DesktopApp
    2.
Selanutnya, versi aplikasi: version: (0.0.0) 0.0.1
Lalu deskripsi singkatnya:
    

  1. description: Desktop Application with node-webkit Demo
    2.
Dan kemudian file awal yang akan dijalankan aplikasi (perhatikan bahwa penulis menggantikan index.js menjadi index.html:
    

  1. entry point: (index.js) index.html
    2.
Selanjutnya adalah pertanyaan mengenai perintah untuk menjalankan test, repositori git, dan keyword untuk aplikasi yang akan kita kosongkan untuk menyederhanakan contoh:
    

  1. test command:
    2. 

  2. git repository:
    3. 

  3. keywords:
    4.
Lalu isikan nama pengembang kode dan lisensi yang diinginkan:
    

  1. author: Alex Xandra Albert Sim
    2. 

  2. license: (BSD-2-Clause)
    3.
Selesai mengisikan seluruh hal tersebut, kita akan diberikan keterangan dari hal yang dilakukan oleh aplikasi:
    

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

  2. 

    3. 

  3. {
    4. 

  4.   "name": "DesktopApp",
    5. 

  5.   "version": "0.0.1",
    6. 

  6.   "description": "Desktop Application with node-webkit Demo ",
    7. 

  7.   "main": "index.html",
    8. 

  8.   "scripts": {
    9. 

  9.     "test": "echo \"Error: no test specified\" && exit 1"
    10. 

  10.   },
    11. 

  11.   "author": "Alex Xandra Albert Sim",
    12. 

  12.   "license": "BSD-2-Clause"
    13. 

  13. }
    14.
Untuk sekarang, kita hanya akan mengiyakan saja ketika program meminta persetujuan kita:
    

  1. Is this ok? (yes) yes
    2.
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:
    

  1. <!DOCTYPE HTML>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Hello, World!</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.     <h1>Hello World!</h1>
    9. 

  9.     <p>We are using node.js <script type="text/javascript">document.write(process.version)</script></p>
    10. 

  10. </body>
    11. 

  11. </html>
    12.
Untuk mencoba hasilnya, buka file di browser. Kita akan melihat tampilan seperti berikut:
Tampilan Aplikasi dalam Browser

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:
    

  1. npm install grunt --save-dev
    2.
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:
    

  1. npm install grunt-node-webkit-builder --save-dev
    2.
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:
Struktur Direktori Kode
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:
    

  1. module.exports = function(grunt) {
    2. 

  2.     grunt.initConfig({
    3. 

  3.         nodewebkit: {
    4. 

  4.             options: {
    5. 

  5.                 build_dir: './build/', // tempat simpan hasil kompilasi
    6. 

  6.                 mac: true,             // compile untuk mac
    7. 

  7.                 win: true,             // compile untuk windows
    8. 

  8.                 linux32: true,         // compile untuk linux (32-bit)
    9. 

  9.                 linux64: true          // compile untuk linux (64-bit)
    10. 

  10.             },
    11. 

  11.             src: './source/**/*'
    12. 

  12.         },
    13. 

  13.     });
    14. 

  14. 

    15. 

  15.     grunt.loadNpmTasks('grunt-node-webkit-builder');
    16. 

  16.     grunt.registerTask('default', ['nodewebkit']);
    17. 

  17. }
    18.
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:
    

  1. grunt
    2.
dan Grunt akan melakukan kompilasi untuk kita secara otomatis:
    

  1. C:\projects\node\desktop>grunt
    2. 

  2. Running "nodewebkit:src" (nodewebkit) task
    3. 

  3. Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-win-ia32.zip
    4. 

  4. Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-osx-ia32.zip
    5. 

  5. Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-linux-ia32.tar.gz
    6. 

  6. Downloading: https://s3.amazonaws.com/node-webkit/v0.7.5/node-webkit-v0.7.5-linux-x64.tar.gz
    7. 

  7. 

    8. 

  8. // Maasih banyak lainnya
    9. 

  9. 

    10. 

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

  11. 

    12. 

  12. >> @ C:\projects\node\desktop\build\releases\DesktopApp
    13. 

  13. 

    14. 

  14. Done, without errors.
    15.
Sekarang kita dapat masuk ke direktori build/releases dan melihat hasil kompilasi kita. Coba jalankan aplikasi untuk sistem operasi anda, dan lihat hasilnya:
Hasil Aplikasi
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.
Jadi, tunggu apa lagi? Segera coba dan buat aplikasi desktop dengan teknologi web!
Happy hacking :D
Terima kasih telah membaca artikel tentang Aplikasi Desktop dengan HTML, CSS, dan Javascript di blog gOOGLinG... jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Amad Soleht | Business Online Intrepreneur | Business ~ Online Intrepreneur | www.amadsoleh.com