Bikin Live Score Pakai Google Sheets API & Google Sites

📚 Daftar Isi

1. Pendahuluan
2. Kenapa Harus Google Sheet
3. 1. Siapkan Google Sheets untuk Live Score
4. 2. Membuat API Key untuk Google Sheets API
5. 3. Masukkan Data Live Score ke Google Sites
6. 4. Uji Coba dan Bagikan!
7. Kesimpulan

Pendahuluan

Pernah merasa ribet harus update skor pertandingan secara manual saat jadi panitia turnamen? Atau pengin bikin tampilan live score yang keren tapi nggak ribet coding atau bayar aplikasi mahal? Tenang, ada solusi yang gratis, simpel, dan tetap profesional — yaitu dengan menggunakan Google Sheets API dan Google Sites.

Dengan sedikit sentuhan teknis dan kreativitas, kamu bisa bikin sistem live score yang langsung tampil online, bisa diakses dari mana saja, dan bahkan bisa disematkan ke website atau dibagikan ke grup peserta. Solusi ini cocok banget buat kamu yang jadi panitia turnamen futsal, basket, voli antar instansi, atau sekadar kompetisi internal kampus dan sekolah.

Yang kamu butuhkan cuma:

• Google Sheets untuk menyimpan dan mengelola data skor
• Google Apps Script untuk otomatisasi
• Google Sites sebagai media tampilannya

Menariknya lagi, semua ini bisa kamu buat tanpa perlu hosting berbayar atau server khusus. Cukup modal akun Google saja!

Kenapa Harus Pakai Google Sheets?

Google Sheets bukan cuma tempat ngetik angka — ia bisa diubah jadi basis data dinamis yang bisa diakses melalui API. Inilah beberapa alasannya kenapa Google Sheets sangat cocok untuk proyek live score:

• Gratis dan Mudah Diakses
  Kamu tidak perlu bayar server atau database hosting. Google Sheets cukup powerful dan bisa diakses dari mana pun — baik dari laptop, tablet, maupun HP.
• Bisa Diakses via API
  Dengan sedikit konfigurasi Google Apps Script atau pengaturan API publik, data yang kamu input di Sheet bisa langsung ditampilkan di tempat lain (seperti Google Sites) secara otomatis dan real-time.
• Kolaboratif
  Beberapa orang bisa mengakses dan mengupdate skor secara bersamaan. Cocok untuk kerja tim panitia.
• Cocok Dipadukan dengan Google Sites
  Google Sites memudahkan kamu bikin tampilan live score seperti web profesional tanpa perlu coding HTML/CSS. Kamu cukup embed atau integrasikan tampilan Sheet atau file HTML dari Script yang di-deploy.

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.
• Tambahkan kolom-kolom penting seperti ini:

Kolom	Keterangan
A	Nomor Peserta
B	Nama Peserta
C	Skor Juri 1
D	Skor Juri 2
E	Skor Juri 3
F	Total Skor (otomatis)

Nah, buat total skor kamu bisa pakai rumus:

=SUM(C2:E2)

Kalau ada banyak peserta, tinggal tarik ke bawah aja.

Cara Mengambil spreadsheetId dari Google Sheets

Saat kamu ingin mengakses data Google Sheets melalui API atau dengan Apps Script, kamu akan membutuhkan sebuah parameter penting yang disebut spreadsheetId. Ini adalah ID unik dari file spreadsheet yang digunakan oleh sistem Google untuk mengidentifikasi dan mengakses file tersebut.

Apa Itu spreadsheetId?

spreadsheetId adalah bagian dari URL file Google Sheets kamu, yang terlihat seperti rangkaian karakter acak dan panjang. Ini adalah ID unik yang membedakan satu spreadsheet dengan yang lain.

Contoh URL Google Sheets:

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

Bagian yang ditandai di bawah inilah yang disebut spreadsheetId:

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

Jadi, dalam contoh di atas, spreadsheetId-nya adalah:

1fQz_xkJtU1hgWvLxlT7YgI5S_abc12345EfGh67I8K9

Langkah-Langkah Mengambil spreadsheetId:

1. Buka Google Sheet yang kamu gunakan
2. Perhatikan URL di address bar browser kamu
3. Salin bagian antara /d/ dan /edit

Catatan Penting:

• Jangan salin seluruh URL jika kamu hanya diminta memasukkan spreadsheetId.
• Pastikan spreadsheet kamu sudah dibagikan dengan akses "Anyone with the link can view" jika digunakan untuk tampilan publik.

Contoh Penggunaan di Apps Script:

const sheet = SpreadsheetApp.openById('1fQz_xkJtU1hgWvLxlT7YgI5S_abc12345EfGh67I8K9');
const data = sheet.getSheetByName("Sheet1").getDataRange().getValues();

2. Membuat API Key untuk Google Sheets API

Langkah-langkah:

1. Buka Google Cloud Console
2. Login pakai akun Google
3. Klik “New Project” dan beri nama, misal “Live Score Project”
4. Masuk ke “API & Services > Library”
5. Cari “Google Sheets API” lalu klik “Enable”
6. Masuk ke “Credentials” > “Create Credentials” > “API Key”

Penting: Jangan share API Key sembarangan ya.

3. Masukkan Data Live Score ke Google Sites

Cara Menyiapkan Halaman Live Score di Google Sites

Setelah sistem live score kamu siap dan bisa diakses melalui Web App, saatnya menampilkannya dalam bentuk website agar bisa diakses publik. Kita akan menggunakan Google Sites, platform gratis dari Google untuk membuat website tanpa perlu coding.

Kenapa Memakai Google Sites?

• Gratis dan langsung terhubung dengan akun Google kamu
• Bisa menyematkan (embed) Web App, Google Sheets, atau video
• Tampilan responsif di desktop maupun HP
• Sangat mudah digunakan tanpa perlu pengalaman web development

Langkah-langkah Menampilkan Live Score di Google Sites

1. Buka Google Sites
   Kunjungi https://sites.google.com dan login dengan akun Google kamu.
2. Buat Situs Baru
   Klik tombol “+” (Blank) untuk membuat proyek situs baru. Beri nama situs, misalnya “Live Score Turnamen 2025”.
3. Tambahkan Halaman “Live Score”
   Masuk ke tab Pages di sebelah kanan, klik ikon + untuk membuat halaman baru. Beri nama “Live Score”, lalu klik Done.
4. Embed Web App dari Apps Script
   Pada halaman “Live Score”, masuk ke tab Insert → pilih Embed → pilih tab By URL.
   Masukkan kode berikut:
   

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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);
     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>

5. Klik Insert, lalu atur ukuran tampilannya sesuai kebutuhan.
6. Tambahkan Judul atau Desain Tambahan (Opsional)
   Kamu bisa menambahkan teks, gambar logo, atau background agar tampilannya lebih menarik.
7. Publikasikan Situs
   Klik tombol Publish di kanan atas. Tentukan alamat situs kamu, misalnya: livescore-turnamen2025.
   Klik Publish lagi untuk menyelesaikan.

4. Uji Coba dan Bagikan!

Coba update skor dari Google Sheets. Lihat hasilnya di halaman Google Sites kamu, skor akan otomatis terupdate tanpa harus refresh manual.

🧪 Tips Uji Coba:

• Pastikan kamu tidak membuka Sheet terlalu banyak orang saat uji coba (agar akses API tetap cepat).
• Tes dari perangkat lain (HP, laptop) untuk melihat tampilan responsive-nya.
• Ubah status Web App ke “Anyone” agar publik bisa mengakses tanpa login

🏆Pro Tips:

• Bisa embed ke blogspot
• Bisa pakai domain sendiri
• Cocok ditampilkan di layar besar saat acara berlangsung

🏁 Kesimpulan

Membuat sistem live score online tidak harus mahal atau menggunakan layanan berbayar. Dengan menggabungkan kekuatan Google Sheets, Apps Script, dan Google Sites, kamu bisa membangun sistem pelaporan skor pertandingan yang:

• 📡 Real-time: data otomatis terupdate langsung dari spreadsheet
• 🌐 Online: bisa diakses publik dari mana saja melalui web
• 🧰 Gratis & Tanpa Hosting: semua tools yang digunakan 100% free dari Google

Solusi ini cocok digunakan untuk berbagai kebutuhan seperti:

• Turnamen olahraga internal kampus/sekolah
• Kompetisi e-sport komunitas
• Dashboard skor antar instansi
• Belajar integrasi API dan pemrograman praktis

Dengan sedikit kreativitas dan eksplorasi tambahan, kamu bisa mengembangkan sistem ini menjadi lebih canggih. Misalnya dengan menambahkan fitur:

• 📅 Jadwal pertandingan otomatis
• 🏆 Klasemen & statistik pemain
• 📱 Tampilan responsif untuk perangkat mobile
• 🔐 Panel admin dengan otorisasi

Semoga tutorial ini bisa jadi awal dari proyek kerenmu! Selamat mencoba dan kembangkan sistemnya sesuai kebutuhan!

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