Home » Mobile » Membangun Aplikasi Android Menggunakan Phonegap – Bagian I

Membangun Aplikasi Android Menggunakan Phonegap – Bagian I

android apps

Tren penggunaan smartphone belakangan ini semakin meningkat. Kebutuhan akan gaya hidup dan kepraktisan menjadi tantangan yang di hadapi para developer dalam membuat aplikasi.

Namun banyaknya platform sistem informasi pendukung telah menjadi bumerang bagi developer aplikasi. Perbedaan bahasa pemrograman dan lingkungan development membuat tantangan developer aplikasi semakin bertambah. belum lagi dengan perkembangan API dan tren kebutuhan pengguna yang berubah dengan sangat cepat. Tentu dibutuhkan lingkungan pengembangan aplikasi yang lebih bersahabat dengan percepatan perubahan dan kecepatan pengembangan aplikasi.

Phonegap mungkin bisa menjadi jawaban tantangan tersebut. Phonegap adalah teknologi yang dikembangkan oleh Nitobi, sebuah komunitas pengembang yang terbiasa dengan project IBM,RIM dan microsoft. Phonegap adalah pustaka yang menjembatani proses / bahasa native (java,obj c,symbian) dari bahasa yang digunakan oleh phonegap. yaitu HTML5 javascript.

Ya benar. anda bisa mengembangkan aplikasi native menggunakan HTML5 dan javascript.

Tanpa banyak kata lagi. mari kita coba membuat aplikasi sederhana dengan Phonegap. contoh di bawah ini adalah aplikasi android native dengan phonegap. untuk OS lain anda bisa menyesuaikan dengan mengikuti tautan berikut http://phonegap.com/start

Untuk pengembangan dengan platform Android. Ada hal-hal yang anda harus lakukan terlebih dahulu.

  1. Install Eclipse Editor dahulu. Eclipse bisa didapatkan di http://www.eclipse.org/downloads/ (rekomendasi saya adalah yang versi java developer)
  2. Install Android SDK . Untuk setiap sistem operasi mungkin berbeda beda. silahkan mengikuti langkah langkah dari android developer documentation berikut http://developer.android.com/sdk/installing.html
  3. Tambahkan ADT plugin untuk eclipse. ADT plugin ini yang menghubungkan eclipse anda dengan android sdk. untuk mempermudah anda dalam menggembangkan aplikasi android. langkah langkah install ADT eclipse plugin bisa di ikuti pada tautan berikut http://developer.android.com/sdk/eclipse-adt.html#installing
  4. Download paket phonegap dari websitenya http://phonegap.com

Lalu kita coba membuat aplikasi pertama kita dengan phonegap.

Membuat Android Project

  1. Klik menu FILE > NEW > OTHER atau tekan Ctrl + N untuk membuat sebuah project.
  2. Pilih Android Project pada jendela New Project tersebut                                                            
  3. Pada jendela Create Android Project, Tuliskan nama Apps anda lalu klik Next                                             
  4. Lalu pilih Android 2.2 untuk versi Android SDK yang akan kita gunakan untuk deployment nantinya. mungkin interface akan sedikit berbeda dengan Eclipse versi lainnya (penulis di sini memakai versi helios untuk development), tetapi secara garis besar, langkah langkahnya sama.                                                                                                                                                  
  5. lalu isikan nama package aplikasi Android anda. anda bisa isikan apa saja. di sini kita isikan dengan com.android.helloAppku, biarkan activity name-nya seperti itu dan klik Finish.
  6. Yap. aplikasi Android anda sudah jadi. hehe.. tapi untuk bisa develop aplikasi dengan Phonegap, perlu beberapa langkah tambahan yang harus dilakukan.

