Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Koding

Prompt Untuk Membuat Aplikasi Sistem Manajemen Surat Digital

Di era digitalisasi saat ini, instansi pendidikan maupun perkantoran dituntut untuk memiliki sistem administrasi yang cepat, tepat, dan efisien. Salah satu solusi terbaiknya adalah dengan membangun Sistem Manajemen Surat Keluar Masuk (E-Arsip).

Tahukah Anda bahwa Anda tidak perlu menyewa layanan hosting yang mahal atau membeli database khusus untuk membuat sistem ini? Dengan memanfaatkan teknologi dari Google, Anda bisa membuatnya secara gratis, aman, dan tanpa batas waktu.

Apa itu Google Apps Script (GAS)?

Google Apps Script (GAS) adalah platform scripting berbasis cloud (komputasi awan) yang dikembangkan oleh Google untuk memfasilitasi pengembangan aplikasi ringan dalam ekosistem Google Workspace. Menggunakan bahasa pemrograman yang diturunkan dari JavaScript, GAS memungkinkan Anda untuk mengubah Google Spreadsheet biasa menjadi sebuah database dan merancang antarmuka web (Web App) yang canggih.

Manfaat Google Apps Script dalam Manajemen E-Arsip

  • 100% Gratis & Tanpa Hosting: Aplikasi web Anda di-hosting langsung di server Google. Anda tidak perlu membayar biaya sewa server bulanan.
  • Database Familiar (Google Sheets): Data surat masuk, keluar, dan disposisi akan tersimpan rapi dalam bentuk tabel di Google Sheets. Siapapun bisa memahaminya, mem-backup, atau mengekspornya ke Excel dengan mudah.
  • Keamanan Standar Google: Data Anda dilindungi oleh enkripsi dan sistem keamanan Google. Hanya pengguna yang memiliki akses (berdasarkan peran admin/user) yang bisa melihat data tersebut.
  • Terintegrasi Penuh: Anda dapat dengan mudah mengintegrasikannya dengan Google Drive untuk menyimpan file lampiran PDF atau foto bukti fisik surat.
Ingin membuatnya tapi tidak bisa coding? Jangan khawatir! Di bawah ini kami telah menyiapkan Mega Prompt yang dirancang khusus untuk diberikan kepada AI (seperti Gemini, ChatGPT, atau Claude). AI akan langsung membuatkan kode utuh yang siap pakai, bebas bug, dan berdesain premium.

Mega Prompt: Generate Aplikasi E-Arsip Premium

Salin teks di bawah ini dan tempelkan (paste) ke dalam chatbot AI favorit Anda. Prompt ini sudah kami rancang dengan instruksi yang sangat presisi, mulai dari struktur database, keamanan, fitur UI/UX, hingga penanganan cetak PDF presisi tinggi.

⚙️ Prompt E-Arsip Generator 
Role: Bertindaklah sebagai Senior Full-Stack Developer yang ahli dalam Google Apps Script (GAS), JavaScript Vanilla, dan UI/UX Design menggunakan Bootstrap 5.

Tugas: Buatkan saya sebuah Web App "Sistem Manajemen Arsip Surat (E-Arsip Premium)" menggunakan Google Apps Script sebagai Backend dan Google Spreadsheet sebagai Database. Aplikasi ini harus menggunakan arsitektur SPA (Single Page Application) dalam 1 file index.html dan 1 file Code.gs.

1. TEKNOLOGI & LIBRARY YANG DIGUNAKAN:
Backend: Google Apps Script (Code.gs)
Frontend: HTML5, CSS3, Vanilla JS (index.html)
Framework UI: Bootstrap 5 (CDN) + Bootstrap Icons
Notifikasi & Dialog: SweetAlert2 (CDN)
Grafik: Chart.js (CDN)
Export PDF: html2pdf.js (CDN)

