1

IMPLEMENTASI SISTEM INFORMASI JADWAL KERETA API

MENGGUNAKAN PHONEGAP PADA PLATFORM SMARTPHONE

Cahya Purnama1, Wahyu Suadi, S.Kom, MM,M.Kom2,

Ary Mazharuddin Shiddiqi, S.Kom, M.Comp.Sc3

Jurusan Teknik Informatika, Institut Teknologi Sepuluh Nopember cahya@cs.its.ac.id

Abstrak Dunia mobile development selama ini dianggap berantakan oleh kalangan

pengembang perangkat lunak mobile. Membangun aplikasi untuk setiap perangkat - iPhone, Android, Windows Mobile dan banyak lagi - membutuhkan kerangka kerja dan bahasa yang berbeda. Untuk itu dibutuhkan mobile development framework yang dapat menyatukan perbedaan bahasa pemrograman tersebut secara seragam. PhoneGap adalah salah satu mobile development framework yang dapat mengembangkan aplikasi pada beberapa platform hanya dengan satu kode sumber.

Dalam Tugas Akhir ini akan dibuat sebuah sistem informasi jadwal kereta api, yaitu pencarian jadwal kereta api, pada suatu aplikasi mobile dengan menggunakan PhoneGap, dan menggunakan jQuery mobile dalam melakukan parsing informasi ke web server PT Kereta Api.

Dari hasil uji coba implementasi pembuatan program menggunakan PhoneGap, aplikasi dapat bekerja dengan baik pada berbagai sistem operasi smartphone. Kelemahan aplikasi berbasis PhoneGap terletak pada penggunaan memori yang cukup besar kurang lebih 20MB. Untuk parsing data ke server dengan menggunakan jQuery mobile didapat hasil rata-rata pada perangkat membutuhkan waktu kurang dari 10 detik.

Kata Kunci : PhoneGap, Jquery mobile, Jadwal Kereta Api.

1. Pendahuluan PhoneGap adalah sebuah kerangka

kerja/framework open source yang dipakai untuk membuat aplikasi cross-platform mobile dengan HTML, CSS, dan JavaScript. PhoneGap menjadi suatu solusi yang ideal untuk seorang pengembang aplikasi web yang tertarik dalam pembuatan aplikasi di smartphone. PhoneGap juga merupakan solusi ideal bagi mereka yang tertarik untuk membuat sebuah aplikasi yang dapat berjalan pada beberapa perangkat smartphone dengan basis kode yang sama. Artinya, cukup hanya dengan 1 kali coding saja, anda dapat membuat aplikasi untuk smartphone iPhone, Android, Blackberry, Symbian dan

Windows Phone[1]. PhoneGap juga tidak memerlukan coding secara terpisah untuk masing-masing platform. Dengan PhoneGap kita dapat menghemat waktu dalam membuat aplikasi untuk beberapa smartphone dengan sekaligus dan hanya dibekali pengetahuan tentang HTML, CSS, dan JavaScript semua dapat menggunakan PhoneGap. Hal ini bisa disebut dengan cross-platform karena PhoneGap dapat membuat aplikasi pada beberapa smartphone dengan hanya 1 coding[2].

2. Dasar Teori Dunia mobile development selama ini

dianggap berantakan oleh kalangan pengembang perangkat lunak mobile. Membangun aplikasi untuk setiap

2

perangkat - iPhone, Android, Windows Mobile dan banyak lagi - membutuhkan kerangka kerja dan bahasa yang berbeda. Hal tersebut memiliki imbas yang kurang baik pada perkembangan dunia teknologi yaitu antara lain para pengembang aplikasi pihak ketiga mengalami kendala dalam mengikuti perkembangan standar mobile development pada tiap-tiap platform sistem operasi mereka yang terus diperbarui tanpa diketahui waktu peluncurannya. Hal yang juga penting yaitu waktu dan biaya, para pemain besar di dunia smartphone dapat berkonsentrasi pada perkembangan sistem operasi dan perangkat mereka untuk terus berevolusi, sementara di sisi lain mereka dapat mengandalkan mobile development framework untuk memberikan solusi untuk para pengembang perangkat lunak pihak ketiga. Disinilah PhoneGap berperan dalam perkembangan teknologi pengembangan perangkat lunak mobile[2].

