Lewati ke konten utama
Numekara
Konsultasi GratisKontak

C14 · Modul 01

Peta aplikasi full stack

49 langkah singkat, dari mudah sampai tantangan.

  1. Level 1

    Kenal

  2. Level 2

    Paham

  3. Level 3

    Terapkan

  4. Level 4

    Tantangan

  5. Level 5

    Pendalaman

Intinya

  • Satu klik "Pesan" melewati empat tempat: peramban, server web Next.js (halaman dan penerus BFF), API FastAPI, dan PostgreSQL; setiap tempat punya tugas dan rahasianya sendiri.
  • HTTP adalah teks berformat: baris awal, kepala yang namanya tak peka huruf besar, baris kosong, lalu badan sepanjang Content-Length byte.
  • Peramban hanya berbicara dengan origin web; penerus meneruskan ke API, sehingga cookie sesi tetap pihak pertama dan API tidak perlu membuka CORS.
  • Konfigurasi dan rahasia dibaca dari lingkungan saat aplikasi mulai, diperiksa sekaligus, tidak tercetak di log, dan tidak pernah masuk bundel peramban.
  • Lama halaman ditentukan jalur kritis permintaannya: panggilan yang tidak saling bergantung dijalankan bersamaan.

Sebelum mulai

±6 jam.

Modul ini memakai materi di bawah. Belum yakin? Ulas dulu bagian yang disebut.

Hasil belajar: menelusuri satu klik "Pesan" dari ponsel pelanggan sampai baris tabel dan kembali, sambil menyebut kode mana yang berjalan di peramban, di server web, di API, dan di basis data; membaca dan menulis pesan HTTP/1.1 mentah (baris awal, kepala tak peka huruf besar, Content-Length); menjelaskan kenapa Pesan Makmur memakai satu origin (pola BFF) dan apa akibatnya pada cookie dan CORS; memuat konfigurasi dari variabel lingkungan yang divalidasi sekaligus tanpa membocorkan rahasia; menghitung jalur kritis permintaan berantai dan memilih kapan memanggil bersamaan; menjalankan repo pesan-makmur tiga bagian di Codespaces atau laptop.

Hasil lab: repo pesan-makmur (api/, web/, compose.yaml, .env.contoh) berjalan lokal: halaman beranda web menampilkan status GET /sehat API lewat penerus /api/*. Kontrak proyek: proyek-pesan.md.

Istilah di modul ini (22)

Ketuk istilah untuk melihat penjelasannya. Di materi, istilah bergaris titik membuka kartu yang sama. Semua istilah course

Bahan modul

Semua kode, latihan, dan data modul ini dalam satu zip, untuk dijalankan di laptop atau Google Colab.

  • 23 contoh kode
  • 6 berkas latihan + tes
  • 1 berkas data
  • requirements.txt
Semua data course (data-c14.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • contoh_c14_01_52.sql
  • contoh_c14_01_151.py
  • contoh_c14_01_181.py
  • contoh_c14_01_227.py
  • contoh_c14_01_268.py
  • contoh_c14_01_293.py
  • contoh_c14_01_319.py
  • contoh_c14_01_346.py
  • contoh_c14_01_370.py
  • contoh_c14_01_507.py
  • contoh_c14_01_539.py
  • contoh_c14_01_560.py
  • contoh_c14_01_585.py
  • contoh_c14_01_611.py
  • contoh_c14_01_636.py
  • contoh_c14_01_825.py
  • contoh_c14_01_868.py
  • contoh_c14_01_1012.sql
  • contoh_c14_01_1036.sql
  • contoh_c14_01_1057.sql
  • contoh_c14_01_1080.sql
  • contoh_c14_01_1118.sql
  • contoh_c14_01_1684.py
  • test_c14_01_1.py
  • test_c14_01_2.py
  • test_c14_01_3.py
  • latihan_c14_01_4.sql
  • latihan_c14_01_5.ts
  • test_c14_01_6.py
  • pesan.sql
  • requirements.txt