Minggu, 15 Februari 2026

Software Development - Tahapan Requirement Engineering

 



Problem Identification ↓ Requirement Engineering ↓ SRS ↓ System Analysis ↓ Architecture Design ↓ Database Design ↓ Backend & Frontend Design ↓ Integration ↓ Testing & Deployment

TAHAPAN REQUIREMENT ENGINEERING

Requirement Engineering terdiri dari lima tahap utama:

Elicitation → Analysis → Specification → Validation → Management

Kelima tahap ini bersifat iteratif, bukan linear kaku. Dalam praktik nyata, sering terjadi pengulangan antar tahap.


1️⃣ ELICITATION (Penggalian Kebutuhan)

๐Ÿ“Œ Definisi

Proses mengidentifikasi dan mengumpulkan kebutuhan sistem dari stakeholder.

๐ŸŽฏ Tujuan

  • Memahami kebutuhan bisnis

  • Menggali ekspektasi stakeholder

  • Mengidentifikasi masalah sistem lama

  • Menemukan kebutuhan eksplisit & implisit


๐ŸŽญ Aktivitas Utama

  • Interview

  • Workshop

  • Observasi lapangan

  • Kuesioner

  • Prototyping awal

  • Analisis dokumen lama


๐Ÿ“Œ Jenis Kebutuhan yang Dikumpulkan

  1. Business Requirement

  2. User Requirement

  3. System Requirement


⚠️ Tantangan

  • Stakeholder tidak mampu menjelaskan kebutuhan secara jelas

  • Kebutuhan saling bertentangan

  • Kebutuhan tersembunyi (implicit requirement)


๐Ÿ“Œ Output

  • Raw requirement list

  • Stakeholder list

  • Catatan wawancara

  • Daftar masalah sistem


2️⃣ ANALYSIS (Analisis Kebutuhan)

๐Ÿ“Œ Definisi

Proses menyaring, mengklarifikasi, dan memodelkan requirement agar tidak ambigu.


๐ŸŽฏ Tujuan

  • Menghilangkan duplikasi

  • Mengatasi konflik requirement

  • Mengidentifikasi prioritas

  • Memastikan feasibility (teknis & bisnis)


๐Ÿ” Aktivitas

  • Requirement classification (FR & NFR)

  • Conflict resolution

  • Prioritization (MoSCoW)

  • Modeling (Use Case, Activity Diagram)

  • Feasibility analysis


๐Ÿ“Š Contoh Klasifikasi

Functional Requirement

  • Sistem harus menyimpan data transaksi

Non-Functional Requirement

  • Response time < 2 detik


⚠️ Risiko Jika Tidak Dianalisis

  • Ambiguity

  • Scope creep

  • Sistem tidak realistis


๐Ÿ“Œ Output

  • Requirement yang telah diperjelas

  • Prioritas requirement

  • Model analisis (Use Case list)


3️⃣ SPECIFICATION (Spesifikasi Kebutuhan)

๐Ÿ“Œ Definisi

Tahap mendokumentasikan requirement dalam format formal dan terstruktur.


๐ŸŽฏ Tujuan

  • Membuat dokumen resmi

  • Menghindari interpretasi berbeda

  • Menjadi kontrak antara client & developer


๐Ÿ“‘ Format Umum

1. Functional Requirement (FR)

FR-01: Sistem harus menyediakan login pengguna.

2. Non-Functional Requirement (NFR)

NFR-01: Sistem harus memiliki uptime 99%.


๐Ÿ“Œ Karakteristik Requirement yang Baik (SMART)

  • Specific

  • Measurable

  • Achievable

  • Relevant

  • Testable


๐Ÿ“Œ Output

  • Dokumen SRS

  • Requirement specification document

  • Requirement Traceability Matrix


4️⃣ VALIDATION (Validasi Kebutuhan)

๐Ÿ“Œ Definisi

Memastikan requirement benar, lengkap, dan sesuai kebutuhan stakeholder.


๐ŸŽฏ Tujuan

  • Menghindari kesalahan sebelum coding

  • Memastikan semua stakeholder sepakat

  • Mengurangi rework


๐Ÿ›  Metode Validasi

  1. Requirement review meeting

  2. Walkthrough document

  3. Prototype demonstration

  4. Checklist verification

  5. Test-case derivation


