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 :

Exit App Notification

Exit App Notification

Download Sources

Mari kita mulai !

number 1Pada 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.

number 2Setelah 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.

number 3Selanjutnya, 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. 

number 4Nah, 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

 

Muhammad K Huda

A non exhausted blogger person within fullstack engineer (spicy food), open source religion, self-taught driver and maybe you know or don't like it. Simply says, Hello from Me!

 

19 thoughts on “Exit App Notification Pada Aplikasi Phonegap

  1. 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

      1. 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

          1. Sekali lagi terima kasih pencerahanya :D, sangat membatu. Berhasil. Terima kasih

  2. maaf mas tanya di luar pembahasan,.. hehe
    kalau untuk membuat aplikasi phonegap dengan fitur bahasanya dapat diubah-ubah caranya gimana ya? itu makenya apa?

  3. 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

  4. 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.

  5. 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?

    1. 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.

  6. 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

  7. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.