QR Code Menü Google Sheets ile oluşturma - no code

Merhaba, bu makalede google e-sheets (google excel) üzerinden oluşturduğumuz menüyü internet sitemize çekebiliriz, menü görünümü verebiliriz. Veritabanı kullanmadan, ek kod yazmadan hızlıca bir menü oluşturabiliriz.

Öncelikle bu ihtiyaç nasıl doğdu ondan da hızlıca bahsetmek isterim :) Isparta’da kuzenimin açtığı kafeyi ziyaret ettiğim esnada baskılı menü geldiği zaman ister istemez bir qr-code menü aradım. Teknolojinin kölesiyiz :) Nasıl hızlıca halledebilirim derken bunu herkesin yönetebileceği en kolay yapıda yapıp açık kaynak yayınlamak istedim.
Yolunuz Isparta’ya düşerse mutlaka Eski Ev Cafe & Workshop‘u ziyaret etmenizi tavsiye ederim #reklam

Çalışma Mekanizması #

Google E-Tablolar üzerinden bir tablo oluşturuyoruz ve bunu herkese açık yayınlıyoruz. Paylaşım sonrası bu dosyayı uzaktan JSON formatı ile erişebileceğimiz bir parametre mevcut, bunu kullanarak JavaScript ile işleyip sayfamızda gösteriyoruz.

1) Google E-Sheets Oluşturma #

Google Drive > Yeni + > Google E-Tablolar > Boş e-tablo

Ürün Adı	Ürün Açıklaması	Ürün Fiyatı	Ürün Resmi	Kategori
Milk Shake	(çikolata - beyaz çikolata)	130₺	resim linki	Soğuk İçecekler
Limonata	El Yapımı	120₺	resim linki	Soğuk İçecekler
Çay		120₺	resim linki	Sıcak İçecekler

2) Paylaşım linki oluşturma ve id almak #

Paylaş > Bağlantıya sahip olan herkes (Görüntüleyen)
Bağlantıyı kopyala

https://docs.google.com/spreadsheets/d/${id}/

#id olan kısmı alıyoruz ve

const id = 'id';

ilgili değişkene tanımlıyoruz.

Daha sonrasında script kodlarımızı tamamlayalım.

3) HTML Yapıyı oluşturma #

Bu kısımda tailwindcss kullanarak hızlıca bir yapı oluşturacağız.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Menu</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100">
    <header class="bg-white shadow-md">
        <div class="container mx-auto p-4 flex justify-center items-center">
            <h1 class="text-xl font-bold">Restaurant Menu</h1>
        </div>
    </header>

    <div id="menu" class="container mx-auto p-4 grid grid-cols-1 md:grid-cols-1 gap-4 mt-4"></div>

    <footer class="bg-white shadow-md mt-4">
        <div class="container mx-auto p-4 text-center">
            <p class="text-gray-600">&copy; 2024 Your Restaurant. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

4) JavaScript #

Bu kısımda chatGPT aktif rol oynamıştır :)

id yerini değiştirmeyi unutmayın.

const id = 'id';
const gid = '0';
const url = `https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:json&tq&gid=${gid}`;

async function loadMenu() {
    try {
        const response = await fetch(url);
        const data = await response.text();
        const jsonString = data.substring(47).slice(0, -2);
        const json = JSON.parse(jsonString);
        const menuData = processData(json);
        displayMenu(menuData);
    } catch (error) {
        console.error('Error loading menu:', error);
    }
}

function processData(json) {
    const menuItems = json.table.rows.map(row => ({
        productName: row.c[0] ? row.c[0].v : '',
        productDescription: row.c[1] ? row.c[1].v : '',
        productPrice: row.c[2] ? row.c[2].v : '',
        productImage: row.c[3] ? row.c[3].v : '',
        category: row.c[4] ? row.c[4].v : ''
    }));
    return { menu: menuItems };
}

function displayMenu(menuData) {
    const menuContainer = document.getElementById('menu');
    const categories = [...new Set(menuData.menu.map(item => item.category))];

    categories.forEach(category => {
        const categorySection = document.createElement('div');
        categorySection.className = 'mb-6';

        const categoryTitle = document.createElement('h2');
        categoryTitle.className = 'text-2xl font-bold mb-4';
        categoryTitle.textContent = category;

        const itemsGrid = document.createElement('div');
        itemsGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';

        menuData.menu
            .filter(item => item.category === category)
            .forEach(item => {
                const menuItem = document.createElement('div');
                menuItem.className = 'bg-white rounded-lg shadow-lg overflow-hidden';

                menuItem.innerHTML = `
        <div class="flex gap-4 p-4">
            <img src="${item.productImage}" alt="${item.productName}" class="w-24 h-24 object-cover rounded-lg">
            <div class="flex flex-col items-between w-full">
                <div class="menu-content flex justify-between items-center">
                    <a class="text-lg font-semibold">${item.productName}</a>
                    <span class="text-gray-900 font-bold">${item.productPrice} ₺</span>
                </div>
                <div class="menu-ingredients text-xs text-gray-600 mt-2">
                    ${item.productDescription}
                </div>
            </div>
        </div>
    `;
                itemsGrid.appendChild(menuItem);
            });

        categorySection.appendChild(categoryTitle);
        categorySection.appendChild(itemsGrid);
        menuContainer.appendChild(categorySection);
    });
}

loadMenu();

Ekran Görüntüsü #

QR Code Menü Google Sheets ile oluşturma - no code

Örnek Oluşturulan QR Code Menü Ekran Görüntüsü

Örnek Link #

Eski Ev Cafe & Workshop - Menü Eski Ev Cafe & Workshop

Bonus: Yayınlamak #

Eğer bir hostinginiz yoksa ve hızlıca yayınlamak istiyorsanız aşağıdaki servislerden birini kullanabilirsiniz.

GitHub > Yeni Repo Oluştur > Kodları Yükle > GitHub Pages ile yayınla
Netlify > Yeni Site Oluştur > GitHub > Deploy
Vercel > Yeni Site Oluştur > GitHub > Deploy

GitHub Repo #

github/google-sheets-qrcode-menu (★++)

LinkedIn Paylaşımı #

İyi çalışmalar. 🚀