Mengenal PhoneGap
Untuk
mengembangkan sebuah aplikasi Android, secara mainstream kita terbiasa
menggunakan bahasa pemrograman Java untuk membuat sebuah aplikasi. Tools
yang digunakan biasanya adalah Eclipse dan Android SDK. Bagi developer
yang terbiasa bekerja dengan web apps mungkin tidak terbiasa menggunakan
bahasa pemrograman Java. Nah, PhoneGap ini merupakan sebuah framework
yang menjembatani kebutuhan web apps developer."PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores."
Skill yang dibutuhkan untuk
mengembangkan aplikasi ini seperti halnya membangun sebuah halaman
web. PhoneGap mempunyai banyak library JavaScript dikawinkan dengan
dukungan tag-tag HTML5. Harap diingat bahwa PhoneGap tidak mendukung
bahasa di tingkat server, misalnya PHP. File-file PHP harus diakses
melalui kode JavaScript (external PHP) atau dengan kata lain kita harus
mengembangkan web service sendiri agar dapat dimanfaatkan untuk
perangkat-perangkat yang berbeda.
Seperti layaknya pengembangan aplikasi
native, phonegap juga mendukung fungsi-fungsi sensor dari sisi hardware
(berkat kemampuan HTML5+JavaScript) seperti Accelorometer, Camera,
Capture, Compass, Geolocation, Storage, Notification, dsb. Bisa dibilang
phonegap adalah library untuk porting dari web apps ke native apps.
PhoneGap menghasilkan native web apps. So, hasil pengembangan PhoneGap
ini bisa dimasukkan ke dalam Store, misalnya iOS Apps Store, Android
Market/Play, dsb.
PhoneGap tidak hanya mendukung Android
OS, tetapi juga platform-platform lain seperti Symbian, iOS, Bada,
WebOS, dan Windows Phone, tentu dengan penyesuaian SDK
masing-masing. Beberapa Showcase aplikasi yang dikembangkan
dengan PhoneGap dapat dilihat di alamat ini : http://phonegap.com/apps.
Tutorial Instalasi
1. Download dan install tools pengembangan seperti Eclipse Classic, Android SDK, dan ADT Plugin. Langkah ini lebih jelasnya dapat dilihat pada postingan saya terdahulu, Tutorial Instalasi Eclipse dan Android SDK.
2. Download library PhoneGap versi terakhir (ukuran hanya sekitar 13 MB), kemudian ekstrak isinya.
3. Buka Eclipse untuk melakukan setting PhoneGap. Pilih menu New > Android Project, kemudian isikan form dialog untuk membuat project baru seperti gambar berikut :
4. Perhatikan workspace di sebelah kiri jendela Eclipse, maka akan
ter-create sebuah folder yang namanya sesuai nama project yang Anda
buat.
5. Coba telusuri folder tersebut, kemudian buat dua folder baru di bawah folder utama tersebut : /libs dan /assets/www
6. Copy file cordova-1.x.x.js yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /assets/www
7. Copy file cordova-1.x.x.jar yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /libs
8. Copy folder xml yang ada di dalam folder library PhoneGap (lihat poin 2) ke folder /res
9. Sesuaikan beberapa baris kode pada file main Java yang ada pada folder src (lihat gambar di bawah) :
- Ubah kelas extend dari Activity menjadi DroidGap
- Ganti baris setContentView() dengan super.loadUrl("file:///android_asset/www/index.html");
- Tambahkan baris import org.apache.cordova.*; dan hapus baris import android.app.Activity;
10. Di tahap ini, Anda mungkin akan mendapati error, dimana Eclipse tidak dapat menemukan file cordova-1.x.x.jar. Untuk mengatasi error tersebut, klik kanan pada folder /libs, kemudian masuk ke Build Paths/ > Configure Build Paths. Pada tab Libraries, tambahkan cordova-1.x.x.jar ke dalam Project. Jika Eclipse tidak dapat membaca file tersebut, mungkin Anda perlu refresh (menekan F5) pada project Anda sekali lagi.
11. Klik kanan pada file AndroidManifest.xml, kemudian pilih Open With > Text Editor
12. Paste kode permission berikut di bawah versionName (lihat gambar di bawah) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <supports-screensandroid: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" /> |
13. Tambahkan baris kode android:configChanges="orientation|keyboardHidden" ke activity tag pada AndroidManifest (lihat gambar di bawah)
14. Tambahkan sebuah activity di bawah application tag pada AndroidManifest (lihat gambar di bawah)
1
| <activity
android:name="org.apache.cordova.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter> </activity> |
Hello World
15. Sekarang buatlah sebuah file bernama index.html pada direktori /assets/www. Paste kode di bawah ini ke dalam index.html dan pastikan untuk menambahkan script/kode cordova-1.x.x.js sesuai versi yang di-include kan ke dalam project Anda.
Uji ke Simulator
16. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application
17. Eclipse akan menanyakan kepada Anda untuk memilih AVD
(memilih tipe simulator yang akan digunakan berdasarkan versi Android
OS). Jika belum ada, maka Anda harus membuatnya terlebih dahulu.
Uji ke Device
18. Pastikan USB debugging di-enable pada device Android Anda, kemudian hubungkan ke sistem (Settings > Applications > Development)
19. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application
Source
http://phonegap.com/start#android
Jangan
terburu-buru melaksanakan langkah demi langkah pada tutorial berikut,
tetapi pahami dan baca dulu keseluruhan langkah agar tidak bingung.
