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

number 1Pastikan 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

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.

number 2Selanjutnya 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

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.

number 3Akan 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

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.

number 4Setelah 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

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.

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

05 Project Explorer Otomatis

05 Project Explorer Otomatis

number 6Kita 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

06 Klik kanan AndroidManifest xml

number 7Setelah 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

07 Hapus baris android xlargeScreens

number 8Untuk 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.

09 Mengedit file index html

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 :

10 Hasil Akhir

10 Hasil Akhir

Download Source Project

File .APK terletak di folder /lib dengan nama Tutorial Phonegap.APK

 
Muhammad K Huda

Muhammad K Huda

A non exhausted blogger person within fullstack engineer (spicy food), open source religion, self-taught driver and maybe you know or don't like it. Simply says, Hello from Me!

 

9 thoughts on “Membuat Project Aplikasi Phonegap Menggunakan MDS Applaud

  1. Dear. mkhuda

    Saya selalu mengikuti blog Anda, dari pertama kali saya mempelajari Android, tepatnya sejak tahun 2011. Semakin lama ilmu saya mulai bertambah sejak saya membaca artikel2 pada blog ini.

    Saya tertarik sekali untuk mengembangkan aplikasi rss feed persis seperti milik detikcom. Namun saya memiliki kendala, sebaiknya framework apa yg saya gunakan? Atau malah sdr.MkHuda memiliki solusi lain? syukur2 sudah ada file worksspacenya yg dapat saya pelajari.

    Mohon bantuannya ya sdr.MkHuda yg baik..
    Besar harapan saya email saya ini mendapat perhatian lebih dari sdr.MkHuda

    Best regards,
    Aura Firdaus Andromeda

    tolong invite pin saya jg ya.. (7CD94D7C)

  2. Blog anda sangat membantu,

    mas kalo kita mau menambahkan admob id di project phonegap kita bgaimana caranya?

    terimakasih

  3. saya membuat project android, ketika saya buka package explorer dan membuka folder Res/layout tidak terdapat fille main.xml

    mohon bantuan solusinya gan….. trimakasih

  4. Thanks mas Huda
    Tutorialnya sangat membatu dan sangat mudah dipahami.
    semoga bermanfaat untuk kita semua

  5. mas mau tanya, kenapa pada file androidManifest.xml saya tidak terdapat error tetapi malah pada myPhoneGapActivity di dalam folder src/com.jendra.cobaphonegap/ yang error ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaptcha * Time limit is exhausted. Please reload CAPTCHA.