๐Ÿ“‹ Checklist Validasi

KriteriaPertanyaan
Lengkap?Semua kebutuhan sudah dicatat?
Konsisten?Tidak ada konflik?
Testable?Bisa diuji?
Jelas?Tidak ambigu?

๐Ÿ“Œ Output

  • Requirement yang disetujui (baseline)

  • Dokumen final untuk tahap desain


5️⃣ MANAGEMENT (Manajemen Requirement)

๐Ÿ“Œ Definisi

Mengelola perubahan requirement selama siklus hidup proyek.


๐ŸŽฏ Tujuan

  • Mengendalikan perubahan

  • Menghindari scope creep

  • Menjaga stabilitas proyek


๐Ÿ”„ Proses Change Management

Change Request ↓ Impact Analysis ↓ Approval ↓ Update Document

๐Ÿ“Š Contoh Perubahan

Awal:

  • Tidak ada fitur diskon

Owner meminta:

  • Tambah fitur promo

Tim melakukan:

  • Analisis dampak database

  • Update SRS

  • Update estimasi waktu


๐Ÿ“Œ Tools Requirement Management

  • Jira

  • Trello

  • Azure DevOps

  • Git issue tracking


๐Ÿ” Sifat Iteratif Requirement Engineering

Requirement Engineering tidak berhenti setelah SRS selesai.

Dalam Agile:

Backlog Refinement → Sprint Planning → Review → Update Requirement

Dalam Waterfall:
Perubahan dilakukan melalui formal change request.


๐Ÿ“Š RINGKASAN TAHAPAN

TahapFokusOutput
ElicitationMenggali kebutuhanRaw requirement
AnalysisKlarifikasi & prioritasRequirement terstruktur
SpecificationDokumentasi formalSRS
ValidationVerifikasi & persetujuanBaseline requirement
ManagementMengelola perubahanUpdated requirement

Software Development - Requirement Engineering

 



Problem Identification ↓ Requirement Engineering ↓ SRS ↓ System Analysis ↓ Architecture Design ↓ Database Design ↓ Backend & Frontend Design ↓ Integration ↓ Testing & Deployment

REQUIREMENT ENGINEERING

๐Ÿ“Œ Definisi

Requirement Engineering adalah proses sistematis untuk:

  • Mengidentifikasi kebutuhan sistem

  • Mengumpulkan kebutuhan dari stakeholder

  • Menganalisis dan menyaring kebutuhan

  • Mendokumentasikan kebutuhan secara formal

  • Memvalidasi kebutuhan sebelum sistem dikembangkan

Requirement Engineering menjawab pertanyaan:
“Apa yang harus dibangun?” sebelum masuk ke “Bagaimana cara membangunnya?”


๐ŸŽฏ Tujuan Requirement Engineering

  1. Memastikan sistem sesuai kebutuhan bisnis

  2. Menghindari kesalahan desain sejak awal

  3. Mengurangi risiko perubahan besar di tengah proyek

  4. Menjadi dasar penyusunan SRS

  5. Menjadi referensi tim developer, tester, dan stakeholder


๐Ÿ”„ TAHAPAN REQUIREMENT ENGINEERING

Requirement Engineering bukan hanya mengumpulkan kebutuhan, tetapi melibatkan beberapa tahap:

Elicitation → Analysis → Specification → Validation → Management

Pada pembahasan ini fokus pada tahap awal:

๐ŸŽฏ Tahapan Mengumpulkan Kebutuhan Sistem dari Stakeholder


๐ŸŽญ STAKEHOLDER

Stakeholder adalah pihak yang memiliki kepentingan terhadap sistem.

1️⃣ User

Contoh:

  • Pelanggan

  • Operator sistem

Fokus:

  • Kemudahan penggunaan

  • Kecepatan akses

  • Kejelasan informasi


2️⃣ Owner / Business Owner

Fokus:

  • Efisiensi operasional

  • Peningkatan pendapatan

  • Laporan dan analitik

  • Return on Investment (ROI)


3️⃣ Admin

Fokus:

  • Kemudahan pengelolaan data

  • Kontrol sistem

  • Monitoring transaksi


4️⃣ IT Team

Fokus:

  • Maintainability

  • Scalability

  • Security

  • Integrasi sistem


5️⃣ Regulator

