Spesifikasi Teknis Aplikasi SIGAP

1. Ringkasan Umum

SIGAP (Sistem Generator Pembelajaran) adalah aplikasi web yang dirancang untuk membantu para pendidik, guru, dan pembuat konten pendidikan dalam membuat Rencana Pelaksanaan Pembelajaran (RPP) dan materi pendukungnya secara otomatis menggunakan kecerdasan buatan (AI). Aplikasi ini memungkinkan pengguna untuk memasukkan parameter seperti topik, mata pelajaran, dan jenjang kelas, lalu menghasilkan RPP yang terstruktur dan lengkap, beserta materi pembelajaran, lembar kerja siswa, kunci jawaban, dan rubrik penilaian.

2. Arsitektur Teknologi

Aplikasi ini dibangun menggunakan tumpukan teknologi modern berbasis JavaScript/TypeScript.

• Framework Frontend: js (dengan App Router)
• Library UI: React
• Bahasa: TypeScript
• Styling: Tailwind CSS
• Komponen UI: ShadCN/UI
• Generative AI: Genkit (dengan model Google AI/Gemini)
• Manajemen Form: React Hook Form & Zod untuk validasi skema.
• Ekspor Dokumen:
  • PDF: jsPDF & jsPDF-AutoTable
  • DOCX: docx & file-saver

3. Arsitektur & Struktur Proyek

Aplikasi ini mengikuti struktur standar proyek Next.js App Router.

/
├── src/
│   ├── app/                    # Direktori utama Next.js App Router
│   │   ├── page.tsx            # Halaman utama aplikasi (UI utama)
│   │   ├── layout.tsx          # Layout root aplikasi
│   │   ├── globals.css         # Styling global & variabel tema Tailwind
│   │   └── actions.ts          # Server Actions untuk memanggil alur Genkit
│   │
│   ├── ai/
│   │   ├── flows/              # Direktori berisi alur logika Genkit
│   │   │   ├── generate-lesson-plan.ts
│   │   │   ├── generate-learning-materials.ts
│   │   │   └── ... (alur lainnya)
│   │   ├── schemas.ts          # Skema Zod untuk input dan output AI
│   │   └── genkit.ts           # Konfigurasi instance Genkit
│   │
│   ├── components/
│   │   ├── ui/                 # Komponen UI dari ShadCN (Button, Card, dll.)
│   │   ├── icons.tsx           # Komponen ikon SVG kustom (Logo)
│   │   ├── lesson-plan-form.tsx      # Formulir input di sidebar kiri
│   │   └── lesson-plan-display.tsx   # Komponen untuk menampilkan hasil RPP
│   │
│   ├── hooks/
│   │   ├── use-toast.ts        # Hook untuk menampilkan notifikasi (toast)
│   │   └── use-mobile.tsx      # Hook untuk mendeteksi perangkat mobile
│   │
│   └── lib/
│       ├── utils.ts            # Utilitas umum (seperti `cn` untuk classname)
│       └── export.ts           # Logika untuk mengekspor dokumen ke PDF dan DOCX
│
├── public/                     # Aset statis (jika ada)
├── package.json                # Dependensi dan skrip proyek
├── next.config.ts              # Konfigurasi Next.js
└── tailwind.config.ts          # Konfigurasi Tailwind CSS

4. Alur Kerja Utama

4.1. Generasi RPP

1. Input Pengguna: Pengguna mengisi formulir di LessonPlanForm (src/components/lesson-plan-form.tsx).
2. Validasi: Input divalidasi menggunakan Zod schema.
3. Pemicu Aksi: Saat tombol “Buat RPP” ditekan, fungsi handleGenerate di src/app/page.tsx
4. Server Action: handleGenerate memanggil Server Action generate di src/app/actions.ts.
5. Alur Genkit:
   • Server Action generate memanggil alur Genkit generateLessonPlan (src/ai/flows/generate-lesson-plan.ts).
   • Alur ini menggunakan prompt yang telah didefinisikan dengan input dari pengguna.
   • Genkit berkomunikasi dengan model AI (Gemini) untuk menghasilkan output RPP dalam format JSON yang sesuai dengan GenerateLessonPlanOutputSchema di src/ai/schemas.ts.
6. Pembaruan UI:
   • Hasil dari Server Action dikembalikan ke komponen Home (src/app/page.tsx).
   • State lessonPlan diperbarui dengan data RPP yang baru.
   • Komponen LessonPlanDisplay (src/components/lesson-plan-display.tsx) merender data RPP yang terstruktur dan diformat dengan baik.

4.2. Generasi Dokumen Tambahan (Materi, Lembar Kerja, dll.)

1. Pemicu Pengguna: Setelah RPP berhasil dibuat, tombol “Buat” di header menjadi aktif. Pengguna dapat memilih untuk membuat “Materi Pembelajaran”, “Lembar Kerja”, dll.
2. Panggilan Aksi: Menekan salah satu tombol akan memicu fungsi handler yang sesuai (misalnya, handleGenerateMaterials).
3. Server Action & Alur Genkit: Prosesnya mirip dengan generasi RPP.
   • Data RPP yang sudah ada (lessonPlan) digunakan sebagai input untuk alur Genkit yang relevan (misalnya, generateLearningMaterials).
   • AI menghasilkan konten baru (dalam format Markdown) berdasarkan konteks dari RPP.
4. Pembaruan UI: State yang sesuai (misalnya, learningMaterials) diperbarui, dan konten baru ditampilkan di bawah RPP utama dalam LessonPlanDisplay.

4.3. Ekspor Dokumen

1. Pemicu Pengguna: Pengguna membuka menu dropdown “Unduh” dan memilih format (PDF/DOCX) untuk dokumen yang ingin diunduh.
2. Fungsi Ekspor: Fungsi yang relevan dari src/lib/export.ts dipanggil (misalnya, generatePdf atau generateDocx).
3. Pembuatan Dokumen:
   • PDF: jsPDF digunakan untuk membuat dokumen PDF secara dinamis di sisi klien. Teks dan tabel disusun berdasarkan struktur data RPP.
   • DOCX: Library docx digunakan untuk membuat dokumen Word. Struktur RPP dan konten Markdown lainnya diubah menjadi elemen-elemen docx.
4. Unduh: file-saver digunakan untuk memicu unduhan berkas yang dihasilkan di browser pengguna.

5. Komponen Kunci

• src/app/page.tsx: Komponen utama yang mengelola state aplikasi, termasuk data RPP, status loading, dan interaksi antara form dan display.
• src/components/lesson-plan-form.tsx: Komponen “pintar” yang berisi logika formulir, validasi, dan menangani input dari pengguna.
• src/components/lesson-plan-display.tsx: Komponen “pintar” yang bertanggung jawab untuk menampilkan semua konten yang dihasilkan (RPP, materi, dll.) dan menangani logika untuk pembuatan dokumen tambahan serta ekspor.
• src/ai/flows/*.ts: File-file ini adalah inti dari fungsionalitas AI. Setiap file mendefinisikan prompt, skema input/output, dan alur kerja untuk berinteraksi dengan model AI.
• src/lib/export.ts: Modul yang mengisolasi semua logika kompleks untuk mengonversi data JSON dan Markdown menjadi format berkas PDF dan DOCX.