Langkah-Langkah Membuat Web App Sederhana dengan Google Apps Script

Pelajari cara membuat Web App sederhana menggunakan Google Apps Script mulai dari membuat project, menulis kode, hingga deployment. Disertai contoh kode lengkap dan tombol copy seperti GitHub.

Google Apps Script merupakan salah satu layanan gratis dari Google yang memungkinkan pengguna membangun aplikasi berbasis web dengan cepat tanpa harus menggunakan server sendiri. Melalui platform ini, Anda dapat memanfaatkan berbagai layanan Google seperti Google Sheets, Google Forms, Gmail, hingga Google Drive untuk membuat sistem otomatisasi maupun aplikasi sederhana.

Salah satu fitur yang paling menarik adalah kemampuan untuk membuat Web App. Dengan fitur ini, Anda dapat membuat halaman web interaktif menggunakan HTML, CSS, dan JavaScript yang dijalankan melalui infrastruktur milik Google.

Pada artikel ini, Anda akan mempelajari langkah-langkah membuat Web App sederhana menggunakan Google Apps Script lengkap dengan contoh kode yang dapat langsung dicoba.

Apa Itu Google Apps Script?

Google Apps Script adalah platform pengembangan berbasis cloud yang menggunakan bahasa JavaScript. Layanan ini dirancang untuk memperluas fungsi Google Workspace sehingga pengguna dapat mengotomatisasi pekerjaan atau membangun aplikasi ringan.

Keunggulan Google Apps Script antara lain:

Gratis digunakan menggunakan akun Google.
Tidak memerlukan hosting terpisah.
Terintegrasi dengan layanan Google.
Menggunakan JavaScript yang mudah dipelajari.
Dapat dipublikasikan sebagai Web App.

Persiapan Sebelum Membuat Web App

Sebelum mulai membuat aplikasi, pastikan Anda telah menyiapkan beberapa hal berikut:

Memiliki akun Google aktif.
Koneksi internet stabil.
Browser terbaru.
Pemahaman dasar HTML dan JavaScript.

Tips: Google Apps Script dapat diakses langsung melalui browser sehingga Anda tidak perlu menginstal software tambahan.

Langkah 1: Membuat Project Google Apps Script

Ikuti langkah berikut:

Buka Google Drive.
Klik Baru.
Pilih Lainnya.
Pilih Google Apps Script.
Beri nama project sesuai kebutuhan.

Setelah editor terbuka, Anda akan melihat file default bernama Code.gs. File inilah yang akan digunakan untuk menuliskan logika aplikasi.

Langkah 2: Membuat Fungsi doGet()

Fungsi doGet() digunakan untuk menampilkan halaman HTML ketika URL Web App diakses. Fungsi ini menjadi pintu masuk utama aplikasi.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Web App Sederhana');
}

Penjelasan Kode

doGet() akan dipanggil saat URL dibuka.
HtmlService digunakan untuk menghasilkan halaman HTML.
createHtmlOutputFromFile() memanggil file HTML bernama Index.
setTitle() mengatur judul halaman.

Membuat File HTML

Setelah selesai membuat file Code.gs, langkah berikutnya adalah membuat tampilan antarmuka.

Caranya:

Klik ikon "+" pada editor.
Pilih HTML.
Beri nama Index.

Pada bagian berikutnya, kita akan membuat tampilan HTML sederhana beserta form interaktif yang terhubung dengan Google Apps Script. Selain itu, Anda juga akan mempelajari cara memproses data dari form menggunakan JavaScript server-side dan melakukan deployment agar aplikasi dapat diakses publik melalui URL khusus dari Google.

Dengan memahami dasar-dasar ini, Anda dapat mengembangkan aplikasi menjadi sistem absensi, formulir pendaftaran, buku tamu digital, hingga dashboard berbasis Google Sheets.

Langkah 3: Membuat Tampilan HTML

Setelah file Code.gs selesai dibuat, langkah berikutnya adalah membangun antarmuka pengguna menggunakan HTML. Pada contoh ini, kita akan membuat form sederhana yang meminta nama pengguna, lalu menampilkan pesan dari server menggunakan Google Apps Script.

Form sederhana seperti ini sering digunakan sebagai dasar pembuatan:

Buku tamu digital
Form pendaftaran
Sistem absensi sederhana
Input data ke Google Sheets
Dashboard internal perusahaan

Masukkan kode berikut ke dalam file Index.html.

Index.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>

  <h2>Web App Sederhana</h2>

  <p>Masukkan nama Anda:</p>

  <input type="text" id="nama" placeholder="Nama Anda">

  <button onclick="kirimData()">
    Kirim
  </button>

  <p id="hasil"></p>

  <script>

    function kirimData(){

      const nama =
      document.getElementById("nama").value;

      google.script.run
      .withSuccessHandler(function(response){

          document.getElementById("hasil")
          .innerHTML = response;

      })
      .prosesData(nama);

    }

  </script>

</body>

</html>

Penjelasan Kode HTML

