Step-By-Step Nokia S40 Web App: Kateglo

Hai, hai, lama tak perjumpa. Maklum, load kerjaan lagi tinggi2-nya *alesaaaaaaaan aja*. Sekarang saya mau posting lagi yang panjang-panjang, biar ada alasan buat hibernate lagi :)).

Anyway, beberapa bulan yang lalu, Nokia merelease suatu platform untuk development aplikasi pada platform nokia S40. Platform ini berbasiskan javascript, html, dan css dan berjalan di atas Nokia Browser. Konsepnya, sedikit banyak seperti Opera Mini, dimana javascript yang digunakan, berjalan di sisi server. Studi kasus untuk belajar kali ini adalah API dari Kateglo.

API Kateglo masih terbatas, hanya untuk melihat semua hal yang berhubungan dengan suatu kata atau istilah. Sebagai contoh, coba buka URL berikut:

http://kateglo.bahtera.org/api.php?format=json&phrase=batu
http://kateglo.bahtera.org/api.php?format=json&phrase=pilih

Kedua URL di atas akan menghasilkan SEMUA data yang dimiliki kateglo untuk kata batu dan pilih.

Silahkan pelajari terlebih dahulu struktur JSON yang dihasilkan dari API tersebut. Kalau pusing melihat text-text JSON, bisa pakai tool Online JSON Viewer untuk melihat struktur-nya secara lebih manusiawi.

Kalau sudah selesai mempelajari struktur-nya, sekarang kita coba olah.
Yang pertama kali harus dilakukan adalah, mendownload dan menginstall S40 web developer environment. Kalau belum, download dulu installer-nya. Setelah itu, buka dan jalankan.
Kemudian, buat project baru melalui File » New » Series 40 web app (wgt)

Free Image Hosting at www.ImageShack.us

Akan muncul window baru, pilih Basic web app project » Next

Free Image Hosting at www.ImageShack.us

Isikan informasi sebagai berikut:

Free Image Hosting at www.ImageShack.us

Project Name: Kateglo
Display Name: Kateglo
Unique Identifier: http://Kateglo
Version #: 0.0.1

Lalu klik Finish.

Anda akan langsung disediakan file yang siap untuk digunakan.

Free Image Hosting at www.ImageShack.us

Di aplikasi ini, kita membutuhkan satu gambar animasi untuk proses loading. Tapi, agar sedikit terstruktur, kita buat dulu satu Folder baru, caranya klik kanan Kateglo » New » Folder

Free Image Hosting at www.ImageShack.us

Lalu isikan ‘images‘ pada input ‘Folder name‘. Selanjutnya, silahkan download gambar berikut dan simpan di Folder images tadi.

gambar loader

Kalau sudah, kita perlu refresh project, agar gambar yang baru saja ditambahkan secara manual, dikenali oleh IDE.

Free Image Hosting at www.ImageShack.us

Kita sudah bisa mulai membuat aplikasi. Sebagai langkah awal, buka index.html dan ganti kode:

	<body onload="javascript:init();">
	</body>

dengan kode berikut:

	<body>
		Istilah<br />
		<input type="text" name="istilah" id="istilah" value="" />
		<input type="button" name="cari" id="cari" value="cari" />
		<img src="images/loader.gif" alt="loader" id="loader" />
		<div id="hasilCari"></div>
	</body>

Cukup simple dan sederhana bukan? Coba jalankan emulator untuk melihat hasilnya, dengan cara klik kanan Kateglo » Preview Web app

Free Image Hosting at www.ImageShack.us

Hasilnya seharusnya seperti ini:

Free Image Hosting at www.ImageShack.us

Kalau sudah OK, sekarang saatnya melengkapi dengan CSS dan javascript.

Sekarang buka basic.css dan isikan dengan kode-kode berikut:

.hide{
	display: none;
}

Lalu, kembali ke index.html dan carilah kode berikut:

		<input type="button" name="cari" id="cari" value="cari" />
		<img src="images/loader.gif" alt="loader" id="loader" />

Untuk diganti menjadi kode seperti ini:

		<input onclick="mwl.removeClass('#loader', 'hide');mwl.addClass('#hasilCari', 'hide');mwl.timer('cariIstilah', 10, 1, 'cariIstilah()');" type="button" name="cari" id="cari" value="cari" />
		<img src="images/loader.gif" alt="loader" id="loader" class="hide" />

Beberapa hal yang perlu diperhatikan dari potongan kode di atas adalah, pada input text, kita tambahkan handler onclick, yang isinya sebagai berikut:

mwl.removeClass('#loader', 'hide');

removeClass() digunakan untuk menghilangkan suatu class css dari element html. Pada contoh di atas, berarti menghilangkan class hide dari element id loader.

mwl.addClass('#hasilCari', 'hide');

