Sabtu, 30 Mei 2026

Rabu, 27 Mei 2026

MPA - Bukti Pendaftaran

https://script.google.com/macros/s/AKfycbw1NyiOCuf1kvPEHau3viii_943iUX5CTQJ3hQRM97ng_BMNLsAITQzjUKmp25TYBvx/exec

https://drive.google.com/drive/folders/1iyv5USLtDdZi8gM94qyj7Wz5lEBkK1Oc

https://docs.google.com/spreadsheets/d/1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ/edit?gid=0#gid=0

https://script.google.com/home/projects/1GyAbDbcbDSv4PxXe_EfMYxqLo2LhtZ5Ej9hzsBHUwOejK1BxSZ0tfaSl/edit

PROMPT

Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.

Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online. id spreadsheet : 1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ

sheetname : Siswa

id Drive bukti pendaftaran : 1Q7QmXJzlGrdPrMcfYkx8isZgSie-ZFaj

id Drive foto :17rSN4bUIHjIDHVLaPRbDK5pxr-yGaxkL. Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:

Landing page modern

Form pendaftaran siswa

CRUD data pendaftaran

Upload dan penyimpanan foto ke Google Drive

Generate dan cetak PDF bukti pendaftaran

Dashboard admin

Responsive UI modern

Spesifikasi Teknologi

Platform

Google Apps Script (Standalone Script)

Google Spreadsheet sebagai database

Google Drive sebagai penyimpanan foto dan PDF

HTML Service untuk frontend

Arsitektur

Gunakan arsitektur:

MPA (Multi Page Application)

Setiap halaman dipisah menjadi file HTML berbeda

Berikut adalah seluruh kod sumber yang telah dipecahkan kepada fail-fail berasingan mengikut struktur projek Google Apps Script (GAS) MPA yang profesional, lengkap dengan reka bentuk UI/UX yang premium dan panduan langkah demi langkah untuk proses deployment.

Kita akan mencipta 5 fail berikut:

Code.gs (Logik Backend & Penjana PDF)
Landing.html (Halaman Utama)
Form.html (Borang Pendaftaran Multi-step & Muat Naik Foto)
Dashboard.html (Halaman Pentadbir/Admin & Pengurusan Data)
Panduan_Deploy.md (Langkah Deployment & Persediaan Google Drive/Spreadsheet)

Panduan Penyebaran Portal PPDB SMA Atas Talian

Dokumen panduan ini bertujuan untuk membantu proses deployment dan konfigurasi kod sumber di atas ke Google Apps Script (GAS).

Langkah 1: Persediaan Pangkalan Data (Google Spreadsheet)

Cipta Google Spreadsheet baru atau gunakan fail sedia ada yang mempunyai ID: 1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ.
Tukar nama tab helaian pertama (Sheet Name) kepada: Siswa.
Sediakan 10 kepala kolum (Headers) berikut pada baris pertama (Baris 1 dari Kolum A hingga J):
- A1: ID
- B1: NISN
- C1: Nama
- D1: Alamat
- E1: Email
- F1: Asal SMP
- G1: URL Foto
- H1: Sekolah Tujuan
- I1: Timestamp
- J1: URL PDF

Langkah 2: Persediaan Fail Folder Google Drive

Sistem memerlukan dua folder khusus di dalam Google Drive untuk penyimpanan dokumen digital. Cipta folder baharu dan salin ID foldernya:

Folder Foto Siswa:
- Cipta folder baharu dan namakannya Foto Siswa PPDB.
- Kongsi folder ini secara terbuka: Klik Kanan -> Kongsi -> Pilih Sesiapa sahaja yang mempunyai pautan boleh melihat (Viewer).
- Salin ID foldernya (cth: 17rSN4bUIHjIDHVLaPRbDK5pxr-yGaxkL) dan kemas kini pemalar photoFolderId dalam CONFIG fail Code.gs.
Folder Bukti PDF:
- Cipta folder kedua bernama Kad PDF Bukti Pendaftaran.
- Setkan akses kongsi folder kepada: Sesiapa sahaja yang mempunyai pautan boleh melihat (Viewer).
- Salin ID foldernya (cth: 1Q7QmXJzlGrdPrMcfYkx8isZgSie-ZFaj) dan kemas kini pemalar pdfFolderId dalam CONFIG fail Code.gs.

Langkah 3: Membuat Projek Google Apps Script (GAS)

Layari script.google.com dan log masuk menggunakan akaun Google anda.
Klik butang New Project (Projek Baharu).
Namakan semula projek anda sebagai: Sistem Portal PPDB SMA.
Cipta fail-fail baharu mengikut senarai di bawah (Gunakan butang + -> Pilih format HTML atau Script):