Gambar 2.1: Bahasa Pemrograman perangkat lunak mobile.

Pada gambar 2.1 di atas menjelaskan beberapa platform smartphone dan keanekaragaman bahasa pemrograman yang digunakan pada masing-masing sistem operasi. Mengembangkan aplikasi mobile native memerlukan pengetahuan tentang beberapa bahasa pemrograman yang berbeda, sistem operasi komputer dan developmet kit yang berbeda, sehingga meningkatkan waktu dan biaya pengembangan yang cukup tinggi.

Sebagai contoh Apple iOS adalah sistem operasi dari perangkat iPhone, iPad dan iPod Touch. Mengembangkan perangkat lunak pada perangkat ini membutuhkan software pengembang

Xcode, yaitu sebuah IDE(integrated development environment) yang terintegrasi dan bekerja pada lingkungan sistem operasi Mac OS. Untuk mengembangkan aplikasi pada platform ini dibutuhkan bahasa pemrograman Objective-C. Disisi lain untuk mengembangkan aplikasi yang sama pada sistem operasi Android, yaitu platform smartphone populer yang lain, setiap pengembang perangkat lunak diharuskan berganti menggunakan bahasa pemrograman Java dan menggunakan Eclipse IDE digabungkan dengan Android SDK.

Gambar 2.2: Aplikasi native, hybrid dan web apps.

Gambar 2.2 di atas memnunjukkan perbedaan antara aplikasi native, hybrid dan web apps. Aplikasi native yaitu aplikasi asli pada platform tersebut yang dikembangkan dengan bahasa pemrograman sesuai dengan prosedur pengembangan pada suatu platform. Aplikasi native memeiliki kelebihan pada aksesnya yang cepat dan fitur dasar dari smartphone untuk dipergunakan. Sedangkan web apps, memiliki kemudahan dalam menlakukan coding tetapi memiliki banyak keterbatasan dalam pemanggilan fitur perangkat karena web apps berjalan di atas browser. Untuk itu di buatlah aplikasi hybrid yang dapat menjembatani perbedaan antara aplikasi native dan web apps yang dapat memanfaatkan fitur native dengan menggunakan satu source code yaitu HTML, CSS dan JavaScript. Dengan menerapkan aplikasi alternatif yaitu hybrid, pengembang perangkat lunak dapat mengerjakan pengembangan aplikasi lebih efisien dari segi waktu dan biaya.

3

2.1 PhoneGap PhoneGap adalah sebuah kerangka

kerja/framework open source yang dikembangkan oleh Nitobi Software dipakai untuk membuat aplikasi cross-platform mobile dengan HTML, CSS, dan JavaScript. PhoneGap menjadi suatu solusi yang ideal untuk seorang pengembang perangkat lunak mobile yang tertarik dalam pembuatan aplikasi di smartphone. PhoneGap juga merupakan solusi ideal bagi mereka yang tertarik untuk membuat sebuah aplikasi yang dapat berjalan pada beberapa perangkat smartphone dengan basis kode yang sama. Artinya, cukup hanya dengan 1 kali coding saja, anda dapat membuat aplikasi untuk smartphone iPhone iOS, Android, Blackberry OS, Windows Phone 7, Symbian dan Bada[1].

Dengan bantuan mobile delevopment framework seperti PhoneGap para developer khususnya pada platform mobile, hal ini merupakan suatu revolusi dalam dunia aplikasi mobile yang akan menjadi sangat mudah bahkan bagi orang awam untuk membuat aplikasi sendiri dengan bantuan PhoneGap. Bermodalkan pengetahuan HTML, CSS dan JavaScript, dapat dibangun aplikasi yang dapat memanfaatkan fitur native pada berbagai platform dengan mudah[3].

Perihal dasar untuk membangun suatu aplikasi mobile dengan menggunakan PhoneGap yang perlu dilakukan pertama adalah membuat aplikasi web mobile menggunakan web standart dengan bantuan HTML dan CSS. Setelah itu anda dapat menggunakan JavaScript untuk melakukan pengkodean logika serta menambahakan fitur native pada setiap platform sistem operasi, yang terakhir anda dapat membangun aplikasi tersebut dengan mudah.

