Cara Membuat Web App dari Google Spreadsheet dengan Google Apps Script (2026)

Google Apps Script (GAS) membuat kamu bisa menyulap satu Google Spreadsheet jadi aplikasi web utuh: form input dari HP, dashboard, kasir, absensi, sampai antrian. Tidak perlu beli server, tidak perlu hosting, tidak perlu bayar bulanan. Semuanya jalan di akun Google-mu.

Panduan ini menjelaskan cara kerjanya dari nol, plus tiga jebakan yang paling sering bikin pemula menyerah. Di akhir ada cara memangkas waktu bikinnya dengan menyiapkan rencana (PRD) yang sudah sadar batasan GAS lebih dulu.

Apa itu Google Apps Script?

Google Apps Script adalah bahasa berbasis JavaScript yang jalan di server Google. Dari GAS kamu bisa membaca dan menulis Google Sheets, Docs, Gmail, Calendar, dan menyajikan halaman web lewat HTML Service. Untuk aplikasi web, dua bagian yang penting: kode server (file .gs) dan tampilan (file .html) yang saling bicara lewat google.script.run.

Arsitektur dasar: 4 file

Aplikasi Web GAS yang rapi umumnya terdiri dari empat berkas. Pisahkan tanggung jawabnya sejak awal supaya tidak jadi satu file raksasa yang sulit dirawat:

• Code.gs — pintu masuk (doGet) dan semua fungsi publik yang dipanggil dari tampilan.
• Sheets.gs — akses data: baca/tulis ke tab Spreadsheet, dibungkus penguncian anti-bentrok.
• index.html — kerangka tampilan (UI) yang memuat CSS dan JS klien.
• js.html — logika sisi klien: memanggil server dan menggambar hasilnya.

doGet: pintu masuk Web App

Setiap Web App GAS wajib punya fungsi doGet yang mengembalikan halaman. Ini contoh minimal yang menyajikan index.html:

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('Aplikasi Saya')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// Helper untuk memuat css.html & js.html ke dalam index.html
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

google.script.run: jembatan klien ↔ server

Di aplikasi web biasa kamu memanggil API pakai fetch. Di GAS TIDAK. Tampilan memanggil fungsi server langsung lewat google.script.run. Ini beda paling sering bikin kode hasil AI gagal: AI menuliskan fetch ke endpoint yang tidak ada. Pola yang benar:

// di js.html (klien)
google.script.run
  .withSuccessHandler(function (res) {
    // res = nilai balik dari fungsi server
    renderProduk(res.data);
  })
  .withFailureHandler(function (err) {
    tampilkanError(err.message);
  })
  .getProduk();   // <- nama fungsi di Code.gs

Aturan praktis: perlakukan tiap fungsi publik seperti endpoint. Balikan bentuk yang konsisten, misalnya { success, message, data }, supaya klien selalu tahu cara membacanya.

Tiga jebakan yang bikin pemula mentok

1. Batas eksekusi 6 menit

Satu eksekusi GAS dibatasi sekitar 6 menit (akun gratis). Loop yang membaca sel satu per satu untuk ribuan baris pasti kena limit. Solusinya: baca dan tulis secara borongan (batch) dengan getValues() dan setValues() sekali jalan, bukan getRange().getValue() di dalam loop.

2. Data bentrok saat banyak pengguna

Kalau dua orang menekan Simpan bersamaan, stok bisa salah kurang atau nomor urut kembar. Spreadsheet tidak punya transaksi seperti database sungguhan. Penyelamatnya adalah LockService: kunci sebelum menulis, lepas setelah selesai. Pakai getScriptLock(), JANGAN getDocumentLock() — di Web App getDocumentLock() mengembalikan null, sehingga waitLock melempar error dan semua penyimpanan gagal.

function simpanPesanan(keranjang) {
  const lock = LockService.getScriptLock();   // BUKAN getDocumentLock: null di Web App
  lock.waitLock(30000);            // tunggu maksimal 30 detik
  try {
    // baca stok, validasi, tulis pesanan, kurangi stok — semua di sini
    return { success: true, data: { nomor: buatNomor_() } };
  } finally {
    lock.releaseLock();            // WAJIB dilepas walau error
  }
}

3. Kode sudah diubah tapi Web App tidak update

Ini jebakan paling menyebalkan. Kamu menyimpan kode, buka URL Web App, tapi masih versi lama. Penyebabnya: menyimpan (Save) TIDAK otomatis menerbitkan versi baru. Kamu harus ke Deploy → Manage deployments → Edit (ikon pensil) → Version: New version → Deploy. Tanpa langkah ini, pengguna selalu melihat versi lama.

Langkah deploy dari nol

1. Buka spreadsheet → menu Extensions → Apps Script.
2. Buat file Code.gs, Sheets.gs, index.html, js.html seperti struktur di atas.
3. Set zona waktu dan runtime V8 di appsscript.json (timeZone 'Asia/Jakarta').
4. Simpan ID spreadsheet & konfigurasi rahasia di Project Settings → Script Properties, jangan hardcode di kode.
5. Deploy → New deployment → pilih 'Web app', tentukan 'Execute as' dan 'Who has access', lalu salin URL-nya.
6. Setiap perubahan berikutnya: Manage deployments → New version.

Mempercepat: rencanakan dulu sebelum menulis kode

Kebanyakan proyek GAS berantakan bukan karena kodingnya susah, tapi karena struktur tab dan alur data tidak dipikirkan di awal. Kolom ketambahan di tengah jalan, nama tab tidak konsisten, dan fitur perhitungan ternyata butuh kolom yang belum ada.

Skematik punya mode Web GAS yang menghasilkan rencana (PRD) khusus Apps Script: struktur tab Spreadsheet sebagai skema data, daftar fungsi server, plus konvensi yang sudah sadar batasan GAS (LockService, batas 6 menit, mode deploy). Kamu bahkan bisa langsung mengekspor setup-sheets.gs yang otomatis membuat semua tab dan header-nya. Hasilnya bisa langsung ditempel ke AI coding agent seperti Cursor atau Claude Code untuk dibangunkan.

Kalau mau lihat wujud nyatanya dulu, ada contoh PRD lengkap sebuah aplikasi kasir + stok toko yang seluruhnya dibangun di Apps Script — dari alur pengguna, tab Spreadsheet, sampai task siap-koding.