Nama Fail di GAS	Jenis Fail	Sumber Kandungan (Sila Salin dari Atas)
`Code.gs`	Script	Salin semua kod daripada bahagian `Code.gs`
`Landing.html`	HTML	Salin kandungan HTML dari fail `Landing.html`
`Form.html`	HTML	Salin kandungan HTML dari fail `Form.html`
`Dashboard.html`	HTML	Salin kandungan HTML dari fail `Dashboard.html`

Langkah 4: Proses Pelancaran Aplikasi Web (Deployment)

Di dalam Editor GAS, klik butang Deploy di penjuru kanan atas -> Pilih New deployment (Penyebaran baharu).
Klik pada ikon tetapan roda gerigi (Select type) -> Pilih Web app (Aplikasi Web).
Konfigurasikan tetapan penyebaran seperti berikut:
- Description: PPDB Versi Pelancaran Stabil
- Execute as: Me (emel_anda@gmail.com) (Ini penting bagi membenarkan kod mengakses Drive & Spreadsheet bagi pihak aplikasi)
- Who has access: Anyone (Pendaftar luar boleh membuka halaman borang pendaftaran)
Klik butang Deploy.
Sekiranya permohonan kebenaran keselamatan dipaparkan, klik Authorize Access, log masuk ke akaun Google anda, klik Advanced -> Pilih Go to Sistem Portal PPDB SMA (unsafe) untuk memberikan kebenaran.
Selepas selesai, sistem akan memaparkan Web app URL. Salin pautan URL ini untuk dipautkan di laman sosial atau diakses secara rasmi oleh pelajar.

🎉 Selesai!

Portal PPDB MPA anda kini sedia menerima pendaftaran siswa baharu secara langsung. Semua data yang diisi, fail pas foto yang dimuat naik, serta fail PDF kad bukti pendaftaran akan disimpan secara automatik dalam Workspace Google anda.

MPA - Pendaftaran

https://script.google.com/macros/s/AKfycbwmBwwdX9_ci2GjkDmFx92nhUk0OJiHL74WLiQWZFgGTWchUkN1zje10fTL-pX-O8Tr/exec

https://drive.google.com/drive/folders/1LoNkWI5GNH-v9Lt0YNsvRrZOVnbFWs57

Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.

Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online.

Tujuan Aplikasi

Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:

Landing page modern

Form pendaftaran siswa

CRUD data pendaftaran

Upload dan penyimpanan foto ke Google Drive

Generate dan cetak PDF bukti pendaftaran

Dashboard admin

Responsive UI modern

Spesifikasi Teknologi

Platform

Google Apps Script (Standalone Script)

Google Spreadsheet sebagai database

Google Drive sebagai penyimpanan foto dan PDF

HTML Service untuk frontend

Arsitektur

Gunakan arsitektur:

MPA (Multi Page Application)

Setiap halaman dipisah menjadi file HTML berbeda

Struktur File

Gunakan struktur file berikut:

Code.gs

Config.gs

Auth.gs

Student.gs

Pdf.gs

Drive.gs

Index.html

Landing.html

Dashboard.html

Detail.html

Navbar.html

Sidebar.html

Footer.html

CSS.html

JS.html

Gunakan fungsi include() untuk template reusable.

Contoh:

function include(filename){

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

}

Landing Page

Buat landing page modern gaya startup education technology.

Hero Section

Hero section harus memiliki:

Headline besar:

“Sistem Pendaftaran Siswa SMA”

Subheadline:

“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”

Tombol CTA:

Daftar Sekarang

Visual Style

Gunakan desain:

Modern

Clean

Edu-tech startup

Responsive

Minimalis

Gradient modern

Soft shadow

Rounded card

Warna

Gunakan kombinasi:

Biru

Putih

Navy

Abu modern

Gunakan

Bootstrap 5

Bootstrap Icons

Google Fonts (Poppins)

Database Spreadsheet

Nama Sheet

Sheet: DATA_SISWA

Struktur Kolom

Gunakan auto increment ID.

Fitur CRUD

Create

Form input siswa:

NISN

Nama

Alamat

Asal SMP

Sekolah Tujuan

Upload Foto

Read

Tampilkan data:

Table Bootstrap

Search realtime

Pagination

Sorting

Update

Admin dapat edit data siswa.

Delete

Admin dapat hapus data dengan konfirmasi modal.

Upload Foto

Ketentuan

Foto disimpan di Google Drive

Folder Drive dibuat otomatis

Simpan URL file ke spreadsheet

Foto preview tersedia

Validasi

JPG/PNG

Maksimal 2MB

Dashboard Admin

Fitur Dashboard

Total pendaftar

Jumlah sekolah asal

Statistik harian

Tabel data siswa

