Bikin Live Score Pakai Google Sheets API & Google Sites

“Mau bikin live score tapi bingung? Tenang, bukan cuma kamu yang bingung. Bahkan koneksi WiFi aja kadang suka loading tanpa kepastian. Tapi nggak perlu khawatir, karena ada cara simpel buat tetap update skor tanpa ribet. Sini sini qua kasih tahu caranya”

Pernah kepikiran bikin halaman live score yang update otomatis? Entah buat lomba puisi, lomba pidato, turnamen futsal kampus, atau e-sports bareng temen, solusi ini gampang banget! Dalam artikel ini, kita bakal bahas cara bikin live score pakai Google Sheets API dan Google Sites, plus fitur auto-refresh biar update skor tetap real-time. Cus, kita mulai!

1. Siapkan Google Sheets untuk Live Score

Langkah pertama, kita butuh Google Sheets buat nyimpen data skor peserta lomba. Caranya:

Buka Google Sheets dan buat spreadsheet baru.

Buat kolom-kolom penting:

• Kolom A: Nomor Peserta
• Kolom B: Nama Peserta
• Kolom C: Skor Juri 1
• Kolom D: Skor Juri 2
• Kolom E: Skor Juri 3
• Kolom F: Total Skor (pakai formula =SUM(C2:E2))

Dapatkan Spreadsheet ID dari URL Google Sheets.

Spreadsheet ID adalah bagian dari URL Google Sheets yang digunakan untuk mengidentifikasi dokumen tertentu saat mengaksesnya melalui API.

Langkah-langkah mendapatkan Spreadsheet ID:

1. Buka Google Sheets yang ingin kamu gunakan.

2. Lihat URL di address bar, contohnya:

   https://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9IJKLMNOPQRSTUV/edit#gid=0

3. Spreadsheet ID adalah bagian yang ada di antara /d/ dan /edit, dalam contoh ini:

   1A2B3C4D5E6F7G8H9IJKLMNOPQRSTUV

4. Gunakan Spreadsheet ID ini untuk menyematkan kode di google sites nanti

2. Membuat API Key untuk Google Sheets API

Agar aplikasi bisa mengakses Google Sheets secara otomatis, kita perlu Google Sheets API Key.

Cara membuat API Key:

1. Masuk ke Google Cloud Console:
   • Buka Google Cloud Console
   • Login dengan akun Google
2. Buat atau pilih proyek:
   • Jika belum ada proyek, klik "New Project"
   • Beri nama proyek, lalu klik "Create"
3. Aktifkan Google Sheets API:
   • Di Navigation Menu, pilih "API & Services" > "Library"
   • Cari "Google Sheets API"
   • Klik "Enable" untuk mengaktifkannya
4. Buat API Key:
   • Buka menu "Credentials"
   • Klik "Create Credentials" > "API Key"
   • API Key akan dibuat dan ditampilkan
5. Simpan API Key ini, karena akan digunakan dalam aplikasi

3. Masukkan Data Live Score ke Google Sites dengan API

Buka Google Sites (https://sites.google.com)

dan buat situs baru.

Pilih Embed Code (Developer Mode) lalu tempel kode berikut:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script>
  async function fetchLiveScore() {
    const apiKey = 'YOUR_GOOGLE_SHEETS_API_KEY'; //Ganti dengan Sheet API Key Anda
    const sheetId =  'YOUR_SPREADSHEET_ID'; //Ganti sesuai Spreadsheet ID Anda
    const range = 'Sheet1!A1:H10'; //Sesuaikan dengan kebutuhan
    const url = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${range}?key=${apiKey}`;
    
    const response = await fetch(url);
    const data = await response.json();
    
    let table = '<table class="table table-striped table-bordered">';
    table += '<thead class="table-dark"><tr>';
    data.values[0].forEach(header => {
      table += `<th>${header}</th>`;
    });
    table += '</tr></thead><tbody>';
    
    data.values.slice(1).forEach(row => {
      table += '<tr>' + row.map(cell => `<td>${cell}</td>`).join('') + '</tr>';
    });
    table += '</tbody></table>';
    
    document.getElementById('liveScore').innerHTML = table;
  }
  
  setInterval(fetchLiveScore, 30000); // Refresh setiap 30 detik
  window.onload = fetchLiveScore;
</script>

<div class="container mt-4">
  <h2 class="text-center">Live Score</h2>
  <div id="liveScore" class="table-responsive">Loading...</div>
</div>

3. Uji Coba dan Bagikan!

Sekarang saatnya tes! Buka halaman Google Sites yang sudah jadi, lalu update skor di Google Sheets. Skor akan otomatis diperbarui setiap 30 detik tanpa harus me-refresh halaman.

Kamu bisa share link situs ini ke peserta lomba, panitia, atau bahkan komunitasmu biar mereka bisa pantau live score dengan mudah.

Kesimpulan

Bikin live score pakai Google Sheets API + Google Sites itu super gampang, dan yang paling penting GRATIS! Dengan fitur auto-refresh via API, halaman live score kamu bakal selalu up-to-date tanpa harus klik refresh manual.

Cobain sekarang dan bikin lomba makin seru! Kalau ada pertanyaan, komen aja di bawah. 😉🔥