Aplikasi Android Dengan Feature Facebook Comments Menggunakan WebView

Free Image Hosting at www.ImageShack.us

Tulisan kali ini akan mengulas bagaimana cara membuat aplikasi android, yang menyertakan feature facebook comments. Ini sangat berguna untuk website-website yang menggunakan facebook comments sebagai sarana mengaktifkan komentar. Kemudian ingin membuat aplikasi android, tapi tetap ingin ada komentar-nya.

Trik-nya cukup sederhana. Yaitu dengan membuat dua WebView dan custom WebViewClient serta WebChromeClient untuk masing2 WebView tersebut. Untuk studi kasus, kita pakai saja URL berikut:

http://www.merdeka.com/peristiwa/anggota-tni-ikut-demo-untuk-beri-rasa-aman.html

Mempersiapkan file layout xml

Yang pertama disiapkan adalah, memberi id pada LinearLayout di file xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/parentLayout" >

</LinearLayout>

Code onCreate()

Di onCreate(), kita akan menginisialisasi WebView dan menambahkannya melalui baris kode, tidak menggunakan layout xml. Kita juga perlu menambahkan faeture progress ke window, sebagai indikator saja, supaya mengerti kalau aplikasi sedang melakukan loading halaman. Berikut potongan kode-nya:

public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	
	//meminta feature progress
	//HARUS di awal kode (setelah pemanggilan super)
	this.getWindow().requestFeature(Window.FEATURE_PROGRESS);

	setContentView(R.layout.main);
	
	//meminta feature progress
	getWindow().setFeatureInt(Window.FEATURE_PROGRESS,
			Window.PROGRESS_VISIBILITY_ON);

	//menginisialisasi WebView
	webViewFB = new WebView(this);
	webViewFB.setWebViewClient(new FaceBookClient());
	webViewFB.setWebChromeClient(new FBChromeClient());

	//menginisialisasi parent layout (tempat menaruh webview)
	parentLayout = (LinearLayout) findViewById(R.id.parentLayout);

	//mengatur layout agar FILL_PARENT (menutup seluruh bidang layar)
	webViewFB.setLayoutParams(getLayoutParams());

	//mengatur setting webview
	//karena facebook comment sangat bergantung pada javascript,
	//maka perlu mengaktifkan feature javascript
	final WebSettings webSettings = webViewFB.getSettings();
	webSettings.setJavaScriptEnabled(true);
	webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
	webSettings.setSupportMultipleWindows(true);

	//URL yang mengantung facebook comment
	String newsURL = "http://www.merdeka.com/peristiwa/anggota-tni-ikut-demo-untuk-beri-rasa-aman.html";

	//menambahkan webview ke parent layout
	parentLayout.addView(webViewFB);
	
	//menampilkan data beserta facebook comment yang ada
	webViewFB.loadDataWithBaseURL("http://www.merdeka.com/", getHTMLData( newsURL ), "text/html", null, "");

}

Yang perlu diperhatikan dari kode di atas adalah:

webViewFB.loadDataWithBaseURL("http://www.merdeka.com/", getHTMLData( newsURL ), "text/html", null, "");

Perhatikan bahwa pada saat memanggil WebView.loadDataWithBaseURL(), kita sertakan URL lengkap dari merdeka.com. Ini disebabkan karena kita menggunakan javascript dan WebView.loadDataWithBaseURL() mematuhi aturan same origin policy.

Method getHTMLData()

Kalau diperhatikan, pada kode di atas terdapat pemanggilan getHTMLData(). Sebenarnya, kode ini hanya menggenerate HTML yang nantinya akan ditampilkan oleh webview.

private String getHTMLData(String newsURL) {

	StringBuffer sb = new StringBuffer();
	sb.append("<html>");
	sb.append("<head>");
	sb.append("<title>Anggota TNI ikut demo untuk beri rasa aman</title>");
	sb.append("</head>");
	sb.append("<body>");
	sb.append("<h1>Anggota TNI ikut demo untuk beri rasa aman</h1>");
	sb.append("<div style='color: #959595;'>Kamis, 29 Maret 2012 11:01:15</div>");
	sb.append("<div class=\"fb-comments\" data-href=\"" + newsURL + "\" data-num-posts=\"5\" data-width=\"680\"></div>");
	sb.append("<div id=\"fb-root\"></div>");
	sb.append("<script>(function(d, s, id) {");
	sb.append("var js, fjs = d.getElementsByTagName(s)[0];");
	sb.append("if (d.getElementById(id)) {return;}");
	sb.append("js = d.createElement(s); js.id = id;");
	sb.append("js.src = \"//connect.facebook.net/en_US/all.js#xfbml=1&appId=341995562513785\";");
	sb.append("fjs.parentNode.insertBefore(js, fjs);");
	sb.append("}(document, 'script', 'facebook-jssdk'));");
	sb.append("</script>");
	sb.append("</body>");
	sb.append("</html>");

	return sb.toString();
}

Tidak ada yang spesial dari kode-kode HTML yang dihasilkan method tersebut.

Class FaceBookClient

Class yang satu ini, tugasnya hanya mengoverride agar setiap URL yang diclick, WebView tersebut yang bertanggung-jawab membukanya.

private class FaceBookClient extends WebViewClient {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		Log.i("REQUEST URL", url);
		return false;
	}
}

Untuk yang penasaran, coba saja return tersebut diganti menjadi true.

Class FBChromeClient

Nah, ini dia class yang memainkan peran penting. Tugas WebChromeClient adalah mengoverride berbagai macam perilaku browser, seperti saat window baru dibuat, saat page start, resurce dibuka, terlalu banyak redirect, dll. Untuk kasus ini, kita akan menggunakan onCreateWindow(), onProgressChanged(), dan onCloseWindow().

final class FBChromeClient extends WebChromeClient {

	@Override
	public boolean onCreateWindow(WebView view, boolean dialog,
			boolean userGesture, Message resultMsg) {
		childWebView = new WebView(MainActivity.this);
		childWebView.getSettings().setJavaScriptEnabled(true);
		childWebView.getSettings().setSupportZoom(true);
		childWebView.getSettings().setBuiltInZoomControls(true);
		childWebView.setWebViewClient(new FaceBookClient());
		childWebView.setWebChromeClient(this);
		childWebView.setLayoutParams(MainActivity.this.getLayoutParams());

		parentLayout.addView(childWebView);

		childWebView.requestFocus();
		webViewFB.setVisibility(View.GONE);

		WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
		transport.setWebView(childWebView);
		resultMsg.sendToTarget();
		return true;
	}

	@Override
	public void onProgressChanged(WebView view, int newProgress) {
		MainActivity.this.setProgress(newProgress * 100);
	}

	@Override
	public void onCloseWindow(WebView window) {
		parentLayout.removeViewAt(parentLayout.getChildCount() - 1);
		childWebView = null;
		webViewFB.setVisibility(View.VISIBLE);
		webViewFB.requestFocus();
	}

}


Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.