MATERI GOOGLE APPS SCRIPT: BOUND SCRIPT

Pendahuluan

Dalam pengembangan aplikasi berbasis Google Workspace, Google Apps Script menjadi salah satu teknologi yang sangat populer untuk membuat otomatisasi, dashboard, sistem informasi, hingga web app berbasis cloud.

Salah satu konsep penting dalam Google Apps Script adalah Bound Script.

Bound Script sering digunakan oleh developer untuk membuat:

Dashboard sekolah
Sistem absensi
Web app berbasis spreadsheet
Otomatisasi laporan
Generate sertifikat
Sistem monitoring
Integrasi Google Form
Sistem administrasi

Materi ini membahas secara lengkap tentang:

Pengertian Bound Script
Cara kerja
Struktur project
Perbedaan dengan Standalone Script
Studi kasus
Implementasi dashboard
Contoh kode
Best practice

1. Apa Itu Google Apps Script?

Google Apps Script adalah platform scripting berbasis JavaScript yang dikembangkan oleh Google untuk mengotomatisasi dan mengembangkan aplikasi di ekosistem Google Workspace.

Google Apps Script dapat digunakan untuk:

Mengolah data spreadsheet
Mengirim email otomatis
Membuat dashboard
Membuat web app
Menghubungkan API
Membuat sistem administrasi
Otomatisasi dokumen

Google Apps Script menggunakan sintaks JavaScript.

Contoh sederhana:

function hello(){
  Logger.log("Hello World");
}

2. Pengertian Bound Script

Bound Script adalah project Google Apps Script yang terikat langsung pada file Google Workspace tertentu.

File yang dapat menggunakan Bound Script:

Google Sheets
Google Docs
Google Forms
Google Slides

Artinya:

Script menjadi bagian dari file tersebut.

3. Analogi Bound Script

Bayangkan:

Google Spreadsheet = rumah
Apps Script = mesin otomatis

Jika menggunakan Bound Script:

Mesin otomatis dipasang langsung di rumah tersebut.

Jadi script hanya bekerja untuk rumah itu.

4. Cara Membuat Bound Script

Melalui Google Sheets

Langkah-langkah:

Buka Google Spreadsheet
Klik menu Extensions
Pilih Apps Script
Otomatis terbentuk project Bound Script

5. Struktur Bound Script

Contoh struktur:

Spreadsheet
│
├── Sheet Data
├── Sheet Dashboard
│
└── Apps Script
    ├── Code.gs
    ├── Index.html
    ├── JavaScript.html
    └── css.html

Penjelasan:

File	Fungsi
Code.gs	Backend Apps Script
Index.html	Halaman utama
JavaScript.html	Script frontend
css.html	Styling

6. Karakteristik Bound Script

1. Terikat pada File

Script hanya bekerja untuk file tertentu.

2. Bisa Mengakses File Aktif

Contoh:

SpreadsheetApp.getActiveSpreadsheet()

3. Tidak Memerlukan ID File

Karena script sudah mengetahui file induknya.

4. Mudah Digunakan

Cocok untuk pemula.

7. Cara Kerja Bound Script

Saat script dijalankan:

Script membaca file aktif
Mengambil data
Memproses data
Menampilkan hasil

Contoh:

function getData(){

  const sheet = SpreadsheetApp
    .getActiveSpreadsheet()
    .getSheetByName('Data');

  const data = sheet
    .getDataRange()
    .getValues();

  Logger.log(data);
}

8. Fungsi Penting pada Bound Script

SpreadsheetApp

Digunakan untuk mengakses spreadsheet.

Contoh:

SpreadsheetApp.getActiveSpreadsheet()

DocumentApp

Digunakan untuk Google Docs.

DocumentApp.getActiveDocument()

FormApp

Digunakan untuk Google Forms.

FormApp.getActiveForm()

9. Contoh Bound Script pada Google Sheets

Studi Kasus: Dashboard Penjualan

Spreadsheet berisi:

Data produk
Data transaksi
Data pelanggan

Script Mengambil Data

