Cara integrasi Phonegap di Eclipse

Hermanto - Melanjutkan tutorial sebelumnya tentang cara membangun aplikasi android dengan phonegap dan jquery mobile, maka sekarang saya akan membuat tutorial cara integrasi phonegap di eclipse. Tapi sebelum memulai tutorial ini kamu sudah mempraktekan tutorial saya sebelumnya yaitu cara pengaturan eclipse dengan android SDK. Untuk mengintegrasikan phonegap  berikut ini langkah-langkah yang perlu kamu lakukan:

Konfigurasi project dengan menggunakan Phonegap 2.9.0

1. Download Phonegap versi terbaru (untuk tutorial saya menggunakan Phonegap-2.9.0)


2. Ekstrak ke folder tertentu lihat folder xml , file cordova.js dan cordova-2.9.0 di folder android di dalam folder lib.


3. Jalankan eclipse dan buat project baru lihat cara pengaturan eclipse dengan android SDK


4. Salin file cordova-2.9.0.jar ke  folder libs pada project kamu.


5. Buatlah folder www di dalam folder assets pad project kamu.


6. Salin file cordova.js ke dalam folder www yang baru kamu buat.


7. Salin folder xml ke folder res di root project phonegap-eclipse3.jpg


8. Klik kanan pada cordova-2.9.0.jar yang telah anda salin lalu klik Build Path > Add to Build Path
   

Update class Activity

1. Buka class MainActivity , lakukan beberapa perubahan.
   


2. Hapus import android.app.Activity; dan import android.view.Menu;


3. Tambahkan import org.apache.cordova.DroidGap;


4. Hapus setContentView(R.layout.activity_main);


5. Tambahkan super.loadUrl("file:///android_asset/www/index.html");


6. Ubah class extend dari Activity menjadi DroidGap
7. Ubah fungsi onCreate dari protected menjadi public


8. Perhatikan class MainActivity setelah dilakukan perubahan.
   

Konfigurasi metadata

1. Buka AndroidManifest.xml dengan cara Klik kanan pada AndroidManifest.xml lalu klik Open With > Android Common XML Editor


2. Masukkan masing-masing kode di bawah seperti pada gambar
   


3. Tambahkan pada posisi kode 1  <supports-screen> XML node seperti di bawah

<supports-screens android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true"
 />



4. Tambahkan pada posisi kode 2  <uses-permission> XML nodes seperti di bawah

    <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.INTERNET">
    <uses-permission android:name="android.permission.RECEIVE_SMS">
    <uses-permission android:name="android.permission.RECORD_AUDIO">
    <uses-permission android:name="android.permission.RECORD_VIDEO">
    <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">



5. Tambahkan pada posisi kode 3  sebagai atribut pada tag  <activity>  seperti di bawah

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">



6. Hasil akhir setelah kode disisipkan



<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sample.helloandroid"
    android:versionCode="1"
    android:versionName="1.0" >
 
 <supports-screens android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true"
 />
    
    <uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="10" />
 <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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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" />
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        
        <activity
            android:name="com.sample.helloandroid.MainActivity"
            android:label="@string/app_name" >
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Membuat dan menjalankan contoh file utama

1. Buatlah satu file dengan nama index.html di dalam folder assets/www. File tersebut akan digunakan sebagai file utama untuk aplikasi Phonegap kamu.


2. Salinlah kode dibawah ini ke dalam file index.html yang baru kamu buat

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.9.0.js"></script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>



3. Jalankan aplikasi Phonegap dengan cara klik kanan pada android project kamu kemudian pilih menu Run As > Android Apllication


4. Jika langkah-langkah sudah kamu ikuti dan tidak ditemukan error maka akan tampil seperti gambar di bawah:
   

Demikianlah tutorial tentang integrasi Phonegap di Eclipse, insya Allah saya akan melanjutkan tutorial tentang membuat aplikasi Phonegap dengan Jquery Mobile.

Selamat mencoba, semoga bermanfaat



Tags: Android, Phonegap, Jquery Mobile, Eclipse, Tutorial

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: