Membuat Aplikasi Mobile Web dengan Bahasa Mobl


Semenjak kehadiran HTML5, CSS3, dan JavaScript di dunia pengembangan web saat ini dapat dikatakan sebagai sebuah pemicu munculnya berbagai aplikasi yang lebih dinamis dan kaya isi. Dengan HTML5 ini sangat memungkinkan untuk pengembangan aplikasi untuk platform mobile yang lebih baik dan yang penting mendukung berbagai platform mobile yang ada saat ini. Platform-platform mobile seperti iOS, Android, Blackberry, Symbian, WindowsPhone, dan platform keturunan Linux lainnya, semuanya telah mendukung HTML5, CSS3 dan JavaScript. Ketiga spesifikasi dan teknologi ini telah mengubah atau bahkan menggeser arah pengembangan aplikasi mobile. Untuk itu tidak ada salahnya jika pembelajaran tentang ketiga spesifikasi teknologi tersebut juga perlu ditekankan.

Banyak sekali proyek-proyek yang mencoba untuk lebih mematangkan, mempermudah, dan bahkan mencoba menjadikan HTML5, CSS3, dan JavaScript menjadi sebuah aplikasi native. Proyek seperti PhoneGap, jQuery Mobile, atau Sencha jqTouch, adalah proyek-proyek yang menyediakan sebuah framework pengembangan aplikasi mobile berbasis ketiga spesifikasi teknologi tersebut. Hampir semuanya menggunakan JavaScript untuk membangun logika yang dijalankan di piranti ponsel. Apakah harus mampu JavaScript untuk pengembangan aplikasi mobile berbasis HTML5 ini? Secara defacto dapat dikatakan wajib untuk menguasai JavaScript. Namun sekarang tidak perlu mengkuatirkan tentang hal tersebut. Saat ini terdapat sebuah proyek bernama MOBL yang menyediakan sebuah bahasa pemrograman yang lebih mudah digunakan untuk pembuatan aplikasi mobile web.

MOBL dikembangkan oleh Zef Hemel dan dikembangkan oleh tim di Software Engineering Research Group Universitas Delft Belanda. MOBL dibangun menggunakan Spoofax Language Workbench, persistence.js, dan jQuery. Konsep dasar yang ditawarkan adalah sebuah aplikasi mobile web ditulis dengan bahasa WebDSL kemudian akan dikompilasi menjadi dokumen HMTL5 dan pendukungnya yang siap diakses dan dijalankan di platform mobile. Walaupun MOBL saat ini difokuskan pada browser yang menggunakan Webkit (seperti Chrome, iOS, Android (2.0+), WebOS, dan Safari), MOBL menyediakan banyak fungsi yang mendukung aplikasi mobile web. Beberapa fasilitas utamanya, antara lain: mendukung penuh web service, mendukung penulisan kode program serupa dengan JavaScript, menyediakan template antar muka yang dinamis, serta mendukung database lokal.

Langkah Persiapan

Untuk memulai pengembangan aplikasi mobile web dengan MOBL, maka terdapat beberapa software lain yang perlu disediakan, yaitu: Java Development Kit (JDK) 1.5 ke atas, Eclipse, dan web server (misalnya Apache). Setelah semuanya terpasang, langkah berikutnya adalah melakukan sedikit modifikasi pada file eclipse.ini untuk memaksimalkan memori untuk eksekusi mobl pada Eclipse. Berdasar panduan dari mobl-lang.org, dengan text editor, bukalah file eclipse.ini, dan carilah baris –vmargs. Pastikan sebelum baris tersebut terdapat deklarasi

--launcher.XXMaxPermSize
256m

Setelah baris –vmargs tambahkan baris opsi berikut:

-ss16m 
-Xss16m 
-Xms200m 
-Xmx1024m

Simpan perubahan tersebut, dan jalankan Eclipse. Pada lingkungan Eclipse, tahapan selanjutnya adalah memasang Mobl Add-on. Adapun caranya memang add-on ini:

  1. Pilih menu Help > Install New Softwae…
  2. Klik tombol Add, dan masukkan alamat URL berikut: “http://mobl-lang.org/update” (tanpa tanda petik ganda) pada item Location, dan ketikkan mobl add-on pada item Name. Klik tombol OK.
  3. Berilah tanda cek pada item Mobl, sehinnga semua komponen terpilih. Lanjutkan dengan klik tombol Next.
  4. Silahkan ikuti tahapan pemasangan oleh Eclipse.

Percobaan

Jika berhasil terpasang, kita dapat melakukan pengecekan terhadap fungsi mobl dengan cara sederhana sebagai berikut :

  1. Pilih menu File > New Project..
  2. Pilihlah mobl project untuk membantu dalam pembuatan proyek aplikasi berbasis mobl, dan lanjutkan klik tombol Next.
  3. Ketikkan nama proyek, misalnya HelloMobl, dan ketikkan nama Aplikasi, misalnya: Aplikasi Pertama Mobl.
  4. Klik Finish.

Cobalah ketikkan contoh sederhana berikut ini:


application HelloMobl

import mobl::ui::generic
import mobl::ui::stylemixin

service Rssreader {
resource kompas() : JSON {
uri = "http://duwadroid.net/rssreader/news/kompas"
encoding = "jsonp"
method = "GET"
}
}

style myItemStyle {
padding: 10px;
margin: 5px;
min-height: 50px;
background-color: white;
border: 1px solid #444;
borderRadiusMixin(10px);
}

screen root(){
tabSet([("Kompas", "img/icon_rss.png", kompas),
("Kalkulator", "img/icon_sim.png", kalkulator)])
}

control kompas(){
var hasil = async(Rssreader.kompas())
header("Kompas")
whenLoaded(hasil, loadingMessage="Sedang diminta...") {
group {
list(rss in hasil.berita){
block(myItemStyle) {
label(rss.Kompas.title)
}
}
}
}
}
function hitAkhir(n1:Num, n2:Num) : Num{
return 0.4*(n1+n2)/2;
}

control kalkulator(){
var nilai1=0
var nilai2=0
var akhir=0
header("Kalkulator")
item{ numField(nilai1, label="Nilai Pembimbing I") }
item{ numField(nilai2, label="Nilai Pembimbing II") }
block(myItemStyle) {
item{ "Nilai: " label(hitAkhir(nilai1, nilai2)) }
}
}

Contoh di atas akan memanggil layanan web service yang akan mengembalikan sebuah data format JSON hasil dari konversi RSS salah satu website berita nasional. Ketika penyimpanan dilakukan pada proyek mobl di Eclipse, secara otomatis akan dikompilasi dan menghasilkan sebuah folder www dalam folder proyek. Jika tidak ada masalah pengetikan ataupun error saat kompilasi, duplikasilah isi dari folder www ke salah satu folder yang telah disediakan pada web server yang telah terpasang, misalnya c:\xampp\htdocs\example. Jika halaman HelloMobl.html dikunjungi dari web browser di salah satu emulator, misalnya iOS emulator, maka akan dihasilkan seperti pada Gambar 1.

Gambar 1. Contoh Tampilan hasil MOBL

Gambar 1. Contoh Tampilan hasil MOBL