Selasa, 25 Desember 2012

Tutorial Instalasi PhoneGap Pada Android

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-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" />
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

Tidak ada komentar:

Posting Komentar

indostar tv com