Buatkan aplikasi web Food Ordering fullstack menggunakan HTML, Tailwind CSS, dan JavaScript untuk frontend, serta Google Apps Script sebagai backend dan Google Spreadsheet sebagai database.

SPESIFIKASI UMUM:
Aplikasi harus memiliki fitur pemesanan makanan online sederhana dengan sistem cart, checkout, dan penyimpanan data ke Google Spreadsheet melalui Apps Script API.

FRONTEND (HTML + TAILWIND + JS)

HALAMAN:

index.html (Landing + Menu)
cart.html (Keranjang)
checkout.html (Form order)
success.html (Konfirmasi)

FITUR FRONTEND:

Tampilkan daftar makanan dalam bentuk grid card (gambar, nama, harga)
Tombol "Add to Cart"
Cart disimpan di LocalStorage
Halaman cart menampilkan:
- Daftar item
- Jumlah item
- Total harga
Halaman checkout:
- Input nama
- Input alamat
- Nomor HP
- Metode pembayaran (COD / Transfer)
Kirim data order ke backend (Apps Script API) menggunakan fetch()

DESAIN:

Gunakan Tailwind CSS
Responsive (mobile-first)
Warna utama: orange
Gunakan komponen card modern

2. BACKEND (GOOGLE APPS SCRIPT)

Buatkan Web App Apps Script dengan fungsi:

doPost(e):

Menerima data JSON dari frontend:
{
nama,
alamat,
no_hp,
metode,
items: [{nama, harga, qty}],
total
}
Simpan ke Google Spreadsheet dengan kolom:
Tanggal | Nama | Alamat | No HP | Metode | Items | Total
Return response JSON:
{status: "success", message: "Order berhasil"}

Tambahkan:

doGet() untuk testing API
Enable CORS

3. DATABASE (GOOGLE SPREADSHEET)

Struktur Sheet:
Sheet Name: Orders

Kolom:

Tanggal
Nama
Alamat
No HP
Metode
Items (JSON/string)
Total

4. INTEGRASI FRONTEND → BACKEND

Gunakan fetch() POST:

fetch("URL_WEB_APP", {
method: "POST",
body: JSON.stringify(data)
})

Saat submit:

Validasi form
Kirim data
Redirect ke success.html jika berhasil

5. FITUR TAMBAHAN

Loading indicator saat submit
Alert sukses / gagal
Format rupiah (Rp)
Empty cart handling

6. OUTPUT YANG DIHARAPKAN

Kode lengkap semua file HTML
File JS terpisah (app.js, cart.js, checkout.js)
Script Google Apps Script lengkap
Struktur folder project
Contoh isi Spreadsheet
Panduan deploy Apps Script (publish as web app)
Contoh URL API

7. OPTIONAL (ADVANCED)

Tambah fitur login sederhana
Order history
Dashboard admin (lihat data dari spreadsheet)
Integrasi Firebase (opsional)

==================================================

Pastikan kode clean, mudah dipahami, dan cocok untuk pembelajaran mahasiswa.

Code Studio

Senin, 20 April 2026

Food Ordering