10 KiB
10 KiB
Retrospective — Epic 1: Course & Learning (2025-11-12)
Ringkasan
- Halaman frontend
CoursesdanCourse Detailtelah dibuat dan tampil baik, namun data masih dummy (statik) dan belum terhubung API. - Belum ada endpoint untuk
GET /api/courses,GET /api/courses/{courseId},POST /api/progress/module, danPOST /api/assignments/{assignmentId}/submitpada stack yang berjalan. - Test integrasi untuk area kursus belum tersedia di
backend/tests. - Traceability AC → Spec → Components → Tests ditambahkan, namun sebagian referensi tes masih TBD hingga API dan test disiapkan.
Bukti Implementasi Saat Ini
- UI kursus:
src/app/courses/page.tsx(list kursus, progress, status, CTA) - UI detail kursus:
src/app/course/[courseId]/page.tsx(header, modul, progress, CTA) - Keduanya menggunakan data dummy lokal (konstanta di file), belum melakukan
fetchdari API.
Scope yang Sudah Berjalan
- Tampilan grid kursus dengan statistik ringkas dan progress bar.
- Tampilan detail kursus dengan daftar modul, status terkunci/selesai, dan CTA navigasi modul.
- Konsistensi UI/UX dengan
DashboardLayout, ikon, dan utilcn.
Gap & Tantangan
- API belum tersedia untuk katalog/detail kursus, progres modul idempotent, dan submission tugas + audit.
- Tidak ada test integrasi terkait kursus di
backend/tests. - State management dan idempotency untuk progres belum diikat ke API.
NFR & Observabilitas (Status)
- Logging, metrics, alerting, audit trail untuk area kursus belum diterapkan; ditargetkan pada pengenalan API.
Dependencies (Rujukan)
- Frontend: Next.js
14.x, React18.x, TypeScript5.x, Tailwind3.x. - Backend (eksisting untuk Epic 2): Node.js
18.x, Express4.x, Jest29.x, Supertest6.x.
Acceptance Criteria (AC) Epic 1 (Rujukan)
- E1-AC1:
GET /api/coursesmengembalikan daftar terpaginasikan; mendukung filterq(substringtitle). - E1-AC2:
GET /api/courses/{courseId}mengembalikanid,title,description,modules[]. - E1-AC3:
POST /api/progress/moduleidempotent viaidempotencyKey(≤ 5 menit). - E1-AC4:
POST /api/assignments/{assignmentId}/submitmencatat audit (submittedAt,contentRef,metadata).
Traceability Matrix (Ringkas)
| AC ID | Spec Section | Components | Story | Tests |
|---|---|---|---|---|
| E1-AC1 | Area API: GET /api/courses | src/app/courses, server route (TBD) |
docs/stories/1-1-course-catalog-read-api.md |
TBD: backend/tests/courses.test.js |
| E1-AC2 | Area API: GET /api/courses/{courseId} | src/app/course/[courseId], server route |
docs/stories/1-2-course-detail-read-api.md |
TBD: backend/tests/courses.test.js |
| E1-AC3 | Idempotency progres | useProgressTracking, server route (TBD) |
docs/stories/1-3-module-progress-update-api.md |
TBD: backend/tests/courses.test.js |
| E1-AC4 | Submission audit | assignments UI/route (TBD) |
TBD: docs/stories/1-4-assignment-submit-api.md |
TBD: backend/tests/courses.test.js |
Keberhasilan
- UI responsif dan konsisten; struktur halaman jelas dan siap dihubungkan ke API.
- Desain komponen dan layout memudahkan perluasan fitur (modul, progres, tugas).
Risiko & Mitigasi
- Risiko keterlambatan karena belum ada API kursus → Mitigasi: buat route handler Next.js sebagai stub minimal lalu integrasi bertahap.
- Idempotency progres berpotensi kompleks → Mitigasi: util idempotency sederhana dengan penyimpanan in-memory disertai audit.
Follow-up Actions (Prioritas)
- Implement Next.js route handler:
src/app/api/courses/route.ts(GET, pagination + filterq).src/app/api/courses/[courseId]/route.ts(GET detail +modules[]).src/app/api/progress/module/route.ts(POST idempotent + audit minimal).src/app/api/assignments/[assignmentId]/submit/route.ts(POST + audit minimal).
- Ubah
courses/page.tsxdancourse/[courseId]/page.tsxuntukfetchdari API. - Tambahkan test integrasi
backend/tests/courses.test.jsuntuk katalog, detail, progres idempotency, submission audit. - Tambahkan logging terstruktur dan audit trail (minimal) di route handler.
- Update traceability: ganti placeholder
TBDdengan file test dan jalur komponen aktual.
Status Gate
- Setelah langkah 1–3 selesai dan test hijau, Epic 1 siap integrasi lebih lanjut (auth, persistence, observability).
Tahapan Implementasi & Integrasi (Runbook)
Langkah 0 — Prasyarat & Konfigurasi
- Pastikan Node.js
>=18, port backend8000tersedia. - Tambah
.env.localdi frontend:NEXT_PUBLIC_API_BASE_URL=http://localhost:8000. - Jika perlu, tambahkan
BACKEND_API_BASE_URLuntuk route API Next (proxy server-side).
Langkah 1 — Menjalankan Backend
- Dari folder
backend:npm install(sekali), lalunpm run dev. - Verifikasi:
GET http://localhost:8000/health→ statusok.
Langkah 2 — Verifikasi Endpoint Kursus (Backend Express)
- Katalog:
GET http://localhost:8000/api/courses?page=1&pageSize=20&q=→{ items[], total }. - Detail:
GET http://localhost:8000/api/courses/c1→{ id, title, modules[] }. - Progress modul (idempotent terima):
POST http://localhost:8000/api/modules/:moduleId/progress→202 accepted.
Langkah 3 — Route API Next.js (Proxy ke Backend)
- Buat/rapikan
src/app/api/courses/route.ts→ proxy querypage,pageSize,qke backend, response normalisasi{ data, total, page, limit }. - Buat
src/app/api/courses/[courseId]/route.ts→ proxy detail kursus ke backend. - Catatan: Gunakan
process.env.BACKEND_API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'untuk base URL.
Langkah 4 — Integrasi UI
src/app/courses/page.tsx: ganti sumbercourses[]dummy menjadi fetch ke/api/courses?page=1&limit=20&q=(via Next API).src/app/course/[courseId]/page.tsx: ambil detail dari/api/courses/{courseId}.- Tambah state loading/error sederhana agar UX tetap informatif.
Langkah 5 — Observabilitas & Audit (Minimal)
- Logging terstruktur di route Next: method, path, durasi, hasil (2xx/4xx/5xx).
- Audit progres modul: catat
moduleId,progressPercent,updatedAt(server-side), idempotency key di backend.
Langkah 6 — Testing & Gate
- Backend:
npm test(ada tes untuk/api/coursesdan detail, progres, dsb.). - Tambah
backend/tests/courses.test.js(follow-up) untuk spesifik katalog/detail jika diperlukan. - Gate hijau: halaman UI tidak dummy, data tampil dari backend, tes backend hijau.
Langkah 7 — Dev Server & Preview
- Frontend (root):
npm run dev→ bukahttp://localhost:3000/courses. - Review UI setelah integrasi, pastikan status, progress, dan detail konsisten.
Traceability Update
- Hapus
TBDpada matriks: isi referensi file API Next (src/app/api/courses/*), pages (src/app/courses,src/app/course/[courseId]), dan tes backend (backend/tests/*).
Admin — Scope & Alignment (c:/laragon/www/LMS-BGN/src/app/admin/)
Halaman Admin Terkait
admin/analyticsdanadmin/analytics/insights: ringkasan performa pembelajaran, tren penyelesaian kursus.admin/analytics/reports: laporan mendalam (export-ready) untuk progress dan keterlibatan.admin/analytics/settings: konfigurasi metrik dan periode pelaporan.admin/certificates: daftar sertifikat dan status kelulusan.admin/exams(+exams/[id]/*): konfigurasi ujian dan pemantauan.admin/questions/*danadmin/quiz-config: bank soal dan pengaturan kuis.admin/users/*: manajemen pengguna, termasuk status enrollment dan kemajuan kursus.admin/payroll: (Terkait Epic 3) sinkronisasi reward/payroll berdasarkan penyelesaian.
Dampak Langsung Epic 1 pada Admin
- Menyediakan data kursus (katalog, detail, modul) sebagai sumber metrik untuk
analyticsdanreports. - Menampilkan ringkasan progress per pengguna di
users(enrollment, % penyelesaian, tanggal mulai/selesai). - Menghubungkan kelulusan kursus ke
certificates(lihat status kelayakan dan penerbitan). - Menyelaraskan
examsdengan modul kursus (mapping modul → ujian) untuk konsistensi alur belajar.
Integrasi Minimal (Tanpa Fallback)
- Gunakan API Next (proxy) yang sudah ada untuk konsumsi data kursus:
GET /api/coursesdanGET /api/courses/{courseId}sebagai data sumber di admin.
- Jika API gagal, tampilkan pesan error informatif di halaman admin; tidak ada fallback ke data dummy.
- Normalisasi skema respons agar konsisten (contoh:
{ data, total, page, limit }).
Rencana Route Admin (TBD, untuk iterasi berikut)
GET /api/admin/analytics/courses→ agregasi: total kursus, rata-rata progress, distribusi status.GET /api/admin/analytics/users→ progress per pengguna, per kursus.GET /api/admin/reports/courses/export→ export CSV/XLSX ringkasan progress.GET /api/admin/certificates→ daftar sertifikat dan status kelayakan.- Catatan: sementara, halaman admin dapat mengkonsumsi langsung dari
coursesAPI untuk metrik dasar.
Observabilitas & Audit (Admin)
- Logging terstruktur di proxy admin (method, path, durasi, status).
- Audit view/report generation (timestamp, user admin, filter yang dipakai) untuk compliance.
Traceability (Admin)
| Area | Halaman | Sumber Data | Status |
|---|---|---|---|
| Analytics (ringkas) | admin/analytics |
/api/courses (aggregasi minimal di FE) |
Mulai integrasi |
| Insights (tren) | admin/analytics/insights |
/api/courses + waktu (TBD) |
Rencana |
| Reports | admin/analytics/reports |
/api/courses (export minimal) |
Rencana |
| Certificates | admin/certificates |
/api/certificates (TBD) |
Rencana |
| Users (progress) | admin/users |
/api/courses + map user (TBD) |
Rencana |
| Exams mapping | admin/exams |
modul kursus + ujian (TBD) | Rencana |
Gate Admin untuk Epic 1
- Minimal: halaman
admin/analyticsmenampilkan metrik dari data kursus nyata (tanpa dummy), loading/error jelas. - Laporan dasar tersedia (tabel ringkas), export dapat menyusul.