Tutorial Membuat Tampilan Konfirmasi Tutup Aplikasi dengan Thunkable

Berita Anda on

Wednesday, March 20, 2019

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Tutorial Membuat Tampilan Konfirmasi Tutup Aplikasi dengan Thunkable, semoga bermanfaat dan selamat membaca

Konfirmasi adalah suatu sebuah informasi yang disampaikan kepada pengguna aplikasi untuk menentukan keputusan secara final terhadap aplikasi tersebut. Pada saat sebelum kamu menutupi aplikasi tersebut, pasti muncul tampilan pop-up yang berisi konfirmasi penutupan aplikasi. Terkadang, kamu awalnya menutupi aplikasi tersebut, tetapi tidak jadi dilakukan karena ada keperluan yang bersifat mendesak dan penting.

Disini, saya akan memberikan tutorial cara membuat konfirmasi untuk penutupan di dalam Thunkable.

Langkah-Langkah :

1. Aktifkan web browser di komputer atau laptop anda.

2. Ketikkan thunkable.com pada address bar. Tunggu sampai halaman utama muncul.

3. Setelah itu, anda diminta login untuk memasuki akses project Thunkable. Klik Sign In. Ini melakukan login melalui Gmail Oauth dengan mengisi akun gmail anda. Tunggu beberapa saat sampai redirect ke homepage. Lihat gambar di bawah ini.

Tampilan Dashboard Thunkable

4. Klik Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "confirmcloseapp". Klik OK.

Tampilan Pembuatan Project App.

5. Tunggu beberapa saat sampai tampilan dashboard pada project tersebut itu muncul. Masuki bagian Pallete, carilah widget Label untuk membuat atau menampilkan teks di screen (layar) smartphone Android. Klik tahan pada Label lalu tarik ke layar Screen.

Tampilan Penambahan Label.

6. Klik Screen1 pada bagian Components. Aturlah tata letak vertikal menjadi center.

Tampilan Mengatur Tata Letak Screen secara Vertikal. 

7. Klik Label1 pada bagian Components. Ketikkan teks tersebut pada kolom Text yang terdapat di Properties.

Tampilan Pengisian Teks pada Label.

8. Masuki bagian Pallete, carilah widget Notifier untuk membuat atau menampilkan teks dalam bentuk pop-up di screen (layar) smartphone Android. Klik tahan pada Notifier lalu tarik ke layar Screen.

Tampilan Penambahan Notifier.

9. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.

10. Klik Screen1 >>> Klik tahan pada blok Screen1.BackPressed() dan tarik blok tersebut ke block view.

Tampilan Blok Program Screen1.BackPressed().

11. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik back pada device smartphone.

Tampilan Setelah Penambahan Blok Program Screen1.BackPressed().

12. Klik Notifier1 >>> Klik tahan pada blok Notifier1.ShowChooseDialog() dan tarik blok tersebut ke dalam blok Screen1.BackPressed().

Tampilan Blok Program Notifier1.ShowChooseDialog().

13. Lepaskan tombol mouse pada blok tersebut. Ini menandakan bahwa kamu telah membuat event klik back pada device smartphone.

Tampilan Setelah Penambahan Blok Program Notifier1.ShowChooseDialog().

14. Aturlah bagian cancelable menjadi False, agar tidak menampilkan button Cancel pada Notifier.

Tampilan Pemilihan Opsi Button Cancelable.

15. Klik Text >>> Klik tahan pada blok Teks kosong dan tarik blok tersebut ke block view.

Tampilan Pemilihan Blok Program Teks Kosong.

16. Lakukan copy-paste blok program tersebut menjadi 4 buah blok program.

Tampilan Lakukan Copy Paste Blok Program Teks Kosong

17. Pasangkan 4 buah blok teks kosong tersebut ke bagian masing-masing method.

Tampilan Pemasangan 4 Buah Blok Program Teks Kosong.

18. Isikan 4 buah blok teks kosong tersebut sesuai dengan fungsi method masing-masing.

Tampilan Pengisian Teks pada 4 Blok Program Teks.

19. Klik Notifier1 >>> Klik tahan pada blok Notifier1.AfterChoosing() dan tarik blok tersebut ke block view.

Tampilan Penambahan Blok Program Notifier1.AfterChoosing().

20. Lepaskan tombol mouse pada blok tersebut. Kamu telah membuat suatu event setelah memilih konfirmasi dialog.

Tampilan Setelah Penambahan Blok Program Notifier1.AfterChoosing().

21. Klik Control >>> Klik tahan pada blok if-then-... dan tarik blok tersebut ke dalam blok Notifier1.AfterChoosing().

Tampilan Penambahan Blok Program If-then...

22. Klik Text >>> Klik tahan pada blok compare texts dan tarik blok tersebut ke dalam blok if-then-....

Tampilan Penambahan Blok program compare texts.

23. Aturlah perbandingan pada blok program tersebut menjadi tanda (=).

Tampilan Pemilihan Perbandingan pada compare teks.

24. Klik choice >>> klik tahan pada get.choice() dan tarik blok tersebut ke dalam blok perbandingan compare text yang sebelah kiri.

Tampilan Penambahan Blok Program getchoice() pada Notifier.

25. Lakukan duplikasi pada blok teks yang berisi "Ya" dengan klik kanan mouse, klik Duplicate.

Tampilan Duplikasi Blok Program Teks "Ya".

26. Masukkan blok tersebut ke dalam blok perbandingan compare text yang sebelah kanan.

Tampilan Pemasukan Blok Program Teks "Ya" ke Compare texts.

27. Klik Control >>> Klik tahan pada blok close.application() dan tarik blok tersebut ke dalam blok then.

Tampilan Penambahan Blok Program close.application() ke dalam Notifier.

28. Klik Export >>> App (save .apk to my computer) untuk mengkonversi ke aplikasi Android siap pakai (.apk) dan menyimpan ke dalam komputer. Tunggu beberapa waktu sampai aplikasi tersebut berhasil tersimpan di dalam komputer.

29. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.

30. Klik ikon Instal APK / APP tergantung dari nama emulator Android tersebut.

31. Pilihlah file aplikasi (.apk) website mobile yang anda unduh (download) tadi. Klik Open, tunggu beberapa saat sampai terinstal dan buka aplikasi tersebut di dalam emulator Android.

32. Setelah aplikasi tersebut buka, silahkan klik back pada smartphone device atau emulator pasti muncul konfirmasi dialog untuk menutup aplikasi.

Tampilan Konfirmasi Dialog.

33. Apabila kamu tekan "YA", maka aplikasi tersebut terjadi proses eksekusi untuk menutup aplikasi.

Tampilan Setelah Menutupi Aplikasi.

Sekian... Terima kasih... :)

Labels: App Inventor, Tutorial

Thanks for reading Tutorial Membuat Tampilan Konfirmasi Tutup Aplikasi dengan Thunkable. Please share...!