Prompt untuk Membuat Aplikasi Guru BK Menggunakan Appscript

Membangun sistem administrasi Bimbingan Konseling (BK) yang canggih kini tidak lagi memerlukan biaya jutaan rupiah atau tim IT khusus. Dengan memanfaatkan Google Apps Script dan teknologi AI, Anda bisa menciptakan aplikasi berbasis web yang profesional, aman, dan 100% gratis.

Di artikel ini, saya membagikan "Super Prompt". Ini adalah instruksi khusus yang telah disempurnakan untuk memerintahkan AI (seperti ChatGPT, Claude, atau Gemini) membuatkan kode aplikasi BK lengkap dengan fitur database, cetak surat otomatis, dan keamanan login.

Mengapa Menggunakan Apps Script?

✓ 100% Gratis & Cloud: Hosting di server Google, data aman di Cloud.
✓ Database Google Sheets: Data siswa tersimpan dalam format Excel yang familiar.
✓ Multi-Platform: Akses lancar via Laptop, Tablet, maupun Smartphone.
✓ Fitur Cetak PDF Premium: Cetak surat panggilan & laporan rapi tanpa terpotong.

Prompt Lengkap & Detail

Salin teks di dalam kotak terminal di bawah ini, lalu tempelkan ke AI (disarankan menggunakan model ChatGPT-4o atau Claude 3.5 Sonnet) untuk mendapatkan hasil kode yang presisi.

bash - prompt_bk.txt

Bertindaklah sebagai Senior Full Stack Developer dan Google Apps Script Expert. Buatkan Aplikasi Web (SPA - Single Page Application) untuk "Administrasi Guru BK SMP Negeri 3 Kerinci".

Tolong berikan 2 File Kode Lengkap:
1. Code.gs (Backend Google Apps Script)
2. Index.html (Frontend React via CDN)

Spesifikasi Fitur & Teknis (Wajib Dipenuhi):

A. BACKEND (Code.gs):
- Fungsi `doGet` untuk melayani HTML.
- Fungsi `setupDatabase` otomatis membuat sheet: Data_Siswa, Data_Pelanggaran, Data_Konseling, Data_Prestasi, Data_HomeVisit jika belum ada.
- Fungsi CRUD (`addData`, `updateData`, `deleteData`, `getData`) yang menangani format tanggal dengan benar (YYYY-MM-DD).
- Fungsi khusus `importBulkStudents` untuk import massal dari Array.

B. FRONTEND (Index.html):
- Gunakan React 18 & ReactDOM via CDN.
- Gunakan Tailwind CSS via CDN untuk styling modern.
- Gunakan Lucide Icons (versi stabil) dan library SheetJS, jsPDF, html2canvas.
- Pastikan ada Error Handling (window.onerror) dan Loading Indicator agar tidak blank.

C. FITUR APLIKASI:
1. LOGIN PAGE: Tampilan awal terkunci password "ReniEmelisa2020#". Ada logo sekolah dan nama aplikasi.
2. DASHBOARD: Ringkasan statistik (Total Siswa, Pelanggaran, dll).
3. MANAJEMEN SISWA (Lengkap):
   - Tabel Data Siswa dengan Search.
   - Tombol "Tambah" (Input Manual).
   - Tombol "Import Excel" (Bulk Upload).
   - Tombol "Edit" (Ikon Pensil) untuk update Nama/Kelas/NIS.
   - Tombol "Hapus".
   - Filter Kelas Dropdown (Hanya: 7A-7C, 8A-8C, 9A-9C).
4. SURAT PANGGILAN OTOMATIS:
   - Menu khusus cetak surat.
   - User memilih Nama Siswa, sistem mengisi data otomatis.
   - Tampilan Preview Surat dengan KOP SURAT RESMI (Logo Kiri & Kanan, Garis Ganda, Alamat).
   - Tanda Tangan 2 Kolom: Kiri (Kepala Sekolah: Hamdani, S. Pd.), Kanan (Guru BK: Reni Emelisa, S. Pd., Gr. + Foto Tanda Tangan).
   - Tombol Cetak yang memicu window.print().
   - Konfigurasi CSS @media print WAJIB menggunakan `position: absolute; z-index: 9999; visibility: visible` pada area surat agar hasil cetak TIDAK TERPOTONG dan TIDAK BLANK.
5. LAPORAN:
   - Tabel ringkasan pelanggaran.
   - Tombol Export Data ke Excel (CSV) dan PDF.

Berikan kode final yang sudah digabungkan, bersih, dan siap deploy tanpa perlu edit tambahan.