Home / Tutorial / Cara Install Phonegap di Eclipse

Cara Install Phonegap di Eclipse

Posted by Unknown Selasa, 10 September 2013 0 komentar

Garis Masuk - Pada postingan kali ini saya akan memberikan tutorial bagaimana cara memasang framework phonegap di eclipse, seperti yang kita ketahui phonegap merupakan salah satu framework yang sangat powerfull dan membuat kita semakin mudah dalam membuat aplikasi multi platform, nah pada tutorial kali ini saya khususkan untuk pemesangan pada platform android.

pertama kita buka eclipse dan buat new android aplication project.

pada struktur folder project eclipse pada directory assets buat folder baru dengan nama www dan tambahkan file pada folder www yang bernama index.html.
extract file phonegap yang sudah di download dan masuk ke lib/android dan lihat folder dan file yang digaris bawahi.

pindahkan file/folder tersebut ke android project directory dan susun menjadi seperti ini

cordova-2.5.0.js pindahkan ke directory assets/www
cordova-2.5.0.jar pindahkan ke directory libs
folder xml pindahkan ke directoy res

sehingga struktur directory project androidnya seperti ini

Selanjutnya buka file index.html tadi dan buat struktur html seperti biasa seperti ini

<html>
<head><title>Testing Phonegap</title>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
</head>
<body>
Hai Ini Aplikasi dari Phonegap !!!
</body>
</html>
 
 
oke tahap selanjutnya buka file MainActivity.java pada directory src maka akan keluar seperti ini
 
package com.example.phonegap;
 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
 
public class MainActivity extends Activity {
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
 
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
 
ubah menjadi seperti ini
 
package com.example.phonegap;
 
import android.os.Bundle;
import org.apache.cordova.*;
 
public class MainActivity extends DroidGap {
 
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html")
}
 
}
 
yang diubah adalah void onCreate dan extend dari class tersebut  asalanya ke activity tapi ke Droidgap serta merubah package yang di  import.
 setelah itu buka AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.phonegap"
android:versionCode="1"
android:versionName="1.0" >
 
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
 
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.phonegap.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
 
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
 
ubah menjadi seperti ini
 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.phonegap"
android:versionCode="1"
android:versionName="1.0" >
 
<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" />
 
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
 
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.phonegap.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>
 
setelah semuanya selasai, silahkan Run program anda dan lihat hasilnya di emulator 
 

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Install Phonegap di Eclipse
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://androidappjorte.blogspot.com/2013/09/cara-install-phonegap-di-eclipse.html. Terima kasih sudah singgah membaca artikel ini.