function getSalesData(){

  const sheet = SpreadsheetApp
    .getActiveSpreadsheet()
    .getSheetByName('Sales');

  const data = sheet
    .getDataRange()
    .getValues();

  return data;
}

Penjelasan

Kode	Fungsi
getActiveSpreadsheet()	Mengambil spreadsheet aktif
getSheetByName()	Mengambil sheet tertentu
getDataRange()	Mengambil seluruh data
getValues()	Mengambil nilai data

10. Bound Script pada Google Form

Studi Kasus: Form Pendaftaran

Ketika user submit form:

Data tersimpan
Email otomatis terkirim
Notifikasi admin muncul

Contoh Script

function onFormSubmit(e){

  const email = e.namedValues['Email'][0];

  MailApp.sendEmail(
    email,
    'Pendaftaran Berhasil',
    'Terima kasih telah mendaftar'
  );
}

11. Bound Script pada Google Docs

Studi Kasus: Generate Surat Otomatis

Contoh Script

function replaceText(){

  const doc = DocumentApp
    .getActiveDocument();

  const body = doc.getBody();

  body.replaceText(
    '{{NAMA}}',
    'Fajar'
  );
}

12. Bound Script untuk Web App

Google Apps Script dapat digunakan untuk membuat web app.

Struktur Project Web App

Apps Script
│
├── Code.gs
├── Index.html
├── css.html
└── JavaScript.html

13. Fungsi doGet()

Digunakan sebagai entry point web app.

function doGet(){

  return HtmlService
    .createTemplateFromFile('Index')
    .evaluate();
}

14. Fungsi include()

Digunakan untuk memanggil file HTML lain.

function include(filename){

  return HtmlService
    .createHtmlOutputFromFile(filename)
    .getContent();
}

15. Contoh Index.html

<!DOCTYPE html>
<html>
<head>

<?!= include('css'); ?>

</head>
<body>

<h1>Dashboard Penjualan</h1>

<?!= include('JavaScript'); ?>

</body>
</html>

16. Contoh css.html

<style>
body{
  font-family:Arial;
  background:#f5f5f5;
}

.card{
  background:white;
  padding:20px;
  border-radius:10px;
}
</style>

17. Contoh JavaScript.html

<script>

google.script.run
  .withSuccessHandler(showData)
  .getSalesData();

function showData(data){
  console.log(data);
}

</script>

18. Kelebihan Bound Script

Kelebihan	Penjelasan
Mudah dibuat	Langsung dari spreadsheet
Praktis	Tidak perlu ID file
Cepat dikembangkan	Cocok dashboard
Integrasi mudah	Dengan Google Workspace
Gratis	Menggunakan layanan Google

19. Kekurangan Bound Script

Kekurangan	Penjelasan
Terikat satu file	Tidak reusable
Kurang fleksibel	Untuk sistem besar
Sulit scaling	Jika aplikasi kompleks

20. Perbedaan Bound Script dan Standalone Script

Bound Script	Standalone Script
Terikat file	Berdiri sendiri
Menggunakan file aktif	Harus pakai ID file
Cocok dashboard kecil	Cocok aplikasi besar
Mudah dibuat	Lebih kompleks

21. Contoh Standalone Script

SpreadsheetApp.openById(
  'SPREADSHEET_ID'
)

22. Trigger pada Bound Script

Trigger digunakan untuk menjalankan script otomatis.

Jenis Trigger

Trigger	Fungsi
onOpen	Saat file dibuka
onEdit	Saat data diubah
onFormSubmit	Saat form dikirim
Time-driven	Berdasarkan waktu

Contoh onOpen()

function onOpen(){

  SpreadsheetApp.getUi()
    .createMenu('Dashboard')
    .addItem('Refresh', 'refreshData')
    .addToUi();
}

23. Studi Kasus Sistem Absensi

Kebutuhan Sistem

Input absensi siswa
Rekap otomatis
Dashboard kehadiran
Grafik absensi
Export PDF

Solusi Bound Script

Spreadsheet:

Sheet siswa
Sheet absensi
Sheet laporan

Apps Script:

Input data
Generate laporan
Menampilkan dashboard

24. Studi Kasus Dashboard UMKM

Fitur Dashboard

