Bikin Website Internal Gratis Tanpa Hosting & Coding: Panduan Google Sheets + Apps Script + Gemini
Di era digital, punya website internal untuk portofolio, inventory, atau pembukuan biasanya berarti bayar domain, sewa hosting, atau rekrut developer. Tapi tahukah kamu? Google menyediakan semua yang kamu butuhkan secara 100% gratis.
Dengan kombinasi Google Sheets (sebagai database), Google Apps Script (sebagai backend & frontend), dan Gemini AI (sebagai asisten coding), kamu bisa deploy website fungsional dalam hitungan menit — tanpa biaya, tanpa server, dan tanpa perlu jago programming.
Berikut panduan lengkapnya, disusun agar pemula pun bisa langsung praktik.
🔍 Mengapa Stack Ini Jadi "Rahasia" Profesional?
Arsitekturnya sangat sederhana:
✅ Tanpa CORS: Frontend & backend berada di satu URL (
✅ Aman: Koneksi terenkripsi otomatis oleh Google
✅ Gratis total: Tanpa domain, tanpa hosting, tanpa API berbayar
✅ Cocok untuk: Portofolio freelancer, stok gudang UMKM, pembukuan harian, atau dashboard tim internal
*.script.google.com)✅ Aman: Koneksi terenkripsi otomatis oleh Google
✅ Gratis total: Tanpa domain, tanpa hosting, tanpa API berbayar
✅ Cocok untuk: Portofolio freelancer, stok gudang UMKM, pembukuan harian, atau dashboard tim internal
🛠️ Langkah 1: Siapkan Database di Google Sheets
- Buka sheets.new
- Ganti nama
Sheet1menjadiData - Baris 1 = Header (sesuaikan kebutuhan):
- 📁 Inventory:
Kode | Nama | Stok | Harga | Kategori | Lokasi - 💼 Portofolio:
Judul | Link | Deskripsi | Tahun | GambarURL - 📒 Pembukuan:
Tanggal | Keterangan | Masuk | Keluar | Kategori | Saldo
- 📁 Inventory:
- Salin ID Spreadsheet dari URL (bagian antara
/d/dan/edit)
💻 Langkah 2: Bangun Backend & Frontend di Apps Script
- Buka script.google.com → Proyek Baru
- Di file
Code.gs, tempel kode backend berikut:
javascript
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setTitle('Aplikasi Internal').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
const SHEET_ID = 'MASUKKAN_ID_SPREADSHEET_DISINI';
const SHEET_NAME = 'Data';
function getSheet() { return SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME); }
function getData() {
const sheet = getSheet();
const data = sheet.getDataRange().getValues();
if (data.length < 2) return { headers: data[0] || [], rows: [] };
const headers = data.shift();
return { headers, rows: data };
}
function addData(row) { getSheet().appendRow(row); return { success: true }; }
function updateData(index, row) { getSheet().getRange(index + 2, 1, 1, row.length).setValues([row]); return { success: true }; }
- Klik File → Baru → HTML, beri nama
Index. Tempel kode frontend (tersedia di repositori/template gratis, atau generate pakai AI di langkah berikutnya). - Ganti
MASUKKAN_ID_SPREADSHEET_DISINIdengan ID Sheets kamu.
🚀 Langkah 3: Deploy & Publikasi
- Klik Deploy → New Deployment
- Pilih type: Web App
- Atur:
- Execute as: Me
- Who has access: Anyone (atau Anyone with Google account untuk akses terbatas)
- Klik Deploy → Izinkan akses → Salin URL Web App
- 🔗 URL ini adalah website kamu. Bisa dibuka di HP, laptop, atau dibagikan ke tim.
🤖 Langkah 4: Upgrade Cepat Pakai Gemini AI
`"Saya punya web app Google Apps Script dengan tabel dinamis dari Google Sheets. Tolong buatkan kode HTML/CSS/JS yang kompatibel dengan google.script.run untuk:
- Fitur pencarian real-time (filter saat ketik)
- Tampilan card responsif di mobile
- Tombol Export ke CSV
Pastikan tidak pakai library eksternal dan bisa langsung ditempel di Index.html."`
Gemini akan memberi kode siap pakai. Tempel di bagian
<script> dan <style> di Index.html.⚠️ Batasan & Cara Mengatasinya
|
Batasan
|
Solusi Praktis
|
|---|---|
|
Eksekusi max 6 menit
|
Jangan load >3.000 baris sekaligus. Gunakan filter atau pagination
|
|
URL panjang (
script.google.com/...) |
Shortlink pakai bit.ly atau buat redirect sederhana di GitHub Pages
|
|
Kuota harian Apps Script
|
Cache data dengan
PropertiesService, hindari loop berat |
|
Tidak ada login bawaan
|
Set akses ke
Anyone with Google account + validasi email di backend |
🏁 Penutup: Teknologi Gratis Sudah Cukup Canggih
Kamu tidak perlu menunggu modal besar atau tim developer untuk membangun sistem internal. Google Sheets + Apps Script + AI adalah kombinasi yang matang, aman, dan siap pakai.
Mulai dari yang sederhana: satu sheet, satu script, satu deploy.
Uji, perbaiki, tambahkan fitur lewat AI.
Dalam seminggu, kamu sudah punya website internal yang bekerja untukmu — tanpa biaya sepeser pun.
Uji, perbaiki, tambahkan fitur lewat AI.
Dalam seminggu, kamu sudah punya website internal yang bekerja untukmu — tanpa biaya sepeser pun.
Selamat mencoba, dan jangan lupa dokumentasikan progresmu. Siapa tahu, tutorial buatanmu berikutnya akan membantu ribuan orang lain. 🚀
Komentar
0Tinggalkan Komentar