Membangun Ulang Laravel E-Learning ke Python FastAPI & React: Arsitektur Async Concurrency Tinggi & Migrasi Cloud-Ready

Latar Belakang & Motivasi: Melompati Batas Worker Sinkron

Pada artikel sebelumnya di blog ini, saya telah mendokumentasikan perjalanan transformasi aplikasi ujian sekolah tahun 2017 berbasis Laravel 5.2 menuju Laravel 13 modern dengan Filament 3 dan Livewire 3 (tersedia open-source di mfarim/laravel-elearning), serta edisi enterprise pendamping berbasis Java 21 Spring Boot & React.

Versi monolitik Laravel tersebut terbukti sangat produktif untuk operasional satu sekolah:

• Filament 3 memungkinkan pembuatan panel administrasi CRUD dalam sekejap.
• Livewire 3 menghadirkan pengalaman ujian reaktif tanpa perlu pusing mengelola pipeline build frontend terpisah.
• Pest PHP menjamin seluruh alur pengujian fitur dan penguatan celah IDOR (Insecure Direct Object Reference) berjalan otomatis.

Namun, ketika platform Computer Based Test (CBT) dan Learning Management System (LMS) ini dipersiapkan untuk skala yang jauh lebih luas—seperti ujian serentak antarsekolah satu distrik/provinsi, sertifikasi profesional berskala puluhan ribu peserta, dan integrasi pemrosesan Artificial Intelligence (AI), kita berhadapan dengan batas fisik arsitektur worker sinkron:

1. Lonjakan Konkurensi Saat "Exam Rush Hour": Ketika 2.000 hingga 10.000 peserta serempak mengklik tombol "Mulai Ujian" tepat pukul 08:00:00 WIB, setiap proses worker PHP-FPM mengalokasikan satu thread proses sistem operasi penuh (mengonsumsi RAM 40MB–80MB per worker). Menjalankan ribuan worker sinkron sekaligus memicu kejenuhan memori dan overhead pergantian konteks (context-switching) CPU yang sangat berat.
2. Kebutuhan Telemetri Real-Time Asinkron Tanpa Beban: Guru pengawas di ruang kontrol memerlukan telemetri langsung (sisa waktu, progres nomor soal, peringatan keluar aplikasi/pindah tab). Menangani ribuan koneksi real-time dua arah yang persistent membutuhkan event loop asinkron non-blocking yang sangat hemat memori (~15MB–25MB).
3. Kesiapan Ekosistem AI & Machine Learning: Pendidikan modern kini bergerak cepat menuju penilaian esai otomatis via Natural Language Processing (NLP), deteksi kemiripan soal semantik, dan kalibrasi tingkat kesulitan berbasis data. Python adalah bahasa utama (lingua franca) di dunia AI/ML dan data science.
4. Ekosistem Multi-Platform yang Terpisah: Lembaga pendidikan modern memerlukan antarmuka web dan aplikasi mobile khusus (Android, iOS, CBT lockdown browser) yang mengakses REST API dan WebSocket yang sama dengan tipe data ketat dan terdokumentasi otomatis.

Untuk menjawab kebutuhan tersebut, saya membangun edisi pendamping ketiga: Python FastAPI + React E-Learning.

Perbandingan Arsitektur: Monolit vs. Layanan Async Terpisah

Berikut adalah perbandingan mendalam bagaimana setiap lapisan sistem berevolusi:

Cetak Biru Arsitektur Sistem

Berikut adalah rancangan arsitektur sistem decoupled siap-cloud yang diimplementasikan pada repositori Python FastAPI + React:

Sorotan Rekayasa Teknis Utama

1. Dependency Injection FastAPI: Stateless JWT & Engine Impersonasi 1-Klik

Pada aplikasi monolitik, proses admin berpindah peran (impersonation) biasanya bertumpu pada sesi stateful di server (Auth::loginUsingId($userId)). Pada Single Page Application (SPA), kita memerlukan token JWT stateless yang membawa hak akses yang pasti namun tetap mendukung fitur impersonasi dengan jejak audit yang jelas.

Pada file backend/app/api/v1/auth.py, endpoint impersonasi mencetak token sementara yang mengatasnamakan user target sambil merekam ID administrator asli di dalam payload token:

@router.post("/admin/impersonate/{user_id}", response_model=ApiResponse[AuthResponse])
async def impersonate(
    user_id: int,
    admin_user: User = Depends(require_roles(["ROLE_ADMIN"])),
    db: AsyncSession = Depends(get_db),
):
    stmt = (
        select(User)
        .options(
            selectinload(User.roles),
            selectinload(User.teacher_profile),
            selectinload(User.student_profile).selectinload(Student.classroom),
        )
        .where(User.id == user_id, User.deleted_at.is_(None))
    )
    target_user = (await db.execute(stmt)).scalars().first()
    if not target_user:
        raise HTTPException(status_code=404, detail="Target user not found")

    target_roles = [r.name for r in target_user.roles]
    token = create_access_token(
        subject=target_user.id,
        roles=target_roles,
        extra_claims={
            "is_impersonating": True,
            "original_admin_id": admin_user.id,
        },
    )

    auth_data = build_auth_response(target_user, token, admin_user.id)
    return ApiResponse.ok(data=auth_data, message=f"Impersonating {target_user.name}")

