C14 · Full Stack Development

Membangun satu aplikasi web utuh dari skema basis data sampai URL publik: web Next.js dengan TypeScript dan React, API FastAPI dengan Pydantic, PostgreSQL, autentikasi sesi berbasis cookie, pembayaran sandbox yang idempoten, dasbor admin waktu nyata, pengujian ujung ke ujung, lalu rilis dan pengamatan di produksi.

Course inti jalur Full Stack Developer. Satu proyek berjalan dari Modul 01 sampai tayang: Pesan Makmur, pemesanan daring Warung Makmur milik Bu Sri (fiktif). Versi ini berupa Markdown yang bisa dibaca langsung di GitHub; latihan Python dan SQL diperiksa otomatis dan berjalan di peramban, latihan TypeScript diperiksa mesin yang sama dan dikerjakan di Codespaces atau laptop.

---

Posisi course

Kenapa course ini ada

Fondasi jalur ini sudah terpisah-pisah dan kuat. F2 mengajarkan SQL, desain skema, indeks, dan transaksi. F4 mengajarkan HTTP, TypeScript, React, dan dasar Next.js. F5 mengajarkan Docker, CI, dan menayangkan API. Yang belum ada adalah menyambungkan semuanya menjadi satu produk yang dipakai orang dan memegang uang: sesi yang bisa dicabut, pesanan yang tidak dobel saat jaringan putus, stok yang tidak minus saat dua orang memesan bersamaan, webhook yang datang dua kali atau terlambat, kasir yang mengubah pesanan yang sama, laporan yang salah hari karena zona waktu, dan rilis yang mengubah skema tanpa mematikan aplikasi.

Di tempat kerja, aplikasi full stack jarang gagal karena satu baris React atau satu kueri SQL. Ia gagal di sambungannya: web dan API tidak sepakat soal bentuk data, harga dihitung di peramban, cookie sesi tidak terkirim lintas situs, tombol Bayar ditekan dua kali, atau migrasi dijalankan sesudah kode baru. C14 mengajarkan cara menutup celah itu dengan kode yang diperiksa.

Cara klasik dan cara modern

Cara klasik di course ini: HTTP apa adanya (RFC 9110/9112), konfigurasi dari lingkungan, desain data dengan kendala, migrasi SQL tangan dan pelari migrasi sendiri, transaksi dan pembaruan atomik, mesin status, Problem Details (RFC 9457), cache HTTP dan ETag, progressive enhancement, hash sandi bergaram, cookie dan fiksasi sesi, kontrol akses deny by default, CSRF dan CSP, HMAC dan serangan ulang, idempotensi, penguncian optimistis, partisi ekuivalen dan nilai batas, uji mutasi, log dan persentil, urutan rilis expand/contract, serta cadangan dan pemulihan. Semuanya ditulis sendiri dengan Python, SQL, dan TypeScript kecil yang bisa diuji.

Cara modern: Next.js 16 App Router (Server Component, Server Action, proxy.ts), React 19, FastAPI dan Pydantic 2, OpenAPI sebagai kontrak dan tipe TypeScript yang dihasilkan darinya, psycopg 3, SQLAlchemy dan Alembic sebagai pembanding, argon2id, Fetch Metadata, gateway pembayaran sandbox, Server-Sent Events, Playwright, uji kontrak dan uji properti, OpenTelemetry dan W3C Trace Context, Core Web Vitals, hosting terkelola, dan agen AI koding.

Polanya sama di setiap modul: kerjakan inti masalah dengan tangan dan ukur, kerjakan dengan alat modern atau agen AI, lalu bandingkan: apa yang dipercepat, apa yang salah, dan pemahaman klasik apa yang menangkap kesalahannya.

Pemilik materi

C14 memiliki: arsitektur aplikasi full stack dan pola BFF, migrasi dan expand/contract, domain pesanan dan stok, API kontrak dulu dari skema sampai tipe web, autentikasi sesi dan cookie, otorisasi tingkat objek, pembayaran dengan idempotensi dan webhook, penguncian optimistis dan aliran waktu nyata, pengujian lintas lapisan, serta rilis tiga bagian (web, API, basis data). C14 menautkan, tidak mengajarkan ulang:

Untuk siapa dan prasyarat

Untuk calon Full Stack Developer yang sudah menyelesaikan fondasi jalur ini, dan developer backend atau frontend yang ingin bisa membawa satu fitur dari basis data sampai layar sendirian.

Sapaan "kamu", sama dengan course lain. Yang kamu butuhkan: peramban, akun GitHub gratis, dan GitHub Codespaces atau laptop dengan Docker, Python 3.12+, dan Node 22. Tidak ada layanan berbayar yang wajib; pembayaran memakai penyedia tiruan yang berjalan di laptopmu.

Lingkungan lab

Kode Next.js utuh (Server Component asinkron, Server Action, proxy.ts, next.config.ts) tidak bisa dijalankan pemeriksa, jadi ditulis sebagai blok statis dan dijalankan di Lab. Fakta yang cepat berubah (versi pustaka, paket gratis hosting, angka NIST dan OWASP) dicek penulis saat modul ditulis, dicatat tanggalnya, dan ditandai perlu dicek ulang.

Waktu: ±6 jam per modul (Modul 05 dan 11 ±7 jam) dan ±10 jam untuk Modul 12, total ±78 jam, di luar bagian pendalaman.

Setelah C14 kamu bisa

1. Merancang aplikasi web tiga lapis dengan batas yang jelas: halaman dan penerus BFF di Next.js, API FastAPI, PostgreSQL, dan menjelaskan ke mana setiap permintaan pergi.
2. Mengubah aturan bisnis menjadi skema berkendala, migrasi yang aman dijalankan ulang, dan perubahan skema tanpa menghentikan aplikasi.
3. Menulis domain dan akses data yang benar di bawah konkurensi: transaksi, pembaruan atomik, penguncian optimistis, tanpa N+1.
4. Merancang API dari kontrak: kode status yang tepat, Problem Details, paginasi kursor, ETag, OpenAPI, dan tipe TypeScript yang selalu sepakat dengan server.
5. Membangun autentikasi sesi dan otorisasi yang tahan serangan umum (pencurian sesi, fiksasi, akses objek orang lain, CSRF, XSS) secara defensif.
6. Menerima pembayaran dengan aman: idempotensi, verifikasi webhook, kejadian dobel dan terlambat, kedaluwarsa, dan rekonsiliasi.
7. Menguji lintas lapisan (unit, integrasi dengan PostgreSQL, kontrak, ujung ke ujung) lalu menayangkan, mengamati, dan memulihkan aplikasi di produksi.

Silabus (12 modul)

Jenis latihan terperiksa: Py = Python di peramban, Py-T = Python yang dikerjakan di terminal laptop atau Codespaces, SQL = SQLite di peramban, TS = TypeScript/React dengan kerangka F4.

Total: 82 latihan terperiksa (Python 58, SQL 14, TypeScript 10).

Proyek: Pesan Makmur

Peserta membangun Pesan Makmur: pelanggan memilih produk dari katalog warung, memesan untuk diambil sendiri atau diantar dalam kompleks, membayar lewat QRIS, virtual account, atau e-wallet (sandbox), lalu memantau status pesanannya. Kasir (Rina, Joko, Ayu) memproses antrean di dasbor yang berubah tanpa dimuat ulang. Bu Sri membaca laporan omzet harian dan mengembalikan dana bila perlu. Data: 468 pesanan sintetis berkebenaran (September–Oktober 2026), 84 pengguna, pembayaran, event webhook, dan sesi (data/pesan.sql), plus kiriman webhook mentah berisi jebakan (data/webhook.jsonl). Kontrak: proyek-pesan.md.

Kenapa Pesan Makmur. Nama yang pendek dan sehari-hari: "pesan" adalah kegiatan intinya, "Makmur" menyambungkannya dengan dunia course lain (Warung Makmur di F2, kasku di F1, Tutur Makmur di C12). Pemesanan dengan pembayaran dipilih karena satu domain kecil ini sudah memaksa semua masalah full stack yang penting muncul: uang, stok bersama, identitas dan peran, pihak ketiga yang memanggil balik (webhook), dua pengguna di layar yang sama, dan laporan yang harus benar. Domainnya cukup dikenal sehingga waktu belajar habis untuk tekniknya, bukan untuk memahami bisnisnya.

