Exit App Notification Pada Aplikasi Phonegap

Phonegap yang merupakan sebuah framework building aplikasi mobile telah mengalami perkembangan cukup signifikan akhir-akhir ini. Aplikasi di Google Play (misalnya), telah bermunculan hasil karya yang berbasis HTML5 baik yang dibuat menggunakan Phonegap maupun Sencha. Sebagai framework HTML5, Phonegap juga memiliki fitur untuk mengakses fitur native Android semisal Alert Notification.

Pada tutorial kali ini, kita akan membuat notifikasi alert untuk aplikasi Android yang dapat ditampilkan ketika si pemakai aplikasi (user) memencet tombol BACK pada device Android. Seperti di bawah ini :

Download Sources

Mari kita mulai !

Pada aplikasi Android yang sudah Anda buat, pastikan di dalam file index.html terdapat fungsi init(); yang telah disisipkan ke dalam tag body untuk menginisialisasi fungsi-fungsi utama Phonegap.

function init() {
	document.addEventListener("deviceready", startup, false);
}

fungsi init(); tersebut mengandung fungsi lagi yang biasa dipakai untuk aplikasi Phonegap yaitu document.addEventListener(“deviceready“). Ini wajib disisipkan pada setiap aplikasi Phonegap, dimaksudkan untuk mengetahui bahwa aplikasi telah berjalan di device kita.

Setelah init(); kita buat. Kita buat lagi fungsi startup(); yang sebelumnya telah kita masukkan ke dalam variabel document.addEventListener(“deviceready”, startup, false); ketikkan fungsi di bawah ini :

function startup() {
	console.log("Fungsi Exit App");
	document.addEventListener("backbutton", doClose, false);
}

Perlu kita ketahui bahwa, fungsi document.addEventListener(); merupakan fungsi Javascript yang dimanfaatkan Phonegap untuk memanggil fitur native utama device Android. Seperti dalam document.addEventListener() di atas, target utama adalah “backbutton” perangkat Android kita.

Maksud lebih jelasnya, jika user (si pemakai) memencet tombol backbutton, selanjutnya sistem akan menjalankan fungsi doClose(); yang nanti akan kita buat. Sama halnya pada fungsi deviceready pada awal tadi, yang memanggil fungsi startup(); saat aplikasi sudah berjalan.

Selanjutnya, kita akan membuat fungsi doClose(); yang telah didefinisikan sebelumnya. Fungsi doClose ini didalamnya memiliki fungsi lagi yang akan membuat sebuah notifikasi di tampilan layar perangkat anda. Silahkan ketik kode berikut untuk fungsi doClose();

function showExitAlert() {
	navigator.notification.confirm(
		'Keluar dari Aplikasi ?',
		exitApp,
		'Aplikasi Kita',
		'Ok,Cancel'
	);
}

Dari source di atas, kata kunci utama untuk mengeluarkan notifikasi terletak pada fungsi navigator.notification.confirm(); yang merupakan fasilitas dari framework Phonegap. Silahkan baca dokumentasi lengkapnya di sini. 

Nah, dengan fungsi seperti ini, aplikasi sebenarnya sudah bisa menampilkan sebuah notifikasi yang berisi Ok dan Cancel. Namun kedua tombol tersebut belum memiliki fungsi untuk keluar dari aplikasi semisal kita memencet tombol Ok. Maka dari itu, kita perlu mendefinisikan lagi fungsi exitApp(); agar notifikasi berjalan sesuai perancangan. Tambahkan kode berikut ini :

function exitApp(buttonIndex) {
	if (buttonIndex == 1) {
	navigator.app.exitApp();
	}
	else {
		window.close();
	}
}

Sekarang, notifikasi untuk keluar dari aplikasi dapat berjalan seperti yang kita inginkan. Pembaca dapat mendownload contoh file index.html jika tutorial ini dirasa kurang begitu menjelaskan. Terima kasih.

Download Sources