Penyesuain Phonegap

  • Buat folder folder berikut pada Root Android Project anda,  folder folder itu adalah /libs dan /assets/www , sehingga tampilan Project Explorer anda menjadi seperti ini.                                                                                                        
  • Extract file zip yang telah anda download dari website Phonegap tadi lalu copy phonegap.js yang ada pada pada folder lib/android ke directori assets/www yang telah anda buat.
  • Copy juga phonegap.jar yang ada pada direktori yang sama tadi ke folder /libs yang dibuat tadi.
  • Copy XML folder pada direktori yang sama ke direktori /res , direktori ini harusnya sudah ada jadi anda tidak perlu membuatnya.
  • Pada versi Eclipse Helios (new), anda harus menambahkan secara manual librari yang anda tambahkan pada sebuah project, caranya dengan klik kanan nama project > properties > java build path klik add JARs, lalu arahkan ke phonegap.jar yang kita copy tadi, lalu klik Open.
  • Lalu kita adakan perubahan sedikit pada source code activity main app tersebut, caranya sebagai berikut : Edit main class app anda . nama main class aplikasi anda ini akan sama dengan nama activity yang anda buat tadi. Jika anda tidak melakukan perubahan namanya adalah HellpAppkuActifity.java dobel klik file tersebut. kemudian ubah beberapa point berikut :
  • Tambahkan import phonegap.* pada section import.
  • Ganti Extend class dengan DroidGap
  • Hapus 1 baris yang berisi fungsi setContentView() menjadi super.loadUrl(“file:///android_asset/www/index.html”);
  • secara umum tampilan editor anda akan menjadi seperti ini.
  • Klik kanan AndroidManifest.xml dan pilih Open With > Text Editor
  • Lalu copy dan paste permision list di bawah ini ke dalamnya, tempatnya ada di antara android:versionName=”1.0″ /&gt dengan <uses-sdk android:minSdkVersion=”8″ />
<supports-screens android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Lalu tambahkan opsi “android:configChanges=”orientation|keyboardHidden” pada section activity di AndroidManifest.xml tersebut, lihat preview berikut

<activity
android:name=".HelloPhoneActivity"
android:label="@string/app_name" android:configChanges="orientation|keyboardHidden" >

Membuat Tampilan Dasar Aplikasi HelloVirtuemagz

Akhirnya sampai juga di pembuatan aplikasi. Ya. untuk pertama kali, karena penulis sudah ngak punya ide mau nulis apa. so mari kita buat sebuah aplikasi Hello Word untuk latihan pertama kita. Ke depan, apabila tidak ada aral melintang akan ada aplikasi-aplikasi lain yang akan penulis bagi cara pembuatannya menggunakan Phonegap.

sekarang kita buat file di /assets/www/ sebuah file index.html, di dalamnya kita tulis sintak html seperti biasa, javascript seperti biasa. Yang paling sederhana dulu, perlu di perhatikan file phonegap.js kita sesuaikan dengan versi yang kita download. Di sini saya menggunakan versi 1.4.1.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<style>
h1 {
background-color:red;
width:100%;
}
body {text-align:center}
</style>
</head>
<body>
<h1>Hello Virtuemagz</h1>
<div>This Is</div>
<h3>My</h3>
<small>First<small>
<h2>Phonegap</h2>
<h3>Application</h3>
</body>
</html>

Sudah, cuma itu, dan mari kita deploy ke emulator. Untuk pertama kali menjalankan emulator ini mungkin membutuhkan waktu sedikit lama, tergantung komputer masing masing . Jadi sabar ya.

Caranya deploy ke emulator : klik kanan project > run as > Android Application, berikut tampilan pada emulator ketika proses deploy ke emulator selesai.

tampilan paling dasar "Hello Virtuemagz"

Ketika esok anda akan membuat aplikasi lain. Maka hanya langkah terakir ini saja lah yang perlu anda pikirkan. Mudah bukan? Semoga bermanfaat.

10 Comments

  1. wow… kere…n…

  2. mantaab! aku juga pengen ajar phonegap..

  3. cheanizer

    mohon blimbingannya teman teman.

  4. Thanks… :)

  5. wow, mantap… coba” ah.. sp taw bisa bwt skripsi..
    thx tutorialnya.. semoga tambah pahalanya..

  6. mau tanya, kalo udah bikin aplikasi pake jQuery mobile yg terkonek ke mysql, cara nyatuin ke androidnya gimana ya? mohon pencerahannya.. tanks

  7. tutornya ngaco!!!

  8. trimakasih telah mau berbagi..

  9. wah keren kebetulan lagi belajar juga nih buat TA :D

Leave a Reply

Scroll To Top