Proyek akhir memenuhi definisi capstone full stack yang dipakai course lain: web Next.js + API FastAPI + PostgreSQL + rilis publik.

Kerangka setiap modul

Modul ditulis langsung dalam mode langkah (satu layar satu ide, setiap layar berakhir dengan interaksi), dengan bagian:

# Modul NN · Judul

> **Hasil belajar:** 3–5 kemampuan yang bisa diamati
> **Prasyarat:** modul sebelumnya dan modul course lain (bertaut, dengan judul topiknya)
> **Waktu:** ± X jam
> **Hasil lab:** apa yang ditambahkan ke repo `pesan-makmur`

## Intinya                          (3–5 butir)
## 1..N. Bagian per konsep           (contoh dulu, lalu penjelasan singkat; cek, latihan)
##       Di balik layar              (mekanisme di bawah pustaka; dipakai latihan)
## N+1. Proyek: Pesan Makmur         (Lab di Codespaces/laptop; "Selesai bila:")
## N+2. Belajar bersama AI           (tugas tanpa AI, tugas dengan AI, bandingkan)
## N+3. Pendalaman (opsional)        (dunia kerja, skala besar dengan rujukan ke C11)
## Rangkuman                         (3–7 butir)
## Sumber                            (dokumentasi resmi + rujukan klasik, bertanggal)

Course ini tidak memakai video. Mekanisme ditunjukkan dengan kode yang bisa dijalankan dan diubah, diagram teks, storyboard alat peraga yang diputar langsung di peramban (tanpa rekaman), layar tebak keluaran atau tebak galat yang kuncinya diperiksa mesin, dan latihan. Playground interaktif yang sudah ada (misalnya alat peraga JOIN dan window function SQL) dipakai bila memang cocok.

Bekerja dengan agen, pola yang sama di setiap modul. Kerjakan dulu potongan kecil tanpa AI agar kamu tahu jawaban yang benar. Lalu minta agen menulis kode dengan instruksi yang menyebut kontrak, kasus sulit, dan tes yang harus gagal pada kode naif. Kesalahan agen di full stack jarang memunculkan galat: harga dihitung di klien, float untuk uang, cookie tanpa HttpOnly, cek peran tanpa cek pemilik objek, webhook tanpa verifikasi atau tanpa deduplikasi, datetime.now() di tengah logika, tanggal UTC di laporan harian, atau migrasi yang menghapus kolom sebelum kode lama berhenti. Yang menangkapnya adalah tes perilaku, angka rujukan, dan daftar periksa review di setiap modul.

Aturan isi:

• Kontrak dulu, angka dari kode. Bentuk API, nama fungsi, dan angka rujukan diambil dari kontrak dan contoh yang diperiksa mesin, bukan dari ingatan.
• Tes memeriksa perilaku pada kasus sulit: batas ongkir Rp50.000, jam buka 06.00 dan 21.00 WIB, dua permintaan bersamaan, webhook dobel atau terlambat, If-Match usang, kursor rusak. Kode awal yang naif harus gagal.
• Tanpa waktu sekarang dan tanpa acak tak berbenih di latihan: jam diterima sebagai parameter; token acak diuji dari sifatnya (panjang, alfabet, berbeda), bukan nilainya.
• Keamanan hanya defensif: setiap serangan dijelaskan untuk dicegah dan diuji di aplikasimu sendiri.
• Data sintetis. Semua pengguna, alamat, telepon, dan email fiktif.
• Studi kasus memakai skenario rekaan yang mewakili kejadian umum, ditandai rekaan.
• Sumber klasik bergantian: RFC HTTP dan cookie, Fowler Patterns of Enterprise Application Architecture (2002), Kleppmann Designing Data-Intensive Applications (2017), Ambler & Sadalage Refactoring Databases (2006), Humble & Farley Continuous Delivery (2010), OWASP ASVS dan Cheat Sheet Series, dan dokumentasi resmi setiap alat.
• Patokan CS2023: knowledge area Software Development Fundamentals, Software Engineering, Data Management, Networking and Communication (aplikasi web), dan Security.