Export PDF

Cetak bukti pendaftaran

UI Dashboard

Gunakan:

Card statistik

Sidebar modern

Navbar sticky

DataTable Bootstrap

Generate PDF Bukti Pendaftaran

PDF berisi:

Logo sekolah

Judul bukti pendaftaran

Nomor pendaftaran

Identitas siswa

NISN

Nama lengkap

Alamat

Asal SMP

Sekolah tujuan

Foto siswa

Tanggal pendaftaran

QR Code verifikasi

Format

Layout profesional

A4 Portrait

Bisa di-download

Bisa dicetak

Penyimpanan

PDF otomatis tersimpan di Google Drive

URL PDF disimpan ke spreadsheet

Routing MPA

Gunakan parameter:

?page=landing

?page=register

?page=dashboard

?page=detail&id=1

Contoh:

function doGet(e){

const page = e.parameter.page || 'landing';

if(page == 'register'){

return HtmlService.createTemplateFromFile('Register')

.evaluate();

}

if(page == 'dashboard'){

return HtmlService.createTemplateFromFile('Dashboard')

.evaluate();

}

return HtmlService.createTemplateFromFile('Landing')

.evaluate();

}

Validasi Form

Validasi Client Side

Semua field wajib diisi

Email valid

NISN numerik

Upload foto wajib

Validasi Server Side

Cek duplicate NISN

Sanitasi data

Validasi ukuran file

UX Features

Tambahkan:

Loading spinner

Toast notification

SweetAlert2

Modal Bootstrap

Empty state

Responsive mobile

Smooth animation

Security

Gunakan:

Escape HTML

Sanitasi input

Validasi server-side

Hide spreadsheet ID di Config.gs

Coding Style

Gunakan:

Clean code

Modular architecture

Reusable component

Async google.script.run

Komentar jelas

Output yang Harus Dihasilkan

Generate source code lengkap:

Backend Google Apps Script

Frontend Bootstrap

CRUD functionality

Upload image to Drive

Generate PDF

Responsive UI

Routing MPA

Dashboard admin

Landing page modern

Berikan:

Struktur folder

Kode lengkap setiap file

Penjelasan fungsi

Cara deploy sebagai Web App

Cara setup Spreadsheet dan Drive

Cara publish aplikasi

Studi kasus penggunaan aplikasi

Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.

Prompt Pengembangan Web App Google Apps Script

Sistem Pendaftaran Siswa SMA (Standalone Script + Arsitektur MPA)

Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.

Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online.

Tujuan Aplikasi

Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:

Landing page modern
Form pendaftaran siswa
CRUD data pendaftaran
Upload dan penyimpanan foto ke Google Drive
Generate dan cetak PDF bukti pendaftaran
Dashboard admin
Responsive UI modern

Spesifikasi Teknologi

Platform

Google Apps Script (Standalone Script)
Google Spreadsheet sebagai database
Google Drive sebagai penyimpanan foto dan PDF
HTML Service untuk frontend

Arsitektur

Gunakan arsitektur:

MPA (Multi Page Application)
Setiap halaman dipisah menjadi file HTML berbeda

Struktur File

Gunakan struktur file berikut:

Code.gs
Config.gs
Auth.gs
Student.gs
Pdf.gs
Drive.gs
Index.html
Landing.html
Register.html
Dashboard.html
Detail.html
Navbar.html
Sidebar.html
Footer.html
CSS.html
JS.html

Gunakan fungsi include() untuk template reusable.

Contoh:

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Landing Page

Buat landing page modern gaya startup education technology.

Hero Section

Hero section harus memiliki:

Headline besar:
“Sistem Pendaftaran Siswa SMA”
Subheadline:
“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”
Tombol CTA:
- Daftar Sekarang
- Login Admin

Visual Style

Gunakan desain:

Modern
Clean
Edu-tech startup
Responsive
Minimalis
Gradient modern
Soft shadow
Rounded card

Warna

Gunakan kombinasi:

Biru
Putih
Navy
Abu modern

Gunakan

Bootstrap 5
Bootstrap Icons
Google Fonts (Poppins)

Database Spreadsheet

Nama Sheet

Sheet: DATA_SISWA

Struktur Kolom

Gunakan auto increment ID.

Fitur CRUD

Create

Form input siswa:

NISN
Nama
Alamat
Email
Asal SMP
Sekolah Tujuan
Upload Foto

Read

Tampilkan data:

Table Bootstrap
Search realtime
Pagination
Sorting

Update

Admin dapat edit data siswa.

Delete

Admin dapat hapus data dengan konfirmasi modal.

Upload Foto

Ketentuan

Foto disimpan di Google Drive
Folder Drive dibuat otomatis
Simpan URL file ke spreadsheet
Foto preview tersedia