Tidak memerlukan coding secara terpisah untuk masing-masing platform. Dengan PhoneGap kita dapat menghemat waktu dalam membuat aplikasi untuk beberapa smartphone dengan sekaligus dan hanya dibekali pengetahuan tentang

HTML, CSS, dan JavaScript, semua dapat menggunakan PhoneGap. Hal ini bisa disebut dengan cross platform karena PhoneGap dapat membuat aplikasi pada beberapa platform smartphone dengan hanya 1 coding. Pada gambar 2.3 di bawah menunjukkan keunggulan PhoneGap yang memberikan kemudahan pada sisi coding dan memiliki fasilitas pemanggilan fitur native[4].

Gambar 2.3: Keunggulan PhoneGap.

Aplikasi yang dibuat dengan PhoneGap tidak hanya seperti situs web mobile biasanya. Hasil aplikasi yang dibangun dengan menggunakan PhoneGap, dapat berinteraksi dengan hardware yang ada pada perangkat mobile yang bersangkutan, seperti Accelerometer atau GPS, tidak seperti aplikasi web secara normal. Aplikasi berbasis PhoneGap juga dibuat dan dikemas seperti aplikasi asli(native), yang artinya pembuat aplikasi bisa membagikan aplikasinya melalui Apple App Store atau Android Market[4]. Keunggulan PhoneGap dibandingkan mobile development framework yang lain yaitu sudah mencakup hampir semua sistem operasi yang banyak digunakan dan mendukung sebagian besar fitur native pada masing-masing sistem operasi[6]. Pada saat buku ini ditulis PhoneGap sudah mencapai versi 1.3.0 adapun fitur native yang didukung oleh PhoneGap antara lain:

• Accelerometer • Kamera • Kompas • Kontak • File • Geo Lokasi • Network • Notifikasi (suara & getaran) • Media Penyimpanan

4

3. Desain Sistem 3.1 Deskripsi Sistem

Implementasi yang dilakukan pada sistem ini adalah sebuah sistem yang dapat membantu untuk melakukan pencarian jadwal kereta api pada smartphone yaitu pada platform Android dan Blackberry dengan menggunakan PhoneGap. Dimana digunakan Eclipse sebagai Integrated Development Environment yang mana sudah ditambahkan dengan Android Development Tools plugin untuk mengembangkan pada platform Android sedangkan untuk platform BlackBerry menggunakan BlackBerry WebWorks Smartphone SDK dan apache ANT. Yang nantinya dengan menggunakan PhoneGap Framework akan memudahkan pada penulisan kode program. Berikut adalah use case diagram dari sistem yang akan dibangun :

System Jadwal Kereta PhoneGap

Cari Jadwal KA

Lihat info agen

Input pencarian

Menelpon agen

<<include>>

<<extend>>Pengguna Ponsel

Gambar 3.1: Use Case Diagram.

Berdasarkan use case diagram di atas, aplikasi berjalan pada smartphone pengguna yang sudah terkoneksi dengan jalur internet via operator seluler. Segala macam bentuk permintaan dari sisi pengguna akan dikirimkan ke web server www.kereta-api.co.id. Pada aplikasi ini akan dibuat 3 buah input, yakni kota asal, kota tujuan dan tanggal pemberangakatan, tiap-tiap combo box tersebut akan menjadi sebuah masukan yang nantinya akan dikirim ke web server www.kereta-api.co.id.

3.2 Perancangan Sistem Pada sistem ini terdiri dari tiga

bagian utama yaitu Pencarian jadwal kereta

api yaitu menu pencarian jadwal kereta api dimana data dari input dan hasil pencarian didapat dari http://kereta-api.co.id/jadwal-ka/jadwal-ka.html, yang kedua yaitu informasi agen tiket kereta api yang berisi tentang kontak dan informasi pemesanan tiket kereta api pada agen resmi yaitu contact center PT. KAI. 121 yang datanya diambil dari http://kereta-api.co.id/layanan-produk/reservasi-tiket/3-contact-center-121.html. Dan yang terakhir yaitu about yaitu menu yang berisi tentang informasi perangkat lunak dan cara penggunaan.

Gambar 3.2: Blok Diagram Sistem.

