Bikin Menu Digital UMKM Pakai QR Code Dinamis dengan Google Sheets dan Apps Script
Tutorial langkah demi langkah membuat QR code dinamis untuk menu digital UMKM menggunakan Google Sheets dan Google Apps Script. Hemat biaya cetak, update menu real-time, dan mudah diakses pelanggan.
Masalah Menu Cetak yang Bikin Ribet
Kamu punya warung kopi atau restoran kecil? Pasti tahu rasanya harus cetak ulang menu setiap kali harga bahan naik atau ada menu baru. Selain boros kertas, menu cetak juga gampang rusak atau ketinggalan zaman. Padahal, pelanggan sering komplain kalau harga di menu beda sama yang ditagihkan. Repot, kan?
Solusinya? Ganti menu cetak dengan menu digital berbasis QR code. Tapi jangan QR code biasa — karena kalau static, kamu tetap harus ganti gambar QR setiap update. Yang kamu butuhin adalah QR code dinamis yang isinya bisa berubah tanpa harus cetak ulang. Dan kabar baiknya, kamu bisa buat sendiri pakai alat gratis: Google Sheets dan Google Apps Script.
Apa Itu QR Code Dinamis?
QR code dinamis adalah kode QR yang mengarah ke URL pendek (short URL). URL ini lalu diatur untuk redirect ke halaman yang isinya bisa kamu update kapan aja. Jadi, QR code yang ditempel di meja tetap sama, tapi konten menunya bisa langsung berubah setiap kali kamu edit spreadsheet. Hemat, praktis, dan kelihatan profesional.
Persiapan: Apa yang Kamu Butuhin?
- Akun Google (Gmail) — gratis
- Google Sheets — untuk menyimpan data menu
- Google Apps Script — untuk membuat web app yang menampilkan menu
- Layanan QR code generator (gratis):
https://api.qrserver.com/v1/create-qr-code/atau bisa juga pakai situs lain - Koneksi internet — ya, karena menu digital online
Langkah 1: Siapkan Data Menu di Google Sheets
Buka sheets.new atau buat spreadsheet baru. Beri nama "Menu Digital". Buat sheet dengan nama "Menu" dan kolom berikut:
| Kategori | Nama Menu | Harga | Deskripsi |
|---|---|---|---|
| Kopi | Kopi Hitam | 10000 | Kopi pilihan dengan rasa strong |
| Kopi | Kopi Susu | 15000 | Espresso dicampur susu segar |
| Makanan | Nasi Goreng | 20000 | Nasi goreng kampung dengan telur |
| Makanan | Mie Goreng | 15000 | Mie goreng pedas manis |
| Minuman | Es Teh Manis | 5000 | Teh manis dengan es batu |
| Minuman | Jus Jeruk | 12000 | Jus jeruk peras segar |
Isi sesuai menu kamu. Nanti data ini akan ditampilkan otomatis di halaman web.
Langkah 2: Buat Web App dengan Google Apps Script
Di spreadsheet, klik menu Extensions > Apps Script. Hapus kode default, lalu salin kode berikut:
function doGet() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName("Menu");
const data = sheet.getDataRange().getValues();
let html = '<html><head><meta name="viewport" content="width=device-width, initial-scale=1">';
html += '<style>body{font-family:sans-serif;padding:16px;max-width:600px;margin:auto}h1{text-align:center}.kategori{margin-top:24px}.item{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding:8px 0}.nama{font-weight:bold}.harga{color:#2ecc71}.deskripsi{font-size:14px;color:#666}</style></head><body>';
html += '<h1>📋 Menu Kami</h1>';
let kategoriSekarang = '';
for (let i = 1; i < data.length; i++) { // mulai dari baris ke-2 (header dilewati)
const [kategori, nama, harga, deskripsi] = data[i];
if (kategori !== kategoriSekarang) {
if (kategoriSekarang !== '') html += '</div>';
kategoriSekarang = kategori;
html += `<h2 class="kategori">${kategori}</h2><div>`;
}
html += `<div class="item"><span class="nama">${nama}</span><span class="harga">Rp ${harga.toLocaleString()}</span></div>`;
if (deskripsi) html += `<div class="deskripsi">${deskripsi}</div>`;
}
html += '</div></body></html>';
return HtmlService.createHtmlOutput(html);
}
Klik Deploy > New deployment. Pilih tipe Web app. Set Execute as ke "Me" dan Who has access ke "Anyone" (agar pelanggan bisa akses tanpa login). Klik Deploy. Copy URL web app yang muncul (misal: https://script.google.com/macros/s/xxx/exec). Simpan URL ini.
Langkah 3: Generate QR Code Dinamis
Sekarang kamu butuh QR code yang mengarah ke URL web app tadi. Gunakan API gratis dari qrserver.com. Format URL-nya:
https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=URL_WEB_APP_KAMU
Ganti URL_WEB_APP_KAMU dengan URL web app yang tadi. Misalnya:
https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://script.google.com/macros/s/AKfycbw.../exec
Buka URL itu di browser, maka akan muncul gambar QR code. Kamu bisa download gambar tersebut, lalu cetak atau tempelkan di meja, dinding, atau kartu nama. Atau, kalau mau lebih fleksibel, kamu bisa buat script untuk generate QR code langsung dari spreadsheet, tapi untuk tutorial ini cukup manual sekali aja.
Langkah 4: Update Menu Kapan Aja
Nah, bagian paling keren: setiap kali kamu ingin mengubah menu, cukup edit spreadsheet. Misal, mau ubah harga kopi susu jadi 18.000, atau tambah menu baru "Es Kopi Susu" dengan harga 20.000. Setelah kamu simpan perubahan, buka URL web app di browser, refresh — data sudah berubah! Dan QR code yang sudah dicetak tetap sama, nggak perlu ganti.
Tips Tambahan Biar Makin Profesional
- Pakai domain kustom (opsional): Kalau kamu punya domain, kamu bisa buat subdomain (misal menu.warungku.com) yang redirect ke web app. Biar QR code-nya lebih pendek dan mudah diingat.
- Desain responsif: Kode CSS di atas sudah mobile-friendly, tapi kamu bisa kustomisasi sesuai brand warung.
- Tambahkan gambar: Kalau mau, kamu bisa tambah kolom URL gambar di spreadsheet, lalu tampilkan thumbnail di web app. Tapi ingat, gambar harus online (bisa upload ke Imgur atau Google Drive).
- Buat multiple sheets: Misal menu makanan dan minuman terpisah, atau untuk cabang berbeda dengan QR code unik.
Kenapa Tutorial Ini Berguna untuk UMKM Indonesia?
Banyak pelaku UMKM di Indonesia masih bergantung pada menu cetak yang mahal dan tidak fleksibel. Dengan solusi ini, kamu bisa:
- Hemat biaya: Nggak perlu cetak ulang menu setiap ada perubahan.
- Update real-time: Ganti harga, tambah menu, atau hapus menu dalam hitungan detik.
- Ramah lingkungan: Kurangi penggunaan kertas.
- Tampil modern: Pelanggan akan melihat usaha kamu lebih profesional.
Kesimpulan
Membuat menu digital dengan QR code dinamis menggunakan Google Sheets dan Apps Script itu mudah, gratis, dan sangat praktis untuk UMKM. Kamu nggak perlu jago coding — cukup ikuti langkah di atas, dan dalam 15 menit menu digital kamu sudah live. Mulai sekarang, tinggalkan menu cetak yang ribet, dan beralih ke solusi yang lebih cerdas. Selamat mencoba!