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 :
Exit App Notification
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.
Terima kasih untuk tutorialnya. Saya coba tutorialnya, lalu saya build menggunakan phonegap. Tapi ketika saya tekan tombol back pada aplikasi dapat keluar tanpa muncul pesan terlebih dahulu. Berikut sintaknya :
function init() {
document.addEventListener(“deviceready”, startup, false);
}
function startup() {
console.log(“Aplikasi Siap…”);
document.addEventListener(“backbutton”, doClose, false);
}
function doClose() {
navigator.notification.confirm(
‘Keluar dari Aplikasi ?’,
exitApp,
‘Aplikasiku’,
‘Ok,Cancel’
);
}
function exitApp(buttonIndex) {
if (buttonIndex == 1) {
navigator.app.exitApp();
}
else {
window.close();
}
}
Aplikasiku
Maaf masih newbiee, tengkyuuu
mungkin bisa diupload ke github source code lengkapnya mas ! biar saya coba analisis..
jika dilihat dari source javascript di atas sih normal aja !
Terima kasih banyak mas atas responya. Maaf kesalahan ada di saya hehe, sekarang sudah berjalan normal. Project mas keren2 di google play, izin download mas hehe. Ohya mas, btw untuk mengubah background awal sebelum aplikasi masuk itu bagaimana ya, secara default dia hanya tampilan blank hitam. Mohon petunjuknya. Tengkyuu banget mas
sama-sama…
tinggal diberi splash screen saja, tampilan hitam itu default dari sistem kok..
tutorial ini mungkin bisa dicoba http://mkhuda.com/android/menampilkan-native-splash-screen-aplikasi-android-pada-phonegap/
Sekali lagi terima kasih pencerahanya :D, sangat membatu. Berhasil. Terima kasih
Sama-sama senang bisa membantu.. 🙂
maaf mas tanya di luar pembahasan,.. hehe
kalau untuk membuat aplikasi phonegap dengan fitur bahasanya dapat diubah-ubah caranya gimana ya? itu makenya apa?
bisa menggunakan localstorage.. coba nanti kalo ada waktu agak luang saya buatkan tutorialnya.. 🙂
siap mas,… di tunggu… hehe 😀
mas kalo bikin boot load pada saat aplikasi pertama di jalankan gimana ya,,,,,mohon bimbingan nya
mungkin maksud anda native splash screen saat aplikasi pertama kali dibuka ya ?
bisa dibaca disini http://mkhuda.com/android/menampilkan-native-splash-screen-aplikasi-android-pada-phonegap/
permisi mas saya mw tanya untuk cordovanya sendiri
saya menggunakan phonegap 1.3.0, apakah harus download cordova terlebih dahulu
lalu pada script yang diatas di ganti 1.3.0 langsung apakah bisa .. trima kasih
iya mas, dicoba dulu aja !
Terimakasih gan, scriptnya bekerja dengan baik.
Tapi ada yang mau saya tanyakan gan, kenapa ketika saya pilih “Cancel” pada saat Exit App Notification muncul, kemudian saya pencet back button lagi pada page yang sama, Exit App Notificationnya tidak mau muncul untuk kedua kalinya.
Kira2 solusinya gimana gan? Adakah script tambahan supaya Exit App Notification mau muncul berulang-ulang tanpa harus reload page.
Terimakasih.
Sblmnya trims mas ats tutorialnya.
Ada yg mau sy tanyakan mas. Supaya tidak “keluar” aplikasi ketika masih dihalaman detail modifnya gmn ya mas?
Stelah sy masuk di page utama aplikasi, kemudian masuk ke page detail dan mengklik tombol “back” notifnya keluar mas. seharusnya kan tidak. itu gmn mas cara modifnya?
saya kasih pseudocode-nya ya mas ..
function exitApp(buttonIndex) {if (berada di halaman home) {
navigator.app.exitApp();
}
else {
kembali ke home atau page sebelumnya
}
}
intinya, jika kita berada di homepage, apps akan mengeluarkan notice exit. else (tapi) jika berada di page lain selain di home, mas radi bisa mengembalikan ke page sebelumnya.
Menyambung pertanyaan yang diatas, saya memiliki beberapa halaman html, nah setelah memakai syntaks yang mas berikan untuk exit aplikasi, benar aplikasi keluar pada saat sudah berada pada homepage(index.html). Masalahnya, pada saat ada di halaman lain dan saat kita ingin kembali ke halaman sebelumnya, tombol back pada device android tersebut tidak berfungsi. Apakah saya harus memasukkan syntaks tersebut pada semua file html nya selain yang index.html nya? Atau kah harus memasukkan syntaks lain? Maaf mas pertanyaan newbie nih hehe mohon bantuannya….terimakasih
syntax utk back dijadikan satu saja, lanjutnya di embed ke masing2 halaman jika ada banyak page html di aplikasi.
mas apakah fungsi dari navigator.app.exitApp(); bisa di rubah ke fungsi yang lain? jadi maksud saya ketika saya menekan tombol kembali maka otomatis ke homescreen android? mohon pencerahannya terimkasih