Overview Kursus: Aplikasi Absensi Sederhana

Di kursus ini, kita akan membangun satu proyek nyata dari awal: Aplikasi Presensi / Absensi Sederhana (Simple Attendance App).

Seluruh aplikasi (tampilan antarmuka HTML, desain CSS, database Sheets, dan backend Code.gs) berada dalam satu ekosistem terpadu di Google Apps Script. Kita tidak memerlukan hosting eksternal, tidak perlu konfigurasi API rumit, dan tidak perlu memanggil script dari luar—karena HTML dan CSS disajikan langsung oleh Google Apps Script (HtmlService).

4 Operasi CRUD pada Aplikasi Absensi

┌────────────────────────────────────────────────────────────────────────┐
│                        SIKLUS CRUD APLIKASI ABSENSI                    │
├─────────┬──────────────────────────────────┬───────────────────────────┤
│ OPERASI │ ANTARMUKA (Index.html & Style)   │ BACKEND (Code.gs)         │
├─────────┼──────────────────────────────────┼───────────────────────────┤
│ CREATE  │ Form Presensi (<form method=POST)│ createAttendance()        │
│ READ    │ Tabel Riwayat Kehadiran (Badges) │ readAttendance()          │
│ UPDATE  │ Edit Status Kehadiran            │ updateAttendance()        │
│ DELETE  │ Tombol Hapus Baris Presensi      │ deleteAttendance()        │
└─────────┴──────────────────────────────────┴───────────────────────────┘

Struktur Proyek di Google Apps Script

Editor Google Apps Script (script.google.com):
├── Schema.gs    # Definisi skema tabel, mapping kolom, & inisialisasi sheet
├── Code.gs      # Backend: Logika CRUD & router web (doGet & doPost)
└── Index.html   # Frontend: Struktur HTML & Styling CSS dalam 1 file

Yang Akan Kamu Pelajari

• Director Mindset: Mengarahkan AI membangun aplikasi web terpadu tanpa over-engineering.
• Skema Database (Schema.gs): Mengatur nama sheet, inisialisasi kolom tabel otomatis, dan validasi data.
• Backend CRUD (Code.gs): Menulis fungsi Create, Read, Update, Delete yang berinteraksi langsung dengan baris Google Sheets.
• Antarmuka Web Terpadu (Index.html): Membuat form absensi, styling Modern CSS Charcoal Dark, dan tabel riwayat kehadiran dalam 1 file HTML.
• Penyimpanan Foto & Media: Memanfaatkan Google Drive (DriveApp) secara gratis jika ingin menyimpan foto bukti kehadiran/lampiran gambar.
• Deploy Web App: Mempublikasikan aplikasi menjadi link website aktif dengan satu kali klik.

Peta Kurikulum

1. Mental Model & Workflow: Filosofi vibe coding terpadu dan teknik prompt Google T-C-R-E-I yang presisi.
2. Web Sederhana (HTML & CSS): Merancang Index.html dan Style.html untuk form absensi dan tabel riwayat data.
3. Google Apps Script (Code.gs): Menulis script CRUD backend untuk mengelola database Google Sheets.
4. Integrasi & Deploy: Mempublikasikan Web App dan menguji operasi CRUD secara langsung.