Cara Menginstall PhoneGap Pada Eclipse Android ADT

Phonegap adalah framework dari html, css dan javascript yang dibuat untuk menjalankan ketiga bahasa tersebut pada aplikasi mobile seperti Android, IOS, Windows Phone atau Blackberry. Fungsi phonegap adalah untuk mengerakkan perangkat kerang dengan menggunakan bahasa javascript dan untuk kerangka dan gaya menggunakan html dan css. Selain itu phonegap dibuat untuk developer atau programmer web untuk bisa membuat aplikasi mobile walaupun tidak bisa menguasai bahasa mobile seperti java dan lain-lain.

Cara kerja phonegap hampir mirip dengan WebView atau WebChromeView yang ada pada sistem operasi Android, yaitu sama-sama untuk manampilkan web kedalam aplikasi Android
namun yang berbeda adalah phonegap sudah mengembeded dalam tubuh project aplikasi Android sedangkan dengan webview itu hanya sebatas widget yang ditambahkan kedalam activity project Android. Untuk membuat atau menginstall phonegap pada Eclipse ADT silahkan ikuti langkah-langkah dibawah ini.

Bahan-Bahan

  1. Download Phonegap disini dan gunakan versi 2.9.0 (jangan gunakan versi diatasnya)
  2. Eclipse ADT dan Android SDK beserta dengan AVD Emulator
  3. Bikin aplikasi web dengan jQuery Mobile, Bootstrap atau Ratchet

Cara membuat project Android baru menggunakan phonegap dan Eclipse ADT dibawah ini

1. Download dan ekstrak file phonegap

ekstrak-phonegap
2. Buka Eclipse dan bikin project android baru tanpa membuat activitynya

buat-project-baru-phonegap
3. Copy folder xml dari folder ekstrak phonegap-2.9.0 > lib > android dan pastekan ke folder project res

copy-paste-xml-kefolder-res
4. Copy file cordova-2.9.0.jar dari phonegap-2.9.0 > lib > android dan pastekan ke folder project libs

copy-paste-jar-kefolder-libs
5. Klik kanan pada libs > cordova-2.9.0.jar dan pilih Build Path > Add to Build Path

klik-kanan-build-to-path
6. Buat folder baru pada assets yang bernama www

buat-folder-baru-assets
7. Copy file cordova.js dari phonegap-2.9.0 > lib > android dan pastekan ke folder project assets > www

pastekan-js-ke-www
8. Buat file index.html menggunakan jQuery Mobile atau Bootstrap ataupun Ratchet dan pastekan ke folder project assets > www (panggil script phonegap)

panggil-cordova
9. Buat file MainActivity.java pada src > com.example.xxxx

buat-class-phonegap
10. Isi kode java android dalam MainActivity.java dibawah ini.

import org.apache.cordova.Config;
import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //super.loadUrl("file:///android_asset/www/index.html");
        super.loadUrl(Config.getStartUrl());
    }
 
}

11. Edit AndroidManifest.xml seperti dibawah ini.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.phonegapsaya"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
  
 <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" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
     android:configChanges="orientation|keyboardHidden"  >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

12. Gunakan kode dibawah ini pada index.html

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 
<!-- Start of first page -->
<div data-role="page" id="foo">

 <div data-role="header" data-position="fixed">
  <h1>Foo</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p>View internal page called <a href="#bar">bar</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

 <div data-role="header" data-position="fixed">
  <h1>Bar</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
 
</body>
</html>

13. Hasilnya seperti screenshot dibawah ini.

phonegap-berjalan