Struktur Dasar: Client-Side (HTML/CSS/JS) vs Server-Side (.gs)
konsep bahwa apa yang dilihat pengguna (HTML) terpisah dari logika yang berjalan di server Google (.gs).
Mengirim Data dari Web App ke Server (google.script.run)
Ini adalah konsep paling krusial. tutorial khusus tentang cara kerja google.script.run. Contoh: membuat formulir HTML dan mengirim data dari formulir itu ke fungsi di file .gs untuk diproses.
Mengambil & Menampilkan Data dari Server
kebalikannya: bagaimana fungsi .gs bisa mengambil data (misalnya dari Google Sheets) dan mengirimkannya kembali untuk ditampilkan di halaman HTML.
Styling & Tampilan
Cara menambahkan CSS (internal dalam tag <style> atau eksternal) dan JavaScript sisi klien untuk membuat tampilan lebih menarik dan interaktif.
Tutorial Inti: Fungsionalitas & Interaksi":
(Halaman ini bersifat konseptual untuk membangun fondasi pemahaman pengguna)
Judul Halaman: Dua Dunia dalam Satu Aplikasi: Memahami Client-Side dan Server-Side
Hai! Selamat datang di bagian inti dari pembuatan web app. Sebelum kita menulis banyak kode, ada satu konsep fundamental yang harus kita pahami: perbedaan antara Client-Side (sisi klien) dan Server-Side (sisi server).
Memahami ini akan membantu Anda tahu di mana harus meletakkan kode yang tepat.
Apa itu Server-Side?
Lokasi: Berjalan di komputer/server milik Google.
File: Kode yang Anda tulis di file Kode.gs (atau file .gs lainnya).
Tugas: Inilah "otak" aplikasi Anda. Tugasnya adalah melakukan pekerjaan berat yang tidak bisa dilihat pengguna, seperti:
Mengakses dan memanipulasi data di Google Sheets.
Mengirim email melalui layanan Gmail.
Membuat acara di Google Calendar.
Menjalankan logika bisnis yang kompleks.
Analogi: Anggap ini adalah dapur restoran. Di sinilah semua bahan diolah, dimasak, dan disiapkan.
Apa itu Client-Side?
Lokasi: Berjalan di browser web pengguna (Google Chrome, Firefox, dll).
File: Kode yang Anda tulis di file .html.
Tugas: Inilah "wajah" aplikasi Anda. Tugasnya adalah semua hal yang dilihat dan diinteraksikan oleh pengguna:
Menampilkan teks, gambar, dan tombol.
Mengatur tata letak dan desain (styling dengan CSS).
Menangani klik tombol atau input dari pengguna (menggunakan JavaScript di dalam file HTML).
Analogi: Anggap ini adalah ruang makan restoran. Di sinilah pelanggan melihat menu (tampilan), memilih pesanan (interaksi), dan menikmati hidangan yang disajikan.
Visualisasinya:
[Browser Anda (CLIENT)] <---- Internet ----> [Server Google (SERVER)]
(File .html) (File .gs)
- Tampilan (HTML, CSS) - Logika (Akses Sheets, Gmail)
- Interaksi (JavaScript)
Di tutorial selanjutnya, kita akan belajar bagaimana "pelayan" (google.script.run) membawa pesanan dari ruang makan (Client) ke dapur (Server), dan sebaliknya!
Judul Halaman: Interaksi Pertama: Mengirim Data dari Formulir ke Skrip
Inilah momen ajaibnya! Kita akan membuat formulir sederhana di web app kita dan mengirim data yang diinput pengguna ke skrip di server. Kita akan menggunakan google.script.run.
Tujuan: Membuat kotak input nama dan sebuah tombol. Saat tombol diklik, nama yang diinput akan dikirim ke server dan ditampilkan di Log Apps Script.
Langkah 1: Siapkan Sisi Server (Kode.gs)
Buka file Kode.gs Anda dan tambahkan fungsi baru bernama terimaDataDariUser. Fungsi ini akan menerima satu parameter (data dari pengguna).
JavaScript
// Fungsi utama untuk menampilkan halaman HTML
function doGet() {
return HtmlService.createHtmlOutputFromFile('Formulir');
}
// Fungsi INI yang akan dipanggil dari Client-Side
function terimaDataDariUser(nama) {
// Logger.log adalah cara untuk "mencetak" informasi di server untuk debugging
Logger.log("Nama yang diterima dari user adalah: " + nama);
// Kita juga bisa mengirim balasan kembali ke user
return "Halo, " + nama + "! Data Anda sudah kami terima di server.";
}
Langkah 2: Buat Tampilan Formulir (Formulir.html)
Buat file HTML baru dan beri nama Formulir.html. Salin kode di bawah ini.
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Kirim Data ke Server</h1>
<p>Masukkan nama Anda:</p>
<input type="text" id="inputNama" placeholder="Nama Anda...">
<button onclick="kirimNama()">Kirim Data</button>
<p id="status"></p> <script>
function kirimNama() {
// Ambil elemen status untuk menampilkan pesan nanti
var statusPesan = document.getElementById('status');
statusPesan.innerHTML = "Mengirim data...";
// Ambil nilai dari kotak input
var namaUser = document.getElementById('inputNama').value;
// **INI BAGIAN PENTINGNYA!**
// Memanggil fungsi 'terimaDataDariUser' di file .gs
google.script.run
.withSuccessHandler(updateStatus) // Fungsi yang berjalan jika berhasil
.withFailureHandler(gagalKirim) // Fungsi yang berjalan jika gagal
.terimaDataDariUser(namaUser); // Nama fungsi di .gs dan datanya
}
function updateStatus(pesanBalasan) {
// 'pesanBalasan' adalah nilai yang dikembalikan dari fungsi server
var statusPesan = document.getElementById('status');
statusPesan.innerHTML = "Sukses! " + pesanBalasan;
}
function gagalKirim(error) {
var statusPesan = document.getElementById('status');
statusPesan.innerHTML = "Gagal: " + error.message;
}
</script>
</body>
</html>
Langkah 3: Uji Coba!
Simpan kedua file.
Deploy ulang web app Anda (Pilih "Versi baru").
Buka URL /exec terbaru.
Masukkan nama Anda di kotak input dan klik tombol "Kirim Data".
Anda akan melihat pesan balasan "Sukses! Halo, [Nama Anda]!..." muncul di halaman.
Untuk membuktikan data sampai ke server, buka editor Apps Script, lalu klik Eksekusi > Lihat Log. Anda akan melihat teks "Nama yang diterima dari user adalah: [Nama Anda]".
Selamat! Anda baru saja berhasil membuat jembatan komunikasi dari Client ke Server!
(Halaman ini bisa dibuat setelah halaman 4.2)
Judul Halaman: Menampilkan Data Dinamis dari Google Sheets di Web App
Sekarang kita akan melakukan sebaliknya: mengambil data dari server dan menampilkannya di halaman web. Ini sangat berguna untuk membuat dashboard atau menampilkan daftar data.
Tujuan: Kita akan berpura-pura mengambil daftar tugas dari Google Sheets dan menampilkannya sebagai daftar di web app kita.
(Untuk tutorial ini, kita akan menyimpan data di skrip. Di bagian "Studi Kasus", kita akan menghubungkannya ke Google Sheets sungguhan).
Langkah 1: Siapkan Fungsi Pengambil Data di Kode.gs
Tambahkan fungsi baru ini ke file Kode.gs Anda. Fungsi ini hanya mengembalikan sebuah array data.
JavaScript
function ambilDaftarTugas() {
// Nanti, kode ini akan diganti dengan kode yang membaca data dari Google Sheets
var daftarTugas = [
"Belajar Google Apps Script",
"Membuat Web App pertama",
"Makan siang",
"Menaklukkan dunia"
];
return daftarTugas;
}
Langkah 2: Buat Halaman untuk Menampilkan Data (TampilkanData.html)
Buat file HTML baru bernama TampilkanData.html.
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Daftar Tugas Hari Ini</h1>
<button onclick="muatDataTugas()">Muat Daftar Tugas</button>
<ul id="daftar-tugas">
</ul>
<script>
function muatDataTugas() {
var listElement = document.getElementById('daftar-tugas');
listElement.innerHTML = "<li>Memuat data...</li>"; // Pesan loading
google.script.run
.withSuccessHandler(tampilkanDaftar)
.ambilDaftarTugas(); // Memanggil fungsi tanpa mengirim parameter
}
function tampilkanDaftar(tugasDariServer) {
var listElement = document.getElementById('daftar-tugas');
listElement.innerHTML = ""; // Kosongkan daftar sebelum diisi
// Loop melalui array yang diterima dari server
for (var i = 0; i < tugasDariServer.length; i++) {
var li = document.createElement('li'); // Buat elemen <li> baru
li.textContent = tugasDariServer[i]; // Isi teksnya
listElement.appendChild(li); // Tambahkan ke daftar <ul>
}
}
</script>
</body>
</html>
Langkah 3: Ubah doGet untuk Menampilkan Halaman Baru
Jangan lupa ubah fungsi doGet di Kode.gs untuk sementara agar menampilkan halaman baru ini.
JavaScript
function doGet() {
return HtmlService.createHtmlOutputFromFile('TampilkanData');
}
Langkah 4: Uji Coba!
Deploy ulang dan buka URL web app Anda. Klik tombol "Muat Daftar Tugas", dan Anda akan melihat daftar tugas dari server muncul di halaman! Ini membuktikan Anda berhasil mengambil data dari server dan menampilkannya secara dinamis di client.