Apa yang ada di pikiran kita kalo mendengar kata HTML, CSS, Javascript ? pasti pikiran kita akan langsung tertuju pada satu kata yaitu website. Yups HTML, CSS dan Javascript merupakan Client Side Scripting dari website, atau komponen untuk penyusunan web bagian sisi client (yang dieksekusi oleh browser). Saya dulu sempet bertanya-tanya, "Bagaimana cara html5, css dan javascript digunakan untuk komponen aplikasi desktop?" dikarenakan UI untuk aplikasi web biasanya menarik dan mudah dibanding aplikasi desktop yang (menurut saya) susah, dan pada akhirnya jawaban (cara) untuk pertanyaan saya dulu tersebut sekarang bisa ditemukan, ya cara untuk membuat tampilan aplikasi desktop menggunakan html, css, dan javascript sekarang sudah bisa, lalu bagaimana caranya?

TideSDK

Apa itu TideSDK ? TideSDK atau singkatan dari Titanium Desktop Software Development Kit merupakan Sebuah perangkat pengembangan perangkat lunak yang memungkinkan pengembang untuk membuat aplikasi lintas platform. Dengan menggunakan tideSDK seseorang yang hanya mempunyai skill sebagai web development dapat sekaligus membuat 2 platform (aplikasi web dan aplikasi desktop). TideSDK adalah open source dan dikembangkan secara kolaboratif oleh tim ahli di seluruh dunia bersama-sama dengan kontributor open source. TideSDK support 3 bahasa yaitu PHP, Python dan Ruby.

Untuk pengenalan tentang tideSDK bisa dibaca langsung di tideSDK wiki disini https://github.com/TideSDK/TideSDK/wiki

Setelah mengenal tentang TideSDK sekarang kita lanjut untuk melanjutkan jawaban dari pertanyaan saya diatas "bagaimana caranya?" sebelum lanjut ke step-by-step membuat aplikasi desktop kita harus menyiapkan dulu peralatan tempur nya, apa saja yang diperlukan untuk pembuatan aplikasi desktop kali ini :

1. TideSDK (di tutorial ini saya menggunakan os windows 7)
Download TideSDK v1.3.1 beta :
• Windows x86-64 : download disini
• OSX x86-64 : download disini
• Linux x86 : download disini
• Linux x64 : download disini
Ekstrak file zip yang udah di download di :
• Mac OSX: ~/Library/Application Support/TideSDK
• Linux: ~/.tidesdk
• Windows XP: C:\Documents and Settings\All Users\Application Data\TideSDK
• Windows 7: C:\ProgramData\TideSDK
Download TideSDK Developer 1.4.2 dan install :
• Windows x86-64 : download disini
• OSX x86-64 : download disini
• Linux x86 : download disini
• Linux x64 : download disini
2. Editor (terserah anda, semua editor bisa, notepad juga bisa ;) ) tapi saya prefare menggunakan SublimeText

Catatan : Usahakan pada saat extrak file TideSDK v1.3.1 beta dan installasi TideSDK 1.4.2 developer mengikuti aturan yang ada, baca disini

Setelah peralatan ada (peralatan telah terinstall semua) hal pertama yang kita lakukan adalah buka aplikasi TideSDK Developer ( Start > All Programs > TideSDK Developer > TideSDK Developer ), setelah terbuka aplikasinya klik "New Project" maka akan terbuka form seperti gambar di bawah ini :

Project Type = Secara default terisi Destop, dan tidak bisa diubah

Name  = Nama aplikasi (usahakan untuk tidak menggunakan spasi)

App Id = Contoh pengisiannya bisa dilihat pada placeholder nya

Directory = Untuk memudahkan anda tinggal klik icon sebelah kanan field directory, dan tinggal pilih dimana anda ingin menyimpan project nya, contoh :

Company/Personal URL = Bisa diisikan nama perusahaan atau url (situs) anda

Titanium SDK Version = Jangan mengubah isian ini, karena sudah terisi secara default

Language Module = Pilihan bahasa yang akan digunakan

Karena kali ini kita akan mencoba untuk merancang aplikasi desktop menggunakan HTML,  CSS dan Javascript maka untuk Pilihan "Language Module" bisa dikosongkan alias jangan pilih bahasa apapun. Setelah terisi semua form nya kemudian klik tombol Create Project, maka secara otomatis project anda akan dibuat dan menampilkan form seperti gambar di bawah ini :

