Cara Membuat Resto Online Order dengan Google Apps Script
🚀 Cara Membuat Resto Online Order dengan Google Apps Script & Blogger
Sistem ini menggunakan kombinasi Google Apps Script sebagai backend/database dan Blogger sebagai frontend atau landing page restoran.
Google Sheets berfungsi menyimpan data pesanan, sedangkan Blogger digunakan untuk menampilkan daftar menu dan tombol order kepada pelanggan.
📌 Bagian 1: Backend (Google Apps Script)
Buat Google Sheets baru, kemudian buka:
- Ekstensi
- Apps Script
- Hapus seluruh kode bawaan
- Tempel kode berikut
1. File code.gs
2. File index.html
Buat file HTML baru dengan nama index.html lalu masukkan kode berikut:
📌 Cara Deploy Apps Script
- Klik Deploy atau Terapkan.
- Pilih Penerapan Baru.
- Pilih jenis Aplikasi Web.
- Ubah akses menjadi Siapa Saja.
- Klik Deploy.
- Salin URL Web App yang dihasilkan.
📌 Bagian 2: Frontend (Blogger Template XML)
Template Blogger berikut menggunakan kombinasi warna Merah, Putih, dan Oren dengan tampilan daftar menu restoran yang langsung memiliki tombol order.
Masuk ke:
- Blogger
- Tema
- Edit HTML
- Ganti kode tema dengan template XML yang telah disediakan
Cari teks URL_WEB_APP_APPSCRIPT_ANDA_DISINI pada template XML kemudian ganti dengan URL Web App Apps Script yang sudah Anda deploy.
📝 Panduan Penggunaan
1. Pasang Backend
Masukkan kode Apps Script ke Google Sheets. Setelah itu jalankan fungsi onOpen() sekali agar menu Resto Online Order muncul.
2. Generate Data Contoh
Klik menu:
Resto Online Order → Generate Data Contoh
Sistem akan otomatis menambahkan 5 data pesanan contoh ke spreadsheet.
3. Deploy Web App
Deploy Apps Script sebagai aplikasi web lalu salin URL yang dihasilkan.
4. Edit Template Blogger
Tempel URL Web App pada seluruh tombol order yang tersedia di template.
5. Simpan dan Publikasikan
Setelah tema disimpan, website restoran online Anda sudah siap digunakan untuk menerima pesanan pelanggan.
Berikut adalah kode lengkap untuk aplikasi **Resto Online Order** menggunakan kombinasi **Google Apps Script** dan **Blogger Template XML**. Sistem ini bekerja dengan cara: Google Sheets & Apps Script berfungsi sebagai backend/database untuk menampung pesanan, sedangkan Blogger berfungsi sebagai landing page/frontend tempat pelanggan melihat menu dan mengklik link untuk order. --- ### Bagian 1: Backend (Google Apps Script) Buat Google Sheets baru, lalu buka **Ekstensi > Apps Script**. Hapus semua kode bawaan dan masukkan kode di bawah ini. #### 1. `code.gs` ```javascript function doGet(e) { return HtmlService.createTemplateFromFile('index') .evaluate() .setTitle('Resto Online Order - Admin') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } // Integrasi dengan spreadsheet untuk menyimpan pesanan jika diperlukan di masa depan function simpanPesanan(nama, menu, jumlah, total, catatan) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); sheet.appendRow([new Date(), nama, menu, jumlah, total, catatan, "Pending"]); return "Sukses"; } // Fitur Otomatisasi Menu Custom & Dummy Data sesuai instruksi function onOpen() { var ui = SpreadsheetApp.getUi(); ui.createMenu('Resto Online Order') .addItem('Generate Data Contoh', 'generateDummyData') .addToUi(); } function generateDummyData() { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // Set Header jika masih kosong if (sheet.getLastRow() === 0) { sheet.appendRow(["Tanggal", "Nama Pelanggan", "Menu", "Jumlah", "Total Harga", "Catatan", "Status"]); } var dummyData = [ [new Date(), "Budi Santoso", "Ayam Bakar Madu", 2, 50000, "Sambal dipisah", "Selesai"], [new Date(), "Siti Rahma", "Mie Goreng Spesial", 1, 18000, "Pedas sedang", "Diproses"], [new Date(), "Andi Wijaya", "Es Teh Manis", 3, 15000, "Manis banget", "Pending"], [new Date(), "Dewi Lestari", "Nasi Goreng Seafood", 1, 25000, "Tanpa seledri", "Selesai"], [new Date(), "Rian Hidayat", "Ayam Goreng Krispi", 2, 36000, "Paha semua", "Pending"] ]; for (var i = 0; i < dummyData.length; i++) { sheet.appendRow(dummyData[i]); } SpreadsheetApp.getUi().alert('5 Data contoh berhasil dimasukkan ke dalam sheet!'); } ``` #### 2. `index.html` (Halaman Konfirmasi Sukses Order) ```html
Pesanan Diterima!
Terima kasih telah melakukan pemesanan di Resto Online Order.
Pesanan Anda sedang kami proses. Silakan konfirmasi via WhatsApp untuk mempercepat pengiriman.
Konfirmasi via WhatsApp🚀 Resto Online Order
Lezat, Cepat, dan Langsung Diantar ke Rumah Anda
Pelanggan dapat melihat menu di Blogger, menekan tombol order, dan data dapat dikelola melalui Google Sheets menggunakan Google Apps Script sebagai backend sederhana tanpa perlu hosting berbayar.