Cara Membuat Web dengan Google Apps Script: Gratis, Tanpa Hosting, Data di Google Sheets
Google Apps Script (GAS) memungkinkan Anda membuat web gratis tanpa sewa hosting, tanpa server, dan tanpa setup rumit. Cukup akun Google dan browser. Web yang dibuat bisa langsung membaca dan menulis data ke Google Sheets, sehingga cocok untuk formulir pendaftaran, absensi, cek nilai, atau aplikasi kecil di sekolah dan kantor. Panduan ini membahas langkahnya dari nol sampai web bisa dibuka lewat link.
Apa yang bisa dibuat dengan Apps Script?
- Web app berbasis HTML. Tampilan dibuat dengan HTML, CSS, dan JavaScript biasa, lalu dilayani oleh fungsi
doGet. - Terhubung ke layanan Google. Langsung bisa memakai Google Sheets sebagai database, Google Drive untuk menyimpan file, dan Gmail untuk mengirim email.
- API sederhana. Fungsi
doGetdandoPostjuga bisa membalas JSON, sehingga bisa dipanggil dari aplikasi lain.
Langkah 1: Buat project dari Google Sheets
- Buat Google Sheets baru, misalnya bernama Data Pendaftaran, lalu ganti nama sheet pertama menjadi
Datadan isi baris pertama dengan judul kolom:Waktu,Nama,Email. - Buka menu Ekstensi > Apps Script. Editor Apps Script terbuka dengan file
Code.gs. - Beri nama project di kiri atas, misalnya Web Pendaftaran.
Project yang dibuat dari dalam Sheets otomatis terhubung ke spreadsheet itu, sehingga bisa dibuka dengan SpreadsheetApp.getActive().
Langkah 2: Tulis kode server (Code.gs)
Fungsi doGet dijalankan setiap kali link web dibuka dan wajib mengembalikan halaman HTML. Fungsi simpanData nanti dipanggil dari halaman untuk menyimpan isian formulir ke Sheets:
// Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('Form Pendaftaran')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
// Dipanggil dari halaman lewat google.script.run
function simpanData(data) {
if (!data.nama || !data.email) throw new Error('Nama dan email wajib diisi');
const sheet = SpreadsheetApp.getActive().getSheetByName('Data');
sheet.appendRow([new Date(), data.nama, data.email]);
return 'Terima kasih, ' + data.nama + '! Data berhasil disimpan.';
}
// Menggabungkan file HTML lain (CSS/JS) ke halaman utama
function include(nama) {
return HtmlService.createHtmlOutputFromFile(nama).getContent();
}
Baris addMetaTag('viewport', ...) penting supaya tampilan rapi di HP.
Langkah 3: Buat halaman HTML (Index.html)
Klik tanda + di samping Files, pilih HTML, lalu beri nama Index. Isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Style'); ?>
</head>
<body>
<form id="form">
<h2>Form Pendaftaran</h2>
<input name="nama" placeholder="Nama lengkap" required>
<input name="email" type="email" placeholder="Email" required>
<button type="submit">Kirim</button>
<p id="pesan"></p>
</form>
<script>
const form = document.getElementById('form');
const pesan = document.getElementById('pesan');
form.addEventListener('submit', function (ev) {
ev.preventDefault();
pesan.textContent = 'Menyimpan...';
const data = { nama: form.nama.value, email: form.email.value };
google.script.run
.withSuccessHandler(function (teks) { pesan.textContent = teks; form.reset(); })
.withFailureHandler(function (err) { pesan.textContent = 'Gagal: ' + err.message; })
.simpanData(data);
});
</script>
</body>
</html>
Lalu buat file HTML kedua bernama Style untuk tampilan:
<style>
body { font-family: sans-serif; background: #f1f5f9; display: grid; place-items: center; min-height: 100vh; margin: 0; }
form { background: #fff; padding: 24px; border-radius: 12px; width: min(360px, 90vw); box-shadow: 0 4px 20px rgba(0,0,0,.08); }
input, button { width: 100%; padding: 10px; margin-top: 10px; border-radius: 8px; border: 1px solid #cbd5e1; box-sizing: border-box; }
button { background: #2563eb; color: #fff; border: 0; cursor: pointer; }
</style>
Tag <?!= include('Style'); ?> adalah sintaks template Apps Script untuk menyisipkan isi file Style ke halaman. Cara ini membuat kode lebih rapi saat proyek makin besar.
Cara halaman berkomunikasi dengan server
google.script.runbersifat asinkron. Browser tidak menunggu hasil, jadi tampilkan hasil di dalamwithSuccessHandler, dan tangani galat diwithFailureHandler.- Tipe data terbatas. Yang bisa dikirim dan dikembalikan hanya angka, teks, boolean, objek biasa, dan array. Objek
Datetidak didukung, jadi ubah dulu menjadi teks, misalnya dengantoISOString(). - Fungsi privat. Fungsi yang namanya diakhiri garis bawah, misalnya
hapusSemua_(), tidak bisa dipanggil dari halaman. Pakai pola ini untuk fungsi yang tidak boleh diakses pengunjung.
Langkah 4: Deploy sebagai web app
- Simpan semua file (Ctrl + S).
- Klik Deploy > New deployment, klik ikon roda gigi di samping Select type, lalu pilih Web app.
- Isi deskripsi, lalu atur Execute as: Me (script berjalan dengan akun Anda, sehingga pengunjung bisa menulis ke Sheets milik Anda tanpa diberi akses).
- Atur Who has access: Anyone agar siapa saja bisa membuka tanpa login Google, atau Anyone with Google account jika pengunjung wajib login.
- Klik Deploy, setujui izin akses (Authorize access) dengan akun Google Anda, lalu salin Web app URL yang berakhiran
/exec.
Saat pertama kali memberi izin, Google bisa menampilkan peringatan "Google hasn't verified this app". Untuk script milik sendiri, klik Advanced, lalu Go to (nama project).
Langkah 5: Update web tanpa mengganti link
Link /exec menampilkan versi kode saat di-deploy, bukan kode terbaru. Setelah mengubah kode:
- Untuk mencoba dulu, pakai Deploy > Test deployments. Link berakhiran
/devselalu menjalankan kode terakhir yang disimpan, tetapi hanya bisa dibuka oleh pemilik dan editor project. - Jika sudah oke, buka Deploy > Manage deployments, pilih deployment aktif, klik ikon pensil (Edit), pilih Version: New version, lalu klik Deploy. Link
/exectetap sama, dan pengunjung langsung mendapat versi baru.
Jangan membuat New deployment baru setiap kali update, karena setiap deployment baru menghasilkan link baru.
Batasan yang perlu diketahui
- Waktu eksekusi. Satu kali eksekusi script maksimal 6 menit untuk akun Gmail biasa, dan ada batas 30 eksekusi bersamaan per pengguna. Untuk web yang ramai, proses berat sebaiknya dipecah.
- Alamat panjang. Link web berbentuk
script.google.com/macros/s/.../execdan tidak bisa langsung diganti domain sendiri (lihat artikel custom domain untuk web Apps Script). - Tampil di dalam bingkai. Halaman dilayani di dalam iframe milik Google, dan muncul banner kecil di bagian atas untuk pengunjung yang bukan pemilik.
- Kecepatan dan skala. Google Sheets bukan database sungguhan. Jika data sudah ribuan baris dan pengguna makin banyak, pertimbangkan pindah ke database seperti Supabase (lihat artikel migrasi Apps Script ke Supabase).
Tips keamanan
- Selalu validasi data di fungsi server (seperti pengecekan nama dan email di
simpanData), karena pengunjung bisa mengirim data apa saja. - Jangan simpan kata sandi atau kunci API di file HTML. Simpan di Project Settings > Script Properties dan baca dengan
PropertiesService. - Dengan Execute as: Me, setiap fungsi yang bisa dipanggil halaman berjalan dengan hak akses akun Anda. Batasi apa yang bisa dilakukan fungsi tersebut.
Sumber: Web Apps, HTML Service: Communicate with Server Functions, Create and manage deployments, dan Quotas for Google Services, Google Apps Script.