Path = Alamat dimana project anda berada

Application ID = ID untuk aplikasi anda

Versi = Versi untuk aplikasi anda (bisa anda edit)

Description = Deskripsi tentang aplikasi anda

Publisher = Siapa yang mempublikasikannya

Publisher URL = Alamat URL atau Nama Perusahaan anda (Optional)

Application Icon = Secara default akan terisi "default_app_logo.png"

Titanium SDK = Secara default akan terisi 1.3.1-beta (jangan dirubah)

Copyright = Catatan copyright anda

Jika anda merubah beberapa isian silahkan untuk klik tombol Save Changes untuk menyimpan isian form nya.

Selanjutnya kita lihat folder project kita (lihat path/alamat dimana project anda berada), secara default anda akan melihat struktur file project anda seperti gambar di bawah ini :

Folder dist pertama kali kosong,

Folder Resources adalah folder dimana kita akan mengisi file-file seperti file html, css, javascript, image dan lain-lain,

File .gitignore anda bisa membacanya disini tentang file gitignore

File CHANGELOG.txt bisa diisi catatan tentang perubahan pada aplikasi anda per versi

File LICENSE.txt bisa diisi catatan tentang lisensi aplikasi anda

File manifest berisi tulisan dari pengisian form pada saat pertama kali pembuatan aplikasi

File tiaap.xml berisi scripting seperti dibawah ini

<?xml version='1.0' encoding='UTF-8'?>
<ti:app xmlns:ti='http://ti.appcelerator.org'>
<!-- These values are edited/maintained by TideSDK Developer -->
<id>com.ptseadanya.apppertama</id>
<name>AppPertama</name>
<version>1.0</version>
<publisher>Fauzi</publisher>
<url>PT Seadanya</url>
<icon>default_app_logo.png</icon>
<copyright>2014 by Fauzi</copyright>
<!-- Window Definition - these values can be edited -->
<window>
<id>initial</id>
<title>App Pertama</title>

<url>app://index.html</url> <!-- lokasi file index project anda -->

<width>700</width> <!-- lebar tampilan aplikasi anda -->

<max-width>3000</max-width> <!-- lebar maksimal jika aplikasi anda di resize -->

<min-width>0</min-width> <!-- lebar minimal jika aplikasi anda di resize -->

<height>500</height> <!-- Tinggi aplikasi anda -->

<max-height>3000</max-height> <!-- tinggi maksimal jika aplikasi anda di resize -->

<min-height>0</min-height> <!-- tinggi minimal jika aplikasi anda di resize -->

<fullscreen>false</fullscreen> <!-- false jika anda tidak ingin aplikasi anda fullscreen secara default, true untuk sebaliknya -->

<resizable>true</resizable> <!-- true jika aplikasi anda bisa di resize, false sebaliknya -->

<chrome scrollbars="true">true</chrome> <!-- true jika anda menginginkan adanya scroll, false sebaliknya -->

<maximizable>true</maximizable> <!-- true jika aplikasi anda ada tombol/bisa maximizable, false untuk mendisable -->

<minimizable>true</minimizable> <!-- seperti maximizable tapi ini untuk minimize aplikasi -->

<closeable>true</closeable> <!-- true untuk menampilkan tombol close, false sebaliknya -->
</window>
</ti:app>

Agar struktur penempatan file project anda rapih saya menyarankan untuk mengikuti struktur file project nya seperti ini :

Untuk isian file-file (html, css, javascript dll) nya anda bisa ikuti seperti project saya di link ini : https://github.com/fauzieuy/AppPertama

Setelah project dan file-file anda terisi dan rapih seperti project saya, langkah selanjutnya mengetest project kita, caranya buka kembali aplikasi tideSDK Developer

1. Klik Import Project

2. Pilih Directory Project anda

3. Klik Test & Package

4. Klik Launch App

Tunggu sampai muncul jendela aplikasi anda seperti gambar di bawah ini :

Jika ingin ada perubahan pada koding/script, tutup dulu aplikasinya, ubah kode, kemudian Launch App kembali. Selamat Mencoba!

Referensi :

http://tidesdk.multipart.net/docs/user-dev/generated/#!/guide/getting_started