Back to Course

Deploy & Hosting Gratis Kode Web di Google Apps Script

Duration: 15 min•Difficulty: Beginner•

Setelah merancang antarmuka pengguna (User Interface) dan menyalin kode HTML serta Tailwind CSS dari Google Stitch pada Modul 1, tahapan selanjutnya adalah menayangkan kode tersebut ke internet agar dapat diakses oleh publik secara gratis.

Melalui artikel ini, kita akan mempelajari pemanfaatan Google Apps Script (GAS) sebagai infrastruktur hosting serverless gratis, memahami fungsi Code.gs, kode ringkas doGet(), hingga langkah deployment ke internet.

💡 Mengapa Menggunakan Google Apps Script untuk Kuliah & Kerja?

Berdasarkan materi workshop, Google Apps Script menawarkan tiga keunggulan praktis:

  • Paham Alur Bikin Web Cukup dari Browser: Tidak perlu menginstal perangkat lunak berat di laptop atau pusing mengatur konfigurasi server. Seluruh proses mengubah ide visual menjadi website aktif berlangsung 100% di browser.
  • Banyak Dipakai di Sistem Kampus & Industri: Di lingkungan perkuliahan maupun perkantoran, banyak sistem pengajuan izin, formulir pendaftaran, dan sistem pencatatan data internal dibangun menggunakan Google Apps Script karena terintegrasi langsung dengan Google Drive dan Google Sheets.
  • Kelola Data Web Tanpa Harus Jago Backend: Anda dapat membuat formulir web yang secara otomatis menyimpan data kiriman pengguna ke dalam baris Google Sheets—mudah dipantau dan dikelola tanpa memerlukan database SQL yang rumit.

☁️ Mengenal Google Apps Script: Apakah Code.gs Itu Web Server Milik Google?

Salah satu pertanyaan teknis yang sering muncul saat pertama kali mempelajari Google Apps Script adalah:

"Apakah file `Code.gs` itu sebenarnya web server milik Google, atau apa fungsinya?"

Jawaban Teknis:

File Code.gs bukanlah mesin fisik web server (seperti Nginx, Apache, atau server VPS tersendiri) yang kita miliki atau konfigurasi secara manual.

Sebaliknya, Google Apps Script adalah lingkungan Serverless Cloud Runtime / FaaS (Function-as-a-Service) milik Google yang berjalan di atas engine JavaScript Google V8.

Berikut cara kerja arsitekturnya di balik layar:

  1. Infrastruktur Web Server Google (GWS): Saat seseorang membuka tautan web app Anda (script.google.com/macros/s/.../exec), permintaan HTTP GET tersebut diterima pertama kali oleh infrastruktur web server fisik Google di cloud data center.
  2. Eksekusi Serverless: Web server Google kemudian mengalokasikan container runtime serverless dan memanggil fungsi gerbang utama bernama doGet() di file Code.gs Anda.
  3. Peran File `Code.gs`: File ini bertindak sebagai Backend Controller / HTTP Request Handler (pengatur logika lalu lintas permintaan).
  4. Peran `HtmlService`: Melalui HtmlService, skrip membaca file tampilan index.html, mengevaluasi kontennya, lalu menyerahkannya kembali ke web server Google untuk dikirimkan ke layar browser pengunjung secara aman.

Kesimpulan: Anda mendapatkan performa, skalabilitas, sertifikat SSL/HTTPS gratis, dan perlindungan keamanan setara infrastruktur Google tanpa perlu menyewa atau mengelola web server fisik sama sekali (Serverless Hosting).

🔍 Kode Backend: Fungsi doGet() Ringkas

Fungsi utama yang wajib ada di dalam file Code.gs untuk menayangkan halaman web adalah fungsi doGet(). Cukup gunakan kode ringkas dan efektif berikut:

javascript
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('Website saya');
}

Penjelasan Baris Kode (Ringkas):

  • `function doGet()`: Fungsi gerbang utama yang otomatis dieksekusi oleh Google Apps Script setiap kali ada pengunjung yang mengakses URL website Anda melalui browser (metode HTTP GET).
  • `HtmlService.createTemplateFromFile('index')`: Memanggil dan memuat file template antarmuka bernama index.html. (Ditulis `'index'` tanpa ekstensi `.html`).
  • `.evaluate()`: Memproses serta mengevaluasi seluruh template HTML (termasuk kode Tailwind CSS dan JavaScript di dalamnya) agar siap dirender secara utuh oleh browser.
  • `.setTitle('Website saya')`: Mengatur teks judul halaman yang akan tampil pada tab browser pengunjung.

🚀 Alur Praktik Deployment (4 Langkah Mudah)

Sesuai materi Slide 9 ("Yuk, Kita Mulai Praktik!"), berikut 4 langkah praktis mempublikasikan kode dari Google Stitch ke Google Apps Script:

1. Desain di Google Stitch & Salin Kode

  • Masuk ke stitch.withgoogle.com.
  • Unggah referensi gambar atau tuliskan teks prompt Anda.
  • Cek hasil desain UI pada panel pratinjau (preview).
  • Klik tombol View Code di pojok kanan atas, lalu salin (copy) seluruh kode HTML dan kelas Tailwind CSS.

