Rencana Pembelajaran Semester (RPS)
Buku teks referensi: "From Prompt to Production: Pemrograman Web Modern untuk Generasi AI". ATWS Level menunjukkan aturan penggunaan AI yang berlaku pada pertemuan tersebut. Klik Materi untuk mengakses bahan ajar / slide pertemuan. Tautan aktif sesuai jadwal.
Bagian I — Fondasi Manual | ATWS Level 1
Pertemuan 1–5 · Membangun mental model sebelum berkolaborasi dengan AI
| No. | Topik / Pokok Bahasan | Tujuan Pembelajaran | Aksi |
|---|---|---|---|
| 1 |
Bagaimana Web Sebenarnya Bekerja
Arsitektur web: HTTP, client-server, DNS, browser rendering pipeline, request-response cycle
|
Menggambar dan menjelaskan alur request-response HTTP lengkap dari URL di browser hingga pixel di layar. |
Materi |
| 2 |
HTML: Struktur Semantik dan Aksesibilitas
Dokumen sebagai struktur bermakna, HTML5 semantik, aksesibilitas (WCAG 2.1 Level A), validasi W3C
|
Membangun halaman yang melewati validasi W3C dan memenuhi standar aksesibilitas dasar. Proyek: Personal Landing Page single-page. |
Materi |
| 3 |
CSS Modern: Dari Layout Sampai Sistem Desain
Box model, Flexbox, Grid, responsive design, lalu akselerasi dengan Tailwind CSS (utility-first)
|
Membangun layout responsif menggunakan Flexbox, Grid, dan utility-first framework tanpa bergantung pada template. Proyek: Styling Landing Page. |
Materi |
| 4 |
JavaScript: Logika, Interaksi, dan State
Variabel, fungsi, array, objek, DOM manipulation, event handling, async/await, localStorage
|
Menulis program yang menggunakan variabel, fungsi, DOM manipulation, event handling, dan async operations secara benar. |
Materi |
| 5 |
Lab: Proyek 1 — Interactive Task Manager
Integrasi HTML + CSS + JS, localStorage, drag-and-drop, Deep Understanding Zone (No-AI Challenge)
|
Membangun aplikasi Task Manager interaktif secara mandiri (tanpa AI) sebagai bukti pemahaman Fondasi Manual sebelum naik ke ATWS Level 2. |
Panduan Lab Submit Proyek |
Bagian II — AI sebagai Mitra Pengembangan | ATWS Level 2
Pertemuan 6–8 · Belajar berinteraksi dengan AI secara disiplin
| No. | Topik / Pokok Bahasan | Tujuan Pembelajaran | Aksi |
|---|---|---|---|
| 6 |
AI sebagai Coding Partner: Prompt Engineering
Anatomi prompt efektif, strategi iterasi, siklus GEEM (Generate→Evaluate→Explain→Modify), batasan & halusinasi AI
|
Menulis prompt yang menghasilkan kode berkualitas dan menjelaskan mengapa prompt tersebut efektif. Proyek: Prompt Portfolio. |
Materi |
| 7 |
Membaca, Men-debug, dan Mengaudit Kode
Teknik membaca kode asing, debugging sistematis (logging, bisect, browser DevTools), Code Review Checklist 7 dimensi, Code Archaeology
|
Mengidentifikasi masalah keamanan, performa, dan kebenaran dalam kode AI. Proyek: Debugging Challenge Lab — kode AI yang "hampir benar". |
Materi |
| 8 |
🎯 UJIAN TENGAH SEMESTER (UTS)
Deep Understanding Assessment — No-AI Challenge: debug, tulis ulang dari memori, jelaskan mekanisme
|
Membuktikan pemahaman mandiri (tanpa AI) terhadap HTML, CSS, JavaScript, dan prinsip prompt engineering melalui serangkaian tantangan terstruktur. |
Soal UTS Submit |
Bagian III — Full-Stack Modern | ATWS Level 3
Pertemuan 9–12 · AI sebagai Co-pilot — mahasiswa bertanggung jawab atas arsitektur dan keamanan
| No. | Topik / Pokok Bahasan | Tujuan Pembelajaran | Aksi |
|---|---|---|---|
| 9 |
Frontend Modern dengan React dan Next.js
Komponen, state, props, routing App Router, rendering strategies (SSR, SSG, CSR), data fetching
|
Membuat aplikasi multi-halaman dengan komponen, state management, routing, dan data fetching menggunakan Next.js. Proyek: Personal Blog dengan MDX. |
Materi |
| 10 |
Database dan Backend dengan Supabase
Model data relasional, query SQL, Row Level Security (RLS), real-time subscriptions, API design
|
Merancang skema database relasional, menulis query, dan membangun API endpoint menggunakan Supabase. Proyek: Full-Stack Task Manager (cloud + auth). |
Materi |
| 11 |
Autentikasi, Otorisasi, dan Keamanan Web
Auth flow, session management, RBAC, pencegahan XSS/CSRF/SQL Injection, OWASP Top 10 awareness
|
Membangun sistem login yang aman dengan session management dan RBAC. Mengidentifikasi dan mencegah kerentanan web umum dalam proyek sendiri. |
Materi |
| 12 |
Dari Kode ke Production: Deployment & Operasi
CI/CD pipeline, environment variables, domain setup, monitoring, error tracking, Vercel + Supabase deployment
|
Melakukan deployment lengkap aplikasi full-stack ke production dengan environment variables, domain setup, dan monitoring dasar. |
Materi |
Bagian IV — Kematangan Profesional | ATWS Level 4
Pertemuan 13–16 · AI sebagai Accelerator — final audit wajib sebelum deployment
| No. | Topik / Pokok Bahasan | Tujuan Pembelajaran | Aksi |
|---|---|---|---|
| 13 |
Cara Berpikir Developer di Era AI
Skill non-automatable, evaluasi output AI, membaca dokumentasi teknis, debugging tanpa AI, career navigation
|
Mengevaluasi secara akurat apa yang sudah dan belum dipahami, serta merencanakan pembelajaran selanjutnya. Proyek: AI Competence Self-Assessment. |
Materi Refleksi |
| 14 |
Proyek Capstone — Perencanaan & Arsitektur
Pemilihan topik (invoice generator / booking system / URL shortener), perencanaan, desain arsitektur, skema database
|
Merancang arsitektur mini SaaS application: mendefinisikan user stories, merancang skema database, dan mendeskripsikan alur data secara tertulis. |
Panduan Capstone Submit Rancangan |
| 15 |
Proyek Capstone — Implementasi & Review
Implementasi fitur, Production Readiness Audit (security, performance, accessibility, error handling, dokumentasi)
|
Menyelesaikan implementasi capstone dan melakukan Production Readiness Audit yang mencakup security review, performance check, dan dokumentasi arsitektur. |
Checklist Audit Submit Draft |
| 16 |
🏁 UJIAN AKHIR SEMESTER (UAS)
Presentasi dan Demo Proyek Capstone — mini SaaS application di production
|
Mempresentasikan arsitektur, mendemonstrasikan fitur live, menjelaskan keputusan teknis, dan menjawab pertanyaan tentang keamanan dan skalabilitas aplikasi. |
Rubrik UAS Submit Final |