Membuat Aplikasi Mobile Menggunakan Titanium

Posted: 8 Desember 2011 in Mobile, Programming, Web
Tag:, ,

Titanium merupakan salah satu framework alternatif buatan Appcelerator yang dapat digunakan dalam mengembangkan aplikasi mobile untuk multi platform (saat ini mendukung platform Android, iOS dan Blackberry). Sama seperti phonegap, framework ini mendukung penggunaan bahasa pemrograman web untuk client side scripting yaitu HTML, CSS dan JavaScript. Akan tetapi terdapat beberapa perbedaan dalam mekanisme penggunaannya yang membuat framework ini patut untuk dicoba, yaitu :

  • Framework ini dapat menghasilkan aplikasi native dimana menggunakan elemen-elemen antarmuka native tidak sepertiphonegap yang pada dasarnya hanya mengandalkan web engine element dari suatu platform (misalnya WebView pada Android SDK) dalam mengeksekusi source halaman antarmuka web yang disimpan di lokal (assets). Hal ini dimungkinkan dengan menggunakan elemen-elemen antarmuka (UI) dari titanium (berupa kelas-kelas JavaScript) yang pada dasarnya akan mengeksekusi elemen-elemen UI native terkait pada saat runtime (interpreter). Secara teori maka rendering dan responsiveness antarmuka (UI) dari Titanium akan lebih baik dari phoneGap.
  • Karena menghasilkan ‘aplikasi native pada saar runtime’ maka framework ini dapat mengakses sumber daya native / API native(seperti kamera, GPS, AcceleroMeter dan sebagainya) dengan baik. Hal serupa sejauh ini masih sulit diimplementasikan padaphoneGap, kalaupun terdapat implementasi pustaka PhoneGap untuk mengakses sumber daya native, implementasi tersebut masih belum stabil.
  • Framework ini memiliki IDE khusus yang dirancang untuk mempermudah pengembangan aplikasi yaitu Titanium Studio. IDE ini merupakan pengembangan dari IDE Eclipse sehingga bagi pengguna Eclipse tidak akan memiliki kendala dalam menggunakannya.
  • Selain untuk membuat aplikasi mobile, framework ini juga dapat digunakan untuk membangun aplikasi desktop yang dapat berjalan native pada berbagai platform (saat ini untuk platform Windows, Linux dan MacOS)
Titanium Framework

Titanium Framework

Pada artikel ini akan diperlihatkan salah satu instansiasi aplikasi sederhana dari framework Titanium yaitu JavanArticle yang akan meminta RSS Feeds dari server dan menampilkan daftar artikel pada antarmuka aplikasi. Langkah pertama adalah dengan membuat proyek baru pada IDE Titanium Studio melalui menu File > New > Titanium Mobile Project, kemudian menginisiasi konfigurasi dasar dari proyek seperti pada gambar berikut.

Membuat Proyek Titanium Baru

Membuat Proyek Titanium Baru

Setelah mengklik tombol ‘Finish’ maka Titanium Studio akan otomatis membuat workspace baru dan juga template aplikasi standar yang sudah memiliki inisiasi kode aplikasi. Yang perlu diperhatikan adalah file script app.js pada folder Resources, dimana file inilah yang akan menjadi main file yang akan dieksekusi secara default pada saat runtime. Setelah itu replace lah seluruh kode pada berkasapp.js dengan kode berikut.

// Set warna latar aplikasi
Titanium.UI.setBackgroundColor('#000');

// Buat UI Window baru untuk aplikasi dan inisiasi properti UI yang dibutuhkan
var win = Titanium.UI.createWindow({
    title:'Javan Articles',
    backgroundColor:'#000'
});

// Buat UI Tabel untuk dan inisiasi properti UI yang dibutuhkan
// Variabel data akan digunakan untuk menampung objek-objek RSS feed yang diterima
var data = [];
var tableview = Titanium.UI.createTableView({
	data:data,
	headerTitle: 'List of Recent Articles',
	backgroundColor:'#000'
});