Fokus:

  • Kepatuhan hukum

  • Perlindungan data pribadi

  • Standar keamanan sistem


๐Ÿ›  METODE PENGUMPULAN REQUIREMENT

Berikut metode yang umum digunakan dalam praktik profesional.


1️⃣ Interview

๐Ÿ“Œ Definisi

Percakapan terstruktur dengan stakeholder untuk menggali kebutuhan.

๐Ÿ“Œ Tujuan

  • Mendapatkan informasi mendalam

  • Memahami pain point

  • Mengetahui ekspektasi sistem

๐Ÿ“Œ Kelebihan

  • Detail dan kontekstual

  • Bisa menggali kebutuhan tersembunyi

๐Ÿ“Œ Kekurangan

  • Subjektif

  • Bergantung pada kemampuan interviewer


2️⃣ Workshop

๐Ÿ“Œ Definisi

Diskusi kelompok terstruktur dengan berbagai stakeholder.

๐Ÿ“Œ Tujuan

  • Menyamakan persepsi

  • Menghindari konflik requirement

  • Mendapatkan konsensus

๐Ÿ“Œ Output

  • Requirement yang disepakati bersama


3️⃣ Kuesioner

๐Ÿ“Œ Definisi

Pengumpulan data melalui pertanyaan tertulis.

๐Ÿ“Œ Cocok untuk:

  • Banyak responden

  • User skala besar

๐Ÿ“Œ Kelebihan

  • Efisien

  • Terstruktur

๐Ÿ“Œ Kekurangan

  • Kurang mendalam


4️⃣ Prototyping

๐Ÿ“Œ Definisi

Membuat model awal sistem (mockup/wireframe).

๐Ÿ“Œ Tujuan

  • Memvalidasi kebutuhan

  • Mengurangi kesalahan interpretasi

๐Ÿ“Œ Manfaat

  • Stakeholder lebih mudah memahami sistem

  • Mengurangi ambiguity


5️⃣ Observasi Lapangan

๐Ÿ“Œ Definisi

Mengamati langsung proses bisnis yang sedang berjalan.

๐Ÿ“Œ Tujuan

  • Memahami sistem AS-IS

  • Menemukan masalah nyata

๐Ÿ“Œ Kelebihan

  • Data objektif

  • Mengungkap kebutuhan yang tidak disadari stakeholder


๐Ÿ“Œ OUTPUT REQUIREMENT ENGINEERING

Setelah proses pengumpulan selesai, hasilnya harus terdokumentasi secara formal.


1️⃣ Daftar Kebutuhan Sistem

Contoh format:

Functional Requirement

  • Sistem harus menyediakan login

  • Sistem harus menyimpan transaksi

Non-Functional Requirement

  • Sistem harus responsif

  • Sistem harus aman


2️⃣ Prioritas Kebutuhan

Menggunakan metode seperti:

  • MoSCoW Method

KategoriArti
Must HaveWajib
Should HavePenting
Could HaveTambahan
Won’t HaveTidak sekarang

Contoh:

RequirementPrioritas
LoginMust
Dashboard laporanShould
Dark modeCould


3️⃣ Dokumen Requirement Awal

Dokumen ini biasanya berisi:

  1. Ringkasan kebutuhan bisnis

  2. Daftar functional requirement

  3. Daftar non-functional requirement

  4. Stakeholder list

  5. Constraint

  6. Assumption

Dokumen ini menjadi dasar penyusunan SRS formal.

Software Development - Problem Identification

 




Problem Identification ↓ Requirement Engineering ↓ SRS ↓ System Analysis ↓ Architecture Design ↓ Database Design ↓ Backend & Frontend Design ↓ Integration ↓ Testing & Deployment

Sistem Pemesanan Makanan Online untuk UMKM

Tahap ini adalah fondasi rekayasa perangkat lunak.
Kesalahan di tahap ini akan berdampak ke seluruh siklus pengembangan.


๐ŸŽฏ TUJUAN IDENTIFIKASI MASALAH

Memahami:

  • Masalah bisnis yang sebenarnya

  • Proses operasional saat ini (AS-IS)

  • Hambatan pertumbuhan

  • Kebutuhan nyata stakeholder

Prinsip penting:
Jangan membangun sistem berdasarkan asumsi teknis, tetapi berdasarkan masalah bisnis yang terverifikasi.


