Apps Script - Dashboard CRUD

 

https://docs.google.com/spreadsheets/d/1mOlgs49uHqfoGfSFstd__wJo02FbRB5ofQWzcvOq6tw/edit?gid=0#gid=0

https://script.google.com/u/0/home/projects/1Wa0gTzDQIW5Le9R26F1YsiSOjpOp3eDMIP9VD-Ad9JZFUvdwRP-5jxig/edit

https://script.google.com/macros/s/AKfycbwImZTZWYw22PwphxofO6mj_goTKKHQw8c4YjVb8Gyk0csL5f74cAA_OiTXr6U0WmCy1A/exec

Prompt Dashboard CRUD Google Spreadsheet & Drive

Gunakan prompt ini untuk membangun kembali aplikasi serupa dengan spesifikasi lengkap:

Peran:

Bertindaklah sebagai Senior Full-stack Developer yang ahli dalam Google Apps Script (GAS).

Deskripsi Proyek:

Buatlah aplikasi web dashboard CRUD (Create, Read, Update, Delete) yang terhubung dengan Google Spreadsheet sebagai database dan Google Drive sebagai penyimpanan gambar.

Spesifikasi Teknis:

1. Backend (Code.gs):

   • Spreadsheet Integration: Kelola data pada sheet spesifik (misal: "Sheet1") dengan kolom: id, name, description, price, sizes, colors, category, images, isNew.

   • CRUD Functions: Implementasikan readData(), createData(obj), updateData(row, obj), dan deleteData(row).

   • Drive Upload: Buat fungsi uploadFileToDrive(base64, fileName) yang menyimpan file ke Folder ID tertentu, mengatur izin menjadi publik (view only), dan mengembalikan URL format https://lh3.googleusercontent.com/d/FILE_ID.

   • Setup Database: Fungsi untuk membuat header otomatis dan memformat baris pertama (bold & frozen).

2. Frontend (dashboard.html):

   • UI Framework: Tailwind CSS untuk desain modern dan responsif.

   • Icons & Alerts: Lucide Icons untuk tombol aksi dan SweetAlert2 untuk notifikasi/konfirmasi.

   • Fitur Utama:

     • Tabel dengan urutan kolom: ID, Name, Description, Price, Size, Colors, Category, Images.

     • Kolom Images harus menampilkan thumbnail yang bisa diklik untuk membuka URL gambar asli.

     • Tombol "Tambah Produk" yang membuka modal dengan fitur Upload Gambar (mengonversi file ke Base64).

     • Tombol "Aksi" di setiap baris: View (Modal read-only detail), Edit (Modal form), dan Delete (Konfirmasi).

   • UX: Indikator loading spinner saat proses data, error handling yang ramah pengguna, dan mode simulasi (mocking) jika objek google.script.run tidak terdeteksi.

3. Manifest (appsscript.json):

   • Tambahkan oauthScopes yang diperlukan untuk drive, spreadsheets, dan script.external_request.

Instruksi Implementasi:

1. Berikan kode lengkap yang siap pakai (single file untuk frontend).

2. Sertakan komentar penjelasan pada bagian logika krusial seperti konversi Base64 dan manipulasi DOM dinamis.

3. Pastikan arsitekturnya ringan agar cepat diakses melalui URL Web App.