addClass() adalah kebalikan dari removeClass() yang digunakan untuk menambahkan suatu class css dari element html. Pada contoh di atas, berarti menambabhkan class hide dari element id hasilCari.

mwl.timer('cariIstilah', 10, 1, 'cariIstilah()');

timer() digunakan untuk menunda memproses suatu kode javascript selama sekian waktu dan dilakukan sebanyak sekian kali. Pada contoh di atas berarti membuat timer dengan id ‘cariIstilah’ yang dilakukan sekali setelah periode 10 detik. Perintah yang dijalankan adalah cariIstilah(). Untuk perintah, kita bisa memasukkan sebanyak yang kita inginkan, dengan memisahkan masing2 perintah menggunakan tanda titik-koma ‘;

Beberapa catatan tambahan dari kode di atas, Nokia S40 Web app adalah platform aplikasi berbasis javascript dimana semua kode javascript dijalankan di server. Tapi, dengan pengecualian. Library MWL (Mobile Web Library) akan dijalankan langsung di browser. Oleh sebab itu, untuk memperoleh animasi loading saat kita melakukan request data (yang berarti menjalankan javascript di sisi server), kita perlu menunda kode request tersebut menggunakan timer. Kita beri beberapa detik untuk memunculkan gambar loading sebelum request sebenarnya dikirimkan.

Oh iya, selain itu, SETIAP aplikasi S40 Web app, secara langsung akan mendapatkan akses ke library MWL. Jadi, kita tidak perlu menambahkan library tersebut dan jangan juga membuat library atau variable yang memiliki nama sama. Karena akan conflict dengan library bawaan tersebut.

Karena sisi html dan css sudah selesai, sekarang kita lanjut ke kode javascript untuk mengolah API kateglo. Cara mengambil data di S40 Web app sama seperti bagaimana kita mengambil data di server, menggunakan javascript. Yaitu, dengan memanfaatkan object XmlHttpRequest. Berikut kode yang akan kita gunakan:

function cariIstilah()
{
	var APIUrl = "http://kateglo.bahtera.org/api.php?format=json&phrase=";
	var xhr = null;
	if (window.ActiveXObject) {
		xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
	}
	else {
		if (window.XMLHttpRequest) {
			xhr = new window.XMLHttpRequest();
		}
	}
	var istilah = document.getElementById('istilah').value;
	APIUrl = APIUrl + istilah; 
	xhr.open('GET', APIUrl, true);
	
	if (xhr.overrideMimeType) {
		xhr.overrideMimeType('text/json');
	}
	xhr.setRequestHeader('Pragma', 'no-cache');
	xhr.setRequestHeader('Cache-Control', 'no-cache');
	
	xhr.onreadystatechange = function(){
		if (this.readyState == 4) {
			if (this.status == 200) {
				if (this.responseText != null) {
					var jsonData = eval( '(' + this.responseText + ')' );
					var tmpData = "<div><strong>Istilah:</strong></div><ol>";
					for( var defIdx = 0; defIdx < jsonData.kateglo.definition.length; defIdx++)
					{
						var def = jsonData.kateglo.definition[ defIdx ];
						tmpData += "<li>" + def.def_text + "</li>";
					}
					tmpData += "</ol>";
					
					mwl.insertHTML('#hasilCari', tmpData);
				}
				else {
					mwl.insertHTML('#hasilCari', "Blank page, please try again later");
				}
			}
			else {
				mwl.insertHTML('#hasilCari', "Server error, please try again later");
			}
		}
	}
	
	xhr.send( null );
}

Simpan file ini sebagai basic.js.

Tidak ada yang spesial dari kode javascript di atas. Kalau kalian belum pernah bermain dengan XmlHttpRequest, maka kode di atas sedikit-banyak akan serupa dengan kode-kode yang kalian temukan, saat mencari tutorial dalam penggunaan XmlHttpRequest. Mungkin yang baru hanya pada penggunaa mwl.insertHTML().

mwl.insertHTML() adalah fungsi yang kita gunakan untuk memasukkan kode HTML ke dalam suatu element.

Sekarang aplikasi-nya dijalankan lagi, dengan cara yang sama seperti tadi, melalui klik kanan Kateglo » Preview Web app. Hasilnya akan seperti ini:

Free Image Hosting at www.ImageShack.us

Jadi, seperti ini cara develop aplikasi menggunakan S40 Web app. Untuk latihan tambahan, coba tampilkan informasi tambahan berupa translations dan relations dari data JSON tersebut. Saya akan coba publish bagaimana saya menambahkan translations dan relations, minggu depan (kalau sempat ya 😀 )

Silahkan download file project kali ini, untuk dipelajari lebih jauh. Sedikit informasi cara memakai file ini:


  1. Buka Nokia WDE, lalu buka menu File » New » Import web app
  2. Masukkan alamat di mana file anda tadi disimpan setelah anda download
  3. Selebihnya, masukkan informasi seperti anda membuat project baru

Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.