MATERI GOOGLE APPS SCRIPT

SPA DAN MPA MENGGUNAKAN SPREADSHEET SEBAGAI BACKEND DATABASE

Pendahuluan

Dalam pengembangan aplikasi web modern menggunakan Google Apps Script, terdapat dua pendekatan utama yang sering digunakan:

SPA (Single Page Application)
MPA (Multi Page Application)

Kedua pendekatan ini dapat dikombinasikan dengan Google Spreadsheet sebagai backend database sehingga developer dapat membuat aplikasi berbasis cloud tanpa harus menggunakan server konvensional.

Google Spreadsheet sering digunakan sebagai database karena:

Gratis
Mudah digunakan
Real-time
Terintegrasi dengan Google Workspace
Cocok untuk prototyping
Mudah di-maintenance

Materi ini membahas:

Pengertian SPA dan MPA
Perbedaan SPA dan MPA
Cara kerja dengan Google Apps Script
Arsitektur aplikasi
Contoh implementasi
Studi kasus
Struktur project
Best practice

1. Apa Itu SPA?

SPA (Single Page Application) adalah aplikasi web yang hanya memuat satu halaman utama.

Konten berubah secara dinamis menggunakan JavaScript tanpa melakukan reload seluruh halaman.

Cara Kerja SPA

Browser
   │
   ▼
Load index.html sekali
   │
   ▼
JavaScript mengambil data dari Apps Script
   │
   ▼
Spreadsheet menjadi database
   │
   ▼
Konten berubah tanpa reload

Karakteristik SPA

1. Tidak Reload Halaman

Navigasi lebih cepat.

2. Menggunakan JavaScript Dinamis

Konten berubah menggunakan DOM.

3. Frontend dan Backend Dipisah

Frontend:

HTML
CSS
JavaScript

Backend:

Google Apps Script
Spreadsheet

2. Apa Itu MPA?

MPA (Multi Page Application) adalah aplikasi web yang terdiri dari banyak halaman.

Saat user berpindah halaman:

Browser melakukan reload
Server mengirim halaman baru

Cara Kerja MPA

User klik halaman
      │
      ▼
Request ke Apps Script
      │
      ▼
Apps Script generate halaman baru
      │
      ▼
Browser reload halaman

Karakteristik MPA

1. Banyak Halaman

Contoh:

Home
Dashboard
About
Contact

2. Render Server Side

Apps Script membuat halaman HTML baru.

3. Struktur Lebih Tradisional

Mirip website klasik.

3. Spreadsheet Sebagai Backend Database

Google Spreadsheet dapat digunakan sebagai database sederhana.

Contoh Struktur Spreadsheet

Sheet Users

ID	Nama	Email
1	Fajar	fajar@gmail.com

Sheet Products

ID	Nama Produk	Harga
1	Laptop	7000000

Kelebihan Spreadsheet Sebagai Database

Kelebihan	Penjelasan
Gratis	Tidak perlu hosting database
Mudah digunakan	Interface spreadsheet
Real-time	Data langsung update
Integrasi Apps Script	Sangat mudah
Cloud-based	Online

Kekurangan Spreadsheet Sebagai Database

Kekurangan	Penjelasan
Tidak cocok big data	Batas performa
Relasi data terbatas	Tidak seperti SQL
Kurang aman	Jika salah konfigurasi

4. Arsitektur SPA dengan Apps Script

Browser
   │
   ▼
SPA Frontend
HTML + CSS + JavaScript
   │
   ▼
google.script.run
   │
   ▼
Google Apps Script
   │
   ▼
Google Spreadsheet

Struktur Project SPA

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

5. Contoh SPA Menggunakan Spreadsheet

Studi Kasus:

Dashboard Penjualan

Fitur:

Dashboard realtime
CRUD produk
Grafik penjualan
Filter data
Tanpa reload halaman

Spreadsheet Database

Sheet Products

ID	Nama	Harga
1	Laptop	7000000

Code.gs