input digunakan untuk menerima nama pengguna.
button digunakan untuk menjalankan fungsi JavaScript.
google.script.run berfungsi memanggil fungsi server-side dari Apps Script.
withSuccessHandler() digunakan untuk menerima hasil dari server.
innerHTML dipakai untuk menampilkan respons ke halaman.

Langkah 4: Membuat Fungsi Pemrosesan Data

Agar data dari HTML dapat diproses, kita perlu membuat fungsi baru di file Code.gs.

Tambahkan kode berikut tepat di bawah fungsi doGet().

Code.gs

function prosesData(nama) {

  return "Halo, " + nama +
         "! Selamat datang di Web App Google Apps Script.";

}

Cara Kerja Fungsi

Ketika pengguna menekan tombol Kirim, browser akan memanggil fungsi JavaScript kirimData(). Fungsi tersebut mengirimkan nilai input ke server menggunakan google.script.run.

Google Apps Script kemudian menjalankan fungsi prosesData() dan mengembalikan hasilnya ke halaman web.

Hasil akhirnya akan terlihat seperti berikut:

Jika pengguna memasukkan nama: Budi maka halaman akan menampilkan: Halo, Budi! Selamat datang di Web App Google Apps Script.

Memahami google.script.run

Bagi pemula, bagian ini sering dianggap membingungkan. Padahal konsepnya cukup sederhana.

Google Apps Script membagi kode menjadi dua sisi:

1. Client Side

Kode yang berjalan di browser pengguna. Contohnya:

HTML
CSS
JavaScript pada halaman

2. Server Side

Kode yang berjalan di server Google. Contohnya:

Code.gs
Akses Google Sheets
Akses Gmail
Akses Google Drive

Fungsi google.script.run bertindak sebagai jembatan antara browser dan server.

Ilustrasi Alur Kerja Web App

Pengguna membuka URL Web App.
Fungsi doGet() dijalankan.
File HTML ditampilkan.
Pengguna mengisi form.
JavaScript memanggil google.script.run.
Server menjalankan fungsi Apps Script.
Respons dikirim kembali ke browser.
Hasil ditampilkan tanpa me-refresh halaman.

Pengembangan Lebih Lanjut

Setelah memahami konsep dasar di atas, Anda dapat mengembangkan aplikasi menjadi lebih kompleks, misalnya:

Menyimpan data ke Google Sheets.
Mengirim email otomatis melalui Gmail.
Membuat sistem absensi online.
Membangun dashboard laporan.
Membuat aplikasi reservasi sederhana.
Membuat formulir pendaftaran peserta.

Contoh Integrasi dengan Google Sheets

Salah satu penggunaan paling populer adalah menyimpan data form ke spreadsheet. Google Sheets dapat berfungsi sebagai database sederhana tanpa biaya tambahan.

Pada bagian selanjutnya, Anda akan mempelajari cara melakukan deployment Web App agar dapat diakses melalui URL publik serta contoh penyimpanan data ke Google Sheets menggunakan Apps Script.

Langkah 5: Menyimpan Data ke Google Sheets

Salah satu alasan banyak orang menggunakan Google Apps Script adalah kemampuannya terhubung langsung dengan Google Sheets. Dengan fitur ini, spreadsheet dapat berfungsi sebagai database sederhana tanpa perlu menggunakan layanan database eksternal.

Sebagai contoh, berikut fungsi untuk menyimpan nama yang diinput pengguna ke Google Sheets.

Code.gs

function simpanKeSpreadsheet(nama){

  const spreadsheetId =
    "MASUKKAN_ID_SPREADSHEET_ANDA";

  const sheet =
    SpreadsheetApp
      .openById(spreadsheetId)
      .getSheetByName("Sheet1");

  sheet.appendRow([
    new Date(),
    nama
  ]);

  return "Data berhasil disimpan.";
}

Cara Mendapatkan Spreadsheet ID

Buka Google Sheets yang akan digunakan, lalu perhatikan URL pada browser.

Contoh URL:

https://docs.google.com/spreadsheets/d/1ABCDEF123456XYZ789/edit

Bagian setelah /d/ dan sebelum /edit merupakan Spreadsheet ID yang harus dimasukkan ke dalam kode.

Menghubungkan Form dengan Google Sheets

Jika ingin menyimpan data sekaligus menampilkan pesan sukses, ubah kode JavaScript pada file HTML menjadi seperti berikut.

Index.html

function kirimData(){

  const nama =
    document.getElementById("nama").value;

  google.script.run
    .withSuccessHandler(function(response){

      document.getElementById("hasil")
        .innerHTML = response;

      document.getElementById("nama")
        .value = "";

    })
    .simpanKeSpreadsheet(nama);

}

Dengan perubahan tersebut, setiap nama yang dikirim pengguna akan otomatis tersimpan ke Google Sheets.

Langkah 6: Melakukan Deployment Web App

Setelah proses pengembangan selesai, saatnya mempublikasikan aplikasi agar dapat diakses melalui URL.

Ikuti langkah berikut:

