Contoh Web App “E-Absensi”

Padangsidimpuan, 26 Juni 2026.

Anda dapat mengakses tampilan awal web app buatan saya di sini. Tapi karena alasan keamanan data dan akses yang terbatas. Anda hanya akan sampai pada Halaman Login saja. Pendaftaran pengguna di kode yang saya bagikan juga hanya dapat dilakukan melalui pengisian data di Spreadsheet master aplikasi. Bagi yang membuat dan mengikuti tahapannya akan memperoleh hasil yang sama persis dengan gambar aplikasi saya. Untuk diingat, kode yang ada saat ini memang dibuat agar sesuai dengan ukuran layar smartphone/android/ios. Loh. IOS atau Apple bisa? Yups..Anda benar, begitulah hasil pengujian yang saya lakukan. Selama device yang anda gunakan sudah memiliki “Browser”, aplikasi dapat diakses.

E-Absensi.

Kali ini penulis datang dengan ide pembuatan aplikasi gratis lainnya namun sering dibutuhkan di lapangan. Yakni sebuah web app untuk kebutuhan absensi petugas atau karyawan atau tim kerja atau guru dan siswa di sekolah. Karena Absensi adalah suatu kebutuhan “normatif” bagaimana sebuah institusi atau lembaga formal eksis. Bahkan sudah banyak lembaga informal menggunakan absensi untuk suatu keperluan.

Sampai saat tulisan ini dibuat, saya baru sampai pada level penggunaan Apps Script dan Spreadsheet. Artinya, database seluruh web app akan dikumpulkan dalam sebuah file berbentuk data Spreadsheet yang bisa dengan mudah Anda copy-paste secara manual dan melakukan back up atau pengolahan data di file lain. Itulah bagian dari keunggulan dan kelemahan dari model web app yang sudah saya bagikan hingga saat ini. Karena saya tidak menyediakan fitur lain.

Disclaimer.

Aplikasi ini tidak berafiliasi dengan perusahaan manapun dan tidak bermaksud meniru fasilitas dan fungsi dari aplikasi berbayar atau aplikasi gratis manapun. Web App ini sengaja dibuat menurut penafsiran penulis tentang kondisi sebuah aplikasi absensi yang akan sesuai dengan ;

  1. Penggunaan handphone(HP)/smartphone android dalam kegiatan pengiriman data absensi (web app dibuat khusus untuk ukuran layar android).
  2. Penggunaan fasilitas GPS dari setiap device yang menggunakan aplikasi absensi untuk mencatat lokasi dan mengirimkan datanya ke Spreadsheet yang ditentukan (izin dan fitur lokasi di HP harus diaktifkan).
  3. Adanya fitur pencatatan waktu absensi dan fitur penyimpanan surat izin/sakit ke dalam fasilitas google drive.

Oleh sebab itu, fasilitas lain yang mungkin dibutuhkan oleh para calon pembuat dan pengguna aplikasi E-Absensi serupa tidak disertakan. Seperti permintaan locking area absensi based on geoposition tertentu untuk tiap pengguna, fungsi face recognition, fungsi deteksi waktu dan limitation absen pagi dan sore. Bahkan, hingga saat ini, web app ini belum menyertakan kode yang akan memberikan kemudahan proses Rekapitulasi Absen bulan untuk tiap akun. Bagi yang sudah terbiasa mengolah dari dari Spreadsheet, mengolah data ribuan baris ke dalam suatu format laporan bukanlah hal susah. Sehingga penulis belum tergerak untuk mengembangkannya hingga saat tulisan ini dibuat.

Meski demikian, sebelum Anda menggunakannya, saya perlu mengingatkan beberapa batasan karena kita membuat web app GRATIS tanpa hosting dan bayar URL tertentu. Yakni;

  1. Batasan Akses dan Konfigurasi Eksekusi. Akses di Apps Script umumnya akses ke aplikasi dalam kategori “execute as me” (pembuat) atau “executed as user accessing the web app”. Akses lain adalah pengaturan pemblokiran selain akun tertentu. Oleh sebab itu, kita harus menggunakan konfigurasi eksekusi dalamn kategori “execute as me” agar setiap orang dapat membuka link aplikasi. Meski hanya sampai halaman tertentu. Kemudian, konfigurasi penyimpanan di google drive juga berpotensi mengekspose link yang digunakan.
  2. Batasan Jumlah Pengguna (Skalabilitas). Google Apps Script dirancang untuk skala kecil hingga menengah. Masalah terbesar bukan pada total akun yang terdaftar di sheet "Pegawai", melainkan pada jumlah pengguna yang mengakses aplikasi secara bersamaan (Concurrent Users), terutama di jam krusial (misal: jam 07.30 – 08.00 pagi saat jam masuk kerja). Ingat, kita pengguna Free Tier. Apps Script sendiri memiliki batasan concurrent users per menitnya kira-kira di angka 300 simultanous access. Akun Google biasa (gratis) dibatasi membuat file baru sekitar 3.200 file/hari, sedangkan akun Google Workspace (berbayar) bisa mencapai 100.000 file/hari. Jika Anda memiliki 500 pegawai yang absen masuk + pulang + kirim izin, kuota akun gratis bisa habis dalam beberapa hari operasional saja. Belum lagi batasan, Maksimal 6 menit per satu kali eksekusi script. Proses konversi foto Base64 menjadi Blob lalu menyimpannya ke Drive membutuhkan waktu 2–5 detik per orang.
  3. Batasan Kinerja Aplikasi. Jika jumlah pegawai Anda di bawah 100 orang, code yang ada dan proses pembacaan data tidak terasa lambat. Namun, jika jumlah pegawai mencapai 500–1.000+ orang, membaca seluruh data range lalu melakukan looping string setiap kali ada pegawai yang login akan memakan waktu eksekusi server yang sangat besar. Aplikasi akan terasa lagging atau memicu timeout.
  4. Potensi Tabrakan Data. Jika Pegawai A dan Pegawai B menekan tombol kirim secara bersamaan (dalam milidetik yang sama, meski peluangnya sangat tipis), Apps Script akan mencoba menulis ke baris kosong yang sama di Spreadsheets. Hal ini dapat menyebabkan data tabrakan (data overwriting), data salah satu pegawai hilang, atau memicu error kegagalan penyimpanan server.
  5. Batasan Muatan memori browser. Jika pegawai mengunggah foto surat dokter langsung dari kamera handphone beresolusi tinggi (misal ukuran file 5MB–10MB), string Base64-nya akan menjadi sangat raksasa. Google Apps Script memiliki batasan maksimum muatan data (payload size) sebesar 50 MB per request. Mengirim string Base64 yang terlalu besar melalui google.script.run berpotensi besar menyebabkan crash pada browser handphone berspesifikasi rendah atau memicu kegagalan jaringan (network error) saat diunggah.