2. STRUKTUR DATABASE (SPREADSHEET):
Buatkan fungsi initDatabase() di Backend yang otomatis dipanggil saat user mencoba login pertama kali jika sheet belum ada. Buatkan Sheet dengan header (Bold, Background #1f8a70, teks Putih) berikut:
Users: id, nama, email, password, role
SuratMasuk: id, no_surat, pengirim, perihal, tanggal_surat, tanggal_diterima, klasifikasi, prioritas, status, file_link
SuratKeluar: id, no_surat, penerima, perihal, tanggal, status, file_link
Disposisi: id, surat_id, dari, kepada, instruksi, batas_waktu, status
PengaturanApp: id, pemerintah, dinas, sekolah, alamat, logo_kiri, logo_kanan, tempat_ttd, nama_kepsek, nip_kepsek

3. FITUR BACKEND (Code.gs) & BUG FIXING WAJIB:
Buatkan fungsi CRUD Universal untuk semua tabel (getTableData, saveDataUniversal, deleteRow). Terapkan aturan ketat berikut:
- Auto-Increment Anti-Error: Gunakan logika Math.max() saat mencari ID terakhir agar ID tidak bentrok jika ada baris yang dihapus manual.
- Header Trimming: Saat proses save, gunakan .trim() pada string nama header untuk mencegah error jika ada spasi tidak sengaja di spreadsheet.
- Bypass CORS Logo PDF: Pada fungsi savePengaturanApp, buat sub-fungsi proxy untuk mengubah URL gambar/logo menjadi format Base64 menggunakan UrlFetchApp.fetch(url).getBlob() sebelum disimpan ke Sheet. Ini wajib agar logo tidak blank saat dirender ke PDF.

4. FITUR FRONTEND & UI/UX (index.html):
- Desain: Gunakan tema warna Hijau Tosca (Primary: #1f8a70). Gunakan efek glassmorphism tipis pada Card, dan gradient background (#e0f2f1 ke #b2dfdb).
- Keamanan Copyright: Tambahkan script Vanilla JS saat DOMContentLoaded yang akan me-lock (mengunci) aplikasi jika elemen footer dengan id author-link (Yefri Haryanto) dihapus atau diubah.
- Login & Session: Form login di tengah layar. Gunakan localStorage untuk menyimpan session user dan pengaturan instansi.
- Sidebar Mobile Responsive: Sidebar berukuran 260px (fixed-width, white-space: nowrap). Di mode HP (max-width: 992px), ubah menjadi Offcanvas dengan layar redup transparan (backdrop overlay) yang akan menutup otomatis saat menu diklik.
- CRUD via Modal: Gunakan Bootstrap Modal dengan konfigurasi array JS dinamis. Jika user klik Tambah Data di menu Surat Masuk/Keluar/Disposisi, modal menyesuaikan inputannya (text, date, select dropdown).
- SweetAlert2: Gunakan SweetAlert2 untuk semua interaksi: Loading saat ambil/simpan data, Notifikasi Sukses, dan Konfirmasi Hapus Data. (Dilarang pakai alert() standar).

5. ATURAN KETAT CETAK PDF (html2pdf.js):
Menu Cetak Template (Portrait):
- Sediakan form input: No Surat, Nama Tujuan, Isi Surat.
- Buat area Preview di kanannya menggunakan CSS absolute: width: 210mm, height: 297mm, padding: 20mm.
- Wadah preview harus bisa di-scroll secara horizontal (overflow-x: auto) di layar HP agar ukuran A4 tidak mengecil/remuk.
- Kop Surat Wajib pakai <table>: Jangan gunakan Flexbox untuk Kop Surat. Gunakan tabel dengan 3 kolom (15% logo kiri, 70% teks tengah, 15% logo kanan) agar sejajar saat diproses PDF.
- Tanda Tangan Absolute: Kunci elemen Tanda Tangan Kepsek dengan position: absolute; bottom: 30mm; right: 20mm; agar tidak terdorong ke halaman ke-2.

Menu Cetak Laporan (Landscape):
- Dropdown untuk memilih tabel (Masuk/Keluar/Disposisi). Render data ke tabel HTML.
- Kop Surat sama menggunakan <table>. Export PDF menggunakan mode orientation: 'landscape'.

6. OUTPUT YANG DIHARAPKAN:
Berikan saya HANYA 2 blok kode yang sudah final, bebas bug, dan siap production:
1. Full code Code.gs (tanpa dipotong).
2. Full code index.html (gabungan CSS, HTML, dan JS tanpa dipotong).

Cara Menggunakan Hasil dari AI:

  1. Setelah AI memberikan jawabannya, buka Google Apps Script.
  2. Buat project baru.
  3. Timpa kode bawaan pada Code.gs dengan kode backend dari AI.
  4. Tambahkan file baru (File > New > HTML), beri nama index, lalu tempel kode frontend dari AI.
  5. Klik Simpan, lalu klik tombol Terapkan (Deploy) sebagai Web App!