Beranda > Artikel, css, framework, javascript, Tips dan trik, Website > Android – Membuat Aplikasi Web Mobile dengan PhoneGap dan ADT

Android – Membuat Aplikasi Web Mobile dengan PhoneGap dan ADT


apphx2
Langsung aja berikut cara membuat Aplikasi Web Mobile device Android dengan Framework PhoneGap.

Berikut step by stepnya:
1. Sobat download semua bahan yang diperlukan:
- SDK Android download di http://developer.android.com/sdk/index.html
- JDK versi 7u21 download di http://www.oracle.com/technetwork/java/javase/downloads/index.html
- Framework PhoneGap download di http://www.phonegap.com/
2. kalau sudah didownload semua langsung aja install JDK yang telah didownload td.

3. Extract SDK Android yang sudah didownload td. kurang lebih isinya akan seperti gambar ini.
sdk android
-buka folder eclipse dan jalankan eclipse.exe
eclipse

4. akan muncul tampilan awal ADT /Android Developer tools. dari sini sebenarnya sudah bisa dibuat untuk membuat aplikasi nativ android tapi belum berbasis web. kurang lebih seperti ini Screenshotnya
screen ADT

5. sekarang tinggal kita modif aplikasi nativenya supaya berbau Web dengan framework PhoneGap. Extract dulu phoneGap yang telah kita download kurang lebih isi dari file didalamnya adalah sebagai berikut:
phonegap
buka folder Lib/Android
exp pg
tampilan didalam folder
tmp pg

6. sekarang buat aplikasi di ADT-nya:
- buat project baru di Android Aplication Project
androit project
- akan tampil dialog box berikut.
new android
- sesuakan setting seperti pada gambar, Aplication name di isi terserah tapi recommended sesuai apa yang saya tulis biar kebelakangnya gampang penyesuaiannya. klick Next.
- klick next lagi. semua sudah default.
config
- membuat icon setelah dirasa semua pass klick next
icon
- biarkan default aja activity-nya, klick next
crt act
- sesuaikan gambar penganturannya, tinggal klick finish.
blank

7. tahap ini adalah menyatukan ADT dan PhoneGap.
Tampilan awal,
awal

- sekarang yang perlu kita lakukan adalah mengcopy file cordova-2.6.0.jar yanga ada di folder phonegap tadi di lib/android (lihat Langkah 5)
- paste cordova-2.6.0.jar ke C:\Users\handexcel\workspace\App\libs, (handexcel merupakan nama user PC).

8. Buat folder baru di asset kasih nama www, contoh gambar berikut,
asset
folder

klick finish.

9. kita copy Folder XML yang ada di folder Phnoegap lib/android, paste ke C:\Users\handexcel\workspace\App\res

10. tinggal kita isi folder www tadi yang ada di C:\Users\handexcel\workspace\App\assets\www dengan file index terserah apa yang mau di tampilin.

11. setelah itu kita masuk lagi ke aplikasi ADT-nya lalu refresh (F5)
12. sekarang tinggal kita setting bagian config.xml yang ada di folder XML tadi. lihat gambar.
cnfgxml
klick dua kali untuk membukanya dan copykan script berikut kedalamnya:

<?xml version=”1.0″ encoding=”utf-8″?><!–       Licensed to the Apache Software Foundation (ASF) under one       or more contributor license agreements.  See the NOTICE file       distributed with this work for additional information       regarding copyright ownership.  The ASF licenses this file       to you under the Apache License, Version 2.0 (the       “License”); you may not use this file except in compliance       with the License.  You may obtain a copy of the License at         http://www.apache.org/licenses/LICENSE-2.0       Unless required by applicable law or agreed to in writing,       software distributed under the License is distributed on an       “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY       KIND, either express or implied.  See the License for the       specific language governing permissions and limitations       under the License.–><cordova>    <!–    access elements control the Android whitelist.    Domains are assumed blocked unless set otherwise     –>    <access origin=”http://127.0.0.1*”/&gt; <!– allow local pages –>    <!– <access origin=”https://example.com&#8221; /> allow any secure requests to example.com –>    <!– <access origin=”https://example.com&#8221; subdomains=”true” /> such as above, but including subdomains, such as www –>    <access origin=”.*”/>    <!– <content src=”http://mysite.com/myapp.html&#8221; /> for external pages –>    <content src=”index.html” />    <log level=”DEBUG”/>    <preference name=”useBrowserHistory” value=”true” />    <preference name=”exit-on-suspend” value=”false” /><plugins>    <plugin name=”App” value=”org.apache.cordova.App”/>    <plugin name=”Geolocation” value=”org.apache.cordova.GeoBroker”/>    <plugin name=”Device” value=”org.apache.cordova.Device”/>    <plugin name=”Accelerometer” value=”org.apache.cordova.AccelListener”/>    <plugin name=”Compass” value=”org.apache.cordova.CompassListener”/>    <plugin name=”Media” value=”org.apache.cordova.AudioHandler”/>    <plugin name=”Camera” value=”org.apache.cordova.CameraLauncher”/>    <plugin name=”Contacts” value=”org.apache.cordova.ContactManager”/>    <plugin name=”File” value=”org.apache.cordova.FileUtils”/>    <plugin name=”NetworkStatus” value=”org.apache.cordova.NetworkManager”/>    <plugin name=”Notification” value=”org.apache.cordova.Notification”/>    <plugin name=”Storage” value=”org.apache.cordova.Storage”/>    <plugin name=”FileTransfer” value=”org.apache.cordova.FileTransfer”/>    <plugin name=”Capture” value=”org.apache.cordova.Capture”/>    <plugin name=”Battery” value=”org.apache.cordova.BatteryListener”/>    <plugin name=”SplashScreen” value=”org.apache.cordova.SplashScreen”/>    <plugin name=”Echo” value=”org.apache.cordova.Echo” />    <plugin name=”Globalization” value=”org.apache.cordova.Globalization”/>    <plugin name=”InAppBrowser” value=”org.apache.cordova.InAppBrowser”/></plugins><plugins>    <plugin name=”App” value=”com.phonegap.App”/>    <plugin name=”Geolocation” value=”com.phonegap.GeoBroker”/>    <plugin name=”Device” value=”com.phonegap.Device”/>    <plugin name=”Accelerometer” value=”com.phonegap.AccelListener”/>    <plugin name=”Compass” value=”com.phonegap.CompassListener”/>    <plugin name=”Media” value=”com.phonegap.AudioHandler”/>    <plugin name=”Camera” value=”com.phonegap.CameraLauncher”/>    <plugin name=”Contacts” value=”com.phonegap.ContactManager”/>    <plugin name=”Crypto” value=”com.phonegap.CryptoHandler”/>    <plugin name=”File” value=”com.phonegap.FileUtils”/>    <plugin name=”Network Status” value=”com.phonegap.NetworkManager”/>    <plugin name=”Notification” value=”com.phonegap.Notification”/>    <plugin name=”Storage” value=”com.phonegap.Storage”/>    <plugin name=”Temperature” value=”com.phonegap.TempListener”/>    <plugin name=”FileTransfer” value=”com.phonegap.FileTransfer”/>    <plugin name=”Capture” value=”com.phonegap.Capture”/></plugins></cordova>

- dan jangan lupa save.

13. selanjutnya kita buka AndroidManifest.xml dan copykan script berikut sesudah script 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.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” />

- atau langsung lengkapnya seperti ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=”com.test.app”
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.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” />
<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.test.app.App_main”
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>
<activity android:name=”org.apache.cordova.DroidGap” android:label=”@string/app_name” android:configChanges=”orientation|keyboardHidden”> <intent-filter> </intent-filter> </activity>
</application>

</manifest>

13. tinggal kita edit bagian, lihat gambar
appmain
klick dua kali untuk membuka dan isikan script berikut,

package com.test.app;

import org.apache.cordova.*;
import android.os.Bundle;
//import android.app.Activity;
import android.view.Menu;

public class App_main extends DroidGap {

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.app_main, menu);
return true;
}

}

selesai tinggal priview hasilnya: outputnya bisa seperti ini tergantung isi dari file indexnya:
testing

hufttt panjang juga…. kalau kurang jelas bisa ditanyakan di comment. :)

  1. 22 Apr 2013 pukul 22:44

    Gan, klau buat aplikasi radio streaming ada tutorialnya gak?
    mkcih,

    • 23 Apr 2013 pukul 07:49

      Banyak gan coba searching di google. udah banyak situs penyedianya

  2. wiant
    26 Mei 2013 pukul 20:18

    trus yang dimaksud memudahkan kita dakam membuat aplikasi tu dmnanya gan kog tak liat meski ngak menggunakan phonegap eclipse aja uda cukup mbuat aplikasi itu

    • 28 Mei 2013 pukul 08:57

      bedanya kalau kita menggunakan eclips saja tanpa phonegap kita akan diarahkan pada program native dan semua berbasis oop… seperti halnya java… untuk pemula kayaknya agak susah mempelajari bahasa pemrograman oop.
      sedang klo kita pakek phonegap kita bisa membuat interficenya seperti kita membuat website atau aplikasi berbasis web lainnya, hanya dengan sedikit ketrampilan css, html dan tambahan php & mysql,

      tapi semua itu tergantung usernya gan, kalau saya lebih paham kepada arah aplikasi web soalnya banyak tutornya di internet… frame work yang klop dengan phonegap juga banyak, semisal iUI, jquery mobile, dll…
      :)

  3. yussan
    16 Jul 2013 pukul 09:39

    saya gunakan tutorial diatas sebagai project pertamaku dengan bantuan phonegap

  4. 11 Des 2013 pukul 10:41

    menarik gan . . jadi pingin nyoba :D

  1. No trackbacks yet.

Tinggalkan Balasan

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 54 pengikut lainnya.

%d bloggers like this: