.: hanya sebuah blog :.: Buat Aplikasi Web Sederhana di Android Yuk..

Ok, kali ini sya balik lagi ke blog setelah sebulan vakum karena sibuk urusan kerjaan...hihihi... Dan tulisan kali ini adalah ttg si robot hijau... android
Sya heran bgt kenapa ya satu hari yg terdiri dri 24 jam ini amat sangat cepat berlalu... Bangun pagi jam 7, bersihin rumah, berangkat ngantor, kerja..., pulang ngantor jam 4, sembahyang dan makan,abis itu ga terasa uda jam 9 malam... Benar2 cepat skali berlalu, pdahal masih bnyak yg harus sya kerjakan...(termasuk TA tercinta <3 )...

Sipp, dri pada obrolan ini ga tau arahny kemana sya lngsung bhas aja deh.. sebenarny sjak sya punya hape android (kalo ga slah taon 2010) sya pngen jadi developer android nih ceritanya..hehehe (biasalah mhasiswa TI yg pgen ini itu)..nah tpi dunia programming web telah mngalihkan perhatian sya (pas itu prtama x megang PHP dan sekarang sya lagi konsen di Ruby on Rails jdi PHP nya sya lupa deh...)... akhirnya sya bisa mewujudkn keingin tauan sya di android berkat bos sya yg ngasih projek buat bkin aplikasi web launcher slah satu website news di papua...(jgan tanyakan sya kenapa bisa kerjaan sya bisa nyasar smpe papua, apa krena sya pgen ke Raja Ampat yaaaa...hehehe).. Nah, aplikasi web ini sederhana bgt kok, kalo uda tw sintaksnya ga smpe stengah jam ngerjainnya.. (many says thanks to mbah gugel)... Jadi kita akan membuat aplikasi android yg bisa langsung nge-launch alamat url yg uda ditentukan tanpa harus repot2 mmbuka browser dan ngetik alamatnya...Gmana cara buatnya, mari kita cekidot bekicot...

Persiapan awal buat ngedevelop aplikasi android adl memiliki senjatany terlebih dhulu... disini sya menggunakan Eclipse Helios buat editing sintaksny... mengenai konfigurasi SDK ke Eclipse uda bnyak bgt bertebaran di mbah gugel..hehe silahkn cari aja yaaa...

===== Step Pertama :: Buat Project Baru
1. Pilih File, kemudian New, terus klik Android Application Project
2. Setelah itu, kita akan melihat penampakan di bawah ini:

Untuk application name biasakan selalu mengawalinya dengan huruf kapital, karena jika semuanya huruf kecil maka akan muncul peringatan.. dan inilah yg paling krusial... package name, secara default dia akan terisi com.example.nakbiasa.. sebaikny diganti sja dengan nama lain (dsini sya menggunakan paket.nakbisa dan ingat nama package harus terdiri dari minimal dua bagian).. kenapa harus diganti? karena ketika kita akan mengupload file .apk ke Google Play maka nama package tidak boleh terdiri dari kata com., com.example, android..dsb

3. Kemudian kita akan membuat icon utk app launchernya

4. Setelah itu...

5. Dan disinilah kita mulai meng-coding...

===== Step Kedua :: Coding

Buat kamu2 yg uda terbiasa ma java dan xml... tentunya ini hal yg mudah...

1. Tampilan pertama untuk pembuatan projek, kita akan disuguhi file activity_nak_biasa.xml.. yang berada di folder /res/layout/ Nah kalo visualnya kan ada tulisan hello world, karena kita ingin begitu aplikasi dilaunch maka tampilan akan langsung menuju url kita... jadi disini perlu diedit sintaksny.. ubah kodenya menjadi:

<?xml version="1.0" encoding="utf-8"?>

<WebView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/webView"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

2. Setelah itu kita menuju ke file .java nya.. Kita bisa menemukannya di folder /src/paket.nakbiasa/Nakbiasa.java

- yang pertama hapus saja onCreateOptionsMenu karena disini kita tidak menggunakan tampilan menu

- tambahkan sintaks ini sebelum onCreate()

private WebView mWebView;

disini kita akan membuat aplikasi web dengan WebView, penjelasan maknyoossnya bisa dilihat di link ini...

3. Setelah itu, di dalam onCreate tambahkan sintaks berikut:

mWebView = (WebView) findViewById(R.id.webView); 
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new NakbiasaWebViewClient()); 
mWebView.loadUrl("http://www.nakbiasa.blogspot.com");

4. Nah, NakbiasaWebViewClient() dibilang error karena kita belum menambahkan fungsinya... di luar onCreate() tambahkan sintaks berikut:

private class NakbiasaWebViewClient extends WebViewClient{
     @Override
     public boolean shouldOverrideUrlLoading(WebView webview, String url){
      webview.loadUrl(url);
      return true;
     }
    }

fungsinya adalah browser tidak akan muncul ketika meload suatu url...

5. Biar bisa back ke halaman sebelumnya, tambahkan lagi sintaks ini dibawah fungsi di atas...

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
     if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
     {
      mWebView.goBack();
      return true;
     }
     return super.onKeyDown(keyCode, event);
    }

6. Biasanya ni, kdang ada masalah kalo sintaks ini ga ditemukan ato gmana... jdi diperlukan import android di bagian awalnya... biar lebi mantep ini sya kasi liat sintaks keseluruhan dri Nakbiasa.java

package paket.nakbiasa;

import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.app.Activity;
import android.webkit.WebViewClient;

public class Nakbiasa extends Activity {

 private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_nakbiasa);
        mWebView = (WebView) findViewById(R.id.webView); 
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new NakbiasaWebViewClient()); 
        mWebView.loadUrl("http://www.nakbiasa.blogspot.com");
    }

    private class NakbiasaWebViewClient extends WebViewClient{
     @Override
     public boolean shouldOverrideUrlLoading(WebView webview, String url){
      webview.loadUrl(url);
      return true;
     }
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
     if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
     {
      mWebView.goBack();
      return true;
     }
     return super.onKeyDown(keyCode, event);
    }
   
}

7. Segitu ajakah?? Eh, tunggu dulu di AndroidManifest.xml kita harus menambahkan sintaks berikut biar bisa konek ke internet..

<uses-permission android:name="android.permission.INTERNET" />

8. Nah biasanya ada peringatan di mWebView.getSettings().setJavaScriptEnabled(true); kita bisa mengabaikannya saja di projek ini.. caranya letakkan kursor di baris sintaks berikut dan pilih abaikan...

=====Step Ketiga :: Launch!!

untuk emulatornya sendiri, sya menggunakan yg android v 4.1 Jelly Bean... Kita bisa membuat emulator sesuai selera di AVD... Pertamany rada berat buat ngejalanin emulator, jdi harap sabar aja yaaaa....

Nahhh... ini dia hasil akhirnya... masi sederhana yaakk...

Ok, sekian dulu tutorial yg amat sangat sederhana ini, semoga berguna.. =)).. ini baru contoh aplikasi web yg menggunakan WebView... kalo mw isi operasi database mungkin bsa make sqlLite kali yaa....

Salam,