๐Ÿ” AKTIVITAS IDENTIFIKASI MASALAH


1️⃣ Observasi Proses Bisnis (AS-IS Analysis)

๐Ÿ“Œ Tujuan

Memahami bagaimana sistem berjalan saat ini.

๐Ÿ“‹ Kondisi UMKM (Manual System)

Alur pemesanan yang terjadi:

Pelanggan kirim pesan WhatsApp ↓ Admin membalas manual ↓ Pesanan dicatat di buku ↓ Dapur menerima informasi via lisan ↓ Admin hitung total manual ↓ Pelanggan transfer ↓ Admin konfirmasi manual

๐Ÿ”Ž Temuan Observasi

1. Proses Tidak Terstandarisasi

  • Format pesanan berbeda-beda

  • Admin harus membaca chat satu per satu

2. Human Error Tinggi

  • Salah catat jumlah

  • Salah hitung total

  • Lupa mencatat pesanan

3. Tidak Ada Database Terpusat

  • Data pelanggan tidak tersimpan

  • Riwayat transaksi tidak terdokumentasi

4. Tidak Real-Time

  • Dapur sering terlambat menerima pesanan

  • Tidak ada notifikasi otomatis


๐Ÿ“Š Dampak Operasional

MasalahDampak
Manual inputLambat
Tidak terstrukturSulit analisis
Tidak ada laporanOwner tidak tahu performa
Chat menumpukCustomer experience buruk

2️⃣ Interview Stakeholder

Stakeholder utama:

  • Owner UMKM

  • Admin kasir

  • Pelanggan tetap

  • Staff dapur


๐ŸŽ™ Hasil Interview – Owner

Keluhan utama:

  • Tidak tahu menu mana paling laris

  • Sulit menghitung omzet harian

  • Tidak ada laporan bulanan otomatis

  • Ketergantungan pada admin


๐ŸŽ™ Hasil Interview – Admin

Keluhan:

  • Chat terlalu banyak saat jam sibuk

  • Sering salah hitung

  • Harus copy-paste alamat manual


๐ŸŽ™ Hasil Interview – Pelanggan

Keluhan:

  • Lama dibalas

  • Tidak tahu status pesanan

  • Tidak ada katalog menu rapi


3️⃣ Identifikasi Pain Point

Dari observasi dan interview, ditemukan pain point berikut:


๐Ÿ”ด Pain Point 1: Inefisiensi Operasional

  • 1 admin hanya mampu menangani ±20 order/jam

  • Pada jam sibuk terjadi bottleneck


๐Ÿ”ด Pain Point 2: Kesalahan Perhitungan

  • Total salah

  • Diskon lupa diterapkan

  • Ongkir tidak konsisten


๐Ÿ”ด Pain Point 3: Tidak Ada Insight Bisnis

Owner tidak memiliki:

  • Data penjualan per hari

  • Produk terlaris

  • Repeat customer rate


๐Ÿ”ด Pain Point 4: Skalabilitas Rendah

Jika pesanan meningkat:

  • Admin harus ditambah

  • Biaya operasional meningkat


๐Ÿ”ด Pain Point 5: Customer Experience Rendah

  • Tidak ada tracking

  • Tidak ada konfirmasi otomatis

  • Tidak ada sistem terstruktur


4️⃣ Analisis Gap Sistem Lama (Gap Analysis)

๐Ÿ“Š Perbandingan AS-IS vs TO-BE

AspekAS-IS (Manual)TO-BE (Digital System)
PencatatanBuku/ChatDatabase
PerhitunganManualOtomatis
LaporanTidak adaReal-time dashboard
ProsesLambatOtomatis
SkalabilitasRendahTinggi

๐Ÿ“Œ Gap Utama

  1. Tidak ada sistem terpusat

  2. Tidak ada automasi

  3. Tidak ada analitik

  4. Tidak ada integrasi data


๐Ÿ“Œ OUTPUT TAHAP IDENTIFIKASI MASALAH


1️⃣ Problem Statement

UMKM mengalami inefisiensi operasional dalam proses pemesanan makanan karena sistem masih dilakukan secara manual melalui WhatsApp dan pencatatan buku, sehingga menyebabkan kesalahan pencatatan, lambatnya pelayanan, tidak tersedianya data analitik, serta keterbatasan skalabilitas bisnis.