Validasi

JPG/PNG
Maksimal 2MB

Dashboard Admin

Fitur Dashboard

Total pendaftar
Jumlah sekolah asal
Statistik harian
Tabel data siswa
Export PDF
Cetak bukti pendaftaran

UI Dashboard

Gunakan:

Card statistik
Sidebar modern
Navbar sticky
DataTable Bootstrap

Generate PDF Bukti Pendaftaran

PDF berisi:

Logo sekolah
Judul bukti pendaftaran
Nomor pendaftaran
Identitas siswa
NISN
Nama lengkap
Alamat
Email
Asal SMP
Sekolah tujuan
Foto siswa
Tanggal pendaftaran
QR Code verifikasi

Format

Layout profesional
A4 Portrait
Bisa di-download
Bisa dicetak

Penyimpanan

PDF otomatis tersimpan di Google Drive
URL PDF disimpan ke spreadsheet

Routing MPA

Gunakan parameter:

?page=landing
?page=register
?page=dashboard
?page=detail&id=1

Contoh:

function doGet(e){
  const page = e.parameter.page || 'landing';

  if(page == 'register'){
    return HtmlService.createTemplateFromFile('Register')
      .evaluate();
  }

  if(page == 'dashboard'){
    return HtmlService.createTemplateFromFile('Dashboard')
      .evaluate();
  }

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

Validasi Form

Validasi Client Side

Semua field wajib diisi
Email valid
NISN numerik
Upload foto wajib

Validasi Server Side

Cek duplicate NISN
Sanitasi data
Validasi ukuran file

UX Features

Tambahkan:

Loading spinner
Toast notification
SweetAlert2
Modal Bootstrap
Empty state
Responsive mobile
Smooth animation

Security

Gunakan:

Escape HTML
Sanitasi input
Validasi server-side
Hide spreadsheet ID di Config.gs

Coding Style

Gunakan:

Clean code
Modular architecture
Reusable component
Async google.script.run
Komentar jelas

Output yang Harus Dihasilkan

Generate source code lengkap:

Backend Google Apps Script
Frontend Bootstrap
CRUD functionality
Upload image to Drive
Generate PDF
Responsive UI
Routing MPA
Dashboard admin
Landing page modern

Berikan:

Struktur folder
Kode lengkap setiap file
Penjelasan fungsi
Cara deploy sebagai Web App
Cara setup Spreadsheet dan Drive
Cara publish aplikasi
Studi kasus penggunaan aplikasi

Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.

MPA Inventaris Cetak

https://script.google.com/macros/s/AKfycbxiaHFq-T6Xogy6L_szXqFutH0rkgZB2EQ5OFkwWMC8qPX7_zgqV11jPZmj_Q7B2-SqWA/exec

https://script.google.com/home/projects/15yMzEIdtbF52gBSvg_4ZmA5EOXpFepxwPgDdRj25RewLRxe9m330NucG/edit

https://drive.google.com/drive/folders/1rsuh2_PzD7Va1g9v_5wYYiVk-RBT9G5p

https://docs.google.com/spreadsheets/d/1yBsCdnY0ZvJiuWrdF_vAGh8EF3uON7TDr1DhO0ZYtv0/edit?gid=0#gid=0

https://docs.google.com/document/d/1Xe7z06o4mgU3hXQ7Wz6nwy2iZ0vbItAY5rFzkGRyc3U/edit?tab=t.0

https://drive.google.com/drive/folders/1LgO3j5O7XIKnc00agk7U_abmlwqsx6Gf

Buatkan contoh studi kasus lengkap dengan fitur landing page hero, CRUD dan cetak PDF

Berikut adalah kode Studi Kasus Lengkap Sistem Manajemen Inventaris (InvenTrack) dengan arsitektur Multi-Page Application (MPA) yang memisahkan Frontend dan Backend menggunakan model standalone script.

Sistem ini sudah mencakup semua fitur yang Anda minta:

Landing Page Modern dengan Hero Section dan tombol Call-to-Action (CTA).
Dashboard Manajemen Stok dengan operasional CRUD Lengkap (Create, Read, Update, Delete) menggunakan modal dialog.
Fitur Cetak PDF Otomatis yang memanfaatkan template Google Docs di Drive, mengisi placeholder {{KODE}}, {{NAMA}}, dll, mengonversinya ke PDF secara real-time, dan langsung mengunduhnya.

🏛️ Struktur File Proyek di Editor Apps Script

Buat 5 file berikut di dalam editor script.google.com:

Code.gs (Semua Logika Backend, Router MPA, & Database CRUD + PDF)
index.html (Layout Induk Dashboard Internal & Navbar)
hero.html (Landing Page Utama / Publik)
dashboard.html (Komponen Antarmuka Form, Tabel Data, & Modal Edit)
javascript.html (Logika Frontend / API Controller Asinkronus)

🛠️ 1. Backend: `Code.gs`

Ganti seluruh kode di file Code.gs Anda. Jangan lupa untuk mengisi SPREADSHEET_ID, GOOGLE_DOC_TEMPLATE_ID, dan DRIVE_FOLDER_ID.

// =========================================================================

// CONFIG DATABASE & FILE SYSTEM (Ganti dengan ID milik Anda)

// =========================================================================

const SPREADSHEET_ID = '1yBsCdnY0ZvJiuWrdF_vAGh8EF3uON7TDr1DhO0ZYtv0';

const SHEET_NAME = 'Inventaris';

const GOOGLE_DOC_TEMPLATE_ID = '1Xe7z06o4mgU3hXQ7Wz6nwy2iZ0vbItAY5rFzkGRyc3U';

const DRIVE_FOLDER_ID = '1LgO3j5O7XIKnc00agk7U_abmlwqsx6Gf';

MPA Sistem Inventaris

https://script.google.com/macros/s/AKfycbxm4SBpHI4WmZ35rKPDYmkCI0u6nEwh_TN8M8ZLHUGx1HUPlirxRVUjQxoIjFOkyrqhYQ/exec

https://script.google.com/home/projects/1hHIVmLnEVEXt-jTJIe_X8earKF4Q-qqwcpeYCvkKZH0s9LRQ3NjJYSpv/edit

https://drive.google.com/drive/folders/11MnIgLAy-ft3wNkavF6SaqCVhAA5T46v

https://docs.google.com/spreadsheets/d/1ZAODAmYzY0ls4-MJtNcVhiH9YlgupIijMz724y0IxWQ/edit?gid=0#gid=0

Bertindaklah sebagai apps script expert. Buatkan study kasus sistem inventaris dengan frontend dan backend terpisah. Buatkan landing page dengan hero. Arsitektur MPA. Gunakan model standalone script. File kode terpisah .

PROJECT SUMMARY PROMPT: SISTEM INVENTARIS MP-GAS

1. Ringkasan Arsitektur & Teknologi

Nama Sistem: InvenTrack (Sistem Manajemen Inventaris Pintar)
Arsitektur: Multi-Page Application (MPA) dengan pemisahan Frontend dan Backend yang modular.
Model Script: Standalone Script (Google Apps Script).
Database: Google Spreadsheet (Tab: Inventaris).
Frontend Tech Stack: HTML5, Tailwind CSS (via CDN), JavaScript Vanilla (Asynchronous DOM Manipulation).
Communication Bridge: google.script.run (Asinkronus / AJAX bawaan Apps Script).

2. Struktur File Proyek (Flat Directory)

Sistem ini menggunakan 5 file utama yang diletakkan sejajar di dalam editor Google Apps Script:

Code.gs (Backend): * Mengatur routing aplikasi berbasis parameter URL (?page=...).
- Menyediakan fungsi inklusi file komponen (include()).
- Berisi logikal API CRUD database (getInventoryData() dan addStockItem()) dengan mekanisme case-insensitive column mapping dan pembersihan data (anti-ghost rows filtering).
index.html (Layout Induk Dashboard):
- Berisi struktur core HTML, CDN Tailwind CSS, dan komponen global (Navbar & Status Admin).
- Bertindak sebagai wrapper yang menyuntikkan file visual internal secara dinamis via scriptlet evaluasi Apps Script.
hero.html (Landing Page):
- Halaman publik terpisah dengan desain modern minimalis yang fokus pada pemasaran produk dan Call-to-Action (CTA) link dinamis menuju halaman dashboard internal.
dashboard.html (View/Partial HTML Fitur):
- Kerangka antarmuka fitur utama yang membagi halaman menjadi 2 kolom: Form Tambah Item Baru (Kiri) dan Tabel Real-Time Daftar Stok Barang (Kanan).
javascript.html (Client-Side Controller):
- Berisi logika frontend untuk menangani event submit form, memicu pemuatan data otomatis saat DOM siap, merender manipulasi tabel secara dinamis, dan mengubah state tombol simpan (loading animation).

3. Struktur Database (Google Spreadsheet)

Nama Lembar Kerja (Tab): Inventaris
Struktur Kolom (Baris 1): Timestamp | Kode Barang | Nama Barang | Stok | Kategori
Fitur Fleksibilitas Database: Kode backend didesain case-insensitive dan tahan terhadap pergeseran letak kolom menggunakan pemetaan indeks berbasis .toLowerCase().trim().

4. Alur Kerja Sistem (Data Flow)

Routing: Pengguna mengakses URL Web App standar ➡️ doGet() merender hero.html. Jika mengakses URL dengan ?page=dashboard ➡️ doGet() merender index.html yang membungkus dashboard.html & javascript.html.
Membaca Data (Read): Halaman termuat ➡️ JavaScript frontend memicu getInventoryData() di server ➡️ Server membaca baris Spreadsheet, mengubahnya menjadi Array of Objects yang bersih, lalu mengirimkannya kembali ➡️ Frontend menerimanya dan merender data ke dalam tabel HTML.
Menulis Data (Write): Pengguna menekan tombol simpan ➡️ Tombol dinonaktifkan (state: Menyimpan...) ➡️ Frontend mengirimkan input data ke server via addStockItem() ➡️ Server melakukan .appendRow() ke Google Sheets dan mengembalikan respon sukses ➡️ Frontend mengosongkan form dan otomatis memicu fungsi Read Data ulang tanpa melakukan refresh browser.

💡 Cara Menggunakan Summary Ini untuk Pengembangan Selanjutnya:

Jika Anda ingin menambahkan fitur baru, Anda cukup menyalin teks di atas dan menambahkan perintah tambahan di bawahnya.

Contoh perintah tambahan: "Berdasarkan summary proyek di atas, buatkan modifikasi kode pada dashboard.html dan javascript.html untuk menambahkan tombol Hapus Barang di setiap baris tabel, serta buatkan fungsi backend deleteStockItem(kode) di Code.gs untuk menghapus baris barang yang sesuai di spreadsheet."

SPA dan MPA

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.

Standalone Script

https://script.google.com/macros/s/AKfycbySDdDAPk8nE52Es9NahDsPuJkeAspi0OERJxKZs0C8sdPxTdUHh086K--HH06m7b1w3w/exec

https://drive.google.com/drive/folders/1HvOObb9yRTMwDA_7UcdHUzTFG8w2E7wQ

https://docs.google.com/spreadsheets/d/1mHAkLU_7SM8sUBd_PRxWBHkfahGpy6aj00DNEnOykVg/edit?gid=0#gid=0

https://script.google.com/home/projects/1aP95fQEwp1yvyrPtt3-H3ctbEQSfss2xd1zbkRwIgChx0FviDHwJoezO/edit

Bertindaklah sebagai apps script expert. Buatkan study kasus sistem inventari dengan front end dan backend terpisah. Gunakan model standalone script. File kode terpisah . Tambahkan pula landing page dengan hero

Halo! Sebagai seorang Apps Script Expert, saya sangat merekomendasikan pendekatan Front-End dan Back-End terpisah (Decoupled Architecture) untuk Google Apps Script (GAS). Pendekatan ini membuat aplikasi jauh lebih cepat, rapi, mudah di-maintain, dan menghindari masalah klasik GAS seperti script timeout atau callback hell.

Kita akan menggunakan model Standalone Script (tidak menempel pada Sheet tertentu) dengan struktur file yang terpisah.

Berikut adalah studi kasus Sistem Inventaris Barang Rumah Sakit / Kantor beserta seluruh kode yang kamu butuhkan.

🏛️ Arsitektur Sistem

Database (Back-End): Google Sheets untuk menyimpan data barang.
Logika Bisnis (Back-End): Google Apps Script (Standalone) sebagai REST API mikro menggunakan fungsi doGet() dan doPost().
Front-End: HTML5, CSS (Tailwind CSS via CDN), dan JavaScript modern (Fetch API) untuk interaksi data.

MATERI GOOGLE APPS SCRIPT: STANDALONE SCRIPT

Pendahuluan

Dalam pengembangan aplikasi berbasis Google Workspace, Google Apps Script dapat digunakan untuk membuat otomatisasi, dashboard, integrasi sistem, hingga web application berbasis cloud.

Selain Bound Script, terdapat jenis script lain yang sangat penting yaitu Standalone Script.

Standalone Script sering digunakan untuk:

Sistem skala besar
Integrasi multi spreadsheet
Dashboard enterprise
Integrasi API
Sistem monitoring
Automation service
Multi-user web app
Integrasi database cloud

Materi ini membahas:

Pengertian Standalone Script
Cara kerja
Perbedaan dengan Bound Script
Struktur project
Contoh implementasi
Studi kasus
Integrasi web app
Best practice

1. Apa Itu Standalone Script?

Standalone Script adalah project Google Apps Script yang berdiri sendiri dan tidak terikat langsung pada file Google Workspace tertentu.

Artinya:

Script dibuat secara independen dan dapat mengakses banyak file Google Workspace.

2. Analogi Standalone Script

Bayangkan:

Spreadsheet = rumah
Apps Script = robot otomatis

Pada Standalone Script:

Robot tidak tinggal di satu rumah.
Robot dapat berpindah-pindah dan bekerja di banyak rumah.

3. Karakteristik Standalone Script

1. Berdiri Sendiri

Script tidak terikat pada spreadsheet tertentu.

2. Menggunakan ID File

Karena tidak terikat file aktif.

3. Lebih Fleksibel

Bisa mengakses:

Banyak spreadsheet
Banyak docs
Banyak forms

4. Cocok untuk Sistem Besar

Digunakan pada aplikasi enterprise.

4. Cara Membuat Standalone Script

Langkah-langkah

Buka:

https://script.google.com

Klik:

New Project

Project Apps Script akan dibuat secara independen.

5. Struktur Standalone Script

Standalone Apps Script
│
├── Code.gs
├── Config.gs
├── API.gs
├── Database.gs
├── Index.html
├── css.html
└── JavaScript.html

6. Cara Kerja Standalone Script

Alur kerja:

Script dijalankan
Script membaca ID file
Script membuka spreadsheet tertentu
Data diproses
Hasil dikirim ke user

7. Mengakses Spreadsheet pada Standalone Script

Karena tidak menggunakan file aktif, maka menggunakan:

SpreadsheetApp.openById()

Contoh

function getData(){

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

  const sheet = spreadsheet
    .getSheetByName('Sales');

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

  Logger.log(data);
}

8. Penjelasan Kode

Kode	Fungsi
openById()	Membuka spreadsheet tertentu
getSheetByName()	Mengambil sheet
getValues()	Mengambil data

9. Perbedaan Bound Script dan Standalone Script

Bound Script	Standalone Script
Terikat file	Berdiri sendiri
Menggunakan file aktif	Menggunakan ID file
Cocok project kecil	Cocok project besar
Mudah dibuat	Lebih fleksibel
Tidak reusable	Reusable

10. Kelebihan Standalone Script

Kelebihan	Penjelasan
Fleksibel	Bisa akses banyak file
Reusable	Bisa digunakan ulang
Cocok enterprise	Untuk sistem besar
Integrasi mudah	Dengan API dan cloud
Modular	Mudah maintenance

11. Kekurangan Standalone Script

Kekurangan	Penjelasan
Lebih kompleks	Perlu konfigurasi
Harus pakai ID file	Tidak otomatis
Setup lebih lama	Untuk pemula lebih sulit

12. Mengambil ID Spreadsheet

Contoh URL spreadsheet:

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

ID Spreadsheet:

1ABC123XYZ

13. Standalone Script untuk Web App

Standalone Script sangat populer untuk membangun web app.

Struktur Web App

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

14. Fungsi doGet()

function doGet(){

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

15. Fungsi include()

function include(filename){

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

16. Contoh Index.html

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

<h1>Dashboard Monitoring</h1>

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

</body>
</html>

17. Contoh css.html

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

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

18. Contoh JavaScript.html

<script>

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

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

</script>

19. Studi Kasus 1: Dashboard Multi Sekolah

Kebutuhan

Sistem harus:

Mengambil data dari banyak spreadsheet sekolah
Menampilkan dashboard pusat
Menampilkan grafik
Monitoring real-time

Solusi

Menggunakan Standalone Script.

Arsitektur

Sekolah A Spreadsheet
Sekolah B Spreadsheet
Sekolah C Spreadsheet
        │
        ▼
Standalone Script
        │
        ▼
Dashboard Monitoring

Contoh Script

function getAllSchoolData(){

  const files = [
    'ID_FILE_1',
    'ID_FILE_2',
    'ID_FILE_3'
  ];

  let allData = [];

  files.forEach(id => {

    const ss = SpreadsheetApp.openById(id);

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

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

    allData.push(data);
  });

  return allData;
}

20. Studi Kasus 2: Dashboard UMKM

Kebutuhan

Data penjualan cabang
Grafik revenue
Monitoring stok
Dashboard pusat

Solusi

Standalone Script mengambil data dari berbagai spreadsheet cabang.

Teknologi

Frontend:

HTML
Bootstrap
Google Charts

Backend:

Apps Script

Database:

Google Sheets

21. Studi Kasus 3: Sistem Generate Sertifikat

Kebutuhan

Ambil data peserta
Generate PDF sertifikat
Kirim email otomatis

Contoh Script

function sendCertificate(){

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

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

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

  data.forEach(row => {

    const email = row[1];

    MailApp.sendEmail(
      email,
      'Sertifikat',
      'Sertifikat Anda telah tersedia'
    );
  });
}

22. Studi Kasus 4: Integrasi API

Standalone Script dapat digunakan untuk mengambil data API.

Contoh API Request

function getAPI(){

  const response = UrlFetchApp.fetch(
    'https://api.example.com/data'
  );

  const data = JSON.parse(
    response.getContentText()
  );

  Logger.log(data);
}

23. Trigger pada Standalone Script

Trigger digunakan untuk otomatisasi.

Jenis Trigger

Trigger	Fungsi
Time-driven	Berdasarkan waktu
onOpen	Saat file dibuka
onEdit	Saat data berubah
API trigger	Berdasarkan request

Contoh Time Trigger

function autoBackup(){
  Logger.log('Backup berjalan');
}

Trigger:

Setiap jam
Setiap hari
Setiap minggu

24. Integrasi Database

Standalone Script dapat terhubung dengan:

Google Sheets
Firebase
MySQL
PostgreSQL
REST API

25. Integrasi Google Charts

Contoh

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

26. Best Practice Standalone Script

1. Gunakan Modular Code

Pisahkan:

API
Database
Frontend
Config

2. Gunakan Config File

Contoh:

const CONFIG = {
  spreadsheetId:'ID_FILE'
}

3. Gunakan Error Handling

try{

}catch(error){
  Logger.log(error);
}

4. Gunakan include()

Agar code lebih rapi.

5. Hindari Hardcode

Gunakan variabel.

27. Arsitektur Standalone Script

User Browser
      │
      ▼
Frontend HTML/CSS/JS
      │
      ▼
Standalone Apps Script
      │
      ├── Spreadsheet A
      ├── Spreadsheet B
      ├── Spreadsheet C
      │
      ▼
Dashboard Monitoring

28. Kapan Menggunakan Standalone Script?

Gunakan jika:

Sistem multi spreadsheet
Dashboard enterprise
Integrasi API
Sistem besar
Monitoring pusat
Multi-user app
Integrasi cloud

29. Kapan Tidak Menggunakan Standalone Script?

Hindari jika:

Sistem sederhana
Satu spreadsheet saja
Dashboard kecil
Automation ringan

30. Perbandingan Bound dan Standalone

Aspek	Bound Script	Standalone Script
Struktur	Terikat file	Independen
Akses file	File aktif	Banyak file
Kompleksitas	Sederhana	Kompleks
Reusable	Tidak	Ya
Cocok untuk	Dashboard kecil	Enterprise

31. Kesimpulan

Standalone Script adalah Google Apps Script yang berdiri sendiri dan tidak terikat pada file tertentu.

Standalone Script sangat cocok digunakan untuk:

Dashboard enterprise
Sistem monitoring pusat
Integrasi API
Multi spreadsheet system
Automation skala besar
Web app profesional

Kelebihan utama Standalone Script:

Fleksibel
Reusable
Scalable
Cocok untuk aplikasi besar

Dengan memahami Standalone Script, developer dapat membangun sistem cloud modern berbasis Google Workspace yang lebih kompleks dan profesional.

Sabtu, 30 Mei 2026

Rabu, 27 Mei 2026

Panduan Penyebaran Portal PPDB SMA Atas Talian

Langkah 1: Persediaan Pangkalan Data (Google Spreadsheet)

Langkah 2: Persediaan Fail Folder Google Drive

Langkah 3: Membuat Projek Google Apps Script (GAS)

Langkah 4: Proses Pelancaran Aplikasi Web (Deployment)

🎉 Selesai!

Prompt Pengembangan Web App Google Apps Script

Sistem Pendaftaran Siswa SMA (Standalone Script + Arsitektur MPA)

Tujuan Aplikasi

Spesifikasi Teknologi

Platform

Arsitektur

Struktur File

Landing Page

Hero Section

Visual Style

Warna

Gunakan

Database Spreadsheet

Nama Sheet

Struktur Kolom

Fitur CRUD

Create

Read

Update

Delete

Upload Foto

Ketentuan

Validasi

Dashboard Admin

Fitur Dashboard

UI Dashboard

Generate PDF Bukti Pendaftaran

PDF berisi:

Format

Penyimpanan

Routing MPA

Validasi Form

Validasi Client Side

Validasi Server Side

UX Features

Security

Coding Style

Output yang Harus Dihasilkan

🏛️ Struktur File Proyek di Editor Apps Script

🛠️ 1. Backend: Code.gs

PROJECT SUMMARY PROMPT: SISTEM INVENTARIS MP-GAS

1. Ringkasan Arsitektur & Teknologi

2. Struktur File Proyek (Flat Directory)

3. Struktur Database (Google Spreadsheet)

4. Alur Kerja Sistem (Data Flow)

💡 Cara Menggunakan Summary Ini untuk Pengembangan Selanjutnya:

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

🛠️ 1. Backend: `Code.gs`