Belajar Phonegap dari Dasar

Halo temen-temen MII, berjumpa lagi di tutorial Android, jika pada tutorial kemarin kita telah belajar membuat widget clock sekarang kita akan mencoba belajar PhoneGap. Apakah PhoneGap itu? PhoneGap adalah sebuah framework atau kerangka kerja yang sifatnya open source, dipakai untuk membuat aplikasi lintas platform mobile dengan HTML, CSS, dan JavaScript. Aplikasi yang dibuat dengan PhoneGap tidak hanya seperti situs web mobile biasanya. Hasil aplikasi dari PhoneGap bisa berinteraksi dengan hardware yang ada di perangkat mobile, seperti Accelerometer, GPS, tidak seperti aplikasi web secara normal. Akan tetapi pada tutorial ini kita tidak akan membuat aplikasi yang kompleks, kita belajar dari yang sederhana dulu.

Oke langsung saja, langkah pertama adalah download PhoneGap (jika belum punya).

Buat project baru android :

belajar phonegap

buat project android baru

Buat folder dengan nama www didalam assets

belajar phonegap dasar

buat folder www

Copy cordova-x.x.x.jar kedalam folder libs, kemudian folder xml dicopykan ke folder res, sedangkan cordova.js dicopy ke folder www. (ketiga file tsb didapat dari download PhoneGap tadi).

phonegap3

Buka MainActivity.java, ketikkan kode seperti dibawah ini :

 

package com.mii.belajarphonegap;

import android.os.Bundle;
import org.apache.cordova.*;

public class MainActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.loadUrl(Config.getStartUrl());
	}
}

 

Buka AndroidManifest.xml, replace kodenya dengan kode seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mii.belajarphonegap"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <uses-sdk
        android:minSdkVersion="8"
        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.mii.belajarphonegap.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>

</manifest>

 

 

Oke, terakhir kita jalankan project yang telah kita buat tadi, maka akan tampil seperti dibawah ini :

Hasil Belajar PhoneGap

Hasil Belajar PhoneGap

 

 

 

  

Comments

comments

You can leave a response, or trackback from your own site.

Leave a Reply