2️⃣ Business Objective

Tujuan bisnis yang ingin dicapai:

  1. Meningkatkan efisiensi pemrosesan pesanan minimal 50%

  2. Mengurangi human error hingga <5%

  3. Menyediakan laporan penjualan real-time

  4. Meningkatkan kapasitas order tanpa menambah SDM

  5. Meningkatkan kepuasan pelanggan


3️⃣ High-Level Solution

Mengembangkan sistem pemesanan makanan berbasis web dengan fitur:

  • Registrasi & login pelanggan

  • Katalog produk digital

  • Keranjang belanja otomatis

  • Checkout otomatis

  • Dashboard admin

  • Laporan penjualan real-time

  • Database terpusat

Software Development

 




https://notebooklm.google.com/notebook/aa90cb8a-990f-46a7-aa65-fdf54cf21e0c?artifactId=eac3296b-2923-4ed2-84c5-172a3f551baf

https://chatgpt.com/c/69911a01-4cb8-8324-a4e0-93730503d826

PROSES PENGEMBANGAN PERANGKAT LUNAK (END-TO-END SDLC)

Pengembangan perangkat lunak bukan sekadar coding, tetapi proses rekayasa sistem yang terstruktur dan terdokumentasi.

Secara umum mengikuti tahapan:

Problem Identification ↓ Requirement Engineering ↓ SRS ↓ System Analysis ↓ Architecture Design ↓ Database Design ↓ Backend & Frontend Design ↓ Integration ↓ Testing & Deployment

1️⃣ IDENTIFIKASI MASALAH

๐ŸŽฏ Tujuan

Memahami masalah bisnis sebelum menulis satu baris kode pun.

๐Ÿ” Aktivitas

  • Observasi proses bisnis

  • Interview stakeholder

  • Identifikasi pain point

  • Analisis gap sistem lama

๐Ÿ“Œ Output

  • Problem statement

  • Business objective

  • High-level solution

⚠️ Prinsip Penting

Jangan langsung menawarkan solusi teknis sebelum memahami masalah bisnis.


2️⃣ REQUIREMENT GATHERING

Tahapan mengumpulkan kebutuhan sistem dari stakeholder.

๐ŸŽญ Stakeholder

  • User

  • Owner

  • Admin

  • IT team

  • Regulator

๐Ÿ›  Metode

  • Interview

  • Workshop

  • Kuesioner

  • Prototyping

  • Observasi lapangan

๐Ÿ“Œ Output

  • Daftar kebutuhan sistem

  • Prioritas kebutuhan

  • Dokumen requirement awal


3️⃣ SRS (Software Requirements Specification)

SRS adalah dokumen formal yang menjelaskan apa yang harus dilakukan sistem, bukan bagaimana caranya.


๐Ÿ“‘ Struktur Umum SRS

1. Pendahuluan

  • Tujuan dokumen

  • Ruang lingkup sistem

  • Definisi istilah

2. Deskripsi Umum

  • Perspektif produk

  • Karakteristik pengguna

  • Batasan sistem

3. Functional Requirements

Contoh:

IDRequirement
FR1Sistem harus memungkinkan user login
FR2Sistem harus menyimpan transaksi

4. Non-Functional Requirements

KategoriContoh
PerformanceResponse < 2 detik
SecurityEnkripsi password
Availability99% uptime
Scalability10.000 user concurrent

5. Use Case Specification

Menjelaskan interaksi user dengan sistem.


๐Ÿ“Œ Output

Dokumen SRS lengkap (baseline kontrak antara client dan developer).


4️⃣ ANALISIS SISTEM

Tahapan menguraikan requirement menjadi model sistem.

๐ŸŽญ Identifikasi Aktor

  • Primary actor

  • Secondary actor

๐Ÿ”„ Use Case Analysis

Menentukan:

  • Main success scenario

  • Alternate flow

  • Exception flow


๐Ÿ“Š Activity Diagram (Deskriptif)

User Login ↓ Validasi ↓ Akses Dashboard

⚠️ Constraint Analysis

  • Budget

  • Timeline

  • Infrastruktur

  • Regulasi


5️⃣ PERANCANGAN ARSITEKTUR SISTEM

Menentukan struktur teknis sistem.


๐Ÿ“Œ Pilihan Arsitektur

