×
İçindekiler

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

javascript

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 #

Ürün AdıÜrün AçıklamasıÜrün FiyatıÜrün ResmiKategori
Milk Shake(çikolata - beyaz çikolata)130₺resim linkiSoğuk İçecekler
LimonataEl Yapımı120₺resim linkiSoğuk İçecekler
Çay 120₺resim linkiSıcak İçecekler

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

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ü

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 Repo #

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

LinkedIn Paylaşımı #

LinkedIn

İyi çalışmalar. 🚀