Wednesday, January 18, 2017

Cara Install Phonegap di Eclipse dan Titanium Studio Android

Cara Install Phonegap di Eclipse dan Titanium Studio Android


Cara Install Phonegap di Eclipse atau Titanium Studio Developer Android - How to Install Phonegap in Eclipse or Titanium Studio app Accelator. Phonegap pastinya sudah pada tahu kan, sebuah framework yang dapat dijalankan di eclipse ataupun Titanium Studio untuk men Developt Android, IOs, Blackberry, Windows Phone dll. Phonegap merupakan jembatan yang membantu para developt khususnya di aplikasi mobile untuk lebih simple dan mudah dalam membuat sebuah aplikasi.

"PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores."
Cara Install Phonegap di Eclipse Titanium Studio Android
Hasil dari Phonegap
Kehebatan Phonegap adalah 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 Phonegap di Titanium Studio / Eclipse Juno

1. Download dan install tools pengembangan seperti Eclipse Juno, Android SDK, dan ADT Plugin.
2. Download library PhoneGap versi terakhir, kemudian ekstrak isinya.
3. Buka Eclipse untuk melakukan setting PhoneGap. Pilih menu New > Android Project, kemudian isikan form dialog sesuai dengan keinginan anda.
4. Kemudian buat dua folder baru di bawah folder utama tersebut : /libs dan /assets/www
5. Copy file cordova-1.x.x.js yang ada di dalam folder library PhoneGap ke folder /assets/www
6. Copy file cordova-1.x.x.jar yang ada di dalam folder library PhoneGap  ke folder /libs
7. Copy Folder xml  yang ada di dalam folder library PhoneGap ke folder /res
8. Sesuaikan kode pada file Main Java yang ada pada folder src :
- 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;
atau tekan CTRL+SHIF+O
- Ganti Private Void onCreate menjadi Public Void
9. 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. 
10. Klik kanan pada file AndroidManifest.xml, kemudian pilih Open With > Text Editor
11. Paste kode permission berikut di bawah versionName (lihat gambar di bawah) :
<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" />
12. Tambahkan sebuah activity di bawah application tag pada AndroidManifest (lihat gambar di bawah)
<activity android_name="org.apache.cordova.DroidGap" android_label="@string/app_name" android_configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>
Cara Install Phonegap di Eclipse dan Titanium Studio Android

Test Hello World
13. 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.
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
</head>
<body>
<h1>Hello World, eftutor Blog</h1>
</body>
</html>
Uji ke Simulator
14. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application
15. 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
16. Pastikan USB debugging di-enable pada device Android Anda, kemudian hubungkan ke sistem (Settings > Applications > Development)
17. Klik kanan pada project Anda dan kemudian pilih Run As dan klik Android Application

Sumber
http://phonegap.com/start#android


Available link for download