ArsitekturKapan digunakan
MonolithSistem kecil-menengah
MVCWeb application
MicroservicesEnterprise & scalable
Clean ArchitectureMaintainability tinggi

๐Ÿ— Client-Server Model

Client (Browser) ↓ Application ServerDatabase Server

๐ŸŒ REST Architecture

Karakteristik:

  • Stateless

  • JSON-based

  • HTTP method (GET, POST, PUT, DELETE)


☁ Deployment Model

  • On-premise

  • Cloud (AWS/GCP/Azure)

  • Containerized (Docker)

  • CI/CD pipeline


6️⃣ DESAIN DATABASE

Database design bertujuan memastikan:

  • Konsistensi data

  • Integritas relasi

  • Efisiensi query


๐Ÿ“Š ERD (Konsep)

User (1) ────< Order (1) ────< OrderDetail >──── (1) Product

๐Ÿ“Œ Normalisasi

1NF → Data atomic
2NF → No partial dependency
3NF → No transitive dependency


๐Ÿ“Œ Contoh Struktur Tabel

Users

  • id (PK)

  • name

  • email (unique)

  • password_hash

  • role


7️⃣ DESAIN BACKEND

Backend bertanggung jawab pada:

  • Business logic

  • Validasi

  • Data processing

  • Security


๐Ÿ“Œ Pilihan Teknologi

  • Node.js + Express

  • Java Spring Boot

  • PHP Laravel

  • Python Django


๐Ÿ“‚ Struktur MVC

/controllers /models /routes /middlewares /config

๐Ÿ“Œ Contoh Endpoint

GET /api/products POST /api/login POST /api/orders

๐Ÿ” Security Layer

  • JWT authentication

  • Password hashing (bcrypt)

  • Role-based access control

  • Input sanitization


8️⃣ DESAIN FRONTEND

Frontend bertanggung jawab pada:

  • UI/UX

  • Interaksi user

  • Integrasi API


๐ŸŽจ UI/UX Principle

  • Simplicity

  • Consistency

  • Accessibility

  • Responsive design


๐Ÿ“Œ Arsitektur Frontend

  • Multi-page application

  • SPA (Single Page Application)

Modern enterprise → SPA (React/Vue/Angular)


๐Ÿ“ฆ Komponen

  • Navbar

  • Form

  • Table

  • Modal

  • Dashboard


๐Ÿ”„ Integrasi API

fetch('/api/products') .then(res => res.json()) .then(data => render(data));

9️⃣ INTEGRASI SISTEM

Menjamin komunikasi antar layer berjalan baik.


๐Ÿ” Alur Request-Response

Frontend → HTTP Request → Backend Backend → Query DB → Response JSON Frontend → Render UI

๐Ÿ“ฆ Struktur JSON Standar

{ "status": "success", "data": {}, "message": "" }

๐Ÿ”Ÿ TESTING STRATEGY

Testing dilakukan berlapis.


๐Ÿงช 1. Unit Testing

Mengujicoba fungsi secara individual.

Contoh:

  • Validasi login

  • Perhitungan total transaksi


๐Ÿ”— 2. Integration Testing

Mengujicoba antar modul:

  • API ↔ Database

  • Frontend ↔ Backend


๐Ÿ‘ฅ 3. System Testing

Menguji sistem secara keseluruhan.


✔ 4. User Acceptance Testing (UAT)

Checklist berbasis requirement di SRS.

E Arsip

 




Prompt Sheet to Web

 




Code.gs

// ===============================
// CONFIG
// ===============================
const SPREADSHEET_ID = "ISI_SPREADSHEET_ID";
const SHEET_NAME = "ISI_NAMA_SHEET";

