Arsitektur GAS WebApp untuk Google Sites

☁️ Pure GAS WebApp Builder

SOP Ekosistem Google Sites & Apps Script

Integrasi Google Sites & Web App URL

Berbeda dengan Blogger yang memerlukan manipulasi template XML, integrasi pada Google Sites menggunakan fitur Embed URL (Sematkan). Aplikasi dibangun 100% menggunakan HtmlService dari Google Apps Script, kemudian tautan deployment-nya disematkan ke dalam halaman Google Sites.

🌐

Google Sites

Wadah Publik (Container). Menyediakan domain dan layout web statis.

⬇️➡️

🎨

Index.html

UI Aplikasi (SPA). Di-render oleh GAS HtmlService. Semua interaksi ada di sini.

⬇️➡️ google.script.run

⚙️

Code.gs (Backend)

Validasi Token & Logika Bisnis

↕️

📊

Google Sheets

Database & Setup Otomatis

Standar Frontend: Layout Isolation & Keamanan

Sistem mewajibkan arsitektur Single Page Application (SPA) yang sangat ketat. Halaman dilarang melakukan reload (seperti location.reload()). Navigasi dilakukan dengan memanipulasi kelas CSS (d-none).

1️⃣ Layout Isolation (Mutlak)

Aplikasi wajib memiliki 2 root container yang terpisah. Saat belum login, halaman utama tidak boleh dirender di latar belakang (mencegah eksploitasi DOM).

<body>
  <!-- Loader -->
  <div id="fullPageLoader" style="display:none"></div>

  <!-- ROOT 1: HALAMAN LOGIN -->
  <section id="loginPage" class="auth-page">
    ... form login saja ...
  </section>

  <!-- ROOT 2: APLIKASI UTAMA (Awalnya tersembunyi) -->
  <section id="mainApp" class="app-shell d-none">
    <aside class="sidebar">...</aside>
    <main class="main-content">
      <!-- Setiap menu adalah page tersendiri -->
      <div id="page-dashboard" class="app-page"></div>
      <div id="page-data" class="app-page d-none"></div>
    </main>
  </section>
</body>
                    

2️⃣ gasRun Wrapper

Dilarang menggunakan google.script.run secara mentah. Wajib dibungkus dengan Promise untuk mempermudah Async/Await.

function gasRun(funcName) {
  var args = Array.prototype.slice.call(arguments, 1);
  return new Promise(function(resolve, reject) {
    var runner = google.script.run
      .withSuccessHandler(resolve)
      .withFailureHandler(reject);
    runner[funcName].apply(runner, args);
  });
}
// Cara Pakai: 
// gasRun('getData', Auth.getToken()).then(...)
                        

🛡️ XSS Protection Wajib

Semua data dari server (Sheet) yang akan dirender menggunakan innerHTML WAJIB melewati fungsi ini untuk mencegah injeksi skrip jahat.

function escapeHTML(str) {
  if (!str) return '';
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(String(str)));
  return div.innerHTML;
}
// BENAR: '<td>' + escapeHTML(item.nama) + '</td>'
                        

Standar Backend (Code.gs) & Lapisan Keamanan

Sistem Code.gs bukan sekadar perantara data, melainkan benteng keamanan utama. Semua operasi tulis (CRUD) wajib divalidasi dengan token sesi, dan mencegah tabrakan data (Concurrency) menggunakan LockService.

Pilar Kualitas Backend WebApp

Fokus utama pengembangan menurut SOP adalah Session Security dan Data Integrity (LockService).

🔑 SHA-256 Password Hashing

Dilarang keras menyimpan password plain-text di Google Sheets. Wajib menggunakan Utilities.computeDigest() untuk mengubah kata sandi menjadi string hex saat fungsi setupDatabase() dijalankan.

⏱️ Token & CacheService

Saat login, Code.gs menghasilkan UUID Token. Token ini disimpan di CacheService.getScriptCache() dengan batas waktu 8 jam. Setiap fungsi selain login wajib memanggil validateSession(token).

🔒 LockService & logAction

Untuk mencegah data tumpang tindih saat beberapa pengguna mengisi form secara bersamaan, operasi "Simpan/Update/Hapus" wajib menggunakan LockService.getScriptLock() dan dicatat pada fungsi logAction().

Формат Respons Standar Mutlak

// Sukses
{ success: true, data: [...], message: '...' }

// Sesi Berakhir (Otomatis ditendang ke Login)
{ success: false, message: '...', sessionExpired: true }
                        

Alur Kerja (SOP): Workflow Gate Mutlak

Kesalahan terbesar Developer adalah langsung membuat *backend* sebelum antarmuka disetujui. SOP mewajibkan adanya pemisah tegas antara PREVIEW MODE (Prototipe dengan data palsu) dan PRODUCTION MODE.

🗣️ Tahap 1

Requirement Gathering

Mengumpulkan spesifikasi sistem. Tanyakan: Akses publik atau login? Role apa saja? Menu apa saja? Kolom data apa saja? (Tidak menulis kode apa pun di sini).

⚠️ PREVIEW

Frontend Preview (Mock Data)

Wajib menghasilkan file tunggal Index.html di Canvas.
Dilarang membuat file Code.gs pada tahap ini.
Menggunakan data palsu (MockDB). Password demo wajib: bismillah.
Semua menu, form, tombol, dan navigasi wajib bisa diklik dan diuji coba sepenuhnya. Jangan ada fungsi pajangan.

🔄 Revisi

Canvas Revision Rule

Jika ada perubahan, revisi WAJIB mengedit/update Canvas yang sama. Dilarang membuat Canvas baru agar konteks dan versi file tidak berantakan.

🚀 Trigger: "GAS"

Production Build

Hanya dilakukan setelah pengguna mengetik kata kunci "GAS" atau menyetujui versi Preview.

Index.html: Mock data dihapus, dihubungkan ke backend asli, simpan di Canvas.
Code.gs: File logika backend asli dibuat di Canvas. Password default berubah menjadi Admin@2026.
Pengguna harus menjalankan fungsi setupDatabase() satu kali secara manual di Apps Script Editor.

🌍 Deployment

Langkah Implementasi ke Google Sites

Deploy di GAS: Pada editor Apps Script, klik tombol biru Terapkan (Deploy) > Deployment baru di sudut kanan atas.
Pilih Jenis: Klik ikon gerigi ⚙️ dan setel jenis ke Aplikasi Web (Web App). Atur "Akses" ke Siapa saja (Anyone) jika aplikasi untuk publik/login internal.
Salin URL: Setelah di-deploy, salin URL Aplikasi Web yang muncul (biasanya berakhiran /exec).
Buka Google Sites: Buka halaman editor Google Sites tempat aplikasi akan disematkan.
Sematkan (Embed): Pada panel kanan menu "Sisipkan", klik fitur Sematkan yang berlambang <>.
Paste URL: Pilih tab Dengan URL (By URL), paste URL dari GAS, tunggu pratinjau muncul, lalu klik Sisipkan (Insert).
Sesuaikan: Tarik ujung bingkai (frame) aplikasi agar ukurannya memanjang dan pas menutupi halaman, lalu klik Publikasikan (Publish).

Trending

Tutorial Instalasi dan Konfigurasi INLISLite v3.3 di Lingkungan Windows

Penerapan Gemini AI dalam Desain dan Pengembangan Web App

Metode SDLC (Software Development Life Cycle)

Apa itu UML? Blueprint Pemrograman Terstandar

Sistem Informasi Arsip Elektronik

Penerapan Google Apps Script ke dalam Google Sites