Bikin Sistem Absensi QR Code Real-Time di Blogger Pakai Google Apps Script & Supabase

Pernahkah Anda merasa lelah mencatat presensi siswa di kelas atau peserta kegiatan satu per satu? Selain menyita waktu mengajar dan bekerja, rekap manual di atas kertas sangat rawan hilang. Kini, Anda bisa mengubah blog gratisan menjadi aplikasi presensi yang canggih. Solusi paling praktisnya adalah membangun sistem absensi QR code Blogger yang terintegrasi dan berjalan secara real-time.

Sistem Absensi QR Code Blogger via GAS & Supabase

Memanfaatkan Blogger sebagai antarmuka utama, kita bisa menggabungkannya dengan kecerdasan Google Apps Script (GAS) dan kecepatan Supabase. Kombinasi ini sangat cocok bagi pendidik—khususnya di lingkungan SMK atau sekolah kejuruan—maupun pengelola komunitas yang ingin membangun infrastruktur digital mandiri tanpa perlu menyewa hosting mahal.

Kenapa Memilih Kombinasi Blogger, GAS, dan Supabase?

Membangun aplikasi berbasis web tidak melulu membutuhkan server berbayar. Berikut adalah alasan mengapa racikan teknologi ini sangat andal untuk digunakan:

Blogger: Bertindak sebagai ruang hosting halaman antarmuka yang 100% gratis. Anda bebas menggunakan Vanilla JavaScript, HTML, dan Tailwind CSS untuk mempercantik tampilannya agar menyerupai Progressive Web App (PWA) profesional.
Google Apps Script (GAS): Berperan sebagai backend automation yang sangat tangguh untuk mencatat log absensi secara otomatis ke dalam Google Sheets.
Supabase: Alternatif Firebase yang menyediakan basis data PostgreSQL. Fitur real-time subscription-nya memastikan saat QR code dipindai oleh siswa, namanya langsung muncul di layar proyektor kelas saat itu juga.

Persiapan Membuat Sistem Absensi QR Code

Sebelum mulai merakit cara bikin absen online ini, pastikan Anda sudah menyiapkan beberapa hal dasar berikut di laptop Anda:

Akun Google aktif untuk mengakses dasbor Blogger dan Google Drive (tempat file GAS dan Sheets akan disimpan).
Akun Supabase gratis yang bisa didaftarkan langsung menggunakan akun GitHub.
Pustaka JavaScript sumber terbuka (open-source) seperti html5-qrcode untuk membaca kamera pemindai dari smartphone.

Langkah-Langkah Integrasi Sistem Presensi

1. Merancang Database di Supabase

Langkah pertama adalah membuat penampung data siaran langsungnya. Masuk ke dasbor Supabase, buat proyek baru, lalu buat tabel bernama kehadiran. Tambahkan kolom standar seperti id (UUID), identitas_siswa, nama_lengkap, dan waktu_scan. Jangan lupa untuk mengaktifkan fitur Realtime pada pengaturan tabel tersebut agar perubahan data bisa disiarkan langsung ke layar tanpa perlu me-refresh halaman web.

2. Mengatur Logika Arsip dengan Google Apps Script

Supabase menangani tayangan real-time, tetapi kita tetap butuh rekapitulasi ke Google Sheets untuk keperluan arsip nilai dan administrasi harian. Buka Google Sheets baru, klik menu Ekstensi > Apps Script. Buat sebuah script sederhana untuk menerima permintaan HTTP POST (doPost). Script ini bertugas menangkap data hasil scan QR dan menuliskannya secara kronologis ke baris baru di tabel spreadsheet Anda.

3. Merakit Tampilan Frontend di Blogger

Di dasbor Blogger, buat halaman baru (Pages) dan ubah mode penulisan menjadi HTML View. Di sinilah coding front-end Anda dieksekusi. Anda cukup menyematkan tautan CDN Tailwind CSS untuk merapikan desain antarmuka, lalu gunakan Vanilla JavaScript untuk memanggil fungsi kamera pembaca QR.

Saat pemindaian QR code siswa berhasil terbaca, script akan mengeksekusi dua instruksi API: satu request ke URL Supabase untuk memicu animasi kehadiran di dasbor kelas, dan satu lagi ke URL Web App Google Apps Script untuk menyimpan rekapitulasi permanen ke Google Sheets.

Perbandingan: Manual vs Presensi Modern

Agar lebih terbayang seberapa efisien alur kerja ini, mari kita bandingkan metode konvensional dengan sistem yang baru saja kita rancang:

Aspek Penilaian	Absensi Manual (Kertas/Panggil)	Absensi QR Code (Blogger + Supabase)
Kecepatan	1-2 menit per orang	Kurang dari 3 detik per orang
Akurasi Data	Rawan salah tulis atau titip absen	Sangat akurat sesuai ID QR Code unik
Rekapitulasi	Butuh waktu tambahan untuk disalin ke PC	Otomatis masuk dan tersusun di Google Sheets
Pemantauan	Harus dihitung ulang di akhir sesi	Real-time terlihat di layar dasbor guru

Transformasi Digital Dimulai dari Lab Anda

Menerapkan sistem absensi QR code Blogger membuktikan bahwa inovasi teknologi pendidikan tidak selalu menuntut modal besar. Dengan pemahaman dasar pengembangan web HTML dan CSS, serta sedikit konfigurasi pada Google Apps Script dan Supabase, infrastruktur presensi canggih sudah bisa beroperasi penuh. Pendekatan ini sangat efektif untuk membangun budaya disiplin sekaligus mengenalkan alur logika teknologi kepada audiens Anda.

Jangan biarkan beban administrasi merebut waktu produktif Anda untuk berkarya dan mengajar. Yuk, mulai rakit coding absensi ini sekarang dan rasakan sendiri kemudahannya! Jika Anda menemukan kendala saat mengonfigurasi script atau ingin berdiskusi lebih lanjut seputar pengembangan web, jangan ragu untuk membagikan progres Anda dan mention @kangruli di media sosial. Selamat berinovasi!