Klik tombol Deploy.
Pilih New Deployment.
Klik ikon roda gigi.
Pilih Web App.
Isi deskripsi deployment.
Pada bagian Execute as, pilih: Me.
Pada bagian Who has access, pilih: Anyone atau sesuai kebutuhan.
Klik Deploy.
Berikan izin akses yang diminta Google.
Salin URL Web App yang diberikan.

Penting: Jika Anda melakukan perubahan kode setelah deployment, lakukan deployment ulang atau gunakan fitur Manage Deployments untuk memperbarui versi aplikasi.

Tips Keamanan Saat Menggunakan Google Apps Script

Meskipun mudah digunakan, tetap perhatikan aspek keamanan berikut:

Jangan membagikan Spreadsheet ID kepada pihak yang tidak berkepentingan.
Batasi akses deployment sesuai kebutuhan.
Lakukan validasi input pengguna.
Hindari menyimpan informasi sensitif secara terbuka.
Gunakan akun Google yang aman dan mengaktifkan verifikasi dua langkah.

Kelebihan Google Apps Script untuk Web App

Tidak membutuhkan server hosting terpisah.
Gratis digunakan.
Terintegrasi dengan layanan Google.
Mudah dipelajari karena menggunakan JavaScript.
Cocok untuk prototipe maupun aplikasi internal.
Deployment sangat cepat.

Kekurangan yang Perlu Diperhatikan

Terdapat batas kuota penggunaan harian.
Tidak cocok untuk aplikasi berskala sangat besar.
Kustomisasi server lebih terbatas dibanding framework tradisional.
Performa bergantung pada layanan Google.

FAQ Seputar Google Apps Script

Apakah Google Apps Script gratis?

Ya. Google Apps Script dapat digunakan secara gratis menggunakan akun Google, meskipun terdapat batas kuota harian tertentu.

Apakah Google Apps Script bisa digunakan sebagai backend?

Bisa. Banyak pengembang memanfaatkan Apps Script sebagai backend sederhana yang terhubung dengan Google Sheets, Gmail, dan Drive.

Apakah harus menguasai JavaScript?

Tidak harus mahir. Pemahaman dasar JavaScript sudah cukup untuk mulai membangun Web App sederhana.

Bisakah Web App diakses publik?

Bisa. Saat deployment, Anda dapat memilih opsi akses publik sehingga siapa pun yang memiliki URL dapat membuka aplikasi.

Apakah Google Sheets dapat dijadikan database?

Untuk kebutuhan sederhana, Google Sheets sering digunakan sebagai database ringan yang mudah dikelola.

Kesimpulan

Membuat Web App sederhana menggunakan Google Apps Script merupakan solusi praktis bagi siapa saja yang ingin membangun aplikasi berbasis web tanpa harus mengelola server sendiri. Dengan memanfaatkan JavaScript serta integrasi bawaan Google Workspace, Anda dapat mengembangkan berbagai jenis aplikasi secara cepat dan efisien.

Dalam tutorial ini, Anda telah mempelajari cara membuat project baru, menggunakan fungsi doGet(), membangun antarmuka HTML, menghubungkan browser dengan server menggunakan google.script.run, menyimpan data ke Google Sheets, hingga melakukan deployment agar aplikasi dapat diakses secara online.

Setelah memahami dasar-dasar tersebut, Anda dapat mengembangkan proyek menjadi sistem absensi, formulir pendaftaran, dashboard laporan, CRM sederhana, hingga berbagai kebutuhan otomasi bisnis lainnya.

Teruslah bereksperimen dan eksplorasi kemampuan Google Apps Script. Semakin sering Anda mencoba, semakin banyak solusi digital yang dapat dibangun hanya dengan memanfaatkan layanan gratis dari Google.

Lokasi:

Go Tagulandang

Langkah-Langkah Membuat Web App Sederhana dengan Google Apps Script

Apa Itu Google Apps Script?

Persiapan Sebelum Membuat Web App

Langkah 1: Membuat Project Google Apps Script

Langkah 2: Membuat Fungsi doGet()

Penjelasan Kode

Membuat File HTML

Langkah 3: Membuat Tampilan HTML

Penjelasan Kode HTML

Langkah 4: Membuat Fungsi Pemrosesan Data

Cara Kerja Fungsi

Memahami google.script.run

1. Client Side

2. Server Side

Ilustrasi Alur Kerja Web App

Pengembangan Lebih Lanjut

Contoh Integrasi dengan Google Sheets

Langkah 5: Menyimpan Data ke Google Sheets

Cara Mendapatkan Spreadsheet ID

Menghubungkan Form dengan Google Sheets

Langkah 6: Melakukan Deployment Web App

Tips Keamanan Saat Menggunakan Google Apps Script

Kelebihan Google Apps Script untuk Web App

Kekurangan yang Perlu Diperhatikan

FAQ Seputar Google Apps Script

Apakah Google Apps Script gratis?

Apakah Google Apps Script bisa digunakan sebagai backend?

Apakah harus menguasai JavaScript?

Bisakah Web App diakses publik?

Apakah Google Sheets dapat dijadikan database?

Kesimpulan

Posting Komentar untuk "Langkah-Langkah Membuat Web App Sederhana dengan Google Apps Script"

Menu Halaman Statis