Belajar Titanium – Bagian 1 : Hello World

Saat ini kita bisa mengembangkan aplikasi mobile dengan bahasa selain bahasa resmi (native) platform yang bersangkutan (Java/C++ untuk Android, Objective-C untuk iOS). Tools yang memungkinkan kita bikin banyak aplikasi dengan satu codebase biasa disebut cross-platform SDK. Beberapa yang populer antara lain:

SDK Bahasa
Adobe AIR ActionScript 3.0
Corona, Gideros Mobile, Moai Lua
Xamarin, Unity C#
Marmalade, Cocos2D-X C++
PhoneGap/Apache Cordova HTML,CSS,JavaScript
Appcelerator Titanium JavaScript

Tools di atas menawarkan kemudahan dalam pengembangan dan perawatan (maintenance) aplikasi yang pada akhirnya akan menghemat biaya. Tanpa tools di atas, untuk membuat aplikasi iOS dan Android kita butuh minimal 2 orang programer atau 1 orang programer + 2x kerja. Itu kalo cuma iOS & Android, kalo tambah BB, Windows Phone … bayangin aja berapa biayanya dalam segi waktu, tenaga & duit.

Kalo gitu, kenapa orang masih banyak yang pilih native SDK? Cross-platform tools bukan tanpa kelemahan, yang utama adalah akses ke hardware & fitur-fitur terbaru dari platform yang dituju. Keterlambatan dalam hal suport fitur tertentu sudah biasa & bisa dimaklumi. Jadi mau ga mau kita harus tunggu update dari cross-platform SDK yang kita pakai.

Appcelerator Titanium

titanium

Dalam artikel ini, saya ingin memperkenalkan cross-platform SDK yang menghasilkan produk yang setara dengan apa yang bisa kita hasilkan kalo kita pake native, yaitu Appcelerator Titanium (selanjutnya saya sebut Ti).

Ti memungkinkan kita menulis kode dalam bahasa JavaScript tapi hasil akhirnya adalah 100% native app bukan hybrid ( web app yang dipaketin dalam bentuk native app, seperti Phonegap). Pada saat kompilasi, Ti compiler akan menterjemahkan kode yang kita tulis ke dalam kode native platform yang kita tuju. Untuk iOS, Ti akan menterjemahkan kode kita ke dalam kode C lalu mengkompilasinya pake iOS SDK, sedangkan untuk Android, kode kita diterjemahkan ke dalam kode Java lalu dikompilasi pake Android SDK. Karena itu, selain Ti SDK, kita juga perlu instal XCode untuk bikin aplikasi iOS, Android SDK untuk bikin aplikasi Android.

Karena Ti pake native SDK untuk bikin produk akhir, User Interface yang dihasilkan juga sama dengan apa yang dihasilkan native SDK. Untuk ngetes aplikasi, Ti juga pake emulator/simulator bawaan native SDK.

Native UI

Ti dirilis dalam beberapa lisensi. Ada yang gratis, ada yang bayar. Untuk bikin aplikasi yang tidak terlalu besar dan rumit, kita bisa pake versi gratisnya. Sebenarnya untuk aplikasi yang besar (skala enterprise) juga bisa, tapi kalo aplikasinya bener-bener rumit & critical, sebaiknya kita pertimbangkan pake versi enterprise. Mahal ($999/bulan), tapi bikin aplikasi enterprise memang ga ada yang murah. Kalo kebetulan dapat proyek skala besar gini & bujet ga cukup untuk bayar lisensi Ti, mungkin Xamarin ($299/tahun per platform) bisa jadi alternatif. Untuk mayoritas aplikasi, Ti community edition yang gratis udah cukup.

Instalasi

Untuk mendapatkan Titanium Studio (SDK termasuk di dalam paket instalasi), kita perlu registrasi. Setelah itu baru kita bisa unduh terus instal. Tau kan caranya instal? Kalo ga tau ya gawat 🙂

Pada waktu Ti Studio pertama kali kita buka, kita perlu login dengan username & password yang kita pake untuk registrasi. Di halaman dashboard, kita buka tab Get Started, lihat panel paling bawah. Di dalamnya ada daftar SDK yang didukung Ti. SDK yang bertanda merah berarti belum ada atau ga dikenali sama Ti. Yang bertanda hijau udah bisa kita pake. Untuk instal SDK, kita bisa pake cara manual sesuai dokumentasi SDK yang bersangkutan.

SDK

Kita bisa klik nama SDK dalam daftar untuk melihat informasi status SDK yang bersangkutan.

Android SDK

IOS SDK

BB SDK

Setelah instalasi SDK yang dibutuhkan, tutup lalu buka kembali Ti Studio supaya SDK yang baru diinstal bisa dikenali.

