Akun Pengguna Default
Data login awal (seed data) yang disiapkan di database lokal maupun cloud Supabase untuk simulasi 3 jenis peran utama platform Triton.
Tabel Kredensial Uji Coba
| Peran (Role) | Password | Target Dashboard | Kewenangan / Batasan | |
|---|---|---|---|---|
| Admin | admin@triton.id | admin123 | `/admin/dashboard` | Memiliki kontrol penuh. Melakukan Approval/Reject Tryout yang diajukan Guru, melihat Logs, memfilter visual dashboard berdasarkan SD/SMP/SMA. |
| Guru | guru1@triton.id | guru123 | `/guru/dashboard` | Membuat bank soal tryout (manual, Word, AI), menulis rumus matematika KaTeX, melihat statistik, mengajukan status review tryout. |
| Siswa | siswa1@triton.id | siswa123 | `/siswa/dashboard` | Mengikuti ujian CBT, memiliki toolbar penyisip rumus LaTeX kustom, melihat hasil evaluasi, terikat **Anti-Cheating Sandbox**. |
Aliran Siklus Uji Presentasi
[ 1. GURU ] ➔ Login ➔ Buat Tryout & Soal Matematika (RichText / Seleksi Persamaan) ➔ Ajukan Review
│
▼
[ 2. ADMIN ] ➔ Login ➔ Meninjau Soal Guru di Panel Approval ➔ Memberikan Status 'Setujui' / 'Publish'
│
▼
[ 3. SISWA ] ➔ Login ➔ Mengikuti Tryout ➔ Terdeteksi Proctoring / Kumpul Uraian ➔ Lihat Hasil Ujian
Naskah Skenario Uji Coba Demo
Ikuti petunjuk langkah demi langkah ini untuk mensimulasikan fitur-fitur utama platform Triton di hadapan klien/penguji.
Pembuatan Tryout & Konversi Rumus Matematika (Guru)
Simulasi pembuatan tryout baru, pengetikan formula matematika mentah, konversi instan ke visual persamaan, dan pengajuan draf.
Langkah Uji:
- Masuk ke browser dan akses
http://localhost:3000/login. - Login dengan akun guru: Email
guru1@triton.iddan Passwordguru123. - Pada dashboard guru, klik tombol **"Buat Tryout Baru"**.
- Isi Nama Tryout:
Ujian Aljabar Kelas 12, pilih mata pelajaran matematika, kelas12 SMA, lalu klik simpan. - Pada halaman kelola soal, klik **"Tambah Soal Manual"**.
- Di editor pertanyaan, ketik teks pecahan mentah:
2/4 + 2/3 = x/y. - Sorot/blok teks
2/4 + 2/3 = x/ymenggunakan mouse Anda. Floating button **"Σ Ubah Jadi Persamaan"** akan muncul di dekat kursor. - Klik tombol **"Σ Ubah Jadi Persamaan"**. Teks pecahan mentah akan otomatis terkonversi secara instan menjadi format visual pecahan matematika yang indah!
- (Opsional) Klik tepat pada rumus matematika yang baru terbentuk. Dialog input LaTeX Word-like akan muncul otomatis di mana Anda dapat mengubah angka pembilang/penyebut secara langsung.
- Pilih opsi jawaban, tentukan kunci jawaban, lalu klik **"Simpan Soal"**.
- Di bagian bawah sidebar kiri, klik **"Ajukan Persetujuan"** agar status tryout berubah menjadi *Pending Approval*.
Verifikasi Draf & Alur Approval Tryout (Admin)
Menunjukkan peran administrator dalam menyaring data jenjang pendidikan sekolah dan melakukan review terhadap usulan materi guru.
Langkah Uji:
- Logout dari halaman guru, masuk kembali ke halaman login.
- Login dengan akun administrator: Email
admin@triton.iddan Passwordadmin123. - Pada dashboard utama admin, klik tab filter **"SD"**, **"SMP"**, atau **"SMA"** di bagian atas untuk menunjukkan penyaringan data tryout dan siswa secara real-time.
- Pada card "Daftar Tryout Menunggu Persetujuan", klik link **"Lihat semua"** untuk membuka halaman **Approval**.
- Temukan nama tryout yang diajukan oleh guru pada Skenario A, lalu klik tombol **"Tinjau / Review"**.
- Admin dapat membaca butir soal yang diusulkan guru. Klik **"Setujui & Publish"** untuk merilis ujian secara resmi agar dapat dikerjakan siswa.
CBT Sandbox, Ujian Matematika Siswa & Anti-Cheating
Menunjukkan sistem ujian siswa dengan integrasi pengerjaan matematika (sintaks $) beserta demonstrasi sistem penangkapan kecurangan (anti-cheat).
Langkah Uji:
- Logout dari admin, lalu login menggunakan akun siswa: Email
siswa1@triton.iddan Passwordsiswa123. - Pilih menu **Tryout**, cari tryout matematika yang dirilis pada Skenario B, dan klik **"Mulai"**. Klik checklist persetujuan dan klik **"Mulai Tryout Sekarang"**.
- Ujian akan memaksa siswa memasuki **Mode Layar Penuh (Fullscreen)**.
- Demo Anti-Cheat A (Exit Fullscreen): Tekan tombol
ESCpada keyboard. Layar pengerjaan soal akan langsung terkunci oleh panel merah peringatan. Ujian tidak bisa dilanjutkan sampai siswa mengeklik tombol **"Kembali ke Layar Penuh"**. - Demo Anti-Cheat B (Pindah Tab): Coba klik kanan atau buka tab baru di browser Anda. Layar akan mendeteksi hilangnya fokus window (*Window Blur*) dan memunculkan notifikasi pop-up pelanggaran: *Peringatan 1/3*.
- Coba lakukan copy teks soal menggunakan kursor/klik kanan mouse. Anda akan melihat bahwa seleksi teks dan klik kanan diblokir sepenuhnya.
- Pada tipe soal essay/uraian, klik tombol **"Sisipkan Formula (Σ)"** di atas textarea jawaban siswa.
- Pilih template formula **"Pecahan"**. Sintaks LaTeX
$\frac{a}{b}$akan disisipkan ke textarea kursor. Ganti nilaiadanbdengan angka pilihan Anda. - Klik tombol **"Pratinjau Jawaban"** di bawah textarea. Hasil jawaban matematika uraian Anda akan di-render menggunakan KaTeX secara rapi dan nyata.
- Lakukan pelanggaran pindah tab/window sebanyak 3 kali berturut-turut. Pada pelanggaran keempat, sesi ujian akan langsung dihentikan paksa oleh sistem, lembar jawaban dikumpulkan otomatis, dan status Anda diubah menjadi terdiskualifikasi.
Konfigurasi Database Cloud Supabase
Ikuti petunjuk di bawah ini untuk menghubungkan 6 microservices lokal Anda dengan 1 database cloud terpusat di Supabase menggunakan skema PostgreSQL terisolasi.
1. Inisialisasi Skema di SQL Editor Supabase
Daftar di Supabase, buat satu proyek database gratisan, lalu masuk ke menu **SQL Editor**. Salin dan jalankan skrip berikut untuk memisahkan tabel microservices Anda agar tidak bertabrakan:
-- Buat schema virtual terpisah untuk membagi 5 database microservices
CREATE SCHEMA IF NOT EXISTS auth;
CREATE SCHEMA IF NOT EXISTS user_svc;
CREATE SCHEMA IF NOT EXISTS sd;
CREATE SCHEMA IF NOT EXISTS smp;
CREATE SCHEMA IF NOT EXISTS sma;
Lalu, buka file migrasi lokal Anda (seperti services/sd-service/src/db/schema.sql), salin seluruh isi teks
SQL-nya, tempelkan ke SQL Editor Supabase dengan menyisipkan baris penanda di baris pertama:
SET search_path TO sd; -- Wajib ditulis di baris pertama agar tabel masuk ke skema 'sd' -- [Salin seluruh tabel dari sd-service/src/db/schema.sql ke sini...]
2. Hubungkan Skema pada pool.ts Backend
Modifikasi file koneksi database pool.ts pada setiap modul
layanan backend (misalnya di services/sd-service/src/db/pool.ts) agar membaca parameter
options saat menginisialisasi pool koneksi Postgres:
import { Pool } from 'pg'
const pool = new Pool({
host: process.env.POSTGRES_HOST,
port: Number(process.env.POSTGRES_PORT),
user: process.env.POSTGRES_USER,
password: process.env.POSTGRES_PASSWORD,
database: process.env.POSTGRES_DB,
// Tambahkan ini agar dapat mengatur skema search_path database secara dinamis
options: process.env.POSTGRES_OPTIONS,
})
export default pool3. Sesuaikan File .env Lokal Anda
Buka file .env pada root proyek Anda. Ubah alamat host
mengarah ke link Supabase, dan definisikan parameter pencarian skema masing-masing:
# Koneksi Database Terpusat Cloud Supabase (Opsi 1)
POSTGRES_HOST=aws-0-ap-southeast-3.pooler.supabase.com # Ganti dengan host Supabase Anda
POSTGRES_PORT=5432
POSTGRES_USER=postgres.your_project_id # Ganti dengan user id Supabase Anda
POSTGRES_PASSWORD=your_secure_supabase_password # Ganti dengan password database Supabase Anda
POSTGRES_DB=postgres # Database default di SupabasePastikan script penjalan dev/production (seperti
scripts/dev.sh) mewariskan parameter POSTGRES_OPTIONS untuk masing-masing container backend dengan
format string CLI: "-c search_path=sd", "-c search_path=smp", dsb.
Mengembalikan ke Database Lokal (Docker/Local Mode)
Jika presentasi online sudah selesai dan Anda ingin menjalankan sistem secara offline menggunakan database
lokal Docker bawaan proyek, cukup ubah kembali variabel database di file .env root Anda menjadi konfigurasi berikut:
# Koneksi Database Lokal (Docker Bawaan Proyek)
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_USER=triton_user
POSTGRES_PASSWORD=triton_secret_2024
# Hapus/kosongkan variabel POSTGRES_DB agar microservices membaca database terpisah (db_auth, db_user, dll)
POSTGRES_DB=Semua penyesuaian kode (CORS dinamis dan perbaikan cookie) yang telah diubah tetap kompatibel penuh saat Anda beralih kembali menggunakan database localhost.
Deployment Penuh ke Vercel & Supabase
Panduan lengkap langkah demi langkah untuk men-deploy frontend Next.js dan 6 backend microservices Express ke **Vercel Serverless** dengan database cloud **Supabase**.
Menjalankan Express.js di Vercel menggunakan model **Serverless Functions**. Hal ini sangat baik untuk keperluan demo gratisan karena tidak membutuhkan server VM menyala terus (no cold-start pricing). Namun, session persistent di memori lokal server Express tidak bekerja; **Redis mutlak diperlukan** untuk menyimpan cookies session (`triton.sid`).
1. Deploy 6 Microservices ke Vercel (Backend)
Untuk setiap service di dalam folder services/ (seperti
auth-service, user-service, dsb), Anda harus menambahkan berkas vercel.json di folder root service masing-masing agar Vercel
dapat mengompilasi dan mengarahkan rute Express.js:
{
"version": 2,
"builds": [
{
"src": "src/index.ts",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/index.ts"
}
]
}Langkah Deploy Backend di Vercel Dashboard:
- Commit dan push seluruh kode proyek Triton Anda ke **GitHub**.
- Buka dashboard Vercel, lalu klik **"Add New Project"**.
- Pilih repositori proyek Triton Anda.
- Pada bagian konfigurasi:
- Beri nama project yang unik (misal:
triton-sd-service). - Atur **Root Directory** ke folder service spesifik (contoh:
services/sd-service). - Atur **Framework Preset** ke *Other*.
- Beri nama project yang unik (misal:
- Buka dropdown **Environment Variables**, masukkan seluruh variabel dari `.env` lokal Anda yang
disesuaikan dengan koneksi database cloud Supabase:
# Ganti host database mengarah ke Supabase (gunakan detail dari Opsi 1) POSTGRES_HOST=aws-0-ap-southeast-3.pooler.supabase.com POSTGRES_PORT=5432 POSTGRES_USER=postgres.your_project_id POSTGRES_PASSWORD=your_secure_supabase_password POSTGRES_DB=postgres POSTGRES_OPTIONS="-c search_path=sd" # sesuaikan skema database per service (auth, user_svc, sd, smp, sma) # Khusus auth-service, Anda wajib menggunakan Upstash Redis (Serverless Redis) REDIS_HOST=your-upstash-redis-endpoint.upstash.io REDIS_PORT=31234 REDIS_PASSWORD=your_upstash_redis_password
- Klik **"Deploy"**. Ulangi langkah di atas untuk ke-6 service backend (api-gateway, auth-service, user-service, sd-service, smp-service, sma-service) sehingga Anda memiliki 6 URL Vercel backend.
2. Deploy Next.js ke Vercel (Frontend)
Men-deploy frontend Next.js 14 client agar terhubung secara online dengan API Gateway yang sudah di-deploy pada langkah sebelumnya:
- Di dashboard Vercel, klik **"Add New Project"** dan pilih repositori yang sama.
- Atur **Root Directory** ke folder
frontend. - Pilih **Framework Preset** ke **Next.js**.
- Di kolom **Environment Variables**, masukkan URL API Gateway yang sudah di-deploy di Vercel:
NEXT_PUBLIC_API_URL=https://triton-gateway.vercel.app # Domain API Gateway hasil deploy
- Klik **"Deploy"**. Frontend web Next.js Anda kini online dan siap digunakan demo oleh siapapun di internet!
3. Seeding Database Supabase (Master Data & User Dummy)
Karena Vercel berjalan secara serverless, Anda tidak bisa memicu perintah pengisian data awal (`make seed`) langsung dari server Vercel.
Anda hanya perlu melakukan seeding **satu kali saja** dari laptop lokal Anda dengan mengarahkan koneksinya langsung ke Supabase!
- Ubah sementara konfigurasi database di file
.envroot lokal Anda menggunakan Host, User, dan Password **Supabase** Anda. - Pastikan skema database dan tabel sudah terbuat di Supabase (dari langkah Tab 3).
- Buka terminal lokal Anda, lalu jalankan perintah seeding:
make seed
- Skrip TypeScript lokal akan berjalan dan langsung menyuntikkan data akun dummy (Admin, Guru, Siswa, Mapel, Tryout SD/SMP/SMA) ke database cloud Supabase Anda.
- Verifikasi data dengan membuka menu **Table Editor** di dashboard Supabase. Jika tabel telah berisi data, proses seeding telah berhasil 100%!
Membagikan Link Demo secara Online
Gunakan teknik tunneling untuk membagikan aplikasi Triton yang sedang berjalan di laptop lokal Anda ke internet agar bisa diakses oleh penguji jarak jauh.
Metode A: Ekspos Menggunakan Ngrok (Rekomendasi)
Ngrok adalah utilitas tunneling paling populer dan aman. Ikuti instruksi ini:
- Download dan daftarkan akun gratis di ngrok.com untuk mendapatkan auth token.
- Hubungkan komputer Anda dengan token ngrok di terminal:
ngrok config add-authtoken <your_auth_token>
- Jalankan demo aplikasi Triton Anda secara lokal di port 3000 (
make devdanmake frontend). - Buka tab terminal baru, lalu ekspos port web Next.js Anda (3000):
ngrok http 3000
- Salin alamat HTTPS acak yang dihasilkan oleh ngrok (contoh:
https://a1b2-103-120-10.ngrok-free.app) dan bagikan ke klien.
Metode B: Ekspos Menggunakan Localtunnel (Instan Tanpa Daftar)
Jika Anda ingin cara yang paling instan tanpa perlu mendaftar akun atau memasang token, gunakan **Localtunnel** berbasis Node.js package:
- Jalankan server demo Triton lokal Anda terlebih dahulu.
- Buka terminal baru, lalu jalankan perintah berikut secara langsung menggunakan NPM:
npx localtunnel --port 3000
- Localtunnel akan memberikan URL internet sementara secara gratis.
- Saat URL dibuka di browser luar, masukkan alamat IP eksternal komputer host Anda (ditunjukkan oleh terminal localtunnel) sebagai kunci pembuka keamanan awal.
Troubleshooting & Solusi Masalah Login (PENTING)
Jika saat mendemokan aplikasi web di Vercel Anda mengalami kendala login (misalnya muncul pesan "Email atau password salah" padahal kredensial benar, atau status error "Unauthorized"), berikut adalah penyebab dan cara mengatasinya secara instan:
1. Bypass Peringatan Interseptasi Ngrok
Gejala: Di Developer Console muncul error CORS
No 'Access-Control-Allow-Origin' header is present... dengan status 200 (OK)
tetapi request gagal.
Penyebab: Ngrok (akun gratis) mencegat request API pertama kali untuk menampilkan halaman konfirmasi biru (browser warning). Karena halaman warning ini bukan respon dari API kita, browser memblokirnya karena tidak memiliki header CORS.
Solusi: Buka tab baru di browser Anda (wajib di dalam jendela/sesi yang
sama, jika Anda menggunakan Incognito, buka di jendela Incognito tersebut), ketik URL HTTPS
Ngrok Anda (contoh: https://cloning-pry-punctual.ngrok-free.dev), lalu klik tombol
"Visit Site". Setelah itu, silakan kembali ke tab Triton dan coba login kembali.
2. Aktifkan Cookie Pihak Ketiga (Third-Party Cookies)
Gejala: Berhasil login tetapi tidak berpindah halaman, atau tetap mendapatkan status
Unauthorized di menu /auth/me.
Penyebab: Domain frontend di Vercel (contoh: atalaproject.com) dan domain
API di Ngrok (ngrok-free.dev) berbeda secara root. Browser menganggap cookie sesi backend
sebagai cookie pihak ketiga. Secara default, browser (terutama mode Incognito)
memblokir cookie pihak ketiga ini, sehingga sesi login Anda langsung dibuang setelah sukses login.
Solusi:
- Buka website Triton Anda, klik ikon gembok / mata di sebelah kanan kolom URL (address bar) browser Anda.
- Aktifkan sakelar "Third-party cookies" / "Allow third-party cookies".
- Atau, gunakan browser dalam mode biasa (non-Incognito) yang tidak memblokir cookie pihak ketiga secara ketat.
3. Hubungan API Gateway & Auth Service
Konfigurasi CORS pada API Gateway (services/api-gateway/src/index.ts) telah diperbarui agar
menerima request origin secara dinamis, dan auth-service telah dikonfigurasi dengan
app.set('trust proxy', 1) beserta cookie sameSite: 'none' dan
secure: true. Hal ini memastikan kedua layanan tersebut siap menangani domain Vercel baru
Anda secara otomatis tanpa perlu mengubah kode lagi.