Membuat Project Aplikasi Phonegap Menggunakan MDS Applaud

MDS Applaud adalah plugin untuk Eclipse IDE yang dapat mempermudah pembuatan project baru aplikasi Android berbasis Phonegap. Semua paket-paket Phonegap sudah terangkum di dalam plugin ini seperti paket Phonegap versi 1.9.0, pelintas library untuk paket Sencha touch dan Jquery Mobile. Pembaca dapat mengikuti tutorial cara pemasangan MDS Applaud untuk Eclipse di artikel berjudul Memasang Plugin Phonegap MDS Applaud yang sebelumnya pernah saya tulis.

Kono ch’toriaru o hajimemashou! Mari kita mulai !

Download Source Project

Pastikan dahulu, jika MDS Applaud sudah terpasang di Eclipse IDE dengan munculnya icon MDS Applaud seperti ini di Toolbar Eclipse Anda. Kemudian klik icon tersebut maka akan muncul jendela awal pembuatan project Phonegap. Jendela ‘Phonegap Configuration‘.

01 Phonegap Configuration

Pada jendela ini, kita aktifkan ‘Use built-in Phonegap‘ dengan versi 1.9.0, kita kosongi bagian centang Jquery Mobile dan Sencha Touch, karena untuk tutorial awal ini kita tidak akan memakainya. Kemudian aktifkan ‘Minimal Phonegap Project‘ pada bagian Phonegap Contents. Klik Next.

Selanjutnya kita akan beralih ke jendela baru ‘Create Android Project‘. Pada jendela ini kita akan membuat nama aplikasi kita. Nama aplikasi boleh menggunakan spasi, kita juga bisa menggunakan karakter-karakter seperti tanda minus (-) maupun tanda petik (‘).

02 Create Android Project

Isikan nama project kita, pembaca bisa menamainya apa saja. Penulis memberi nama project tutorial ini dengan ‘Tutorial Phonegap‘. And then, biarkan centang-centang di bawahnya tetap seperti pada setting defaultnya. Lalu klik Next.

Akan muncul jendela konfigurasi Build Target seperti di bawah ini. Lalu centang API Target yang paling kecil. Disini penulis menggunakan Target Name ‘Android 2.1‘, Pilih Next lagi.

03 Pilih Build Target

Pemilihan build target dengan versi Android paling lawas dimaksudkan agar aplikasi yang kita buat nanti dapat mencakup perangkat Android berspesifikasi paling minim. Jika memilih build target dengan versi terbaru, pastikan juga aplikasi kita memang ditujukan untuk perangkat dengan spesifikasi kelas berat, seumpama Samsung Galaxy S2 ke atas.

Setelah kita memilih Next, maka akan muncul jendela konfigurasi terakhir yaitu ‘Application Info’. Kita biarkan ‘Application Name’ dengan isian ‘Tutorial Phonegap’, kemudian isi Package Name dengan ‘com.[nama domain/nama anda].tutorialphonegap‘.

04 Kolom Info Aplikasi

Kolom ‘package name’ merupakan isian yang akan menjadi identitas dari aplikasi Android kita di Google Play jadi pastikan awalannya adalah com, diikuti nama domain atau nama Anda, dan yang terakhir adalah nama aplikasi Anda. Pastikan jangan ada spasi saat pembuatan package name ini. Karena hanya ada tanda titik yang memisahkan antar identitas. And klik Finish.

Dengan menggunakan langkah-langkah MDS Applaud, secara otomatis project Android kita akan ter-build di Project Explorer, seperti di bawah ini :

05 Project Explorer Otomatis

Kita bisa melihat ada satu file yang mempunyai tanda silang, yaitu file AndroidManifest.xml. Dan kita harus mengedit atau menghapus salah satu kode di dalam file tersebut untuk menghilangkan tanda silang pada AndroidManifest.xml. Caranya klik kanan file tersebut dan pilih Open With -> Android Common XML Editor.

06 Klik kanan AndroidManifest xml

Setelah AndroidManifest.xml muncul di project editor, kita siap mengeditnya dan menghilangkan syntax yang menyebabkan eror terjadi. Pada source code terlihat bahwa ada kesalahan program XML di bagian support screen. Lantas kenapa seperti itu? Hal itu terjadi karena API Android versi 2.1 (Level 7) belum men-support device dengan layar super besar (xLargeScreen).

07 Hapus baris android xlargeScreens

Untuk mengatasinya, kita hapus saja baris kode android:xLargeScreens=”true”, Maka tanda silang akan hilang. Dan kita siap untuk me-running aplikasi tutorial tersebut. Klik pada project Tutorial Phonegap di bagian Project Explorer lalu pilih Run as -> Android Application.

08 Mengedit file index html

Sebelumnya kita bisa mengedit terlebih dahulu file index.html yang telah terbuka di project editor. Dan mengganti beberapa listing html dengan nama aplikasi kita.

Langkah ini adalah bagian opsional project, karena sebenarnya Anda dapat langsung membuild atau merunning ke emulator maupun device yang telah terhubung melalui USB debugging. Berikut adalah hasilnya pada perangkat Samsung Galaxy Young :