MPA Sistem Inventaris

 

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

https://script.google.com/home/projects/1hHIVmLnEVEXt-jTJIe_X8earKF4Q-qqwcpeYCvkKZH0s9LRQ3NjJYSpv/edit

https://drive.google.com/drive/folders/11MnIgLAy-ft3wNkavF6SaqCVhAA5T46v

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

Bertindaklah sebagai apps script expert. Buatkan study kasus sistem inventaris dengan frontend dan backend terpisah. Buatkan landing page dengan hero. Arsitektur MPA. Gunakan model standalone script. File kode terpisah .

PROJECT SUMMARY PROMPT: SISTEM INVENTARIS MP-GAS

1. Ringkasan Arsitektur & Teknologi

• Nama Sistem: InvenTrack (Sistem Manajemen Inventaris Pintar)

• Arsitektur: Multi-Page Application (MPA) dengan pemisahan Frontend dan Backend yang modular.

• Model Script: Standalone Script (Google Apps Script).

• Database: Google Spreadsheet (Tab: Inventaris).

• Frontend Tech Stack: HTML5, Tailwind CSS (via CDN), JavaScript Vanilla (Asynchronous DOM Manipulation).

• Communication Bridge: google.script.run (Asinkronus / AJAX bawaan Apps Script).

2. Struktur File Proyek (Flat Directory)

Sistem ini menggunakan 5 file utama yang diletakkan sejajar di dalam editor Google Apps Script:

1. Code.gs (Backend): * Mengatur routing aplikasi berbasis parameter URL (?page=...).

   • Menyediakan fungsi inklusi file komponen (include()).

   • Berisi logikal API CRUD database (getInventoryData() dan addStockItem()) dengan mekanisme case-insensitive column mapping dan pembersihan data (anti-ghost rows filtering).

2. index.html (Layout Induk Dashboard):

   • Berisi struktur core HTML, CDN Tailwind CSS, dan komponen global (Navbar & Status Admin).

   • Bertindak sebagai wrapper yang menyuntikkan file visual internal secara dinamis via scriptlet evaluasi Apps Script.

3. hero.html (Landing Page):

   • Halaman publik terpisah dengan desain modern minimalis yang fokus pada pemasaran produk dan Call-to-Action (CTA) link dinamis menuju halaman dashboard internal.

4. dashboard.html (View/Partial HTML Fitur):

   • Kerangka antarmuka fitur utama yang membagi halaman menjadi 2 kolom: Form Tambah Item Baru (Kiri) dan Tabel Real-Time Daftar Stok Barang (Kanan).

5. javascript.html (Client-Side Controller):

   • Berisi logika frontend untuk menangani event submit form, memicu pemuatan data otomatis saat DOM siap, merender manipulasi tabel secara dinamis, dan mengubah state tombol simpan (loading animation).

3. Struktur Database (Google Spreadsheet)

• Nama Lembar Kerja (Tab): Inventaris

• Struktur Kolom (Baris 1): Timestamp | Kode Barang | Nama Barang | Stok | Kategori

• Fitur Fleksibilitas Database: Kode backend didesain case-insensitive dan tahan terhadap pergeseran letak kolom menggunakan pemetaan indeks berbasis .toLowerCase().trim().

4. Alur Kerja Sistem (Data Flow)

1. Routing: Pengguna mengakses URL Web App standar ➡️ doGet() merender hero.html. Jika mengakses URL dengan ?page=dashboard ➡️ doGet() merender index.html yang membungkus dashboard.html & javascript.html.

2. Membaca Data (Read): Halaman termuat ➡️ JavaScript frontend memicu getInventoryData() di server ➡️ Server membaca baris Spreadsheet, mengubahnya menjadi Array of Objects yang bersih, lalu mengirimkannya kembali ➡️ Frontend menerimanya dan merender data ke dalam tabel HTML.

3. Menulis Data (Write): Pengguna menekan tombol simpan ➡️ Tombol dinonaktifkan (state: Menyimpan...) ➡️ Frontend mengirimkan input data ke server via addStockItem() ➡️ Server melakukan .appendRow() ke Google Sheets dan mengembalikan respon sukses ➡️ Frontend mengosongkan form dan otomatis memicu fungsi Read Data ulang tanpa melakukan refresh browser.

💡 Cara Menggunakan Summary Ini untuk Pengembangan Selanjutnya:

Jika Anda ingin menambahkan fitur baru, Anda cukup menyalin teks di atas dan menambahkan perintah tambahan di bawahnya.

• Contoh perintah tambahan: "Berdasarkan summary proyek di atas, buatkan modifikasi kode pada dashboard.html dan javascript.html untuk menambahkan tombol Hapus Barang di setiap baris tabel, serta buatkan fungsi backend deleteStockItem(kode) di Code.gs untuk menghapus baris barang yang sesuai di spreadsheet."