https://drive.google.com/drive/folders/12W11l1n7Lh7tUPtg61uaR15MCp4nRVEQ
https://docs.google.com/spreadsheets/d/11WXroGPkrqmr5LQuDO_cc1KsrACJSdul5iE6j9ioBwo/edit?gid=1953147207#gid=1953147207
https://script.google.com/u/0/home/projects/1_6UkJMQAYfd0c5sDTaJGshCh6vJ7p-O1DClQUOpgYPYF203AoJd2YJmv/edit
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:
Kirim data order ke backend (Apps Script API) menggunakan fetch()
DESAIN:
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:
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:
5. FITUR TAMBAHAN
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.
