Bikin App Database Siswa dari Google Sheets: Cerita di Balik Layar (Termasuk Drama Cache yang Bikin Emosi)
Kadang proyek paling seru itu bukan yang lahir dari rencana besar, tapi dari kebutuhan sehari-hari yang nyebelin. Ceritanya begini: MTs Tanbihul Ghofilin punya ribuan data siswa yang numpuk di Google Sheets, kolomnya ratusan, dan tiap kali ada yang butuh cari data atau ekspor rekap, harus scroll-scroll manual kayak nyari jarum di tumpukan jerami. Dari situ lahir ide: kenapa nggak dibungkus jadi web app yang enak dipakai siapa saja, dari admin sampai orang yang cuma butuh intip data doang.
Jadilah Database Siswa — sebuah web app berbasis Google Apps Script (GAS) yang nempel langsung ke spreadsheet, tanpa perlu database terpisah, tanpa perlu hosting, tanpa perlu drama infrastruktur. Cukup modal akun Google dan niat.
Kenapa Google Apps Script?
Buat yang belum familiar, GAS itu semacam jembatan yang bikin Google Sheets bisa "ngomong" ke halaman web biasa. Sheets jadi database-nya, GAS jadi backend-nya, dan HTML/CSS/JS biasa jadi frontend-nya. Ibarat masak, Sheets itu kulkas isi bahan mentah, GAS itu koki yang ngolah, dan halaman web itu piring saji yang ditaruh di meja tamu. Simpel, tapi soal rasa tetap harus diperjuangkan.
Fitur-fitur yang Dibangun
Beberapa hal yang akhirnya jadi andalan di project ini:
- Login berbasis role — admin, user, dan tamu, masing-masing punya akses beda. Password-nya di-hash pakai SHA-256, jadi nggak ada yang disimpan mentah-mentah.
- Kolom yang bisa disembunyikan per role — biar tamu nggak perlu lihat data sensitif yang cuma admin yang butuh.
- Ekspor ke Excel & PDF dengan pilihan kolom custom, plus rekap otomatis per kelas, rombel, status, dan jenis kelamin yang dihitung live dari data asli (bukan angka statis yang gampang basi).
- Tampilan liquid glass / glassmorphism — efek kaca buram yang lagi tren, dipadu gradient warna lembut biar nggak keliatan kaku kayak spreadsheet aslinya.
- Dark mode yang beneran nempel sesuai pilihan user, bukan yang balik ke default tiap refresh.
- Warna kolom otomatis ngikutin warna asli di spreadsheet — jadi kalau di Sheets kolom NIS-Nama di-highlight hijau, di web app juga ikutan bernuansa hijau. Kelihatan sepele, tapi buat data dengan seratusan kolom, ini penyelamat mata banget.
Drama di Balik Layar
Namanya juga development, nggak mungkin mulus dari awal. Beberapa "boss fight" yang paling berkesan:
Viewport unit yang aneh di iOS. Ternyata satuan vw dan vh itu bisa salah hitung kalau halamannya jalan di dalam iframe sandbox seperti punya Apps Script, khususnya di Safari. Solusinya cukup ganti ke satuan persen (%) yang lebih predictable. Kadang solusi paling ribet itu justru yang paling sederhana, cuma butuh waktu buat nemuinnya.
Checkbox yang "mental" sendiri. Ada bug klasik di mana centang kolom ekspor suka hilang sendiri padahal udah dicentang. Ternyata akar masalahnya di cara sistem nyimpen status centang lewat string yang gampang meleset. Fix-nya: baca langsung status checkbox dari layar saat tombol diklik, bukan ngandelin memori terpisah yang bisa "lupa".
Cache yang keras kepala. Ini paling menguji kesabaran — kadang kode udah bener, sudah di-deploy versi baru, tapi HP masih nampilin versi lama karena browser (atau webview aplikasi tertentu) ngotot pakai cache. Solusinya jadi kebiasaan wajib: selalu cek versi yang beneran ter-deploy sebelum nyalahin kode.
Pelajaran yang Dibawa Pulang
Proyek kecil kayak gini ngajarin satu hal penting: user experience itu nggak selesai di "fitur udah jalan". Detail kecil kayak animasi toggle yang smooth, tabel yang nggak geser-geser di HP kecil, atau warna kolom yang konsisten sama sumber aslinya — itu semua yang bikin tool "berfungsi" berubah jadi tool yang "enak dipakai".
Dan yang paling penting: kadang bug paling bikin pusing itu bukan soal logika kode yang salah, tapi soal memastikan versi yang kita uji itu memang versi yang benar. Sesederhana itu, tapi sering terlewat.
Proyek ini masih terus dikembangkan. Kalau ada yang punya pengalaman serupa bikin internal tool pakai Google Apps Script, cerita di kolom komentar ya.