Setelah fitur campaign bertambah, latihan berhenti sejenak: cari inkonsistensi, tulis repro, perbaiki bug kecil, lalu refactor formatting Rupiah ke helper tanpa mengubah perilaku.
Setelah homepage, detail, dan admin mulai terbentuk, jangan langsung lanjut ke fitur donasi. Berhenti dulu dan lihat kualitas perubahan.
AI coding yang sehat punya ritme:
textbuat perubahan kecil → verifikasi → rapikan → verifikasi lagiKalau kamu hanya menumpuk fitur, project cepat terlihat jadi, tapi rapuh. Module ini ditutup dengan dua latihan: debug berbasis bukti dan refactor yang tidak mengubah perilaku.
Salah satu kandidat bug kecil adalah format Rupiah.
Cek beberapa file:
bashgrep -RIn "toLocaleString('id-ID')\|toLocaleString(\"id-ID\")" src/app src/componentsMungkin kamu menemukan formatting di beberapa tempat:
Kalau satu halaman menampilkan Rp 100.000.000 dan halaman lain menampilkan 100000000, itu bug inkonsistensi. Angkanya sama, tapi pengalaman user tidak konsisten.
Jangan menulis prompt:
textformatnya masih jelek, benerinItu terlalu kabur.
Tulis dulu expected vs actual:
| Halaman | Expected | Actual |
|---|---|---|
| Homepage | Rp 100.000.000 | Rp 100.000.000 |
| Detail campaign | Rp 100.000.000 | 100000000 |
| Form donasi | quick amount terbaca sebagai Rupiah | sesuai/tidak sesuai hasil cek |
Lalu tulis langkah reproduksi:
text1. npm run dev
2. buka http://localhost:3000/campaigns/paket-pangan-keluarga
3. lihat target_amount
4. bandingkan dengan homepageBaru minta agent memperbaiki.
textMulai dari AGENTS.md, DESIGN.md, dan docs/README.md.
Saya menemukan inkonsistensi format Rupiah.
Repro:
1. Jalankan npm run dev.
2. Buka homepage dan detail campaign seed.
3. Homepage menampilkan target sebagai "Rp 100.000.000".
4. Detail campaign menampilkan target sebagai "100000000" tanpa format Rupiah.
Expected:
Semua tampilan nominal campaign memakai format Rupiah konsisten: "Rp 100.000.000".
Tugas kecil:
- Perbaiki rendering target di file yang bermasalah saja.
- Jangan refactor dulu.
- Jangan mengubah query, RLS, migration, donation flow, atau admin authorization.
Acceptance criteria:
- Homepage dan detail menampilkan format Rupiah konsisten.
- Diff hanya menyentuh file yang perlu diperbaiki.
- npm run lint dan npm run build berhasil.
Laporkan file yang berubah dan cara verifikasi.Kenapa belum refactor? Karena bug fix dan refactor sebaiknya dipisah. Kalau digabung, kamu sulit tahu perubahan mana yang memperbaiki bug dan perubahan mana yang hanya merapikan.
Kalau formatting Rupiah tersebar di banyak file, buat helper:
textsrc/lib/format.tsIsi minimal:
tsexport function formatIDR(value: number | string | null | undefined) {
const amount = Number(value ?? 0);
return `Rp ${amount.toLocaleString('id-ID')}`;
}Kenapa menerima number | string | null | undefined? Karena nilai dari database atau form bisa datang dengan bentuk berbeda. Helper ini membuat komponen UI tidak mengulang perlakuan yang sama.
Tapi hati-hati: helper seperti ini juga keputusan. Kalau null seharusnya tidak boleh jadi Rp 0, kamu bisa pilih throw error atau fallback lain. Untuk tampilan campaign, fallback 0 masih bisa diterima sebagai guard UI, tapi data asli tetap harus benar di database.
textRefactor kecil, bukan fitur baru.
Baca AGENTS.md, DESIGN.md, dan docs/README.md.
Masalah:
Format Rupiah dengan toLocaleString('id-ID') mulai tersebar di beberapa file campaign/donation.
Tugas:
1. Buat helper src/lib/format.ts dengan function formatIDR(value) yang mengembalikan format seperti "Rp 100.000.000".
2. Ganti pemakaian inline formatting Rupiah di halaman campaign/donation yang relevan dengan formatIDR.
3. Jangan mengubah query, route, server action, validation, migration, RLS, atau copy utama.
4. Output UI harus identik dengan sebelum refactor.
Acceptance criteria:
- grep toLocaleString('id-ID') berkurang atau hilang dari file UI yang direfactor.
- Tampilan nominal tetap sama seperti sebelum refactor.
- Guard campaign published pada donation action tetap ada.
- npm run lint dan npm run build berhasil.
Laporkan file yang diubah dan bukti bahwa perilaku tidak berubah.Refactor yang baik terasa membosankan: output sama, kode lebih rapi.
Saat agent menyentuh banyak file campaign, cek guard penting:
bashgrep -n "status !== 'published'" "src/app/campaigns/[slug]/donate/actions.ts"Di donation action, campaign harus dicek ulang sebelum donasi disimpan. Halaman publik sudah filter published, tapi server action tetap harus mengecek lagi. Jangan mengandalkan UI sebagai pagar keamanan.
Kalau guard ini hilang saat refactor formatting, itu red flag besar. Minta revert.
Jalankan:
bashgit diff --stat
git diff
npm run lint
npm run buildLalu buka minimal:
texthttp://localhost:3000
http://localhost:3000/campaigns/paket-pangan-keluarga
http://localhost:3000/campaigns/paket-pangan-keluarga/donateYang harus benar:
Kalau kamu memakai git, pisahkan:
bashgit add -A
git commit -m "fix: konsistenkan format Rupiah campaign"Lalu refactor:
bashgit add -A
git commit -m "refactor: pakai helper formatIDR"Kenapa dua commit? Karena saat bug muncul lagi, kamu bisa membaca sejarah dengan jelas. Mana bug fix, mana perapian.
Debug dan refactor sama-sama penting, tapi berbeda pekerjaan.
formatIDR dibuat sebagai helper jika duplikasi memang tersebar.published pada donation action tetap ada.npm run lint dan npm run build berhasil.Module 03 selesai dengan pelajaran yang sering lebih penting daripada fitur itu sendiri: jangan biarkan agent menumpuk perubahan tanpa jeda. Campaign sudah tampil, detail punya state yang jelas, admin punya pagar, dan refactor dilakukan sebagai pekerjaan terpisah. Ini ritme yang akan menyelamatkanmu saat masuk ke alur donasi.
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!