Tutorial Programming

Tutorial Membuat Aplikasi Dekstop Mengunakan HTML, Css, Dan Javacricpt

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)
  2. Download TideSDK v1.3.1 beta : 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 :
  3. 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 :
New Project Form

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 :
Browse Directory Project
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 :
Project Properties

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 :
Struktur File Project

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
xml version='1.0' encoding='UTF-8'?>
<ti:app xmlns:ti='http://ti.appcelerator.org'>
<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>
<id>initial</id>
<title>App Pertama</title>
<br><url>app://index.html</url
<br><width>700</width
<br><max-width>3000</max-width
<br><min-width>0</min-width
<br><height>500</height
<br><max-height>3000</max-height
<br><min-height>0</min-height
<br><fullscreen>false</fullscreen
<br><resizable>true</resizable
<br><chrome scrollbars="true">true</chrome
<br><maximizable>true</maximizable
<br><minimizable>true</minimizable
<br><closeable>true</closeable
</window>
</ti:app>

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

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 :
Tampilan Aplikasi Desktop

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 

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.