2. Buat Proyek Baru di Google Apps Script

  • Buka browser dan akses alamat script.google.com.
  • Klik tombol New project (+ Proyek baru) di pojok kiri atas.
  • Beri nama proyek Anda (misalnya: Landing Page Portofolio).

3. Masukkan Kode Backend & Frontend

  • Buka file Code.gs, hapus isinya, lalu tempelkan kode fungsi doGet() di atas.
  • Pada panel Files di sebelah kiri, klik tanda tambah (+) lalu pilih HTML.
  • Beri nama file: index (huruf kecil semua, tanpa mengetik .html).
  • Hapus seluruh kerangka bawaan di dalam index.html, lalu tempelkan (paste) kode yang telah Anda salin dari Google Stitch.
  • Tekan Ctrl + S untuk menyimpan kedua file.

4. Deploy sebagai Web App

  • Klik tombol biru Deploy di pojok kanan atas, lalu pilih New deployment.
  • Klik ikon roda gigi (Select type) di kiri atas jendela pop-up, lalu pilih Web app.
  • Lengkapi pengaturan berikut:
  • Description: Beri keterangan versi (contoh: Versi 1.0 Final).
  • Execute as: Pilih Me (email.anda@gmail.com).
  • Who has access: Ubah menjadi Anyone (agar dapat diakses publik tanpa perlu login Google).
  • Klik tombol Deploy.
  • Jika diminta otorisasi akun (Authorize access), pilih akun Google Anda, klik Advanced, lalu pilih Go to [Nama Proyek] (unsafe) dan klik Allow.
  • Salin tautan pada bagian Web app URL yang berakhiran /exec. Website Anda kini resmi online di internet!

🔄 Cara Revisi Kode Tanpa Mengubah URL (Manajemen Versi)

Salah satu keunggulan Google Apps Script adalah kemudahan dalam memperbarui tampilan tanpa perlu membagikan link baru kepada pengguna.

Langkah Update Tampilan:

  1. Edit kode HTML di file index.html atau backend di Code.gs, lalu simpan (Ctrl + S).
  2. Klik tombol Deploy di pojok kanan atas, lalu pilih Manage deployments.
  3. Klik ikon pensil (Edit) di pojok kanan atas deployment aktif Anda.
  4. Pada menu pilihan Version, ubah dari versi lama menjadi New version (Versi baru).
  5. Klik tombol Deploy, lalu klik Done.
  6. Buka kembali tautan URL /exec Anda dan lakukan Refresh (F5). Tampilan baru akan langsung aktif dengan alamat URL yang tetap sama!

Perbedaan URL /exec vs /dev:

  • URL `/exec` (Production): URL publik untuk disebarkan ke dosen, teman, atau klien. Tampilan hanya akan berubah jika Anda merilis New version.
  • URL `/dev` (Development/Testing): URL khusus pemilik skrip untuk menguji perubahan secara instan setiap kali menekan Ctrl + S tanpa perlu deploy ulang. URL ini tidak dapat dibuka oleh pengguna umum.

🔗 Kustomisasi Tautan & Trik Custom Domain

Tautan bawaan Google Apps Script memiliki karakter acak yang cukup panjang:

https://script.google.com/macros/s/[ID_ACAK_PANJANG]/exec

Untuk membuatnya rapi dan mudah diingat, gunakan salah satu solusi berikut:

Solusi 1: Pemendek Tautan Gratis (Sangat Direkomendasikan)

Gunakan layanan pemendek URL dengan custom alias:

  • s.id: Pemendek tautan lokal Indonesia (contoh: s.id/portofolio-raffi).
  • Bit.ly: (Contoh: bit.ly/gsa-stitch-pnj).
  • TinyURL: (Contoh: tinyurl.com/web-apps-raffi).

Solusi 2: Iframe Wrapper pada Domain Sendiri atau GitHub Pages

Anda juga dapat membungkus website Apps Script Anda ke dalam domain apa pun hanya dengan satu file index.html sederhana:

html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Portofolio Saya</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    iframe { width: 100%; height: 100%; border: none; display: block; }
  </style>
</head>
<body>
  <iframe src="https://script.google.com/macros/s/GANTI_DENGAN_ID_DEPLOYMENT_ANDA/exec"></iframe>
</body>
</html>

⚡ Batasan Kuota (Fair Use Quotas)

Google menyediakan layanan ini secara gratis dengan batasan wajar:

  • Execution Time: Maksimal 6 menit per satu kali eksekusi fungsi. (Proses merender HTML hanya memakan waktu ~0,3 detik, sangat aman).
  • Simultaneous Users: Mampu melayani puluhan pengguna bersamaan dalam satu detik. Sangat memadai untuk portofolio, tugas kuliah, dan landing page acara.
  • Penyimpanan Gambar: Google Apps Script tidak memiliki direktori file gambar lokal. Seluruh gambar harus menggunakan tautan URL publik (Unsplash, Cloudinary, atau CDN gambar bawaan dari Google Stitch).

🎯 Penutup

Kombinasi Google Stitch dan Google Apps Script membuktikan bahwa alur pembuatan website modern—mulai dari ideasi visual dengan AI hingga publikasi online—dapat diselesaikan 100% gratis langsung dari browser.

👈 [Kembali ke Modul 1: Mengenal Google Stitch: Panduan Lengkap Desain UI ke Kode Frontend dengan Gemini AI](/blog/gsa/mengenal-google-stitch)