Cara belajar: peramban atau laptop

• Di peramban kamu bisa membaca semua modul dan mengerjakan latihan Python dan SQL: domain, validasi, sesi, webhook, laporan. Itu sebagian besar latihan terperiksa.
• Di Codespaces atau laptop kamu menjalankan aplikasi sungguhan: PostgreSQL di Docker, API dengan uvicorn, web dengan npm run dev, Playwright, dan latihan TypeScript serta lingkungan=terminal dengan berkas unduhan dan panduan laptop. Proyek Pesan Makmur dikerjakan di sini sejak Modul 01.
• Tayang dilakukan dari repo GitHub-mu ke hosting terkelola; Modul 11 dan 12 memandu pilihan gratis dan batasannya.

Batas cakupan

Sengaja tidak dibahas, supaya course tetap inti dan dalam:

• Aplikasi seluler native dan React Native (jalur seluler, C8 ditunda).
• Layanan mikro, Kubernetes, service mesh, dan infrastruktur sebagai kode yang rumit; Pesan Makmur adalah monolit modular dengan satu API.
• GraphQL, gRPC, dan tRPC (dibandingkan sekilas; desain API skala besar di C11).
• Replikasi, sharding, cache terdistribusi, antrean pesan, dan konsistensi akhir (C11); di sini cukup satu PostgreSQL dan satu instans API, dengan batasnya disebut.
• WebSocket dan kolaborasi waktu nyata dua arah (C11 Sistem waktu nyata); di sini cukup SSE satu arah.
• Multi-tenant, internasionalisasi, CMS, mesin pencari, dan PWA/luring.
• CSS dan sistem desain secara mendalam; komponen memakai CSS sederhana.
• Pembayaran produksi sungguhan (KYC merchant, akuntansi, pajak) dan regulasi keuangan; pembayaran berhenti di sandbox.
• Fitur LLM di dalam aplikasi (C3) dan membangun sistem agen (C5).

Hubungan dengan course lain

Sumber

Rujukan utama course; setiap modul mencantumkan sumbernya sendiri dengan tanggal cek.

• Fielding, R., Nottingham, M., & Reschke, J. (2022). RFC 9110 HTTP Semantics, RFC 9111 HTTP Caching, RFC 9112 HTTP/1.1. IETF.
• Nottingham, M., Wilde, E., & Dalal, S. (2023). RFC 9457 Problem Details for HTTP APIs. IETF.
• Barth, A. (2011). RFC 6265 HTTP State Management Mechanism dan draf penerusnya (rfc6265bis). IETF.
• Krawczyk, H., Bellare, M., & Canetti, R. (1997). RFC 2104 HMAC. IETF.
• Fielding, R. T. (2000). Architectural Styles and the Design of Network-based Software Architectures (disertasi, Bab 5: REST).
• Fowler, M. (2002). Patterns of Enterprise Application Architecture. Addison-Wesley.
• Kleppmann, M. (2017). Designing Data-Intensive Applications. O'Reilly.
• Ambler, S., & Sadalage, P. (2006). Refactoring Databases: Evolutionary Database Design. Addison-Wesley.
• Humble, J., & Farley, D. (2010). Continuous Delivery. Addison-Wesley.
• Wiggins, A. (2011). The Twelve-Factor App.
• OWASP. Application Security Verification Standard (ASVS) 5.0, API Security Top 10 (2023), Cheat Sheet Series (Session Management, Password Storage, CSRF Prevention, Content Security Policy).
• NIST SP 800-63B-4 Digital Identity Guidelines: Authentication and Authenticator Management.
• W3C. Trace Context (Recommendation) dan Web Content Accessibility Guidelines (WCAG) 2.2.
• Dokumentasi resmi Next.js 16, React 19, FastAPI, Pydantic, PostgreSQL, psycopg 3, Playwright, OpenTelemetry, dan web.dev Core Web Vitals (dicek per modul).