Seri 9 — Membuat Web App dengan Google Apps Script

Pada seri sebelumnya, kita telah belajar Menghubungkan Google Apps Script dengan API Eksternal. Pada seri ini, kita akan belajar membuat Web App menggunakan Google Apps Script (GAS).
Dengan Web App, kita bisa membuat aplikasi berbasis web yang berjalan di server Google — tanpa harus menyewa hosting, tanpa backend kompleks, dan dapat diakses lewat URL!

Kita akan membahas:

Apa itu Web App di GAS
Bagaimana Web App bekerja
Struktur fungsi doGet() dan doPost()
Membuat Web App sederhana
Men-deploy Web App
Mengirim data dari HTML ke GAS
Contoh Web App mini (form input → Spreadsheet)

✅ 1. Apa Itu Web App di GAS?

Web App di Google Apps Script adalah aplikasi web yang berjalan di server Google, dapat diakses melalui URL publik/privat, serta dapat menerima HTTP request (GET/POST).

Dengan Web App, kita dapat:
✅ Membuat form custom
✅ Membaca/menulis data ke Google Sheets
✅ Membuat dashboard sederhana
✅ Integrasi API

✅ 2. Cara Kerja Web App

Web App bekerja menggunakan dua fungsi utama:

Fungsi	Tujuan
`doGet(e)`	Menangani permintaan GET (misal halaman utama)
`doPost(e)`	Menangani permintaan POST (misal submit form)

Masing-masing fungsi akan mengembalikan response berupa:

HTML
JSON
Text

✅ 3. Struktur Dasar Web App

Fungsi `doGet()`


function doGet(e) {
  return ContentService.createTextOutput("Hello Web App!");
}

Akses URL → browser akan menampilkan:

Hello Web App!

Fungsi `doPost()`


function doPost(e) {
  return ContentService.createTextOutput("POST response");
}

doPost() biasanya dipakai untuk menerima data form.

✅ 4. Membuat Web App Sederhana (HTML Output)


function doGet() {
  const html = HtmlService.createHtmlOutput(`
    <h1>Selamat Datang di Web App Kita!</h1>
    <p>Dibuat dengan Google Apps Script ✨</p>
  `);
  return html;
}

✅ 5. Deploy Web App

Klik Deploy → New deployment
Pilih type: Web app
Isi nama
Set:

Execute as: Me
Who has access: Anyone / Anyone with link

Klik Deploy

GAS akan memberikan URL. Itulah alamat Web App kita!

✅ 6. Menambahkan HTML Terpisah

Daripada menulis HTML dalam string, kita bisa pisahkan:

File Code.gs


function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

File index.html


<!DOCTYPE html>
<html>
  <body>
    <h2>Halo dunia dari index.html!</h2>
  </body>
</html>

✅ 7. Komunikasi HTML → GAS (google.script.run)

HTML dapat memanggil fungsi GAS menggunakan google.script.run.

Code.gs


function hello(name) {
  return `Halo, ${name}!`;
}

index.html


<!DOCTYPE html>
<html>
  <body>
    <input id="nama" placeholder="Nama">
    <button onclick="send()">Kirim</button>

    <p id="result"></p>

    <script>
      function send() {
        const nama = document.getElementById("nama").value;

        google.script.run
          .withSuccessHandler(function(res){
            document.getElementById("result").innerHTML = res;
          })
          .hello(nama);
      }
    </script>
  </body>
</html>

Sekarang kita sudah bisa memanggil fungsi GAS dari halaman web!

✅ 8. Contoh Web App Mini

Form input → simpan ke Spreadsheet

✅ Code.gs


const SHEET = SpreadsheetApp.getActive().getSheetByName("Data");

function doGet() {
  return HtmlService.createTemplateFromFile("form").evaluate();
}

function simpan(data) {
  SHEET.appendRow([new Date(), data.nama, data.email]);
  return "Data tersimpan!";
}

✅ form.html


<!DOCTYPE html>
<html>
  <body>
    <h2>Form Input</h2>

    <label>Nama:</label>
    <input id="nama"><br><br>

    <label>Email:</label>
    <input id="email"><br><br>

    <button onclick="submit()">Simpan</button>

    <p id="res"></p>

    <script>
      function submit() {
        const data = {
          nama: document.getElementById("nama").value,
          email: document.getElementById("email").value
        };

        google.script.run
          .withSuccessHandler(res => {
            document.getElementById("res").innerHTML = res;
          })
          .simpan(data);
      }
    </script>
  </body>
</html>

✅ Hasil: Data dari form akan otomatis masuk ke Google Sheets.

✅ 9. Mengembalikan JSON Response


function doGet(e) {
  const data = { pesan: "Halo JSON", tanggal: new Date() };
  return ContentService.createTextOutput(JSON.stringify(data))
       .setMimeType(ContentService.MimeType.JSON);
}

✅ 10. Tips Penting

Tips
Gunakan `HtmlService` untuk HTML
Pisahkan HTML & GS agar rapi
Gunakan `google.script.run` untuk komunikasi
Log pakai `console.log()`

✅ Catatan Keamanan

Jika data sensitif → gunakan:

Limited access (domain-only)
Validation
Jangan expose fungsi sensitif di HTML

Di seri ini kita belajar membuat aplikasi web sederhana menggunakan Google Apps Script:

✔ Konsep Web App (GET/POST)
✔ Fungsi dasar doGet() dan doPost()
✔ Output HTML
✔ File HTML terpisah
✔ Komunikasi HTML ↔ GAS
✔ Example: Form → Sheet

Dengan kemampuan ini, kita bisa mulai membangun berbagai solusi:
✅ Form internal
✅ Portal mini
✅ Dashboard
✅ Integrasi API

Mulai dari administrasi kantor, sekolah, hingga workflow bisnis!

Pada artikel berikutnya kita akan belajar Membuat Dashboard Visual dari Data Spreadsheet

Delphi Guru

Cari Blog Ini