Thursday, January 28, 2016

Membuat Aplikasi Mobile Cross-Platform dengan PhoneGap

Kalau bicara soal aplikasi mobile, ilmu saya masih super cetek, masih freshly newbie. Pertama kalinya saya mencoba membuat aplikasi android gara-gara ada 'paksaan' dari projek kantor. Maklum, selama ini saya hanya berkutat dengan si pemberi harapan palsu a.k.a PHP haha.

Nah, beberapa waktu yang lalu saya kembali mendapatkan tugas yang lebih bikin pusing, duh. Ya, saya diminta membuat aplikasi mobile hybrid atau cross-platform, alias bisa dijalankan pada berbagai platform seperti Android, iOS, Windows Phone, Blackberry, dll. Kebayang ga sih, bikin aplikasi android aja baru sekali, itupun masih cupu maksimal. Pasrah aja deh ya jadi programmer, iya-in aja dulu daripada dihina-hina sama atasan hihihi.

Setelah melewati proses googling yang cukup lama, saya menemukan satu framework yang sepertinya cukup populer digunakan untuk membuat aplikasi mobile hybrid, yakni PhoneGap. Untuk penjelasan lebih detail tentang PhoneGap silahkan googling sendiri aja ya guys..

Intinya, dengan PhoneGap kita bisa membuat aplikasi cross-platform hanya dengan satu source code, keren ga tuh? Satu paket source code bisa dijalankan pada device Android, iOS, Windows Phone, dll. PhoneGap memberikan solusi bagaimana kita dapat mengakses fitur yang ada pada mobile phone, seperti kamera, daftar kontak, dll. Kita tidak perlu khawatir dengan bahasa pemrograman yang digunakan, karena kita hanya perlu menguasai HTML, Javascript, dan CSS. Simpelnya seperti kita membuat mobile web menjadi sebuah aplikasi yang dapat diinstall di berbagai platform.

Apa saja sih yang harus diinstall?
Kalau mencoba googling tentang cara install PhoneGap mungkin beberapa dari kita akan mengatakan "Duh ribet amat sih" >_< Tenang, tenang....sekarang sudah ada aplikasi PhoneGap untuk desktop, walaupun masih versi beta tapi so far so good, yang penting kita ga usah ribet install via CLI. Link download nya bisa diakses di http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

Tamplian PhoneGap for Windows

Contoh project PhoneGap beserta tutorialnya bisa dilihat http://coenraets.org/blog/phonegap-tutorial/. Tutorial tersebut menurut saya sudah sangat jelas dan mudah diikuti.

Kalau sudah selesai, bagaimana cara running programnya? Buka aplikasi PhoneGap yang sudah terinstall di komputer, tambahkan project yang dengan menekan button + . Pilih Create new PhoneGap project untuk membuat project baru atau pilih Open existing PhoneGap project untuk membuka project yang sudah ada, pilih folder root nya ya..

Membuat project baru atau membuka project yang sudah ada
Project yang sudah ditambahkan ke aplikasi PhoneGap
Jika diperhatikan, di bagian bawah yang berwarna hijau, terdapat keterangan alamat IP yang menunjukan tempat program kita berjalan. Alamat IP ini nantinya yang akan kita gunakan untuk mengakses aplikasi saat melakukan direct running pada mobile phone.

Untuk dapat melakukan direct running, kita perlu menginstall aplikasi PhoneGap Developer pada smartphone kita. Aplikasi PhoneGap Developer tersedia di Google Play (for Android), App Store (for iOS), dan Windows Phone Store (for Windows Phone). PhoneGap Developer sangat membantu kita untuk melakukan running program langsung pada platform yang kita inginkan.


Pada field Server Address, masukkan alamat IP yang sebelumnya ditampilkan pada aplikasi PhoneGap, kemudian tap Connect dan taraaaaaaa.....aplikasi yang sudah dibuat sudah running di smartphone kamu! Simple kan?? ^^

Contoh tampilan aplikasi yang dirunning via PhoneGap Developer
pada Android smartphone


Oiya, salah satu syarat menggunakan PhoneGap Developer ini adalah smartphone harus terhubung ke jaringan yang sama dengan komputer. Kalau syarat tidak terpenuhi maka aplikasi PhoneGap Developer tidak akan bisa mendownload project yang kita tambahkan pada aplikasi PhoneGap pada komputer kita.

Untuk mengexport aplikasi kita menjadi sebuah installer, caranya bisa dilakukan melalui command line ataupun melalui cloud yang telah disediakan oleh Adobe PhoneGap. Web page nya bisa diakses melalui https://build.phonegap.com/ Aplikasi kita dapat dicompile menjadi installer aplikasi Android, iOS, maupun Windows Phone.

Semoga artikel ini bermanfaat, selamat mencoba! ^^

Read More