Hello World

Setelah instalasi beres, kita coba bikin aplikasi super sederhana sekedar untuk melihat gimana struktur proyek dan hasil kompilasinya.

Untuk bikin proyek baru, klik File->New->Mobile Project.

New project

Terus pilih “Alloy” di panel sebelah kiri (1) & “Default Alloy Project” (2). Klik Next.

Default alloy project

Terakhir, kita isi seting project. Isi nama aplikasi (1), app Id dalam bentuk reversed domain, dll. Klik Finish.

Project settings

Ti Studio akan menampilkan editor untuk project setting yang didefinisikan dalam file tiapp.xml. Kita bisa lewati bagian ini & klik tab index.xml.

HelloWorld indexview

Kita langsung coba compile untuk Android & iOS (kalo Anda pake Mac & punya XCode). Klik tombol dengan gambar serangga (1), terus pilih Android atau iOS.

HelloWorld start simulator

Khusus untuk Android, ada bug di Ti SDK versi 3.1.0 yang bikin kita ga bisa compile. Bug ini bisa diatasi dengan cara bikin symlink atau kopi file. Untuk detilnya silakan baca thread ini. Bug ini kabarnya diperbaiki di versi 3.1.1 yang akan segera dirilis.

Kalo semuanya beres, hasilnya adalah seperti gambar di bawah, kalo label Hello, World kita klik, hasilnya seperti gambar berikutnya.

Hello World

Hello World alert

Struktur Proyek

Lihat panel Project Explorer di sebelah kiri. Di sana ada beberapa file dan folder penting yang nantinya sering kita update selama kita mengembangkan aplikasi.

Important folders

Ti memakai filosofi yang sama dengan framework Ruby On Rails yaitu conventions over configurations, jadi Ti mengharuskan kita menamai file dengan cara tertentu dan meletakkannya di tempat-tempat yang sudah ditentukan juga. Direktori /controllers adalah tempat kita meletakkan file JavaScript yang berisi business logic. /models adalah tempat file JavaScript yang berisi data. /views berisi file XML yang mendefinisikan tampilan (user interface). /styles berisi file yang mendefinisikan properti visual dari tampilan user interface (mirip CSS).

Struktur proyek akan sangat berbeda kalo kita ga pilih “Alloy” pada saat pembuatan proyek. Alloy adalah framework MVC terbaru dari Ti yang berbasis BackboneJS dan memungkinkan kita dengan mudah memecah struktur kode ke dalam bagian-bagian kecil berdasarkan fungsinya (model, view, styles, controller).

View, Style, & Controller

View adalah file XML yang mendefinisikan elemen User Interface. Kalo Anda pernah belajar Flex, fungsi view sama dengan file MXML.

Bentuk dasar sebuah view adalah seperti berikut.

<Alloy>
   <Window class="container">
    ...elemen UI disini
   </Window>
</Alloy>

Struktur View

Setiap view harus dibuka & ditutup dengan tag Alloy. Root dari sebuah view adalah Window yang merepresentasikan screen yang sedang aktif. Elemen user interface kita letakkan di dalam Window sebagai elemen child.

Untuk mengatur tampilan (style) elemen UI, kita bisa pake metode yang mirip dengan pengaturan tampilan halaman web dengan CSS. Style dalam Ti kita definisikan dalam file berekstensi .tss yang kita simpan dalam direktori /styles. Kecuali untuk global styles, nama file ini harus sama dengan nama file .xml yang akan diatur. Untuk view index.xml, nama file style-nya index.tss, untuk home.xml style-nya home.tss, dsb.

Controller adalah file berekstensi .js yang berisi logika aplikasi. Controller menghandel interaksi user dengan aplikasi, melakukan update data (model), dsb. Dengan kata lain, controller adalah otak dari aplikasi yang kita buat.

Berikut ini hubungan antara view, style, dan controller.

View style controller

Style

TSS sangat mirip dengan CSS. Kita bisa mengatur style untuk elemen tertentu, elemen dengan id tertentu, atau elemen dengan class tertentu. Sebagai contoh, kita edit file index.xml & ganti isinya dengan kode berikut:

<Alloy>
	<Window class="container">
		<TextField></TextField>
		<TextField id="tf1" class="redText"></TextField>
		<TextField id="tf2" class="redText"></TextField>
	</Window>
</Alloy>

Edit file index.tss.

".container": {
	backgroundColor:"white"
},
"TextField":{
	top:10,
	width:250,
	height:60,
	color:"#000"
},
"#tf1":{
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	top:80
},
"#tf2":{
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_BEZEL,
	top:150
},
".redText":{
	color:"#FF0000"
}

Seting borderStyle nggak berlaku untuk Android & Blackberry.

Styles

Platform-specific

