Ummu Azzam Cake and Bakery

Selamat Datang di Ummu Azzam Cake and Bakery

Prototipe toko kue dinamis dengan integrasi Google Sheets.
Pilih produk favorit Anda, kirim pesanan, dan lihat data secara real-time.

Lihat Produk
Ilustrasi kue dan bakery

Daftar Produk

Ketik untuk mencari produk berdasarkan nama

Keranjang Belanja

Keranjang Anda kosong.

Total: Rp0

Form Pemesanan

Isi data Anda dan submit pesanan. Data akan tersimpan di Google Sheets.

Gunakan format nomor Indonesia, mulai dengan 0

Daftar Pesanan *
Keranjang kosong.

Dashboard Pesanan

Visualisasi singkat data pemesanan (dummy) untuk pelajaran integrasi data.

Instruksi Integrasi Google Sheets API

  1. Buat spreadsheet Google Sheets baru, buat 2 sheet: produk dan pemesanan.
  2. Sheet produk berisi kolom: id, nama, deskripsi, harga, gambar_url. Contoh data produk harus ada di baris kedua ke bawah.
  3. Sheet pemesanan berisi kolom: timestamp, nama, telepon, alamat, detail_pesanan, total_harga.
  4. Buka Google Cloud Console, aktifkan Google Sheets API dan buat API Key.
  5. Untuk prototipe, set spreadsheet Anda ke Publik dengan akses hanya untuk membaca agar bisa fetch data produk langsung tanpa otentikasi OAuth.
  6. Gunakan Google Apps Script yang Anda buat pada Google Sheets untuk membuat Web App menerima POST dari form pemesanan agar menulis data ke sheet pemesanan.
    Contoh Apps Script minimal bisa Anda cari tutorial: "Google Sheets Apps Script POST data from form".
  7. Ganti URL SPREADSHEET_ID dan Web App URL sesuai konfigurasi Anda di kode JavaScript bagian CONFIG di bawah.
  8. Jalankan prototipe ini di server lokal (XAMPP) agar fitur fetch POST/GET berjalan tanpa masalah CORS.