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
  4. <supports-screens android:largeScreens="true"
     android:normalScreens="true"
     android:smallScreens="true"
     android:resizeable="true"
     android:anyDensity="true"
     />
    

  5. Tambahkan pada posisi kode 2  <uses-permission> XML nodes seperti di bawah
  6.     <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">
    

  7. Tambahkan pada posisi kode 3  sebagai atribut pada tag  <activity>  seperti di bawah
  8. android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">

  9. Hasil akhir setelah kode disisipkan

  10. <?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
  3. <!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>
    

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

  5. 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

13 Responses to "Cara integrasi Phonegap di Eclipse"

  1. mantep bang herman toturial nya, tapi masalah nya saya ga ngerti yang beginian, hehe, n ga tahu guna nya buat apa..
    n ga punya android.. hihi

    BalasHapus
    Balasan
    1. Oke, no problem mungkin nanti kalo sudah butuh bisa kembali lagi ke sini :) Tks buat kunjungannya....

      Hapus
    2. hmm,. jadi maksud gimana bang herman? ini untuk aplikasi andoid? n ini ngaruh bisa dipakai di blog ngga? masih bingung bang herman,. hehe

      Hapus
    3. Tutorial di atas memang dibuat untuk android, jadi hanya bisa dijalankan di platform android.

      Tapi kalo bicara phonegap artinya aplikasi yang kita buat nanti selain di android juga bisa jalan di windows phone, BB, iphone dll.

      Dan kalo jquery mobile library seperti jquery bisa dibuat untuk jalan di browser IE, firework, safari dan Opera, tapi memang di khususkan untuk mobile phone. Jadi sebenarnya bisa saja digabungkan dengan versi mobile untuk blog.

      Kayaknya hebat juga kalo mau coba :)

      Tks ya buat responnya,

      Hapus
  2. whaha mantap kang..
    lanjut terus codingnya.. sukses selalu :)

    BalasHapus
    Balasan
    1. Oke, tks buat kunjungannya, sukses juga buat kamu...

      Hapus
  3. Terima kasih Info nya mas...
    Ini nih yang harus dicoba

    BalasHapus
    Balasan
    1. Silahkan sob, semoga bermanfaat, tks buat kunjungannya.

      Hapus
    2. Oke sobh..
      Saama sama deh :)

      Hapus
    3. Makasih juga buat kunjungannya sob,...

      Hapus
  4. artikel nya sangat membantu mas kemarin saya mendapat tugas tentang phongap
    cara menghilangkan jerawat
    cara membuat streaming tv

    BalasHapus
  5. Mantaaappp.. skalian tutorial buat masukin ads di projectnya dong pak... trmksh

    BalasHapus
  6. konfigurasi no 7 itu maksudnya bagaimana mohon diperjelas

    BalasHapus