Arsitektur SIAPS-IMUS

Gambaran besar

Setiap aplikasi dibagi dua: API (otak dan pintu data) dan App (tampilan di browser). Browser membuka App, App meminta data ke API, API membaca database.

flowchart LR
    subgraph BR["Browser pengguna"]
        APP["App (React)"]
    end
    subgraph CF["Cloudflare"]
        WA["Worker app<br/>menyajikan file tampilan"]
        WP["Worker api (Hono)"]
        D1[("D1<br/>database")]
    end
    WA -- "halaman" --> APP
    APP -- "JSON + token" --> WP
    WP -- "baca/tulis" --> D1
    D1 -- "data" --> WP
    WP -- "JSON" --> APP

Satu repositori = dua folder

siaps-imus-lt-sd/
  api/
    src/
      index.ts        titik masuk
      app.ts          merakit semua rute
      routes/         satu file per fitur (siswa, guru, spp, ...)
      middleware/     penjaga: cek token, cek peran
      db/             skema tabel dan migrasi
      shared/         alat bantu (JWT, password, respons)
  app/
    src/
      pages/          satu file per halaman
      providers/      auth, pengambil data
      config/         daftar menu

Alur login

sequenceDiagram
    actor U as Pengguna
    participant A as App (React)
    participant API as API (Hono)
    participant DB as D1
    U->>A: isi username dan password
    A->>API: POST /api/v1/auth/login
    API->>API: validasi isian (Zod)
    API->>DB: cari pengguna
    DB-->>API: data pengguna + hash password
    API->>API: cocokkan password (bcrypt)
    API->>API: buat token JWT (24 jam)
    API-->>A: token + data pengguna
    A->>A: simpan token di browser
    A-->>U: buka dashboard

Alur membuka halaman daftar

sequenceDiagram
    participant A as App (React)
    participant MW as Middleware
    participant R as Rute
    participant DB as D1 via Drizzle
    A->>MW: GET /api/v1/siswa?page=1 + Bearer token
    alt token hilang atau kedaluwarsa
        MW-->>A: 401
        A->>A: kembali ke halaman login
    else token valid
        MW->>R: teruskan
        R->>R: validasi parameter
        R->>DB: baca data
        DB-->>R: baris data
        R-->>A: JSON seragam
        A->>A: tampilkan tabel
    end

Database

Cloudflare D1 (berbasis SQLite) dengan Drizzle ORM. Skema tabel ditulis dalam TypeScript, lalu dibuat menjadi berkas migrasi. Setiap aplikasi punya D1 sendiri.

Alur penerapan

flowchart LR
    subgraph API["Bagian API"]
        M1["Migrasi + seed D1"] --> M2["wrangler deploy api"] --> M3["Worker API + koneksi D1"]
    end
    subgraph APP["Bagian App"]
        B1["Build tampilan"] --> B2["wrangler deploy app"] --> B3["Worker App + terusan /api"]
    end
    M3 -.-> B3

Pola umum yang dipakai bersama

Enam aplikasi disalin dari satu cetakan (templates/api-template) di repositori siaps-ai-workspace, sehingga sekitar 90% cara kerjanya sama. Bedanya hanya pada tabel, rute, dan halaman sesuai bidang masing-masing.