Data penjualan
Grafik revenue
Produk terlaris
Laporan bulanan

Teknologi

Frontend:

HTML
CSS
Bootstrap
Google Charts

Backend:

Google Apps Script

Database:

Google Sheets

25. Integrasi Google Charts

Contoh

<script>
google.charts.load('current', {
  packages:['corechart']
});
</script>

26. Best Practice Bound Script

1. Pisahkan File

Gunakan:

Code.gs
Index.html
CSS
JavaScript

2. Gunakan include()

Agar code lebih rapi.

3. Gunakan Nama Function Jelas

Contoh:

getSalesData()

4. Hindari Hardcode

Gunakan variabel.

5. Gunakan Validasi Data

Untuk keamanan.

27. Arsitektur Bound Script Dashboard

User Browser
      │
      ▼
Frontend HTML/CSS/JS
      │
      ▼
Google Apps Script
      │
      ▼
Google Spreadsheet

28. Kapan Menggunakan Bound Script?

Gunakan jika:

Dashboard sederhana
Sistem sekolah
Sistem laporan
Monitoring data
Otomatisasi spreadsheet
Web app sederhana

29. Kapan Tidak Menggunakan Bound Script?

Hindari jika:

Sistem sangat besar
Multi database
Kompleksitas tinggi
Butuh reusable service

30. Kesimpulan

Bound Script adalah project Google Apps Script yang terikat langsung pada file Google Workspace tertentu.

Bound Script sangat populer karena:

Mudah dibuat
Gratis
Cepat dikembangkan
Cocok untuk dashboard
Cocok untuk automation
Mudah dipelajari

Bound Script sangat cocok digunakan untuk:

Dashboard sekolah
Dashboard UMKM
Sistem absensi
Sistem administrasi
Dashboard entrepreneur
Monitoring data
Sistem laporan

Dengan memahami Bound Script, developer dapat membangun aplikasi cloud berbasis Google Workspace dengan cepat dan efisien.

Rabu, 27 Mei 2026

Bound Script

MATERI GOOGLE APPS SCRIPT: BOUND SCRIPT

Pendahuluan

1. Apa Itu Google Apps Script?

2. Pengertian Bound Script

3. Analogi Bound Script

4. Cara Membuat Bound Script

Melalui Google Sheets

5. Struktur Bound Script

6. Karakteristik Bound Script

1. Terikat pada File

2. Bisa Mengakses File Aktif

3. Tidak Memerlukan ID File

4. Mudah Digunakan

7. Cara Kerja Bound Script

8. Fungsi Penting pada Bound Script

SpreadsheetApp

DocumentApp

FormApp

9. Contoh Bound Script pada Google Sheets

Studi Kasus: Dashboard Penjualan

Script Mengambil Data

Penjelasan

10. Bound Script pada Google Form

Studi Kasus: Form Pendaftaran

Contoh Script

11. Bound Script pada Google Docs

Studi Kasus: Generate Surat Otomatis

Contoh Script

12. Bound Script untuk Web App

Struktur Project Web App

13. Fungsi doGet()

14. Fungsi include()

15. Contoh Index.html

16. Contoh css.html

17. Contoh JavaScript.html

18. Kelebihan Bound Script

19. Kekurangan Bound Script

20. Perbedaan Bound Script dan Standalone Script

21. Contoh Standalone Script

22. Trigger pada Bound Script

Jenis Trigger

Contoh onOpen()

23. Studi Kasus Sistem Absensi

Kebutuhan Sistem

Solusi Bound Script

24. Studi Kasus Dashboard UMKM

Fitur Dashboard

Teknologi

25. Integrasi Google Charts

Contoh

26. Best Practice Bound Script

1. Pisahkan File

2. Gunakan include()

3. Gunakan Nama Function Jelas

4. Hindari Hardcode

5. Gunakan Validasi Data

27. Arsitektur Bound Script Dashboard

28. Kapan Menggunakan Bound Script?

29. Kapan Tidak Menggunakan Bound Script?

30. Kesimpulan

Tidak ada komentar:

Posting Komentar

MPA - Bukti Pendaftaran