Gambar di atas menunjukkan skenario komunikasi antara perangkat dan server kereta api yang akan diterapkan. Berdasarkan gambar di atas, user dalam melakukan pencarian jadwal kereta api yang akan dijalankan, perangkat user seperti smartphone ataupun perangkat tablet, akan dihubungkan dengan situs http://kereta-api.co.id menggunakan koneksi paket data seluler maupun koneksi wifi, program akan mengambil data pada server sebagai inputan, selanjutnya user akan melakukan input data pada program yang hasilnya akan diteruskan ke web server PT. KAI. dengan menggunakan library external yakni Jquery Mobile, library ini dapat digunakan untuk melakukan parsing terhadap file html, yang kemudian akan menguraikan halaman dari situs PT. KAI. Yang kemudian hasilnya akan diproses untuk ditampilkan pada halaman hasil di aplikasi ini. Output yang diterima akan dimasukkan ke dalam memori yang kemudian akan ditampilkan berdasarkan permintaan user pada halaman hasil.

5

Gambar 3.3: Alur kerja sistem.

Skenario alur kerja yang dijalankan yaitu pada saat aplikasi dijalankan akan memeriksa ketersediaan sambungan ke server kemudian setelah tersambung, menjalankan script untuk mengambil data input dari server dengan melakukan parsing. Hasil parsing tersebut akan dimasukkan sebagai nilai inputan dan selanjutnya user akan memasukkan input tanggal pencarian, stasiun asal dan stasiun tujuan yang kemudian dikirim ke server yang digunakan untuk pencarian hasil. Setelah server memberikan halaman hasil, halaman tersebut akan diuraikan kembali dan akan diambil informasinya sesuai dengan kebutuhan, untuk ditampilkan pada hasil program.

Pada sistem ini terdiri dari 3 bagian utama yaitu Pencarian jadwal kereta api, informasi agen tiket kereta api yang berisi tentang kontak dan informasi pemesanan tiket kereta api pada agen yang telah ditunjuk. Dan yang terakhir yaitu about yaitu menu yang berisi tentang penggunaan

dan informasi lainnya. Untuk desain UI (User Interface) menggunakan perpaduan HTML, CSS dan Javascript dan dibantu library Jquery Mobile. Untuk desain setiap halaman memiliki header dan konten. Konten dialog, alert dan form hanya muncul pada halaman yang diperlukan, konten konfirmasi hasil pengolahan data (parsing) akan ditampilkan setelah user melakukan inputan yang diperlukan.

4. Implementasi Untuk mengembangkan aplikasi

berbasis PhoneGap yang dapat berjalan pada berbagai platform diperlukan standarisasi struktur pengkodean HTML sesuai W3C widget spec agar dapat terbaca pada semua perangkat smartphone dengan baik. Struktur file PhoneGap terdiri dari index.html, config.xml, dan direktori assets. File index.html berisi tentang kode program yang diterapkan, pada umumnya aplikasi berbasis PhoneGap menggunakan 1 file HTML saja untuk menjaga keseragaman dan kecepatan akses, meskipun memiliki beberapa page yang akan dipisahkan dengan menggunakan datarole yang memanfaatkan Jquery Mobile yang memungkinkan penggunaan HTML5 data-* attribute. Penggunaan div tag dan data-role attribute. Pada HTML5, semua attribute menggunakan awalan data- akan diabaikan oleh HTML Processor, dan dengan memanfaatkan fitur ini Jquery Mobile mampu membagi 1 file html yang dapat berisikan beberapa halaman. File yang ke-2 yaitu config.xml, file tersebut berisi segala informasi dan metadata penunjang aplikasi seperti versi, kompabilitas perangkat, dan informasi pengembang. Yang terakhir yaitu direktori assets yang berisi segala aset dari aplikasi tersebut, seperti gambar pendukung, script CSS maupun Javascript.

5. Uji Coba Pada subbab ini akan dilakukan uji coba

running aplikasi menggunakan (a)

6

simulator Windows Phone 7, (b) simulator Android, (c) Perangkat Blackberry dan (d) Perangkat Android untuk melakukan pencarian jadwal kereta api. Untuk hasil ujicoba simulasi pencarian jadwal kereta api menggunakan parameter stasiun asal Surabaya Gubeng dan Stasiun Tujuan Yogyakarta dengan melakukan input data yaitu tanggal dan stasiun kereta api, maka parsing pengambilan data input stasiun dan tanggal dari server PT. KAI telah berhasil diimplementasikan, tiap pengujian akan dilakukan 10 kali pada setiap platform, dapat dilihat pada gambar 5.1.