Pemulihan Sesi Otomatis

Ketika admin selesai melakukan investigasi kendala siswa, tombol keluar pada banner atas memanggil /api/v1/admin/stop-impersonate. Backend membaca klaim original_admin_id pada token, mengembalikan sesi admin semula dengan aman, dan mencabut hak akses siswa tanpa mengharuskan admin login ulang.

2. Engine Ujian CBT Presisi Tinggi: Anti-Cheat & Telemetri Native WebSocket

Logika eksekusi ujian pada backend/app/api/v1/exam_runner.py menerapkan aturan ketat di sisi server yang tidak dapat dimanipulasi oleh perubahan jam lokal di perangkat siswa:

Perhitungan Timer Terpusat di Server

now = datetime.utcnow()
total_duration_sec = exam.duration_minutes * 60

if attempt and attempt.status in ["in_progress"]:
    # Hitung selisih durasi tepat dari waktu mulai server
    elapsed = (now - attempt.started_at).total_seconds()
    remaining = max(0, int(total_duration_sec - elapsed))
    
    # Kunci batas waktu maksimal
    if remaining <= 0:
        attempt.status = "submitted"
        attempt.finished_at = now
        await db.commit()
        raise HTTPException(
            status_code=400, 
            detail="Batas waktu ujian telah habis"
        )

Deteksi Pelanggaran Anti-Cheat & Broadcast Native WebSocket

Di sisi frontend (frontend/src/pages/exams/ExamRunner.tsx), lingkungan browser siswa dikunci ketat:

• Klik kanan dan kombinasi tombol copy-paste dicegah.
• Layar blur atau perpindahan tab dideteksi melalui API HTML5 visibilitychange.
• Pelanggaran dikirimkan ke server melalui /api/v1/exams/attempts/{id}/violation. Jika akumulasi pelanggaran mencapai 5 kali, ujian akan dihentikan dan disubmit otomatis oleh server.

# Handler pencatatan pelanggaran di server dengan broadcast instan
attempt.violations_count += 1
if attempt.violations_count >= 5:
    attempt.status = "submitted"
    attempt.finished_at = datetime.utcnow()

await db.commit()

# Broadcast event ke layar pengawas guru via WebSocketManager
await ws_manager.broadcast_to_exam(
    exam_id=attempt.examination_id,
    event_type="VIOLATION_LOGGED",
    data={
        "studentId": student.id,
        "studentName": student.name,
        "violationsCount": attempt.violations_count,
        "status": attempt.status,
    }
)

Manajer koneksi WebSocket meneruskan event ini ke seluruh layar guru pengawas yang sedang membuka monitoring ujian (ExamMonitor.tsx) dalam latensi sub-milidetik:

class ConnectionManager:
    def __init__(self):
        self.active_rooms: Dict[int, Set[WebSocket]] = {}

    async def broadcast_to_exam(self, exam_id: int, event_type: str, data: dict):
        if exam_id not in self.active_rooms:
            return

        payload = {"eventType": event_type, "data": data}
        message_str = json.dumps(payload, default=str)
        dead_connections = set()

        for connection in self.active_rooms[exam_id]:
            try:
                await connection.send_text(message_str)
            except Exception:
                dead_connections.add(connection)

        for dead in dead_connections:
            self.disconnect(exam_id, dead)

3. Pemrosesan Batch Hemat Memori dengan openpyxl

Ketika mengimpor ribuan data siswa baru atau ratusan butir soal ujian lengkap dengan opsi pilihan ganda dan kunci jawaban, skrip sinkron kerap membentur limit memori atau batas timeout eksekusi.

Pada backend FastAPI, kita memanfaatkan pustaka openpyxl dengan mode streaming (read_only=True) untuk membaca baris file Excel langsung dari memori byte buffer dan menyimpannya secara atomik ke database PostgreSQL:

from openpyxl import load_workbook
import io

@router.post("/students/import-excel", response_model=ApiResponse[Dict[str, int]])
async def import_students_excel(
    file: UploadFile = File(...),
    db: AsyncSession = Depends(get_db),
    admin: User = Depends(require_roles(["ROLE_ADMIN"])),
):
    content = await file.read()
    wb = load_workbook(filename=io.BytesIO(content), read_only=True, data_only=True)
    sheet = wb.active

    imported_count = 0
    # Iterasi baris data tanpa membebani memori struktur DOM XML
    for row in sheet.iter_rows(min_row=2, values_only=True):
        nis, name, email, gender, classroom_id = row[0], row[1], row[2], row[3], row[4]
        if not nis or not name:
            continue
        
        # Buat akun User + profil Siswa dalam transaksi terpadu
        await create_student_record(db, nis=str(nis), name=name, email=email, gender=gender, classroom_id=classroom_id)
        imported_count += 1

    await db.commit()
    return ApiResponse.ok(data={"imported": imported_count}, message="Impor data siswa berhasil")

