Pembuatan WebApp menggunakan Google Apps Script (GAS) dan Blogger

⚡ WebApp Builder: GAS & Blogger

Materi Pembelajaran Rekayasa Perangkat Lunak Terintegrasi Google Ecosystem

Arsitektur Tanpa Server (Serverless Architecture)

Arsitektur ini memanfaatkan ekosistem Google secara penuh untuk membangun WebApp secara gratis, handal, dan dinamis tanpa perlu menyewa *hosting* tradisional. Blogger bertindak sebagai antarmuka pengguna (Frontend), Google Apps Script (GAS) sebagai otak logika (Backend), dan Google Sheets sebagai tempat penyimpanan data (Database).

🌐

Frontend (Client)

Blogger (Blogspot)

Menyajikan UI lengkap (HTML/CSS/JS) dalam satu halaman secara *Full Page*. Merender tampilan dan menangani interaksi pengguna.

⬇️ ↔️ AJAX / Fetch API

⚙️

Backend (Server)

Google Apps Script

Menerima *request* dari Blogger, menjalankan logika bisnis (verifikasi login, proses data), dan memberikan respons JSON.

⬇️ ↔️ SpreadsheetApp API

📊

Database

Google Sheets

Menyimpan data aplikasi (User, Passwords, Entri Data) dalam bentuk baris dan kolom yang mudah dikelola layaknya tabel relasional.

Antarmuka Pengguna (Frontend di Blogger)

Blogger dimodifikasi agar tidak terlihat seperti blog biasa, melainkan seperti Aplikasi Web. Seluruh kode (HTML, CSS, dan JavaScript) diletakkan di dalam satu postingan/laman Blogger, menutupi elemen bawaan template (*Full Page*).

Aturan Keras Frontend:

• ✓ Single File: Semua kode UI berada di satu tempat untuk mempermudah eksekusi.
• ✓ Saklar Deployment: Wajib menggunakan konstanta IS_PREVIEW untuk memisahkan mode pengembangan dan produksi (Blogger).
• ✓ Data Dummy: Saat IS_PREVIEW = true, aplikasi berjalan tanpa server, menggunakan data palsu (contoh: Login Admin: admin/admin123) untuk mempercepat pengujian UI.
• ✗ Anti-Placeholder: Tidak boleh ada fungsi kosong. Seluruh menu dan fitur harus 100% interaktif di sisi klien.

Contoh Konfigurasi Wajib di JS:

// KONFIGURASI APLIKASI // UBAH IS_PREVIEW KE false JIKA DI-DEPLOY KE BLOGGER const IS_PREVIEW = true; // Default Canvas const GAS_URL = "URL_DEPLOY_GAS_ANDA_DISINI";

Komposisi Kode Frontend (Single File)

DOM Layout (HTML), Styling Utility (Tailwind), dan State/Routing Logic (JS Vanilla) menyatu dalam satu *environment*.

Logika Server (GAS) & Database (Sheets)

File Code.gs di Google Apps Script bertugas menjembatani Frontend dan Google Sheets. Ia menangani penerimaan data (Metode GET/POST), validasi keamanan (seperti cek kombinasi username & password), dan manipulasi data di Sheets.

⚙️ Fungsi setupDatabase()

Ini adalah fitur *wajib* di sisi backend. Fungsi ini dibuat untuk mengotomatisasi pembuatan *Sheet* baru dan menulis *Header* kolom (misal: ID, Username, Role, Password) secara otomatis jika *sheet* tersebut belum ada saat program pertama kali dijalankan.

Pembuatan Akun Otomatis: Fungsi ini juga otomatis membuat akun admin bawaan (admin / admin2026) langsung ke dalam database agar aplikasi siap pakai.

🔗 Koneksi Dinamis Spreadsheet

Untuk menghubungkan script dengan database, hindari penulisan ID secara manual jika script terikat (*bound*) dengan Sheets.

// Metode yang Benar & Dinamis: var id = SpreadsheetApp .getActiveSpreadsheet() .getId();

Ini memastikan script otomatis mendeteksi sheet tempat ia dipasang, mencegah *error hardcoding*.

Standar Operasional Prosedur (SOP) Pembuatan

Sebagai seorang Software Engineer, proses pembuatan aplikasi tidak boleh dilakukan secara acak. Terdapat 4 tahap berurutan (*Waterfall terstruktur*) yang wajib dipatuhi untuk memastikan WebApp berjalan sempurna dan sesuai ekspektasi. Klik pada setiap tahap di bawah ini.

Tahap 1: Menerima Instruksi (Fase Analisis)

Pada tahap ini, Developer tidak menulis kode sama sekali. Fokus utamanya adalah memahami kebutuhan pengguna (Client).

Aktivitas: Mendengarkan perintah, ide, atau deskripsi aplikasi yang ingin dibangun. Menganalisis batasan dan tujuan sistem.

Tahap 2: Memberikan Rekomendasi (Fase Perencanaan)

Developer merancang Arsitektur Informasi dan menyusun *blueprint* aplikasi sebelum *coding* dimulai.

• Sistem Akses: Tentukan apakah Publik atau Butuh Login Password.
• Hak Akses (Role): Pembagian tugas (misal: Admin vs Peserta).
• Sitemap/UI: Draf daftar menu yang logis.
• Skema Database: Draf nama-nama kolom untuk Google Sheets.

Tahap 3: Menerima Konfirmasi Pengguna

Kesepakatan spesifikasi akhir (Sign-off). Tahap penguncian fitur.

Penting: Pastikan seluruh rencana saling terhubung dengan logis. Revisi dilakukan di tahap ini, BUKAN saat sedang *coding*.

Tahap 4: Eksekusi Pembuatan (Fase Coding)

Eksekusi teknis dengan urutan yang sangat ketat (A -> B -> C).

A. Frontend UI (Buat Pertama)

Selesaikan HTML/CSS/JS. Pastikan fitur Mode Preview (dummy login) berjalan 100% sempurna tanpa server.

B. Backend Logic (Buat Kedua)

Buat Code.gs. Sesuaikan variabel dengan Frontend. Buat fungsi setupDatabase().

C. Petunjuk Penggunaan (Buat Terakhir)

Buat panduan implementasi langkah demi langkah dari nol untuk diserahkan kepada pengguna akhir.

© 2026. E-Learning by Muhammad Alfin Ramadhan