// Buat UI Baris Tabel dan inisiasi properti UI yang dibutuhkan
row = Titanium.UI.createTableViewRow({
		title: 'loading articles ...',
		backgroundColor:'#000',
		color: '#FF0'
	});

// Letakkan baris tabel 'row' ke tabel 'tableview'
tableview.appendRow(row);

// Letakkan tabel 'tableview' pada window 'win'
win.add(tableview);

// Tampilkan Window ke Layar
win.open();

// Inisiasi koneksi ke server untuk memuat daftar artikel dari RSS Feeds
// Koneksi dilakukan secara asinkronus (AJAX)
var xhr = Titanium.Network.createHTTPClient();
// Inisiasi function handler yang menangani pemrosesan data yang diterima dari server
xhr.onload = function() {
	try {
		tableview.deleteRow(0, null); // hapus baris ke-0 pada tabel 'tableview'
		var doc = this.responseXML.documentElement; // assign data dari server sebagai objek XML 'doc'
		var items = doc.getElementsByTagName('item');
		var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;
		var urls = new Array();
		// Proses setiap item RSS
		for(var c=0; c		{
			urls[c] = items.item(c).getElementsByTagName('link').item(0).text;
			postName = items.item(c).getElementsByTagName('title').item(0).text;
			postUrl = items.item(c).getElementsByTagName('link').item(0).text;
			// Buat UI baris tabel 'row' dan inisiasi dengan title dari objek RSS ke - c
			row = Titanium.UI.createTableViewRow({
					title: postName,
					backgroundColor:'#000',
					color: '#FF0'
				});
			// Letakkan 'row' ke tabel 'tableview'
			tableview.appendRow(row);
			// Tambahkan handler yang akan dieksekusi ketia baris tabel di klik
			row.addEventListener('click', function (e){
				// Aksi yang akan dilakukan adalah membuka browser untuk membuka artikel terkait
				var intent = Titanium.Android.createIntent({
						action: Titanium.Android.ACTION_VIEW,
						data: urls[e.index],
					});
				intent.addCategory(Titanium.Android.CATEGORY_BROWSABLE);
				Ti.Android.currentActivity.startActivity(intent);
			});
		}
	} catch(E) {
		// Munculkan dialog jika terjadi 'exception' selama pemrosesan data dari server berlangsung
		alert(E);
	}
};

// Lakukan koneksi ke server untuk memulai operasi
xhr.open('GET', 'http://javan.co.id/feed/rss');
xhr.send();

Kode di atas akan memunculkan window aplikasi yang menampilkan daftar RSS Feeds dari http://javan.co.id/feed/rss dalam format tabel dimana langkah-langkah prosesnya sudah dijelaskan pada setiap komentar kode. Selanjutnya compile aplikasi terkait menjadiAndroid Package (.apk) dan jalankan pada emulator. Hal ini dapat dilakukan dengan melakukan klik kanan pada proyek terkait dan pilih menu Run As > Android Emulator. Anda juga dapat langsung menginstalasi aplikasi pada perangkat Android dengan melakukan klik kanan juga pada proyek terkait dan pilih menu “Install To Android Devices”. Baik pada emulator maupun pada perangkat android, saat aplikasi di jalankan lebih kurang akan memunculkan window aplikasi sesuai gambar berikut.

Instansiasi Aplikasi dari Titanium Framework

Instansiasi Aplikasi dari Titanium Framework

Untuk informasi lebih lanjut tentang framework ini serta contoh-contoh aplikasi lain yang dibuat menggunakan framework Titanium dapat dilihat pada situs terkait. Selamat mencoba dan bereksplorasi.

Komentar
  1. anggriawan mengatakan:

    Performa aplikasinya gimana bro, kalau dibandingin sama yg native?🙂

    • 144key mengatakan:

      yg pernah gw coba kelihatannya (kualitatif) sama seperti yg benar2x native bro,,,
      kl secara kuantitatif/spesifik nya blm tau bos,, sila dicoba saja😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s