Untuk membuat dan menerbitkan aplikasi web sederhana menggunakan **Google Apps Script**, Anda tidak memerlukan server eksternal karena seluruh kode berjalan di infrastruktur cloud Google dan terhubung langsung dengan akun Google Anda.
Berikut adalah panduan langkah demi langkah untuk membuat halaman web sederhana (misalnya menampilkan data atau antarmuka interaktif) dan mempublikasikannya secara publik:
1. **Buka Google Apps Script:** Masuk ke platform pengelolaan skrip Google.
Buka browser Anda dan akses situs **[script.google.com](https://script.google.com/)**. Pastikan Anda sudah masuk menggunakan akun Google Anda, lalu klik tombol **New Project** (Proyek Baru) di pojok kiri atas.
2. **Berikan Nama Proyek:** Ganti nama proyek agar mudah dikenali.
Di bagian sudut kiri atas halaman editor (biasanya tertulis *Untitled project*), klik dan ubah namanya menjadi sesuatu yang relevan, misalnya `WebSederhanaSaya`.
3. **Tulis Kode Sisi Server (Code.gs):** Fungsi doGet() wajib ada untuk merender halaman web.
Di file `Code.gs` yang terbuka secara otomatis, hapus semua kode bawaan dan tempelkan kode berikut:
```javascript
function doGet() {
// Mengarahkan ke file HTML bernama 'Index' yang akan kita buat
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('Aplikasi Web Sederhana Saya')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
```
4. **Buat File Tampilan (Index.html):** Membuat tampilan antarmuka pengguna.
1. Di sebelah kiri (kolom file), klik ikon tanda tambah (**+**) lalu pilih **HTML**.
2. Beri nama file tersebut dengan persis: `Index` (tanpa perlu menambahkan ekstensi `.html` karena sistem akan menambahkannya otomatis).
3. Hapus kode bawaan di dalam file `Index.html` tersebut, lalu masukkan kode HTML/CSS/JavaScript berikut:
```html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<title>Web Sederhana Google Apps Script</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f4f7f6; }
.card { background: white; padding: 30px; border-radius: 8px; display: inline-block; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
h1 { color: #2c3e50; }
button { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #2980b9; }
</style>
</head>
<body>
<div class="card">
<h1>Halo dari Google Apps Script!</h1>
<p>Halaman web ini di-hosting langsung menggunakan akun Google Anda.</p>
<button onclick="sapaUser()">Klik Saya</button>
<p id="pesan" style="margin-top: 20px; font-weight: bold; color: #27ae60;"></p>
</div>
<script>
function sapaUser() {
document.getElementById('pesan').innerText = "Terima kasih sudah mencoba web sederhana ini!";
}
</script>
</body>
</html>
```
5. **Deploy sebagai Web App:** Menyiapkan tautan publik agar bisa diakses siapa saja.
1. Di sudut kanan atas editor, klik tombol **Deploy** lalu pilih **New deployment** (Penerapan baru).
2. Klik ikon roda gigi/ikon jenis penerapan di sebelah kiri, lalu pilih **Web app**.
3. Isi kolom yang tersedia:
* **Description:** Tulis keterangan bebas, misal `Versi 1`.
* **Execute as:** Pilih **Me** (Anda).
* **Who has access:** Ubah menjadi **Anyone** (Siapa saja, bahkan yang tidak punya akun Google) agar link bisa diakses bebas.
4. Klik **Deploy**.
5. Google akan meminta izin akses (*Authorize access*). Pilih akun Google Anda, klik *Advanced* (Lanjutan), lalu klik *Go to Untitled project (unsafe)* — ini aman karena ini adalah kode buatan Anda sendiri — lalu klik **Allow** (Izinkan).
6. **Salin URL Web App:** Simpan URL aplikasi Anda.
Setelah proses *deployment* selesai, Anda akan melihat jendela kecil berisi **Web app URL**. Salin tautan tersebut dan buka di tab browser baru. Halaman web interaktif Anda kini sudah online dan bisa diakses dari perangkat apa pun!
---