Prinsip Ti adalah “write once, adapt anywhere“. Jadi kita ga bisa menulis kode satu kali terus berharap bisa deploy langsung untuk beberapa platform. Yang bisa kita tulis adalah kode generik yang bisa dipake di semua platform lalu menambahkan kode khusus yang spesifik untuk masing-masing platform. Kurang lebih mirip dengan metode responsive web design.

Kenapa ga bisa sekali tulis, buat semua platform? Jawabannya antara lain :

  1. Masing-masing platform punya aturan UI sendiri (UI Guidelines). Android beda dengan iOS, beda juga dengan Blackberry.
  2. Masing-masing platform punya fitur yang belum tentu ada di platform lain. Kalaupun ada yang sama, metode akses dan cara penggunaannya pasti beda.
  3. Kalo dipaksain, sebaik-baik hasil akhirnya adalah produk yang jelek nggak, bagus juga nggak alias medioker.

Menulis kode yang spesifik untuk platform tertentu relatif gampang karena Ti menyediakan sarana untuk itu.

View Element

Kita pake atribut platform untuk untuk memisahkan elemen UI satu platform dari yang lain. Dalam kode berikut, untuk Android aplikasi kita akan menampilkan teks “Hello Android” sedangkan untuk iOS, “Hello iOS”.

<Alloy>
	<Window class="container">
		<Label>Hello</Label>
		<Label platform="ios" id="label" >iOS</Label>
		<Label platform="android" id="label">Android</Label>
		
	</Window>
</Alloy>

Platform specific labels

View

Kita bisa menyederhanakan UI yang rumit dengan membuat view tersendiri untuk masing-masing platform. Pertama kita buat subdirektori dalam direktori app/views dengan nama sesuai dengan platform yang bersangkutan.

Platform view files

Kemudian kita buat file views/android/index.xml dan views/ios/index.xml.


	
		
	


	
		
	

Platform specific views

Style

Untuk memisahkan style, kita bisa pake 2 cara:

  1. Pake specifier platform
  2. Bikin file .tss yang terpisah.

Platform specifier

Kita pake [platform=nama_platform] setelah element selector.

<Alloy>
	<Window class="container">
		<Label>Platform-specific styling</Label>
	</Window>
</Alloy>
".container[platform=ios]": {
	backgroundColor:"black"
},

".container[platform=android]": {
	backgroundColor:"blue"
},

"Label":{
	width:Ti.UI.SIZE,
	color:"white"
}

Platform specific styles

Platform .tss

Sebagai alternatif, kalo file .tss aplikasi udah terlalu rumit, kita bisa bikin index.tss khusus untuk masing-masing platform sementara style global kita definisikan dalam file app.tss. Nama file .tss harus sama dengan nama file .xml.

//global styles. file : styles/app.tss
"Label":{
	width:Ti.UI.SIZE,
	color:"white"
}
//style untuk iOS. file : styles/ios/index.tss
".container": {
	backgroundColor:"black"
}
//style untuk android. file : styles/android/index.tss
".container": {
	backgroundColor:"blue"
}

Tampilan aplikasi sama dengan contoh sebelumnya.

Theme

Theme kita gunakan untuk mengatur style aplikasi secara keseluruhan. Mirip dengan global styles. Bedanya, global styles bisa di-override (diubah) oleh platform-style sementara style yang didefinisikan dalam theme sifatnya absolut & nggak bisa di-override oleh style di luar theme.

Untuk bikin theme, kita perlu bikin direktori app/themes kemudian di dalamnya kita bikin lagi direktori untuk theme yang ingin kita buat, misalnya /green untuk green theme dan /green untuk green theme. File dalam direktori app/assets kita pindahkan ke direktori app/themes/(nama theme)/assets Terus kita edit file app/config.json & kita set theme untuk masing-masing platform.

Theme files

//red theme
".container": {
	backgroundColor:"red"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
} 
//green theme
".container": {
	backgroundColor:"green"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#FFF"
} 
{
	"global": {}, 
	"env:development": {}, 
	"env:test": {}, 
	"env:production": {}, 
	"os:ios": {
		"theme":"red"
	}, 
	"os:android": {
		"theme":"green"
	}, 
	"dependencies": {}
}

Platform themes

Controller

Nanti di artikel lanjutannya … 🙂

Also in this category ...


3 thoughts on “Belajar Titanium – Bagian 1 : Hello World”

  1. Wah, walaupun masih awam, yg penting ada niat pengen tau dan belajar 😀 thanks artikelnya bang, apakah ini lebih simple dari eclipse? atau malah lebih rumit dari eclipse?

  2. @marhamah
    Tetap harus bayar karena butuh developer profile untuk distribusi & testing di device

Comments are closed.