Lewati ke konten utama
Numekara
Konsultasi GratisKontak

F4 · Modul 16

Proyek akhir: Dasbor Laporan Warung

46 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

  • Dasbor tersusun berlapis: data dan validasi → perhitungan murni → API dan halaman server → klien bertipe → komponen. Inti murni, validasi di batas, satu sumber kebenaran.
  • Tanggal kalender ditangani sebagai teks YYYY-MM-DD; toISOString dan getDate menggeser transaksi pagi WIB ke hari lain.
  • Kegagalan yang diharapkan adalah nilai, bukan throw: Promise.allSettled untuk kegagalan sebagian, HasilMuat untuk berkas rusak.
  • Tes berlapis membuktikan angka rujukan kontrak. Deploy ke Cloudflare Workers mengubah aturan: tanpa sistem berkas saat jalan, dan middleware harus runtime edge.
  • Tinjauan desain tertulis menyimpan alasan, alternatif, dan konsekuensi. AI memangkas kesulitan aksidental; kesulitan esensial tetap milikmu.

Sebelum mulai

±5 jam termasuk lab, ditambah waktu proyekmu sendiri.

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

Hasil belajar: menyatukan semua lapisan course (data, validasi, perhitungan, API, klien bertipe, komponen, halaman) menjadi aplikasi yang utuh; menjelaskan arsitekturnya dan menulis tinjauan desain dengan alternatif dan konsekuensinya; menangani tanggal dan zona waktu dengan benar; mengelola keadaan data asinkron termasuk kegagalan sebagian (Promise.allSettled); menolak berkas rusak di batas sistem tanpa membuat aplikasi jatuh; membuat grafik SVG yang aksesibel; menyusun strategi pengujian berlapis (unit, kontrak, komponen, tipe) dan menjalankannya dengan Vitest; menyiapkan deploy ke Cloudflare Workers dengan OpenNext dan menjelaskan apa yang berubah saat kode pindah dari Node ke edge; serta membaca hasil npm audit dan memutuskan tindakan.

Proyek: Dasbor Laporan Warung utuh: halaman /dasbor dan /periksa, tes Vitest, build untuk Cloudflare Workers, README, dan tinjauan desain (kontrak proyek §5, §6).

Istilah di modul ini (55)

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.

  • 8 berkas latihan + tes
  • 3 berkas data
Semua data course (data-f4.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • latihan_f4_16_1.ts
  • latihan_f4_16_6.ts
  • latihan_f4_16_5.tsx
  • latihan_f4_16_4.ts
  • latihan_f4_16_2.ts
  • latihan_f4_16_7.tsx
  • latihan_f4_16_3.ts
  • latihan_f4_16_8.ts
  • laporan.json
  • laporan-api.json
  • laporan-rusak.json