Katalog Acak: Bikin Absensi GPS yang Ternyata Ribetnya di Tempat yang Ngga Disangka

Ada proyek yang keliatannya simpel di kepala, tapi begitu dieksekusi malah jadi journey tersendiri. Absensi GPS buat guru dan tendik di Yayasan Tanbihul Ghofilin ini salah satunya.

Awalnya konsepnya gampang banget: buka link, pilih unit, isi nama sama kode, tekan tombol, GPS nangkep lokasi, selesai. Yang bikin project ini punya cerita justru bukan di logic-nya, tapi di tempat yang paling ngga kepikiran — cara dia tampil di layar HP.

Ternyata Musuhnya Bukan Kode, tapi Iframe

Google Apps Script itu enak dipakai buat backend cepat yang nyambung langsung ke Google Sheets, tapi ada satu quirk yang lumayan bikin garuk-garuk kepala: dia nge-bungkus web app di dalam iframe sandbox punya sendiri. Efeknya, <meta viewport> yang biasanya jadi standar wajib buat website mobile-friendly, di sini malah diabaikan gitu aja.

Hasilnya, tampilan yang harusnya pas di layar HP malah dianggap desktop, terus di-zoom out otomatis biar muat. Jadinya kecil, ada ruang kosong ngga jelas di bawah, ngambang di tengah kayak lupa nutup halaman.

Fix-nya ternyata bukan di CSS, bukan di JavaScript yang canggih-canggih, tapi satu baris kecil di Code.gs:

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

Kadang emang gitu, solusi paling powerful itu yang paling sepele letaknya.

Dari Card Ngambang ke Layout yang "Kerasa" App

Setelah viewport-nya bener, baru deh eksperimen visual bisa jalan. Dari yang tadinya card kecil ngambang di tengah layar hijau, pelan-pelan diubah jadi layout yang lebih proper: header dengan identitas yayasan di atas, form yang lebar penuh biar nyaman diisi pakai jempol, sampai akhirnya nambahin animasi ombak kecil sebagai transisi antara warna hijau dan putih.

Detail sekecil itu — ombak yang gerak pelan di antara dua warna — kadang justru yang bikin sebuah tools sederhana kerasa punya personality. Bukan cuma form kosong yang dingin, tapi ada sentuhan yang bikin orang yang absen tiap pagi ngerasa dikit lebih nyaman.

Kenapa Hal Kecil Kayak Gini Penting

Guru dan tendik di yayasan ini bakal buka halaman ini tiap hari, dua kali sehari malah. Kalau tampilannya berantakan atau bikin bingung, itu bukan cuma soal estetika — itu ngefek ke seberapa smooth rutinitas mereka. Jadi walau ini "cuma" absensi, effort buat bikin dia kerasa rapi dan hangat itu worth it.

Project kayak gini juga ngingetin lagi: kadang bug paling nyebelin itu datang dari sistem yang kita pikir udah kita kuasai. Google Apps Script udah dipakai berkali-kali sebelumnya, tapi tetep aja ada surprise baru soal iframe yang baru ketemu di project ini.

Ditulis sebagai catatan kecil proses development — biar suatu saat kalau lupa lagi, tinggal buka arsip ini aja.