Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.
Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online.
Tujuan Aplikasi
Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:
Landing page modern
Form pendaftaran siswa
CRUD data pendaftaran
Upload dan penyimpanan foto ke Google Drive
Generate dan cetak PDF bukti pendaftaran
Dashboard admin
Responsive UI modern
Spesifikasi Teknologi
Platform
Google Apps Script (Standalone Script)
Google Spreadsheet sebagai database
Google Drive sebagai penyimpanan foto dan PDF
HTML Service untuk frontend
Arsitektur
Gunakan arsitektur:
MPA (Multi Page Application)
Setiap halaman dipisah menjadi file HTML berbeda
Struktur File
Gunakan struktur file berikut:
Code.gs
Config.gs
Auth.gs
Student.gs
Pdf.gs
Drive.gs
Index.html
Landing.html
Register.html
Dashboard.html
Detail.html
Navbar.html
Sidebar.html
Footer.html
CSS.html
JS.html
Gunakan fungsi include() untuk template reusable.
Contoh:
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Landing Page
Buat landing page modern gaya startup education technology.
Hero Section
Hero section harus memiliki:
Headline besar:
“Sistem Pendaftaran Siswa SMA”
Subheadline:
“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”
Tombol CTA:
Daftar Sekarang
Login Admin
Visual Style
Gunakan desain:
Modern
Clean
Edu-tech startup
Responsive
Minimalis
Gradient modern
Soft shadow
Rounded card
Warna
Gunakan kombinasi:
Biru
Putih
Navy
Abu modern
Gunakan
Bootstrap 5
Bootstrap Icons
Google Fonts (Poppins)
Database Spreadsheet
Nama Sheet
Sheet: DATA_SISWA
Struktur Kolom
| ID | NISN | Nama | Alamat | Email | Asal SMP | URL Foto | Sekolah Tujuan | Timestamp |
Gunakan auto increment ID.
Fitur CRUD
Create
Form input siswa:
NISN
Nama
Alamat
Asal SMP
Sekolah Tujuan
Upload Foto
Read
Tampilkan data:
Table Bootstrap
Search realtime
Pagination
Sorting
Update
Admin dapat edit data siswa.
Delete
Admin dapat hapus data dengan konfirmasi modal.
Upload Foto
Ketentuan
Foto disimpan di Google Drive
Folder Drive dibuat otomatis
Simpan URL file ke spreadsheet
Foto preview tersedia
Validasi
JPG/PNG
Maksimal 2MB
Dashboard Admin
Fitur Dashboard
Total pendaftar
Jumlah sekolah asal
Statistik harian
Tabel data siswa
Export PDF
Cetak bukti pendaftaran
UI Dashboard
Gunakan:
Card statistik
Sidebar modern
Navbar sticky
DataTable Bootstrap
Generate PDF Bukti Pendaftaran
PDF berisi:
Logo sekolah
Judul bukti pendaftaran
Nomor pendaftaran
Identitas siswa
NISN
Nama lengkap
Alamat
Asal SMP
Sekolah tujuan
Foto siswa
Tanggal pendaftaran
QR Code verifikasi
Format
Layout profesional
A4 Portrait
Bisa di-download
Bisa dicetak
Penyimpanan
PDF otomatis tersimpan di Google Drive
URL PDF disimpan ke spreadsheet
Routing MPA
Gunakan parameter:
?page=landing
?page=register
?page=dashboard
?page=detail&id=1
Contoh:
function doGet(e){
const page = e.parameter.page || 'landing';
if(page == 'register'){
return HtmlService.createTemplateFromFile('Register')
.evaluate();
}
if(page == 'dashboard'){
return HtmlService.createTemplateFromFile('Dashboard')
.evaluate();
}
return HtmlService.createTemplateFromFile('Landing')
.evaluate();
}
Validasi Form
Validasi Client Side
Semua field wajib diisi
Email valid
NISN numerik
Upload foto wajib
Validasi Server Side
Cek duplicate NISN
Sanitasi data
Validasi ukuran file
UX Features
Tambahkan:
Loading spinner
Toast notification
SweetAlert2
Modal Bootstrap
Empty state
Responsive mobile
Smooth animation
Security
Gunakan:
Escape HTML
Sanitasi input
Validasi server-side
Hide spreadsheet ID di Config.gs
Coding Style
Gunakan:
Clean code
Modular architecture
Reusable component
Async google.script.run
Komentar jelas
Output yang Harus Dihasilkan
Generate source code lengkap:
Backend Google Apps Script
Frontend Bootstrap
CRUD functionality
Upload image to Drive
Generate PDF
Responsive UI
Routing MPA
Dashboard admin
Landing page modern
Berikan:
Struktur folder
Kode lengkap setiap file
Penjelasan fungsi
Cara deploy sebagai Web App
Cara setup Spreadsheet dan Drive
Cara publish aplikasi
Studi kasus penggunaan aplikasi
Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.
Prompt Pengembangan Web App Google Apps Script
Sistem Pendaftaran Siswa SMA (Standalone Script + Arsitektur MPA)
Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.
Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online.
Tujuan Aplikasi
Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:
Landing page modern
Form pendaftaran siswa
CRUD data pendaftaran
Upload dan penyimpanan foto ke Google Drive
Generate dan cetak PDF bukti pendaftaran
Dashboard admin
Responsive UI modern
Spesifikasi Teknologi
Platform
Google Apps Script (Standalone Script)
Google Spreadsheet sebagai database
Google Drive sebagai penyimpanan foto dan PDF
HTML Service untuk frontend
Arsitektur
Gunakan arsitektur:
MPA (Multi Page Application)
Setiap halaman dipisah menjadi file HTML berbeda
Struktur File
Gunakan struktur file berikut:
Code.gs
Config.gs
Auth.gs
Student.gs
Pdf.gs
Drive.gs
Index.html
Landing.html
Register.html
Dashboard.html
Detail.html
Navbar.html
Sidebar.html
Footer.html
CSS.html
JS.html
Gunakan fungsi include() untuk template reusable.
Contoh:
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Landing Page
Buat landing page modern gaya startup education technology.
Hero Section
Hero section harus memiliki:
Headline besar:
“Sistem Pendaftaran Siswa SMA”Subheadline:
“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”Tombol CTA:
Daftar Sekarang
Login Admin
Visual Style
Gunakan desain:
Modern
Clean
Edu-tech startup
Responsive
Minimalis
Gradient modern
Soft shadow
Rounded card
Warna
Gunakan kombinasi:
Biru
Putih
Navy
Abu modern
Gunakan
Bootstrap 5
Bootstrap Icons
Google Fonts (Poppins)
Database Spreadsheet
Nama Sheet
Sheet: DATA_SISWA
Struktur Kolom
| ID | NISN | Nama | Alamat | Email | Asal SMP | URL Foto | Sekolah Tujuan | Timestamp |
Gunakan auto increment ID.
Fitur CRUD
Create
Form input siswa:
NISN
Nama
Alamat
Email
Asal SMP
Sekolah Tujuan
Upload Foto
Read
Tampilkan data:
Table Bootstrap
Search realtime
Pagination
Sorting
Update
Admin dapat edit data siswa.
Delete
Admin dapat hapus data dengan konfirmasi modal.
Upload Foto
Ketentuan
Foto disimpan di Google Drive
Folder Drive dibuat otomatis
Simpan URL file ke spreadsheet
Foto preview tersedia
Validasi
JPG/PNG
Maksimal 2MB
Dashboard Admin
Fitur Dashboard
Total pendaftar
Jumlah sekolah asal
Statistik harian
Tabel data siswa
Export PDF
Cetak bukti pendaftaran
UI Dashboard
Gunakan:
Card statistik
Sidebar modern
Navbar sticky
DataTable Bootstrap
Generate PDF Bukti Pendaftaran
PDF berisi:
Logo sekolah
Judul bukti pendaftaran
Nomor pendaftaran
Identitas siswa
NISN
Nama lengkap
Alamat
Email
Asal SMP
Sekolah tujuan
Foto siswa
Tanggal pendaftaran
QR Code verifikasi
Format
Layout profesional
A4 Portrait
Bisa di-download
Bisa dicetak
Penyimpanan
PDF otomatis tersimpan di Google Drive
URL PDF disimpan ke spreadsheet
Routing MPA
Gunakan parameter:
?page=landing
?page=register
?page=dashboard
?page=detail&id=1
Contoh:
function doGet(e){
const page = e.parameter.page || 'landing';
if(page == 'register'){
return HtmlService.createTemplateFromFile('Register')
.evaluate();
}
if(page == 'dashboard'){
return HtmlService.createTemplateFromFile('Dashboard')
.evaluate();
}
return HtmlService.createTemplateFromFile('Landing')
.evaluate();
}
Validasi Form
Validasi Client Side
Semua field wajib diisi
Email valid
NISN numerik
Upload foto wajib
Validasi Server Side
Cek duplicate NISN
Sanitasi data
Validasi ukuran file
UX Features
Tambahkan:
Loading spinner
Toast notification
SweetAlert2
Modal Bootstrap
Empty state
Responsive mobile
Smooth animation
Security
Gunakan:
Escape HTML
Sanitasi input
Validasi server-side
Hide spreadsheet ID di Config.gs
Coding Style
Gunakan:
Clean code
Modular architecture
Reusable component
Async google.script.run
Komentar jelas
Output yang Harus Dihasilkan
Generate source code lengkap:
Backend Google Apps Script
Frontend Bootstrap
CRUD functionality
Upload image to Drive
Generate PDF
Responsive UI
Routing MPA
Dashboard admin
Landing page modern
Berikan:
Struktur folder
Kode lengkap setiap file
Penjelasan fungsi
Cara deploy sebagai Web App
Cara setup Spreadsheet dan Drive
Cara publish aplikasi
Studi kasus penggunaan aplikasi
Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.
Tidak ada komentar:
Posting Komentar