Pembuatan E-Absensi 2026.

  1. Buatlah File Spreadsheet baru.
  2. Di dalam Spreadsheet tersebut, buatlah 3 (tiga) buah sheet bernama Pegawai, IzinSakit, Absensi.
  3. Dalam Sheet Pegawai buatlah kolom (1)nip_nik, (2)nama, (3)password.
  4. Sheet IzinSakit buat kolom (1)Timestamp, (2)NIP/NIK, (3)Nama Pegawai, (4)Jenis Pengajuan, (5)Mulai Tanggal, (6)Sampai Tanggal, (7)Link Dokumen.
  5. Sheet Absensi buatlah kolom (1)timestamp, (2)nip_nik, (3)nama, (4)tipe, (5)koordinat, (6)foto_link.
  6. Di Spreadsheet, cari menu Ekstensi, klik dan kemudian pilih Apps Script. Anda akan dibukakan Tab baru / Halaman baru yang merupakan halaman pengalihan ke Aplikasi Google Apps Script Editor.
  7. Di Apps Script, klik Kode.gs (sebagian akan melihat Code.gs di bagian kiri, tergantung bahasa akun google Anda). Hapus semua kode bawaan yang ada di dalam Kode.gs dan ganti dengan code dari file Kode.gs.
  8. Masih di Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama Login (jangan tambahkan “.html” karena akan otomatis dibuatkan google, cukup “Login”). Pada halaman Login.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file Login.html.
  9. Kemudian, seperti langkah 8, buat lagi file HTML baru dan beri nama JavaScript (perhatikan huruf kecil dan besar). Hapus seluruh code bawaan yang ada di dalam file JavaScript.html dan ganti dengan code dari file JavaScript.html.
  10. Jangan lupa simpan seluruh kode yang telah Anda copy-paste.
  11. Pada tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas, kemudian pilih Terapkan baru (New Deployment).
  12. Klik ikon roda gigi (Jenis konfigurasi), kemudian pilih Aplikasi web. Lakukan pengisian dan pengaturan di jendela yang muncul sebagai berikut.
    • Deskripsi : versi 1.0 (bisa anda namai secara bebas).
    • Jalankan sebagai: Diri Anda sendiri (Email Anda).
    • Yang memiliki akses: Pilih Siapa saja / Anyone (agar pengguna lain/HP lain bisa membuka tautan login).
  13. Klik Terapkan. Sistem akan meminta otorisasi akses data spreadsheet Anda pertama kali. Pilih akun Google Anda, klik Advanced / Lanjutan, Klik Go to… (unsafe) / Buka… (tidak aman), lalu klik Allow / Izinkan.
  14. Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL Aplikasi Web tersebut dan jalankan di browser laptop atau handphone Anda

Pengujian.

Kegiatan pengujian dimaksudkan untuk memastikan code yang Anda copy-paste benar-benar dapat dieksekusi sebagaimana mestinya. Sehingga, ketika anda login menggunakan data yang Anda input di Sheet Pegawai dapat memberi Anda akses masuk ke dalam aplikasi. Web Aplikasi ini mengikuti pendekatan Single Page Application (SPA) mirip native android. Lihatlah gambar pada bagian atas tulisan ini. Anda akan melihat kesamaan model dan fitur dengan web app yang anda buat.

Penutup

  1. Silahkan gunakan dan modifikasi code yang ada sesuai kebutuhan jika Anda memiliki kemampuan Google Apps Script Developer. Seluruh code yang ada di dalam dan/atau dikaitkan dengan tulisan ini bersifat gratis dan tidak mengikat. Oleh sebab itu, segala KEUNTUNGAN DAN KERUGIAN penggunaan, pemanfaatan dan sebagainya di luar tanggung jawab saya selaku penulis.
  2. Jika Anda tidak mengisi Sheet Pegawai Anda dengan data yang sesuai untuk Anda gunakan di menu Login, maka Anda tidak akan bisa melihat isi dan model aplikasi.
  3. Selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya di blog ini sebagaimana Anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.
Scroll to Top