Get Ready PhoneGap in Android

Posted on

Pernah mendengar PhoneGap? Bagi kalangan pengembang mobile, mungkin istilah ini bisa terbilang baru di dunia development mobile. PhoneGap merupakan framework yang digunakan saat mengembangkan aplikasi hybrid di platform mobile. Aplikasi hybrid adalah aplikasi multiplatform yang bisa dikembangkan di berbagai platform mobile terkini, seperti Android, IOS, dan Windows Phone. Implementasi aplikasi hybrid ini menggunakan HTML 5, kombinasi antara teknologi HTML, javascript, dan CSS 3 sehingga menghasilkan aplikasi yang memiliki fitur layaknya native app namun bisa dijalankan di berbagai platform yang berbeda. Info lebih lanjut tentang PhoneGap bisa diakses di http://www.phonegap.com/.

Logo PhoneGap
Logo PhoneGap

Implementasi PhoneGap bisa dilakukan dengan mudah di berbagai platform, terutama Android. IDE yang digunakan adalah Eclipse. Sebelum menginstal PhoneGap, pastikan SDK dan AVD Android sudah terinstall dengan benar.

Download PhoneGap di situs resminya, kemudian ekstrak. Di dalamnya ada beberapa folder yang nantinya akan diintegrasikan pada Eclipse.

Buat project baru pada eclipse. Beri nama dan indentitas aplikasi sesuai dengan keinginan.

Create New Project Android
Create New Project Android

Buat folder bernama /libs dan assets/www. Sekedar info, versi PhoneGap yang saya gunakan adalah PhoneGap versi 2.0 (Rilis 20 Juli 2012).

Copy file cordova-2.0.0.js pada folder download PhoneGap ke direktori project assets/www

Copy file cordova-2.0.0.jar pada folder download PhoneGap ke direktori project /libs

Copy folder xml pada folder download PhoneGap ke direktori /res

Strukture direktori menjadi seperti berikut :

Directory PhoneGap Android
Directory PhoneGap Android

Verifikasi file cordova.jar yang telah di-copy. Ini bertujuan agar sistem mendeteksi library PhoneGap. Klik kanan folder /libs, pilih Build PathConfigure Build Path. Pilih tab Libraries, pilih cordova.

Configuration Library
Configuration Library

Cek folder Reference Libraries.

Reference Libraries
Reference Libraries

Buat file html, paste sintaks berikut pada file AndroidManifest.xml, di antara sintaks <manifest> dan <application> :

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

<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" />

Sehingga file AndroidManifest berbentuk seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.fadlikadn.phonegaptest"
	 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-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:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".phonegaptest"
                  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>

    <uses-sdk android:minSdkVersion="9" />
</manifest>

Buat file index.html, pastekan source code berikut :

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

Running aplikasi, dan hasilnya sebagai berikut :

Phone Gap Started in Android
Phone Gap Started in Android

 

Download project lengkapnya di sini

Iklan

5 thoughts on “Get Ready PhoneGap in Android

    Aldy Ahsandin said:
    22 Juli 2012 pukul 14:19

    Aplikasi yang kamu bikin dulu itu kan pake phonegap (CMIIW) dli?
    Enggak kamu share aja?

      Fadlika Dita Nurjanto responded:
      22 Juli 2012 pukul 14:27

      Iya mas, yang dulu PhoneGap di Windows Phone. Beres mas..tapi agak lupa sih nyimpen dimana?

    Aldy Ahsandin said:
    24 Juli 2012 pukul 06:47

    Tapi bukannya phonegap punyanya Adobe…
    Agak gimana gitu klo yang promo anak MSP 😀

      Fadlika Dita Nurjanto responded:
      25 Juli 2012 pukul 15:58

      Wah..mas, tapi bukan berarti nggak boleh belajar teknologi lain kan??
      Yang penting kan memberi manfaat.. 🙂

    Aldy Ahsandin said:
    25 Juli 2012 pukul 16:58

    Jadi Adobe Evangelist aja dli hehehehe

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s