(a) (b)

(c) (d)

Gambar 5.1: Tampilan pengambilan data tanggal dan kota.

Pada gambar 5.2 di bawah terjadi error pada 2 perangkat yaitu (a) Blackberry Bold 9000 yang disebabkan HTML Processor belum menggunakan versi terb.aru dan (b) Nokia E71 yang disebabkan sistem operasi

S60 2nd Gen FP1 yang belum sepenuhnya didukung oleh PhoneGap.

Gambar 5.2: Error pemrosesan aplikasi.

Tabel 5.1 : Hasil Pengujian Perangkat Smartphone.

Model & Tipe Smartphone

Sistem Operasi

Hasil implementasi

Berhasil?

Samsung Galaxy Mini

S5570

Android 2.2 Froyo

Ya

Samsung Galaxy Tab

P1000

Android 2.3 GingerBread

Ya

BlackBerry Bold 9000

Blackberry OS 4.7

Tidak

Blackberry Torch 9800

Blackberry OS 6

Ya

Nokia E71 Symbian S60 2nd Gen FP1

Tidak

Nokia 5800 Xpress Music

Symbian S60 2nd Gen FP2

Ya

HTC 7 Pro CDMA

Windows Phone 7

Ya

Penggunaan memori pada aplikasi berbasis phonegap masih tergolong besar. Dari hasil pengujian aplikasi “Jadwal Sepur” yang telah dibuat dibandingkan dengan 2 aplikasi native yang memiliki fungsi sejenis yaitu “JadwalKA (Indonesia)” dan “Jadwal Kereta” masih memiliki kelemahan dalam penggunaan memori yang cukup besar yaitu berkisar 20MB sedangkan aplikasi native hanya membutuhkan 10MB. Pada gambar 5.3 merupakan hasil ujicoba penggunaan memori yang dibutuhkan aplikasi.

7

Gambar 5.3: Pengujian penggunaan memori.

6. Kesimpulan Simpulan dari proyek akhir yang telah

dibuat dan dari hasil uji coba membangun aplikasi mobile menggunakan PhoneGap dapat diimplementasikan ke berbagai platform dan berjalan dengan baik. Aplikasi mobile yang dikembangkan berbasis PhoneGap memiliki kekurangan pada pemrosesan pengkodean logika dikarenakan pemrosesan Javascript sangat terbatas pada perangkat mobile walaupun kecepatannya saat ini sudah berkali-kali lebih cepat apabila dibandingkan dengan beberapa tahun yang lalu. Karena aplikasi berbasis PhoneGap sebenarnya tetap merupakan aplikasi web yang dibungkus ke bentuk aplikasi native.

Sebagai contoh untuk menerapkan dropbox pada menu pencarian stasiun KA., diperlukan resource memori yang besar yaitu 20MB pada proses background, apabila dibandingkan dengan aplikasi pencarian jadwal yang serupa hanya membutuhkan memori 13MB. Aplikasi berbasis PhoneGap masih lebih lambat dibandingkan aplikasi native, pada transisi halaman aplikasi berbasis PhoneGap membutuhkan waktu 1,5 detik dan aplikasi native mampu berpindah halaman secara instan, meskipun perangkat uji coba sudah memiliki spesifikasi perangkat keras yang di atas rata-rata. Hal ini dikarenakan pengkodean yang digunakan hanya mengandalkan javascript.

Daftar Pustaka [1]http://wiki.phonegap.com/w/page/16494

772/FrontPageMeier, Get Started Guide, Dilihat pada Oktober 2011.

[2]http://www.phonegap.com, Phonegap Overview, Dilihat pada Oktober 2011.

[3]http://en.wikipedia.org/wiki/JQuery_Mobile, Overview, Dilihat pada Nopember 2011

[4]Bridging the Mobile App Gap, Adam M. Christ, Sigma Noblis Vol 11 Number 1, 2011.

[5]Andrew Lunny, PhoneGap Beginner's Guide, Packt Publishing, 2011

[6]Jon Reid, jQuery Mobile, O’Reilly books, 2011

[7]Frank Ableson, Learn how to create mobile web applications powered by jQuery Mobile, IBM developerWorks®, 2011