Pada postingan kali ini saya akan menjelaskan tentang cara membuat count down timer dengan kodular. Count down timer adalah sebuah proses perhitungan waktu secara mundur hingga ke angka 0, biasanya count down timer ini digunakan sebagai pengingat atau sebagai batas waktu dalam melakukan sesuatu.
Count down timer bisa juga digunakan pada aplikasi seperti quiz yang dimana disetiap soalnya bisa ditambahkan fitur ini, jadi setiap soal yang keluar akan diberikan waktu selama pengerjaanya dan apabila waktunya habis, maka akan lanjut ke soal berikutnya.
Pada tutorial kali ini saya akan membuat aplikasi count down timer sederhana yang digunakan untuk memberi batasan waktu bagi pengguna ketika membuka halaman, apabila waktu yang diberikan sudah habis maka akan lanjut ke halaman selanjutnya.
Untuk membuat aplikasi count down timer ini saya menggunakan Kodular. Apa bila kamu pengguna App Inventor, jangan khawatir karena pada dasarnya block program pada Kodular sama dengan yang ada di App Inventor. Jadi kamu bisa juga membuat aplikasi count down timer ini di App Inventor.
Cara Membuat count down timer dengan kodular
langsung saja login ke Kodular untuk membuat aplikasinya, untuk lebih mudah kamu dapat masuk dengan menggunakan akun google, jadi tidak perlu mendaftar.
Hal pertama yang perlu dilakukan adalah membuat desain dari aplikasi count down timer.
Desain aplikasi count down timer
Berikut di bawah ini adalah desain yang saya buat, saya membuat 2 desain untuk screen1 dan screen2, desain pada screen1 adalah tampilan bagi pengguna untuk membuat dan mengatur jumlah waktu untuk setiap halaman. Lalu desain screen2 adalah tampilan yang digunakan untuk menampilkan detail konten beserta waktu.
Untuk desain kali ini saya hanya membuat sederhana, kamu dapat membuat yang lebih bagus lagi dari ini.
Untuk komponen yang digunakan pada desain screen1 disini saya menggunakan TextBox, LabelText, Button dan HorizontalArrangement. Perlu diingat bahwa pada setiap komponen TextBox harus diubah input tipenya menjadi number. Kamu dapat merubahnya dengan klik komponennya lalu lihat dibagian properties letaknya persis disebelah kanan lalu cari Input Type, kemudian pilih input tipe number.
Kemudian pada desain screen2 saya menggunakan komponen LabelText, HorizontalArrangement, VerticalScrollArrangement dan Clock. Komponen Clock digunakan untuk menghitung mundur waktu yang sudah ditentukan di screen1. Kemudian jangan lupa rubah pada komponen Label_content menjadi format tipe HTML. Fungsinya agar label tersebut dapat menjalankan kode HTML.
Baca juga : Membuat aplikasi kompas sederhana dengan App Inventor Kodular
Karena pada tutorial kali ini saya membuat kontennya disertai dengan beberapa kode HTML. Untuk merubahnya kamu dapat melihat gambar di bawah ini
Kode program aplikasi count down timer
Adapun block program dalam membuat aplikasi count down timer ini.
kode block program pada screen1
Adapun penjelasan sedikit mengenai kode program diatas yaitu, sebelum pengguna masuk ke screen2 akan dilakukan pengecekan atau validasi sederhana untuk mengetahui apakah inputan masih kosong atau tidak, apabila terdapat inputan yang masih kosong maka akan muncul pesan peringatan bahwa terdapat inputan yang belum diisi.
Selanjutnya apabila proses validasi input sudah memenuhi syarat, maka akan langsung membuka screen2 disertai dengan mengirim value dari masing-masing data yang diinput oleh pengguna. Nah, karena di tutorial ini hanya akan menampilkan 2 halaman saja maka saya membuat list untuk timer hanya 2. Yang mana data ini akan digunakan untuk timer disetiap halaman.
Pada block program ini akan menampilkan halaman berdasarkan list dari content yang sudah dibuat, kemudian untuk timernya didapat dari data yang dikirim dari screen1 yang mana selanjutnya nanti akan diproses untuk pembuatan count down timernya.
Nah pada block program inilah proses count down timer dibuat, dimana akan dilakukan split pada label timer untuk memisahkan antara menit dan detik, lalu dilakukan pengecekan pada bagian detik dan menit.
Selanjutnya abila proses pembuatan kode program count down timer ini selesai, maka dilanjut untuk membangun ke bentuk sebuah aplikasi untuk dilakukan pengujian.
Build aplikasi count down timer
Berikut dibawah ini adalah demo hasil dari tutorial ini.
Baiklah cukup sampai sini saja tutorial yang bisa saya berikan mengenai cara pembuatan aplikasi count down timer dengan kodular. Apabila ada yang ingin ditanyakan kamu bisa menuliskan komentar di bawah ini. Adapun file aia countdown yang bisa kamu dapatkan sebagai bahan belajar.
One comment