Prompt Membuat Aplikasi Buku Tamu Digital Menggunakan Google Apps Script

Transformasi Administrasi Sekolah Menuju Ekosistem Digital Modern

Buku Tamu Konvensional vs Online

Di era digital, mencatat kehadiran tamu secara manual pada buku fisik mulai ditinggalkan karena berbagai keterbatasan. Berikut adalah perbandingannya:

Aspek	Konvensional (Buku Fisik)	Online (Apps Script)
Pencarian Data	Sulit, harus membalik halaman satu per satu.	Instan, menggunakan fitur filter dan search.
Keamanan	Mudah rusak, basah, atau hilang.	Aman di Cloud, terenkripsi sistem Google.
Rekapitulasi	Manual, memakan waktu berjam-jam.	Otomatis, jadi grafik & laporan PDF sekali klik.

Mengapa Google Apps Script?

Google Apps Script adalah platform pengembangan aplikasi ringan yang gratis dan terintegrasi langsung dengan ekosistem Google Workspace. Anda tidak perlu membayar biaya hosting atau server bulanan.

Saran Cerdas: Gunakan Gemini AI untuk mempermudah coding. Cukup masukkan instruksi (prompt) yang detail, maka AI akan menyusunkan logika aplikasi yang kompleks untuk Anda dalam hitungan detik.

🔥 SUPER PROMPT (SALIN KE GEMINI AI)

Bertindaklah sebagai Senior Full-Stack Web Developer dan Pakar Keamanan Google Apps Script. 

Tugas Anda adalah membuatkan Web App "Buku Tamu Online" untuk "SMP Negeri 3 Kerinci" yang terintegrasi dengan Google Sheets sebagai database. Hasil akhir harus terdiri dari 2 file terpisah yang siap deploy: `Code.gs` (Backend) dan `Index.html` (Frontend).

Terapkan spesifikasi ketat berikut ini:

1. STACK TEKNOLOGI (FRONTEND):
- HTML5 murni dalam 1 file.
- CSS Framework: Bootstrap 5 (via CDN).
- Ikon: Bootstrap Icons.
- Notifikasi: SweetAlert2.
- Grafik: Chart.js (Grafik Batang statistik pengunjung per hari).
- Export: jsPDF dan jsPDF-AutoTable.

2. UI/UX & TATA LETAK (DASHBOARD MODERN):
- Buat layout Dashboard: Sidebar di kiri (gradient biru) dan Main Content di kanan.
- Responsif: Di HP, Sidebar disembunyikan dan diakses via tombol Navbar atas (Offcanvas slide).
- Di Main Content: Sediakan "Welcome Card" elegan, tombol aksi, area Grafik Kunjungan (Chart.js), dan area Tabel Data (lengkap dengan state "Loading" dan "Empty State").

3. FITUR FORM (POP-UP MODAL):
- Form pengisian tidak memakan tempat, melainkan menggunakan Modal Pop-up Bootstrap.
- Field required: Nama Lengkap, Instansi/Asal, No Telp/WA, Tujuan.
- Terapkan fungsi `autofocus` pada input Nama saat modal terbuka.
- Tombol submit harus memiliki efek "loading" (spinner) saat diklik agar user tidak double-click. Tutup modal otomatis jika sukses.

4. FITUR TABEL & PDF:
- Tabel menampilkan urutan dari yang terbaru ke terlama.
- Kolom Kontak harus berupa tombol/link yang langsung mengarah ke `https://wa.me/` dengan nomor telepon yang sudah diformat ke 62.
- Tombol Export PDF menghasilkan file Landscape yang rapi dengan AutoTable (kop biru, ada tanggal cetak).

5. BACKEND APPS SCRIPT (Code.gs) & OTOMATISASI:
- Fungsi `doGet` memanggil `Index.html`.
- Otomatisasi Sheet: Buat fungsi `getSheet()`. Jika tab "Data Tamu" belum ada, otomatis buatkan tabnya, isi header (Waktu, Nama Lengkap, Instansi, No Telp, Tujuan), tebalkan font (bold), dan bekukan baris 1 (freeze row).

6. KEAMANAN & STABILITAS (WAJIB ADA TIGA FITUR INI):
- Anti-Tabrakan (Backend): Gunakan `LockService.getScriptLock()` dengan timeout 10 detik di fungsi simpan, agar jika ada banyak tamu mensubmit bersamaan, data masuk antrean dan tidak tertimpa/hilang.
- Anti-Injeksi Rumus (Backend): Sanitasi input data. Jika input berawalan "=", "+", "-", atau "@", tambahkan tanda kutip satu (') di depannya agar tidak dieksekusi sebagai rumus oleh Google Sheets.
- Anti-XSS (Frontend): Buat fungsi `escapeHTML` di JavaScript. Sanitasi semua data teks (Nama, Instansi, Tujuan, dll) sebelum di-render/dicetak ke `innerHTML` tabel.
- Local Fallback (Frontend): Buat logika deteksi `if (typeof google !== 'undefined')`. Jika tidak berjalan di Apps Script (hanya preview HTML biasa), gunakan array lokal sementara agar aplikasi tetap bisa dites UI-nya tanpa error.

Berikan kodenya secara lengkap, terstruktur, tanpa bagian yang terpotong. Berikan instruksi singkat cara deploy-nya di akhir.

Ingin mendapatkan file Source Code jadi (Code.gs & Index.html)?

Download Source Code Lengkap