Apps Script Commerce 2

 

https://script.google.com/macros/s/AKfycbyO6CLzPaBeFOetdF_S-tExw_HCX-NjDoHcyrY5wEK2OeZ94ySJ6BW6n81lNJ4JOidmEg/exec

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

https://script.google.com/u/0/home/projects/1u14xJB2ZHMHGyDYHZmdfCSq0Ndy_z5FqizccNMzMY9Tm52illQ3gGL-e/edit

https://drive.google.com/drive/folders/1xxsmwGT9_0-mnxlB0JsYUruKtnvoZCG5

Kesimpulan Proyek: Moderné Premium E-Commerce

Dokumen ini merangkum evolusi pengembangan aplikasi dari permintaan awal hingga implementasi teknis akhir yang terintegrasi dengan ekosistem Google.

1. Visi & Estetika UI

• Tema: Minimalis, clean, dan premium (lifestyle/fashion brand).

• Palet Warna: Dominan putih, abu-abu muda, dan hitam.

• Tipografi: Modern (Plus Jakarta Sans) dengan penekanan pada tracking (jarak huruf) untuk kesan mewah.

• Interaksi: Animasi halus menggunakan Animate.css dan transisi hover pada katalog produk.

2. Arsitektur Teknis

Proyek ini bertransformasi dari halaman statis menjadi Single Page Application (SPA) yang berjalan di dalam Google Apps Script (GAS).

• Frontend: React 18 (via CDN), Tailwind CSS, Lucide Icons.

• Backend: Google Apps Script (Code.gs).

• Database: Google Sheets (Sheet Produk & Pesanan).

• Penyimpanan Gambar: Google Drive (diakses via URL lh3.googleusercontent.com).

• State Management: React Hooks (useState, useEffect) dan LocalStorage untuk persistensi keranjang belanja.

3. Fitur Utama Aplikasi

• Navigasi SPA: Perpindahan antar halaman (Home, Shop, Detail, Cart, Dashboard) tanpa reload halaman.

• Katalog Dinamis: Mengambil data produk secara real-time dari Google Sheets.

• Sistem Keranjang: Penambahan item, pembaruan kuantitas, dan perhitungan total otomatis.

• Dashboard Admin:

  • Inventaris: Tabel manajemen produk untuk melihat dan menghapus data.

  • Form Tambah Produk: Input data produk baru.

  • Sistem Unggah Gambar: Fitur unggah file langsung ke Google Drive yang mengonversi file menjadi ID permanen untuk database.

• Setup Database Otomatis: Fungsi khusus di backend untuk menyiapkan struktur tabel dan izin folder secara instan.

4. Alur Integrasi Google

1. Gambar: User mengunggah file di Dashboard -> Frontend mengubah ke Base64 -> Backend menyimpan ke Drive -> ID File disimpan di Sheets.

2. Produk: Frontend memanggil getProducts -> Backend membaca baris Spreadsheet -> Frontend merender grid produk.

3. Order: Tombol checkout mengirim data keranjang ke sheet Pesanan.

5. Status Pengembangan Terakhir

• Pencegahan error ReferenceError: google is not defined dengan sistem Mock Data (data simulasi) jika aplikasi dijalankan di luar lingkungan Google.

• Implementasi setupDatabase untuk otomatisasi konfigurasi awal bagi pengguna baru.