4. SQLAlchemy 2.0 Async Engine & Kecepatan Validasi Pydantic v2

Berbeda dengan ORM generasi lama yang menyamarkan pemanggilan I/O pemblokir di balik fungsi getter relasi, SQLAlchemy 2.0 mewajibkan penulisan kueri asinkron yang eksplisit dan aman:

# Kueri join asinkron dengan eager loading relasi terkait
stmt = (
    select(Examination)
    .options(
        selectinload(Examination.teacher),
        selectinload(Examination.subject),
        selectinload(Examination.classroom),
        selectinload(Examination.questions),
    )
    .where(Examination.id == exam_id, Examination.deleted_at.is_(None))
)
result = await db.execute(stmt)
exam = result.scalars().first()

Dipadukan dengan Pydantic v2, seluruh struktur request dan respon divalidasi oleh mesin inti berbasis bahasa pemrograman Rust (pydantic-core). Hasilnya, kecepatan parsing data meningkat drastis antara 5 hingga 15 kali lipat lebih cepat dibandingkan pustaka validasi Python konvensional.

Arsitektur Frontend: React 19, TypeScript & Tailwind CSS v4

Aplikasi antarmuka client (frontend/) dirancang agar terasa sangat cepat, bersih, dan optimal baik di komputer laboratorium sekolah maupun di ponsel pintar siswa:

1. Aplikasi SPA React 19 Modern: Dibangun di atas Vite 6 dengan modul Hot Module Replacement (HMR) secepat kilat dan antarmuka TypeScript yang ketat.
2. Desain Bernuansa Emerald: Palet warna slate dan emerald profesional (#059669, #10b981) menggunakan Tailwind CSS v4 yang konsisten dengan estetika platform pendidikan modern.
3. Penyimpanan Status Terpusat via Zustand: Menyimpan token JWT dan status impersonasi secara persisten lintas tab browser.
4. Palet Nomor Soal Interaktif: Navigasi sentuh cepat ke puluhan butir soal ujian dengan indikator visual langsung:
   • 🟢 Hijau: Soal telah dijawab dan tersimpan aman di server
   • ⚪ Abu-abu: Soal belum dikerjakan
   • 🟡 Kuning: Soal ditandai ragu-ragu untuk ditinjau ulang
5. Cetak Kartu Peserta Ujian Resmi: Fasilitas cetak kartu ujian resmi lengkap dengan barcode NIS siswa siap pakai untuk verifikasi fisik di meja ujian.

Panduan Memilih Stack: Laravel vs. Java Spring Boot vs. Python FastAPI

Setelah membangun sistem yang sama persis di ketiga ekosistem teknologi tersebut, berikut adalah panduan perbandingan objektif bagi para engineering lead:

Repositori Open-Source

Ketiga edisi implementasi platform ini tersedia secara open-source di bawah lisensi MIT:

• 🐘 Edisi Monolitik Laravel: https://github.com/mfarim/laravel-elearning
  • Laravel 13, Livewire 3, Filament 3, MySQL 8, Pest PHP
• ☕ Edisi Java Spring Boot + React: https://github.com/mfarim/spring-elearning-react
  • Java 21 LTS, Spring Boot 3.4, React 19, PostgreSQL 16, Redis 7, WebSocket STOMP
• 🐍 Edisi Python FastAPI + React: https://github.com/mfarim/fastapi-elearning-react
  • Python 3.12, FastAPI, SQLAlchemy 2.0 Async, Pydantic v2, React 19, Native WebSockets, Redis Pub/Sub

Menjalankan Proyek Secara Lokal

Anda dapat menjalankan seluruh lingkungan proyek Python FastAPI + React dengan Docker Compose dalam satu perintah praktis:

# Clone repositori
git clone https://github.com/mfarim/fastapi-elearning-react.git
cd fastapi-elearning-react

# Jalankan seluruh service (PostgreSQL, Redis, MinIO, Backend FastAPI, Frontend React)
docker compose up -d --build

Akses layanan yang berjalan:

• Aplikasi Web: http://localhost:3001
• Dokumentasi Interaktif Swagger UI: http://localhost:8000/docs
• Dokumentasi Alternatif ReDoc: http://localhost:8000/redoc

Kredensial Akun Demo Bawaan:

• Admin: [email protected] / password
• Guru: [email protected] / password
• Siswa: [email protected] / password

Penutup & Langkah Selanjutnya

Membangun ulang platform Laravel E-Learning ke dalam Python FastAPI dan React membuktikan bagaimana arsitektur asinkron modern mampu menghadirkan skalabilitas masif dan pengalaman pengembangan yang sangat menyenangkan. Python kini bukan lagi sekadar bahasa skrip atau analisis data—dengan kombinasi FastAPI dan ASGI, Python telah menjelma menjadi mesin tangguh untuk aplikasi terdistribusi modern berkecepatan tinggi.

Pada Part 2, kita akan membedah secara spesifik proses migrasi skema database: dari model Eloquent Laravel menuju model asinkron SQLAlchemy 2.0 dan skrip migrasi Alembic. Sampai jumpa di artikel berikutnya!