Description
Jadi tahun lalu aku masuk kelas di AMIKOM, dah wah mantap banget merka pakai sistem presensi berbasis cloud. Jadi kode unik ditaruh di layar depan, lalu user tinggal submit kode lewat phone mereka untuk presensi. Well, mantap sih. Ini pengen niru buat kayak itu untuk kelasku di LIPIA.
Approach
Kita memulai petualangan kita di sebuah halaman yang tampaknya sederhana, namun penuh dengan teknologi. Di halaman ini, kita memiliki QR code scanner yang dibuat menggunakan library Html5Qrcode, dan berbagai fitur lainnya yang disematkan untuk mengoptimalkan pengalaman pengguna.
Saat halaman ini dimuat, scanner diinisialisasi dan jika pengguna mengaktifkan kamera, scanner mulai bekerja, mencari kode QR. Tidak hanya itu, kode ini juga meminta posisi geografis pengguna. Jika pengguna berada dalam radius 500 meter dari lokasi target, maka pengguna dapat mengirimkan kode yang telah dipindai oleh kamera.
Saat kamera aktif dan sebuah kode QR terdeteksi, fungsi submitCode dipanggil. Namun, ada syarat penting untuk dapat mengirim kode ke server. Jika pengguna tidak berada dalam radius 500 meter dari lokasi target, maka pengguna tidak bisa mengirim kode dan mendapatkan pesan peringatan.
Jika pengguna berada dalam radius yang ditentukan, kode QR yang dipindai dikirimkan ke server dan pengguna mendapatkan balasan dari server yang ditampilkan di layar. Jika pengguna menginginkan, mereka juga bisa memasukkan kode secara manual melalui form input yang disediakan.
Pada halaman ini, pengguna juga dapat mematikan atau menghidupkan kamera dengan menekan tombol 'Use Camera'. Jika pengguna ingin beralih antara kamera depan dan belakang, mereka bisa menekan tombol 'Switch Camera'.
Dan itu semua yang terjadi di balik layar halaman ini. Sebuah halaman yang menggabungkan teknologi QR code scanner, geolocation, dan interaksi dengan server menjadi satu kesatuan yang utuh dan harmonis.
Technology
- Svelte
- QR-Code
- HTML5-QR
- RestAPI
- Uno Css
- Astro JS
- Worker Cloudflare