Cara Membuat Web App dengan Google Spreadsheet dan Google Apps Script — Panduan Lengkap untuk Pemula

Google Apps Script dan Spreadsheet Web App Tutorial

Apa itu Google Apps Script?

Google Apps Script adalah platform pengembangan aplikasi berbasis JavaScript yang memungkinkan Anda membuat, mengotomatisasi, dan mengintegrasikan berbagai layanan Google seperti Spreadsheet, Docs, Gmail, dan Drive. Dengan Apps Script, Anda bisa membuat web app yang menggunakan Google Spreadsheet sebagai database — semuanya gratis tanpa perlu server mahal.

Mengapa Google Spreadsheet sebagai Database?

Google Spreadsheet adalah solusi database yang sempurna untuk web app skala kecil hingga menengah karena: (1) Gratis 100% — tidak perlu biaya hosting database. (2) Mudah digunakan — antarmuka spreadsheet yang familiar. (3) Kolaboratif — bisa diakses banyak orang. (4) Terintegrasi — langsung terhubung dengan ekosistem Google. (5) Aman — data tersimpan di cloud Google.

Persiapan Awal

Sebelum memulai, pastikan Anda memiliki:

Akun Google (Gmail) — untuk mengakses Google Drive dan Spreadsheet.
Browser modern (Chrome, Firefox, atau Edge) — untuk menulis dan menguji kode.
Koneksi internet — karena semua proses berbasis cloud.
Pengetahuan dasar JavaScript — akan memudahkan pemahaman kode.

Langkah 1: Buat Google Spreadsheet Baru

Buka Google Sheets dan buat spreadsheet baru. Beri nama sesuai proyek Anda, misalnya "Data Web App". Buatlah header kolom di baris pertama sesuai kebutuhan data. Contoh: No, Nama, Email, Pesan, Tanggal. Spreadsheet ini akan menjadi database utama web app Anda.

Langkah 2: Buka Google Apps Script

Dari menu spreadsheet, klik Extensions > Apps Script. Ini akan membuka editor Apps Script di tab baru. Di sinilah Anda akan menulis semua kode backend web app. Hapus kode default yang ada (biasanya function myFunction()) karena kita akan menulis dari awal.

Langkah 3: Tulis Kode Apps Script Pertama

Kode berikut adalah contoh sederhana untuk membaca data dari spreadsheet dan menyajikannya sebagai JSON:

function doGet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var headers = data[0];
  var jsonData = [];
  for (var i = 1; i < data.length; i++) {
    var obj = {};
    for (var j = 0; j < headers.length; j++) {
      obj[headers[j]] = data[i][j];
    }
    jsonData.push(obj);
  }
  return ContentService.createTextOutput(JSON.stringify(jsonData))
    .setMimeType(ContentService.MimeType.JSON);
}

Kode ini membuat endpoint GET yang mengembalikan semua data spreadsheet dalam format JSON. doGet() adalah fungsi khusus yang dipanggil saat web app diakses melalui HTTP GET.

Langkah 4: Deploy sebagai Web App

Klik tombol Deploy > New deployment. Pilih type Web app. Atur akses menjadi Anyone (atau Anyone with link untuk keamanan dasar). Klik Deploy. Anda akan mendapatkan URL web app. Simpan URL ini — inilah endpoint API Anda.

Langkah 5: Buat Tampilan HTML

Sekarang buat halaman HTML sederhana untuk menampilkan data:

<!DOCTYPE html>
<html>
<head>
  <title>Data dari Spreadsheet</title>
</head>
<body>
  <h1>Data Web App</h1>
  <div id="data"></div>
  <script>
    fetch('URL_WEB_APP_ANDA')
      .then(r => r.json())
      .then(data => {
        document.getElementById('data').innerHTML =
          '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
      });
  </script>
</body>
</html>

Ganti URL_WEB_APP_ANDA dengan URL dari hasil deployment. Buka file HTML ini di browser — data dari spreadsheet akan tampil.

Tips Penting

Batasan Kuota: Apps Script memiliki batasan 20.000 URL fetch per hari dan 90 menit waktu eksekusi total. Untuk penggunaan normal, ini sudah lebih dari cukup.
Keamanan: Jangan pernah menyimpan data sensitif (password, token) di spreadsheet yang bisa diakses publik.
Testing: Gunakan fungsi console.log() untuk debugging, lalu lihat hasilnya di View > Logs.
Versioning: Selalu gunakan fitur Deploy > Manage deployments untuk melacak versi kode Anda.

Kesimpulan

Anda telah berhasil membuat web app pertama yang terhubung dengan Google Spreadsheet menggunakan Google Apps Script. Dari sini, Anda bisa mengembangkannya menjadi aplikasi yang lebih kompleks seperti sistem CRUD, formulir data, dashboard, dan masih banyak lagi. Google Apps Script adalah tools yang sangat powerful untuk membuat web app cepat dan gratis.

⚡ Tutorial Google Apps Script & Spreadsheet — Web App Builder Collection