Bangun Website Dengan Google Sheets

Membuat website dengan Google Sheets sebagai database adalah pilihan cerdas untuk proyek yang membutuhkan pembaruan data cepat tanpa harus berurusan dengan sistem database yang rumit.

Secara garis besar, ada dua cara untuk melakukannya: Cara Cepat (menggunakan tools pihak ketiga) dan Cara Kustom (menggunakan Google Sheets API).

Cara Kustom (Menggunakan API)

Jika Anda seorang pengembang dan ingin kontrol penuh atas tampilan website, Anda bisa menggunakan Google Sheets sebagai API. Berikut adalah alurnya:

A. Siapkan Data di Google Sheets

Buat spreadsheet dan isi datanya.
Klik File > Share > Share with others.
Ubah akses menjadi “Anyone with the link can view”. Ini penting agar API bisa membaca datanya.

B. Dapatkan API Key

Buka Google Cloud Console.
Buat proyek baru.
Aktifkan Google Sheets API.
Buka menu Credentials, klik Create Credentials, lalu pilih API Key.

C. Struktur URL API

Untuk mengambil data dalam format JSON, Anda bisa menggunakan endpoint berikut (menggunakan versi v4):

https://sheets.googleapis.com/v4/spreadsheets/{SPREADSHEET_ID}/values/{RANGE}?key={YOUR_API_KEY}

Catatan: Ganti {SPREADSHEET_ID} dengan ID yang ada di URL spreadsheet Anda, dan {RANGE} dengan nama sheet (misal: Sheet1!A1:C10).

3. Implementasi Kode (JavaScript)

Berikut adalah contoh sederhana bagaimana Anda memanggil data tersebut untuk ditampilkan di website:

JavaScript 
const sheetID = 'ID_SPREADSHEET_ANDA';
const apiKey = 'API_KEY_ANDA';
const range = 'Sheet1!A2:C10'; // Menyesuaikan range data

async function getData() {
  const response = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetID}/values/${range}?key=${apiKey}`);
  const data = await response.json();
  
  // Data.values berisi array dari baris spreadsheet Anda
  console.log(data.values); 
  
  // Di sini Anda bisa menggunakan loop untuk menampilkan data ke HTML
}

getData();

Tips Keamanan:

Menggunakan API Key di sisi klien (frontend) berisiko karena orang lain bisa melihat kunci Anda. Untuk proyek yang lebih serius, disarankan menggunakan Server-Side (seperti Node.js) atau Google Apps Script sebagai perantara (proxy) untuk menyembunyikan kredensial Anda.

Menggunakan Google Apps Script (GAS) adalah metode yang jauh lebih aman dan elegan. Mengapa? Karena API Key Anda akan tersembunyi di server Google, dan Anda tidak perlu pusing dengan pengaturan Google Cloud Console yang rumit.

Prinsipnya: Google Apps Script akan bertindak sebagai “jembatan” yang mengambil data dari Sheet dan mengirimkannya ke website Anda dalam format JSON.

Langkah 1: Setup Google Apps Script

Buka Google Sheets Anda.
Klik menu Extensions > Apps Script.
Hapus kode yang ada, lalu tempel kode berikut:

JavaScript 
function doGet() {
  const sheetId = 'ID_SPREADSHEET_ANDA'; // Opsional, jika kosong akan ambil sheet aktif
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const data = sheet.getDataRange().getValues();
  
  // Mengubah array of arrays menjadi array of objects (agar mudah dibaca di JS)
  const headers = data[0];
  const rows = data.slice(1);
  
  const jsonData = rows.map(row => {
    let obj = {};
    headers.forEach((header, i) => {
      obj[header.toLowerCase()] = row[i];
    });
    return obj;
  });

  return ContentService.createTextOutput(JSON.stringify(jsonData))
    .setMimeType(ContentService.MimeType.JSON);
}

Klik tombol Save (ikon disket) dan beri nama proyek, misal “SheetAPI”.
Klik tombol Deploy > New Deployment.
Pilih type: Web App.
Ubah “Who has access” menjadi Anyone. (Ini penting agar website Anda bisa mengaksesnya tanpa login).
Klik Deploy, lalu salin Web App URL yang muncul.

Langkah 2: Update Kode HTML & JavaScript

Sekarang, kita ubah kode JavaScript di file HTML Anda agar menembak ke URL Web App tadi, bukan langsung ke API Google.

HTML 
<script>
    // Ganti dengan URL yang Anda salin dari Google Apps Script tadi
    const WEB_APP_URL = 'https://script.google.com/macros/s/XXXXX/exec';

    async function fetchSheetsData() {
        try {
            const response = await fetch(WEB_APP_URL);
            const data = await response.json();
            renderCards(data);
        } catch (error) {
            console.error('Error:', error);
            document.getElementById('data-container').innerHTML = '<p>Gagal memuat data.</p>';
        }
    }

    function renderCards(items) {
        const container = document.getElementById('data-container');
        container.innerHTML = '';

        items.forEach(item => {
            const card = document.createElement('div');
            card.className = 'card';
            
            // Gunakan nama header dari sheet Anda (misal: nama, deskripsi, harga)
            card.innerHTML = `
                <h3>${item.nama || 'Tanpa Nama'}</h3>
                <p>${item.deskripsi || 'Tidak ada deskripsi'}</p>
                <div class="price">Rp ${item.harga || '0'}</div>
            `;
            container.appendChild(card);
        });
    }

    fetchSheetsData();
</script>

Keuntungan Metode Ini:

Keamanan: Tidak ada API Key yang terekspos di browser.
Fleksibilitas: Data yang dikirim ke website sudah dalam bentuk objek yang rapi (item.nama, item.harga), bukan lagi array indeks (row[0], row[1]).
Gratis: Tidak ada biaya penggunaan API selama masih dalam kuota wajar Google Apps Script.

Hal yang perlu diperhatikan:

Jika Anda mengubah isi spreadsheet, website akan otomatis terupdate saat di-refresh. Namun, jika Anda mengubah kode di Apps Script, Anda harus melakukan “New Deployment” atau membuat versi baru agar perubahannya aktif di URL web app tersebut.