Cara Membuat Web App CRUD dengan Google Apps Script dan Google Sheets

Pernahkah Anda merasa kesulitan mengelola data—seperti daftar hadir, nilai, atau inventaris—karena harus berurusan dengan database dan hosting berbayar? Membangun aplikasi web sering kali terdengar rumit dan mahal. Namun, tahukah Anda bahwa Anda bisa membuat sistem pengelolaan data yang canggih secara gratis?

Solusinya adalah dengan memanfaatkan ekosistem Google yang sudah ada. Dalam panduan ini, kita akan membahas cara membuat CRUD Google Apps Script yang terintegrasi langsung dengan Google Sheets. Ini adalah metode yang sangat efektif untuk membangun aplikasi interaktif tanpa perlu menyewa server. Mari kita pelajari langkah demi langkahnya!

Mengapa Menggunakan Google Sheets sebagai Database?

Sebelum masuk ke teknis, penting untuk memahami mengapa kombinasi ini sangat digemari oleh banyak pengembang web dan pendidik.

• 100% Gratis: Selama Anda memiliki akun Google, Anda tidak perlu membayar biaya hosting atau database.

• Mudah Dikelola: Antarmuka Google Sheets sudah sangat familier. Anda bisa melihat perubahan data secara real-time.

• Kolaborasi Tanpa Batas: Anda dapat dengan mudah membagikan spreadsheet ke rekan kerja untuk dipantau bersama.

• Cocok untuk Pemula: Google Apps Script menggunakan bahasa dasar JavaScript (Vanilla JS), HTML, dan CSS yang mudah dipelajari.

Persiapan Membuat Web App CRUD

CRUD adalah singkatan dari Create (membuat), Read (membaca), Update (memperbarui), dan Delete (menghapus). Ini adalah empat fungsi dasar dari setiap aplikasi berbasis data.

Untuk memulai tutorial ini, Anda hanya membutuhkan:

1. Akun Google yang aktif.

2. Pengetahuan dasar tentang HTML, CSS, dan JavaScript.

3. Secangkir kopi untuk menemani proses coding Anda!

Langkah-Langkah Membuat CRUD Google Apps Script

Berikut adalah panduan praktis untuk mulai membangun aplikasi web sederhana Anda. Sebagai contoh, kita akan membuat aplikasi Sistem Data Siswa.

1. Siapkan Database di Google Sheets

Langkah pertama adalah menyiapkan "rumah" bagi data Anda.

• Buat spreadsheet baru di Google Sheets.

• Beri nama dokumen tersebut, misalnya "Database_Siswa".

• Pada baris pertama (Row 1), buat header tabel: ID, Nama, Kelas, dan Jurusan.

2. Buka Editor Google Apps Script

Setelah tabel siap, saatnya menghubungkannya dengan skrip.

• Pada menu Google Sheets, klik Ekstensi > Apps Script.

• Anda akan diarahkan ke tab baru berisi editor kode.

• Ubah nama proyek di kiri atas (misalnya: "WebApp_Siswa").

3. Tulis Kode Backend (Code.gs)

Di file Code.gs, kita akan menulis logika untuk menampilkan antarmuka web dan fungsi CRUD dasar. Hapus kode yang ada dan masukkan fungsi utama berikut:

JavaScript

// Fungsi untuk memuat file HTML
function doGet() {
  return HtmlService.createTemplateFromFile('Index')
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('Aplikasi Data Siswa');
}
// Fungsi (Create) untuk menambah data ke Sheet
function tambahData(dataForm) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var id = new Date().getTime(); // ID Unik
  sheet.appendRow([id, dataForm.nama, dataForm.kelas, dataForm.jurusan]);
  return "Data berhasil ditambahkan!";
}

Catatan: Anda dapat menambahkan fungsi bacaData(), editData(), dan hapusData() dengan logika serupa memanfaatkan metode dari SpreadsheetApp.

4. Buat Tampilan Frontend (Index.html)

Aplikasi web membutuhkan antarmuka agar pengguna dapat menginput data.

• Di editor Apps Script, klik ikon + (Tambah File) > HTML.

• Beri nama file Index (tanpa .html).

• Masukkan struktur HTML dasar yang dilengkapi dengan Vanilla JavaScript untuk mengirim data ke fungsi backend (google.script.run).

Anda bisa mempercantik tampilan ini menggunakan framework CSS seperti Tailwind CSS atau Bootstrap nantinya, agar antarmuka aplikasi menjadi responsif (Progressive Web App).

5. Lakukan Deployment Web App

Langkah terakhir adalah mempublikasikan skrip Anda agar bisa diakses melalui browser:

1. Klik tombol Terapkan (Deploy) di sudut kanan atas > Deployment baru.

2. Pilih jenis "Aplikasi Web" (ikon gerigi).

3. Pada bagian 'Akses', pilih Siapa saja (agar bisa diakses publik).

4. Klik Terapkan dan berikan izin akses ke akun Google Anda.

5. Salin URL Web App yang muncul. URL ini siap dibagikan!

Kesimpulan

Membuat aplikasi web tidak melulu membutuhkan resource yang berat dan mahal. Dengan menguasai cara membuat CRUD Google Apps Script, Anda sudah bisa merancang aplikasi absensi, simulator pembelajaran interaktif, atau sistem manajemen inventaris secara mandiri. Google Sheets bertindak sebagai database yang tangguh, sementara Apps Script menjadi jembatan logikanya.

Bagaimana, tertarik untuk segera mempraktikkannya? Jika Anda memiliki pertanyaan saat mencoba tutorial ini, atau punya ide aplikasi menarik yang ingin dibuat, bagikan di kolom komentar di bawah! Jangan lupa bagikan artikel ini ke rekan-rekan developer atau pendidik lainnya.