Android Membuat Aplikasi Web Mobile dengan PhoneGap dan ADT

1 Vote

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.

-buka folder eclipse dan jalankan eclipse.exe

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

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:

buka folder Lib/Android

tampilan didalam folder

6. sekarang buat aplikasi di ADT-nya: - buat project baru di Android Aplication Project

- akan tampil dialog box berikut.

- 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.

- membuat icon setelah dirasa semua pass klick next

- biarkan default aja activity-nya, klick next

- sesuaikan gambar penganturannya, tinggal klick finish.

7. tahap ini adalah menyatukan ADT dan PhoneGap. Tampilan 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,

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)

13. tinggal kita edit bagian, lihat gambar

klick dua kali untuk membuka dan isikan script berikut, package com.test.app; // sesuaikan dengan nama package nya 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: