Ajari Aku — Belajar dengan Mengajar

Bukan AI yang mengajarimu. Kamu yang mengajari AI-nya.

Aplikasi web belajar Matematika berbasis protégé effect (efek mengajar): alih-alih pasif membaca atau bertanya ke chatbot, siswa berperan sebagai guru dan menjelaskan konsep kepada seorang murid AI bernama Pio. Saat Pio sengaja membuat kekeliruan umum, siswa harus mengoreksinya — dan justru di momen itulah celah pemahaman siswa sendiri ikut terungkap dan diperbaiki.

Dibuat oleh POWERRANGERS untuk TIC 9.0 — subtema "Pendidikan Berkualitas" (selaras SDG 4 – Quality Education).

• Latar Belakang
• Solusi & Keunggulan (USP)
• Fitur Utama
• Cuplikan Layar
• Arsitektur & Cara Kerja
• Teknologi
• Konten & Kurikulum
• Privasi & Keamanan
• Menjalankan Secara Lokal
• Variabel Lingkungan
• Deploy
• Struktur Proyek
• Aksesibilitas & Performa
• Batasan & Rencana Lanjutan
• Tim
• Kredit & Sumber

Kemampuan matematika siswa Indonesia masih menjadi tantangan besar. Berdasarkan PISA 2022 (OECD):

Akar masalahnya sering bukan sekadar "belum hafal rumus", melainkan miskonsepsi yang tidak pernah ketahuan karena cara belajar yang pasif. Ajari Aku menyerang tepat titik itu: memaksa siswa mengartikulasikan pemahaman lalu menghadapkannya pada kesalahan yang harus dikoreksi.

Ajari Aku membalik peran belajar dan menjalankannya sebagai satu putaran singkat yang bisa diulang:

   ┌─────────────┐        ┌─────────────┐        ┌───────────────┐
   │  1. BELAJAR │  ───▶  │  2. AJARI   │  ───▶  │ 3. NAIK LEVEL │
   │ baca materi │        │ jelaskan ke │        │ celah terdeteksi
   │  singkat    │        │ murid AI &  │        │  → topik baru │
   │             │        │ koreksi ia  │        │    terbuka    │
   └─────────────┘        └─────────────┘        └───────────────┘
          ▲                                               │
          └───────────────────────────────────────────────┘

Landasan ilmiah yang dipakai:

• Protégé Effect — orang belajar lebih dalam ketika menyiapkan materi dan mengajari "murid" dibanding belajar untuk diri sendiri.
• Teknik Feynman — bila kamu bisa menjelaskan sesuatu sesederhana mungkin, berarti kamu benar-benar paham.
• Diagnostik dari cara mengajar — murid AI melempar miskonsepsi umum; respons pengajar mengungkap di mana pemahamannya masih bolong.

Rujukan: Chase, Chin, Oppezzo & Schwartz (2009), "Teachable Agents and the Protégé Effect", Journal of Science Education and Technology.

Fitur pendukung: PWA installable (bisa "Add to Home Screen"), toggle tema cepat di navbar, dan animasi ringan tanpa mematikan performa.

Cara terbaik menilai Ajari Aku adalah mencobanya langsung sebagai tamu (tanpa login):

▶ Buka demo langsung

Alur inti yang bisa dicoba: pilih topik di Belajar, baca Materi, kerjakan Kuis, lalu Ajari murid AI Pio, dan tutup dengan Rapor Sesi lalu Naik Level. Tangkapan layar tiap halaman juga tersedia di lampiran proposal.

Aplikasi ini local-first dan bisa dipakai penuh sebagai tamu (tanpa perlu login). Semua progres tersimpan di localStorage perangkat; login Google tersedia sebagai opsi untuk menyimpan dan menyinkronkan progres antar-perangkat.

Murid AI "Pio" bisa digerakkan oleh dua mesin dengan bentuk keluaran identik (reply, mood, understood, dikoreksi), sehingga antarmuka tidak peduli sumbernya dan demo tidak pernah "mati":

                         ┌──────────────────────────────────────────┐
   Pengguna mengetik ──▶ │  Layar Ajari  (PAKAI_GEMINI: true|false) │
   penjelasan            └───────────────┬──────────────┬───────────┘
                                         │              │
                    flag = false         │              │  flag = true
               (fallback otomatis)       ▼              ▼   ← default
                 ┌───────────────────────────┐   ┌────────────────────────────┐
                 │  Mesin murid LOKAL         │   │  POST /api/ajari (server)  │
                 │  deterministik (skrip)     │   │  → Google Gemini + RAG     │
                 │  tanpa API key / offline   │   │  grounding Kurikulum Merdeka
                 └───────────────────────────┘   └──────────────┬─────────────┘
                                                                │ bila key kosong/kuota habis
                                                                ▼  → {fallback:true}
                                                        (UI jatuh ke skrip lokal)

• Mode Gemini (utama, PAKAI_GEMINI = true). Route server POST /api/ajari memanggil Google Gemini dengan rotasi banyak API key (kuota satu key habis → otomatis lompat ke key berikutnya) dan rantai model berjenjang (gemini-flash-latest → gemini-2.0-flash). Suhu dipisah per mode (percakapan lebih natural, penilaian lebih reproducible), dengan safety settings untuk konteks pelajar.
• Mode lokal (cadangan otomatis). Bila semua key gagal / kuota habis / offline, route membalas {fallback:true} dan klien jatuh ke state machine deterministik ("murid mencoba → keliru → dikoreksi → paham") tanpa API key — sehingga demo tidak pernah mati saat penjurian.

Jawaban Pio di-grounding ke bank materi terverifikasi: materi eksak per-topik diambil langsung bila topik dikenal (bukan pencarian fuzzy, agar topik SD tidak nyasar ke materi SMA); jika tidak, dipakai retrieval berbasis kata kunci atas korpus kurikulum. Materi disuntik ke prompt sebagai satu-satunya sumber kebenaran untuk menekan halusinasi, dan label sumber ditampilkan sebagai chip "Sumber: Kurikulum Merdeka".

Browser (React) ──localStorage── data pengguna (sumber kebenaran)
      │
      ├─(opsional)─ /api/ajari ─── Google Gemini      (kunci di server saja)
      └─(opsional)─ Firebase Auth + Firestore ─────── sinkron antar-perangkat

Node.js 20+ disarankan (Next.js 16 + React 19). Versi Node belum dipatok di package.json.

Materi disusun mengikuti Kurikulum Merdeka (Kemendikbudristek) dan diverifikasi tim lewat alur tulis → guru pemeriksa.

Fokus etalase demo adalah SMA Fase E (Kelas 10) — Eksponen, SPLTV & Trigonometri — sedangkan cakupan konten membentang SD hingga SMA, Fase A–F (Kurikulum Merdeka).

Dirancang dengan prinsip minim data dan selaras UU PDP No. 27/2022:

• Sebagai tamu secara default. Seluruh fitur bisa langsung dipakai sebagai tamu tanpa perlu mendaftar; login tidak dipaksakan. Login Google tetap tersedia sebagai opsi (lihat poin berikut).
• Data di perangkat. Progres, memori belajar, profil, dan tema tersimpan di localStorage (prefix ajari-aku:). Aplikasi adalah source of truth di sisi klien.
• Cloud sync opsional. Firebase Auth (Google) + Firestore hanya aktif bila variabel NEXT_PUBLIC_FIREBASE_* diisi; jika tidak, aplikasi berjalan penuh dalam mode tamu dan tombol Google disembunyikan.
• Minimisasi PII. Saat sinkron, hanya progres belajar yang ditulis ke Firestore — bukan email/nama/foto.
• Keamanan basis data = aturan, bukan kerahasiaan kunci. Kunci NEXT_PUBLIC_FIREBASE_* memang publik by design (identifier proyek, bukan rahasia); pengamanannya ada di Firestore rules: tiap pengguna hanya bisa membaca/menulis dokumennya sendiri, selebihnya default deny.
• Kunci Gemini hanya di server. GEMINI_API_KEY (opsional GEMINI_API_KEY_2…_10, atau GEMINI_API_KEYS dipisah koma, untuk rotasi kuota) dibaca di route server /api/ajari dan tidak pernah masuk ke bundle browser (tanpa prefix NEXT_PUBLIC).
• Pengerasan endpoint AI. Rate-limit per-IP, pengecekan origin, batas panjang input & jumlah giliran, serta timeout — untuk mencegah penyalahgunaan dan membatasi biaya token.
• Hak hapus data. Pengguna dapat reset progres atau hapus semua data (termasuk salinan cloud bila login) langsung dari halaman Profil.

Catatan jujur: Firebase App Check belum dipasang di kode saat ini — pengamanan endpoint Firebase bertumpu pada Firestore rules. App Check dapat ditambahkan sebagai pengerasan lanjutan.

Prasyarat: Node.js 20+.

# 1. Klon repositori
git clone https://github.com/LindungiLw/ajariaku.git
cd ajari-aku

# 2. Pasang dependensi
npm install

# 3. Siapkan variabel lingkungan (lihat bagian berikutnya)
cp .env.example .env.local
# lalu isi .env.local dengan kunci milikmu (boleh dikosongkan untuk mode tamu)

# 4. Jalankan mode pengembangan
npm run dev

Buka http://localhost:3000. Tanpa mengisi .env.local sekalipun, aplikasi tetap berjalan penuh dalam mode tamu + murid AI lokal (tanpa Gemini/Firebase).

Semua variabel bersifat opsional: tanpa satu pun, aplikasi berjalan penuh dalam mode tamu dengan murid AI lokal. Salin .env.example menjadi .env.local, lalu isi sesuai kebutuhan.

Kunci GEMINI_* hanya dibaca di server (/api/ajari) dan tak pernah masuk ke bundle browser (tanpa prefix NEXT_PUBLIC).

Di-deploy ke Vercel:

1. Import repositori ini (Add New → Project). Next.js terdeteksi otomatis.
2. Settings → Environment Variables: isi variabel dari bagian di atas (minimal GEMINI_API_KEY untuk AI; NEXT_PUBLIC_FIREBASE_* bila ingin cloud sync).
3. Deploy. Setiap push ke main otomatis ter-deploy ulang.

Aturan firestore.rules perlu di-deploy terpisah lewat Firebase Console atau CLI agar sinkronisasi & papan peringkat berfungsi.

ajari-aku/
├─ app/
│  ├─ page.tsx                 # landing publik
│  ├─ layout.tsx               # metadata & font global
│  ├─ (app)/                   # route group (tak muncul di URL) — shell + navbar
│  │  ├─ beranda/              # dashboard
│  │  ├─ belajar/              # peta petualangan
│  │  │  └─ pilih/             # katalog tingkat
│  │  ├─ ajari/                # layar inti mengajar murid AI
│  │  ├─ kelas/                # ruang kelas murid AI kustom
│  │  ├─ kursus/               # latihan kilat
│  │  ├─ progres/              # progres & pencapaian
│  │  ├─ profil/               # profil & pengaturan
│  │  ├─ tentang/  privasi/    # metodologi & kebijakan data
│  ├─ api/ajari/               # route server → Gemini (satu-satunya API)
│  ├─ manifest.ts, icon.tsx, opengraph-image.tsx, robots.ts, sitemap.ts
│  └─ globals.css              # token desain Tailwind v4
├─ components/                 # app-shell, mascot, auth, gamifikasi, dll.
├─ lib/                        # data & logika: bank-soal, materi, dunia, progress,
│                              # memory, kursus, murid-lokal, achievements, celebrate, ...
├─ firestore.rules             # aturan keamanan database
└─ next.config.ts              # header keamanan HTTP

• Responsif — tata letak menyesuaikan ponsel hingga desktop (navbar atas + bottom-nav mobile).
• Tema terang & gelap dengan anti-kedip saat memuat.
• Ringan — tanpa gambar berat; ikon dirender sebagai vektor, animasi hemat.
• Dapat dipasang (PWA) dan tetap berguna pada koneksi terbatas (mode lokal tanpa panggilan jaringan).

Untuk transparansi penilaian:

• Murid AI ditenagai Google Gemini (PAKAI_GEMINI = true) dengan rotasi banyak API key; bila semua key kehabisan kuota, otomatis jatuh ke mesin lokal deterministik agar demo tetap jalan.
• Skor "paham" pada Rapor Sesi adalah indikator refleksi/kemajuan, bukan asesmen tervalidasi.
• App Check belum dipasang (lihat catatan di Privasi & Keamanan).
• Rencana lanjutan: memperbanyak topik ber-skrip pada mode lokal, dan menambah katalog kursus.

POWERRANGERS — TIC 9.0, subtema Pendidikan Berkualitas.

• Kurikulum Merdeka — Kemendikbudristek (acuan materi & fase).
• OECD, PISA 2022 — data latar belakang kemampuan matematika.
• Chase, Chin, Oppezzo & Schwartz (2009) — dasar ilmiah protégé effect.
• Dibangun dengan Next.js, React, Tailwind CSS, dan Firebase.

Ajari Aku — karena cara terbaik memahami sesuatu adalah dengan mengajarkannya.