▲ Migrasi GAS ke Modern Stack

Panduan Transisi ke Vercel, GitHub, dan Database Relasional

Transisi dari Monolitik ke Decoupled Architecture

Google Apps Script (GAS) sangat luar biasa untuk prototipe cepat. Namun, ketika pengguna bertambah banyak, Anda akan menabrak batas limitasi Google (batas eksekusi 6 menit, kuota baca/tulis Sheets, dan performa yang melambat). Migrasi ke Jamstack (Vercel/GitHub + API) memisahkan Frontend dan Backend, memberikan skalabilitas tanpa batas.

Lama: Ekosistem Terkunci (GAS)

Index.html (HtmlService)

↕️ google.script.run

Code.gs (GAS Engine)

↕️ SpreadsheetApp

Google Sheets (Database)

Baru: Modern Web Stack

Frontend (Vercel / GitHub Pages)
React, Vue, atau Vanilla HTML/JS

↕️ Standard Fetch API (HTTP/JSON)

Serverless Backend (Vercel API)
Node.js / Express

↕️ SQL Queries / Prisma ORM

Database Asli (Supabase / MongoDB)
PostgreSQL / NoSQL

Migrasi Logika Frontend (JS)

Bagian HTML dan CSS Anda (Tailwind/Bootstrap) 100% dapat digunakan ulang. Anda hanya perlu mengubah cara Javascript Anda berkomunikasi dengan server. Objek google.script.run tidak ada di luar ekosistem Google, sehingga harus diganti dengan standar web universal: Fetch API.

Sebelumnya (GAS)

// Memanggil fungsi Code.gs dari Index.html function ambilDataKaryawan() { google.script.run .withSuccessHandler(function(response) { if(response.success) { renderTable(response.data); } }) .withFailureHandler(function(error) { console.log(error); }) .getDataFromSheet(); // Nama fungsi di Code.gs }

Sekarang (Vercel / Standard Web)

✅

// Memanggil API Endpoints standar async function ambilDataKaryawan() { try { const res = await fetch('/api/get-karyawan', { method: 'GET', headers: { 'Authorization': 'Bearer ' + token } }); const response = await res.json(); if(response.success) { renderTable(response.data); } } catch (error) { console.error(error); } }

💡

Deployment Frontend: Pindahkan file HTML, CSS, JS Anda ke dalam folder komputer lokal, inisialisasi Git, push ke GitHub. Kemudian *login* ke Vercel.com atau Netlify, import repositori tersebut, dan web Anda akan online secara otomatis dengan domain gratis.

Migrasi Code.gs & Google Sheets

Kode di Code.gs menggunakan Javascript murni (V8 Engine), sehingga sangat mudah dipindahkan ke lingkungan Node.js. Sedangkan database dipindahkan dari Google Sheets (kolom/baris) ke database SQL/NoSQL betulan seperti MySQL, PostgreSQL (Supabase), atau Firebase.

Kapasitas Maksimal Database (Baris/Waktu)

SQL menangani jutaan baris dalam hitungan milidetik. Sheets sering gagal (Timeout) saat baris mendekati 100.000+ atau saat concurrent write tinggi.

Perubahan Logika Backend (Simpan Data)

// LAMA: Code.gs (Google Sheets) function saveData(payload) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Users"); sheet.appendRow([payload.id, payload.nama, payload.email]); return { success: true }; }

⬇️

// BARU: Node.js API Route (dengan Supabase/PostgreSQL) import { createClient } from '@supabase/supabase-js'; const supabase = createClient(URL, KEY); export default async function handler(req, res) { const { nama, email } = req.body; // Operasi Insert ke SQL Database Asli const { data, error } = await supabase .from('users') .insert([{ nama: nama, email: email }]); if (error) return res.status(500).json({ success: false }); return res.status(200).json({ success: true, data }); }

⚡ Mengapa SQL (MySQL/PostgreSQL) Jauh Lebih Cepat dari Spreadsheet?

🔍

Indexing (Pencarian Data)

Spreadsheet mencari data dari baris ke baris (Linear Search). SQL menggunakan B-Tree Indexing yang memungkinkan sistem menemukan satu data dari jutaan baris dalam hitungan milidetik (Logarithmic Search).

📡

API Overhead vs Socket

Apps Script berkomunikasi dengan Sheets melalui HTTP REST API (melalui server Google) yang berat. SQL dan Node.js berkomunikasi melalui koneksi Socket Biner TCP/IP langsung yang bebas latensi.

⚙️

Level Eksekusi Query

Untuk memfilter data di GAS, Anda seringkali harus mengunduh seluruh baris ke dalam memori aplikasi (*array*) lalu disortir. SQL memfilter data di level mesin database itu sendiri dan hanya mengirim hasil akhirnya.

🚦

Konkurensi (Concurrency)

Jika 100 orang menyimpan data bersamaan, Sheets akan mengantrekan proses (*Locking*) yang berujung pada error Timeout. SQL dirancang khusus untuk ribuan transaksi paralel (ACID compliant) tanpa terkunci.

Roadmap Migrasi Tahap demi Tahap

Migrasi sistem yang sedang berjalan (Production) harus dilakukan secara bertahap agar tidak terjadi downtime. Ikuti Standar Operasional Prosedur (SOP) migrasi di bawah ini.

Tahap 1: Persiapan Lingkungan & Export Data

• Buat akun di GitHub, Vercel, dan Supabase / MySQL Hosting.
• Buka Google Sheets Anda, export setiap sheet/tabel menjadi file .CSV.
• Di SQL Database, buat tabel baru yang sesuai dengan header Google Sheets Anda. Import file .CSV tadi ke dalam database untuk memigrasikan data lama.

Tahap 2: Setup Backend (Node.js API)

Aksi: Buat folder lokal, jalankan npm init -y. Salin logika dari Code.gs ke dalam file-file Node.js (misal di folder /api untuk Vercel Serverless Functions).

Ganti semua kode SpreadsheetApp menjadi kode Database Driver (contoh: Supabase Client/SQL queries). Kode autentikasi dan LockService GAS diganti dengan JWT Token dan Unique Constraints bawaan database.

Tahap 3: Modifikasi Frontend (Fetch API)

Buka file Index.html dan JS Anda. Cari semua pemanggilan google.script.run atau fungsi buatan gasRun(). Ganti fungsinya agar melakukan pemanggilan HTTP fetch() ke endpoint API Node.js yang baru dibuat di Tahap 2. Pastikan file terstruktur.

Tahap 4: Push ke GitHub & Deploy Vercel

1. Commit semua file ke repositori GitHub.
2. Masuk ke Dashboard Vercel, klik Add New Project.
3. Import repository GitHub tersebut.
4. Masukkan Environment Variables (URL dan API Key Database SQL Anda).
5. Klik Deploy. Selesai! Web App Anda kini berskala enterprise.

© 2026 E-Learning by Muhammad Alfin Ramadhan