function doGet(){

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

function getProducts(){

  const ss = SpreadsheetApp
    .openById('SPREADSHEET_ID');

  const sheet = ss
    .getSheetByName('Products');

  return sheet
    .getDataRange()
    .getValues();
}

Index.html

<!DOCTYPE html>
<html>
<head>
  <?!= include('css'); ?>
</head>
<body>

<div id="app"></div>

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

</body>
</html>

JavaScript.html

<script>

function loadProducts(){

  google.script.run
    .withSuccessHandler(showProducts)
    .getProducts();
}

function showProducts(data){

  let html = '';

  data.forEach(row => {

    html += `
      <div class="card">
        <h3>${row[1]}</h3>
        <p>${row[2]}</p>
      </div>
    `;
  });

  document.getElementById('app')
    .innerHTML = html;
}

loadProducts();

</script>

Hasil SPA

Data tampil realtime
Tidak reload halaman
Navigasi cepat
User experience modern

6. Routing pada SPA Apps Script

SPA dapat menggunakan routing JavaScript.

Contoh Router

function navigate(page){

  if(page === 'dashboard'){
    loadDashboard();
  }

  if(page === 'products'){
    loadProducts();
  }
}

7. Arsitektur MPA dengan Apps Script

Browser
   │
   ▼
Apps Script Server
   │
   ▼
Generate HTML
   │
   ▼
Spreadsheet Database

Struktur Project MPA

Apps Script
│
├── Code.gs
├── Home.html
├── Products.html
├── About.html
├── Contact.html
└── css.html

8. Contoh MPA Menggunakan Spreadsheet

Studi Kasus:

Website Sekolah

Fitur:

Home
Profil
Guru
Berita
Kontak

Code.gs

function doGet(e){

  let page = e.parameter.page || 'Home';

  return HtmlService
    .createTemplateFromFile(page)
    .evaluate();
}

Home.html

<h1>Website Sekolah</h1>

<a href="?page=Products">Produk</a>
<a href="?page=About">About</a>

Products.html

<h1>Halaman Produk</h1>

Cara Kerja MPA

Saat klik menu:

Browser request halaman baru
Apps Script generate HTML
Halaman reload

9. CRUD Spreadsheet pada SPA

Create Data

function addProduct(name, price){

  const ss = SpreadsheetApp
    .openById('SPREADSHEET_ID');

  const sheet = ss
    .getSheetByName('Products');

  sheet.appendRow([
    new Date(),
    name,
    price
  ]);
}

Frontend

<input id="name">
<input id="price">

<button onclick="save()">
Save
</button>

JavaScript

function save(){

  const name = document
    .getElementById('name').value;

  const price = document
    .getElementById('price').value;

  google.script.run
    .addProduct(name, price);
}

10. Studi Kasus SPA

Dashboard Entrepreneur

Fitur:

Dashboard realtime
Grafik penjualan
Monitoring stok
CRUD produk
Notification

Mengapa SPA?

Karena:

Banyak interaksi realtime
Navigasi cepat
UX modern
Tidak reload halaman

Teknologi

Frontend:

HTML
Bootstrap
JavaScript
Chart.js

Backend:

Apps Script

Database:

Spreadsheet

11. Studi Kasus MPA

Sistem Informasi Sekolah

Fitur:

Profil sekolah
Data guru
Berita
Kontak
Artikel

Mengapa MPA?

Karena:

SEO lebih baik
Struktur sederhana
Banyak halaman informasi

Teknologi

Frontend:

HTML
CSS
Bootstrap

Backend:

Apps Script

Database:

Spreadsheet

12. Integrasi Google Charts

Contoh

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

13. Perbandingan SPA dan MPA

Aspek	SPA	MPA
Halaman	Satu halaman	Banyak halaman
Reload	Tidak	Ya
UX	Modern	Tradisional
Kecepatan	Cepat	Lebih lambat
SEO	Lebih sulit	Lebih mudah
Kompleksitas	Tinggi	Rendah
Cocok untuk	Dashboard	Website informasi

14. Kelebihan SPA pada Apps Script

Kelebihan	Penjelasan
UX modern	Smooth
Cepat	Tanpa reload
Cocok dashboard	Real-time
Hemat bandwidth	Hanya data berubah

15. Kekurangan SPA

Kekurangan	Penjelasan
JavaScript kompleks	Lebih sulit
SEO sulit	Render client-side
Debugging lebih sulit	Banyak state

16. Kelebihan MPA pada Apps Script

Kelebihan	Penjelasan
Mudah dibuat	Struktur sederhana
SEO bagus	HTML server-side
Cocok company profile	Banyak halaman

17. Kekurangan MPA

Kekurangan	Penjelasan
Reload halaman	Lebih lambat
UX kurang modern	Tidak realtime

18. Hybrid SPA + MPA

Saat ini banyak aplikasi menggunakan hybrid.

Contoh

Landing page:

Dashboard:

Studi Kasus Hybrid

LMS Modern

Landing:

Informasi sekolah
SEO

Dashboard siswa:

Quiz realtime
Video learning
Live notification

19. Best Practice Apps Script SPA

1. Pisahkan File

Gunakan:

Code.gs
CSS
JavaScript

2. Gunakan include()

function include(filename){

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

3. Gunakan Modular Function

Contoh:

getProducts()
addProduct()
updateProduct()

4. Gunakan Loading Indicator

Agar UX lebih baik.

5. Gunakan Cache

Agar performa lebih cepat.

20. Best Practice Spreadsheet Database

1. Pisahkan Sheet

Contoh:

Users
Products
Orders

2. Gunakan Header

Baris pertama sebagai struktur data.

3. Hindari Data Terlalu Besar

Spreadsheet memiliki limit.

4. Gunakan Validasi

Untuk keamanan data.

21. Arsitektur Lengkap SPA Apps Script

Browser
   │
   ▼
Frontend SPA
HTML + Bootstrap + JS
   │
   ▼
google.script.run
   │
   ▼
Apps Script Backend
   │
   ▼
Spreadsheet Database

22. Arsitektur Lengkap MPA Apps Script

Browser
   │
   ▼
Apps Script Server
   │
   ▼
Generate HTML
   │
   ▼
Spreadsheet Database

23. Kapan Menggunakan SPA?

Gunakan SPA jika:

Dashboard realtime
Monitoring system
Marketplace
CRUD interaktif
LMS modern

24. Kapan Menggunakan MPA?

Gunakan MPA jika:

Website sekolah
Portal berita
Company profile
Website informasi

25. Kesimpulan

SPA dan MPA merupakan dua pendekatan penting dalam pengembangan aplikasi web menggunakan Google Apps Script.

SPA sangat cocok untuk:

Dashboard
Sistem realtime
Marketplace
CRUD modern

MPA sangat cocok untuk:

Website informasi
Portal sekolah
SEO
Company profile

Dengan menggunakan Spreadsheet sebagai backend database, developer dapat membangun aplikasi cloud dengan cepat, murah, dan mudah menggunakan Google Apps Script.

Rabu, 27 Mei 2026

SPA dan MPA

MATERI GOOGLE APPS SCRIPT

SPA DAN MPA MENGGUNAKAN SPREADSHEET SEBAGAI BACKEND DATABASE

Pendahuluan

1. Apa Itu SPA?

Cara Kerja SPA

Karakteristik SPA

1. Tidak Reload Halaman

2. Menggunakan JavaScript Dinamis

3. Frontend dan Backend Dipisah

2. Apa Itu MPA?

Cara Kerja MPA

Karakteristik MPA

1. Banyak Halaman

2. Render Server Side

3. Struktur Lebih Tradisional

3. Spreadsheet Sebagai Backend Database

Contoh Struktur Spreadsheet

Sheet Users

Sheet Products

Kelebihan Spreadsheet Sebagai Database

Kekurangan Spreadsheet Sebagai Database

4. Arsitektur SPA dengan Apps Script

Struktur Project SPA

5. Contoh SPA Menggunakan Spreadsheet

Studi Kasus:

Spreadsheet Database

Sheet Products

Code.gs

Index.html

JavaScript.html

Hasil SPA

6. Routing pada SPA Apps Script

Contoh Router

7. Arsitektur MPA dengan Apps Script

Struktur Project MPA

8. Contoh MPA Menggunakan Spreadsheet

Studi Kasus:

Code.gs

Home.html

Products.html

Cara Kerja MPA

9. CRUD Spreadsheet pada SPA

Create Data

Frontend

JavaScript

10. Studi Kasus SPA

Dashboard Entrepreneur

Mengapa SPA?

Teknologi

11. Studi Kasus MPA

Sistem Informasi Sekolah

Mengapa MPA?

Teknologi

12. Integrasi Google Charts

Contoh

13. Perbandingan SPA dan MPA

14. Kelebihan SPA pada Apps Script

15. Kekurangan SPA

16. Kelebihan MPA pada Apps Script

17. Kekurangan MPA

18. Hybrid SPA + MPA

Contoh

Studi Kasus Hybrid

LMS Modern

19. Best Practice Apps Script SPA

1. Pisahkan File

2. Gunakan include()

3. Gunakan Modular Function

4. Gunakan Loading Indicator

5. Gunakan Cache

20. Best Practice Spreadsheet Database

1. Pisahkan Sheet

2. Gunakan Header

3. Hindari Data Terlalu Besar

4. Gunakan Validasi

21. Arsitektur Lengkap SPA Apps Script

22. Arsitektur Lengkap MPA Apps Script

23. Kapan Menggunakan SPA?