Membuat count down timer dengan kodular

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.

Membuat count down timer dengan kodular
Membuat count down timer dengan kodular

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.

desain aplikasi count down pada screen1
desain aplikasi count down pada screen1
desain aplikasi count down pada screen2
desain aplikasi count down pada screen2

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

format type label content
format type label content

Kode program aplikasi count down timer

Adapun block program dalam membuat aplikasi count down timer ini.

kode block program pada screen1

block program aplikasi count down timer pada screen1
block program aplikasi count down timer 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.

block program inisiasi aplikasi count down pada screen2
block program inisiasi aplikasi count down pada screen2

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.

block program untuk timer
block program untuk timer

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.

Dokumentasi Video

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.

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.