// ===============================
// ENTRY POINT (SPA)
// ===============================
function doGet(e) {
  const page = e.parameter.page || "home";
  return HtmlService
    .createHtmlOutput(htmlGenerate(page))
    .setTitle("SPA Spreadsheet App")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// ===============================
// HTML GENERATOR
// ===============================
function htmlGenerate(page) {
  return `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPA Spreadsheet</title>

<style>
body {
  margin:0;
  font-family: Arial, sans-serif;
  background:#f4f6f9;
}

header {
  background:#2c3e50;
  color:white;
  padding:15px;
  display:flex;
  justify-content:space-between;
}

nav a {
  color:white;
  margin-left:15px;
  text-decoration:none;
}

.container {
  padding:20px;
  max-width:1200px;
  margin:auto;
}

.card {
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

table {
  width:100%;
  border-collapse:collapse;
}

th,td {
  padding:10px;
  border-bottom:1px solid #ddd;
}

th {
  background:#2c3e50;
  color:white;
}

.loading {
  text-align:center;
  padding:20px;
}

.error {
  color:red;
  text-align:center;
}
</style>
</head>

<body>

<header>
  <div>Spreadsheet SPA</div>
  <nav>
    <a href="#" onclick="navigate('home')">Home</a>
    <a href="#" onclick="navigate('table')">Table</a>
    <a href="#" onclick="navigate('cards')">Cards</a>
  </nav>
</header>

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

<script>

// ===============================
// SPA ROUTER
// ===============================
function navigate(page){
  history.pushState({}, "", "?page=" + page);
  renderPage(page);
}

window.onpopstate = function(){
  const params = new URLSearchParams(window.location.search);
  const page = params.get("page") || "home";
  renderPage(page);
};

// ===============================
// INITIAL LOAD
// ===============================
document.addEventListener("DOMContentLoaded", function(){
  const params = new URLSearchParams(window.location.search);
  const page = params.get("page") || "${page}";
  renderPage(page);
});

// ===============================
// RENDER PAGE
// ===============================
function renderPage(page){
  const app = document.getElementById("app");

  if(page === "home"){
    app.innerHTML = \`
      <div class="card">
        <h2>Welcome</h2>
        <p>Aplikasi SPA berbasis Google Spreadsheet.</p>
      </div>
    \`;
  }

  if(page === "table"){
    app.innerHTML = '<div class="loading">Loading...</div>';
    loadData("table");
  }

  if(page === "cards"){
    app.innerHTML = '<div class="loading">Loading...</div>';
    loadData("cards");
  }
}

// ===============================
// FETCH DATA
// ===============================
function loadData(viewType){
  google.script.run
    .withSuccessHandler(function(response){
      if(response.status !== "success"){
        showError(response.message);
        return;
      }

      if(viewType === "table"){
        renderTable(response.data);
      } else {
        renderCards(response.data);
      }
    })
    .withFailureHandler(function(error){
      showError(error.message);
    })
    .getData();
}

function showError(message){
  document.getElementById("app").innerHTML =
    '<div class="error">Error: '+ message +'</div>';
}

// ===============================
// TABLE VIEW
// ===============================
function renderTable(data){
  if(data.length === 0){
    document.getElementById("app").innerHTML = "No Data";
    return;
  }

  const headers = Object.keys(data[0]);

  let html = '<div class="card"><table><thead><tr>';
  headers.forEach(h => html += '<th>'+h+'</th>');
  html += '</tr></thead><tbody>';

  data.forEach(row => {
    html += '<tr>';
    headers.forEach(h => html += '<td>'+row[h]+'</td>');
    html += '</tr>';
  });

  html += '</tbody></table></div>';
  document.getElementById("app").innerHTML = html;
}

// ===============================
// CARD VIEW
// ===============================
function renderCards(data){
  let html = '<div class="grid">';
  data.forEach(row => {
    html += '<div class="card">';
    for(let key in row){
      html += '<p><strong>'+key+':</strong> '+row[key]+'</p>';
    }
    html += '</div>';
  });
  html += '</div>';
  document.getElementById("app").innerHTML = html;
}

</script>

</body>
</html>
`;
}

// ===============================
// API METHOD
// ===============================
function getData(){
  try{
    const sheet = SpreadsheetApp
      .openById(SPREADSHEET_ID)
      .getSheetByName(SHEET_NAME);

    const values = sheet.getDataRange().getValues();
    const headers = values.shift();

    const data = values.map(row => {
      let obj = {};
      headers.forEach((h,i)=> obj[h] = row[i]);
      return obj;
    });

    return { status:"success", data:data };

  } catch(err){
    return { status:"error", message: err.toString() };
  }
}

Belajar Python 1

  https://www.youtube.com/watch?v=HSAm6s10G7g&list=PLZS-MHyEIRo59lUBwU-XHH7Ymmb04ffOY&index=3 https://www.python.org/ https://id.wik...