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 :
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.
Arif
August 1, 2013Terima 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
Muhammad K Huda
August 2, 2013mungkin bisa diupload ke github source code lengkapnya mas ! biar saya coba analisis..
jika dilihat dari source javascript di atas sih normal aja !
Arif
August 2, 2013Terima 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
Muhammad K Huda
August 2, 2013sama-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/
Arif
August 2, 2013Sekali lagi terima kasih pencerahanya :D, sangat membatu. Berhasil. Terima kasih
Muhammad K Huda
August 3, 2013Sama-sama senang bisa membantu.. 🙂
ajuz
August 4, 2013maaf mas tanya di luar pembahasan,.. hehe
kalau untuk membuat aplikasi phonegap dengan fitur bahasanya dapat diubah-ubah caranya gimana ya? itu makenya apa?
Muhammad K Huda
August 4, 2013bisa menggunakan localstorage.. coba nanti kalo ada waktu agak luang saya buatkan tutorialnya.. 🙂
ajuz
August 6, 2013siap mas,… di tunggu… hehe 😀
Iman
August 13, 2013mas kalo bikin boot load pada saat aplikasi pertama di jalankan gimana ya,,,,,mohon bimbingan nya
Muhammad K Huda
August 13, 2013mungkin 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/
jhonatan
January 15, 2014permisi 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
Muhammad K Huda
January 15, 2014iya mas, dicoba dulu aja !
jody
February 19, 2014Terimakasih 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.
radi
June 17, 2014Sblmnya 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?
Muhammad K Huda
June 18, 2014saya 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.
yeddy
July 15, 2014Menyambung 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
Muhammad K Huda
July 19, 2014syntax utk back dijadikan satu saja, lanjutnya di embed ke masing2 halaman jika ada banyak page html di aplikasi.
Toni
October 22, 2014mas 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