Buku Panduan Kelas Raudhah

Ruang kelas 3D yang dibuka langsung di browser: siswa berjalan di kelas, duduk di meja mata pelajaran, membaca modul, mengerjakan latihan, dan mengumpulkan poin.

Mulai membaca

RAUDHAH = Ruang Edukasi dan Digital Madrasah. Raudhah berarti taman: belajar dibuat terasa seperti berada di taman yang menyenangkan, selaras dengan nilai Kurikulum Berbasis Cinta.

Bab 1Pendahuluan

Latar belakang

Bahan belajar digital sering tersebar di banyak tautan dan aplikasi, sulit dipantau guru, dan nilai tercecer. Kelas Raudhah menyatukannya: satu alamat web, satu akun, satu ruang kelas 3D.

Rumusan masalah

• Menyatukan materi, latihan, penilaian, dan pemantauan secara ringan dan gratis.
• Membuat belajar menarik bagi siswa SMP/MTs tanpa perangkat khusus.
• Menjaga kejujuran penilaian dan keamanan data siswa.

Tujuan

• Kelas virtual 3D di browser ponsel dan komputer.
• Lima mapel: Math, Science, Bahasa, Agama, Seni.
• Penilaian di server; kunci jawaban tidak pernah sampai ke browser.
• Alat guru: kelas, kode kelas, akun siswa, pemantauan, dan impor soal manual.

Manfaat

Siswa: umpan balik, poin, bintang. Guru: hemat waktu, progres per kelas. Madrasah: model berbiaya lisensi nol. Pengembang lain: arsitektur yang dapat ditiru.

Bab 2Gagasan dan Alur Konsep

Ada tujuh meja di kelas, tiap meja mewakili satu mapel. Aturan “selesaikan latihan sebelum pindah mapel” menjadi alami: siswa baru boleh berdiri dan berjalan ke meja lain setelah latihannya selesai.

Mapel	Kode	Meja	Warna
Math	MATH	m1, m3	merah muda
Science	SAINS	m4, m6	hijau tosca
Bahasa	BHS	m2	oranye
Agama	AGAMA	m5	hijau
Seni	SENI	m7	ungu

Alur siswa

1. Buka alamat aplikasi di browser.
2. Masuk dengan Google, atau daftar/masuk dengan email dan sandi memakai kode kelas dari guru.
3. Berjalan di kelas (geser layar, WASD, atau joystick) dan klik meja.
4. Duduk, baca modul, kerjakan 10 soal satu per satu.
5. Setiap jawaban dinilai di server; jawaban pertama menentukan poin.
6. Setelah 10 soal selesai, bebas pindah mapel. Aturan bawaan: 100 poin = 1 bintang.

Alur guru

1. Masuk dan buat kelas; sistem membuat kode kelas.
2. Bagikan kode, atau buatkan akun sandi siswa.
3. Buka menu paket soal, pilih mapel, lalu impor soal manual.
4. Hasil berstatus draf (tidak terlihat siswa): baca, sunting, Setujui atau Tolak.
5. Paket disetujui muncul di semua meja mapelnya; pantau progres kelas sendiri.

Pemilik

Ditentukan dari daftar email di pengaturan server, bukan isian pengguna. Dapat menambah guru, melihat semua kelas dan draf.

Prinsip rancangan

• Server yang berkuasa: penilaian, aturan pindah, hak akses.
• Kunci jawaban tidak dikirim ke siswa.
• Guru menyetujui setiap paket sebelum terlihat siswa.
• Minim data pribadi.
• Satu berkas halaman (index.html).

Bab 3Arsitektur dan Teknologi

Komponen	Peran	Layanan
Halaman klien	Kelas 3D, panel materi/soal, formulir masuk, panel guru	index.html (GitHub Pages)
Mesin 3D	Ruang, meja, kamera, klik	A-Frame 1.5.0
Server	Login, hak akses, penilaian, progres, draf	Code.gs (Apps Script)
Basis data	Pengguna, kelas, materi, soal, poin, log	Google Sheets
Login	Masuk dengan akun Google	Google Identity Services
Halaman hukum	Privasi dan ketentuan layanan	privasi.html, syarat.html

Alasan pemilihan

Gratis tanpa server sendiri; data dapat dibuka guru langsung di Sheets; A-Frame ringan untuk ponsel kelas menengah; pemasangan cukup satu berkas HTML.

Sepuluh tab Google Sheets

Pengaturan, Kelas, Pengguna, Mapel, Materi, Soal, Progres, Poin, Bintang, Log. Siswa dikenali lewat id_anon (kode acak berawalan U), sehingga tab Poin dan Progres tidak memuat identitas langsung.

Bab 4Proses Pembuatan Tahap demi Tahap

Tahap	Hasil	Versi
1–2	Ruang 3D, kamera, meja, klik dan duduk	–
3	Login Google dan sandi, peran, kelas, satu latihan dinilai di server	v0.7.x
4	Lima mapel, aturan pindah mapel, progres	v0.8.0
4.1	Soal dan pilihan diacak per siswa	v0.8.1
5.3	Impor manual, sunting, setujui, tolak, tarik; paket tepat 10 soal	v0.10.0–v0.10.1

Dua belas langkah dari nol

1. Siapkan akun GitHub, repositori publik, dan satu Google Sheets kosong.
2. Rancang peta kelas (tujuh meja, lima mapel, warna) di tab Mapel.
3. Bangun ruang 3D dengan A-Frame.
4. Bangun server di Apps Script; isi Script Properties; jalankan siapkanSheet.
5. Deploy sebagai Aplikasi Web; salin alamat /exec ke API_URL.
6. Tambahkan login: OAuth Client ID, asal JavaScript yang diizinkan.
7. Penilaian di server; soal dikirim tanpa kunci.
8. Aturan pindah mapel dan pengacakan di server.
9. Alat guru: kelas, kode, akun sandi, pemantauan.
10. Impor soal manual dan alur persetujuan.
11. Pasang halaman hukum.
12. Uji peran, pindah mapel, pengacakan, kuota, lalu uji beban.

Alur setiap perubahan

Ubah Code.gs dan index.html, naikkan VERSI di keduanya → tempel kode baru, simpan → Deploy > Kelola deployment > Versi baru → unggah index.html ke cabang main → cocokkan label versi (merah bila tidak cocok).

Bab 5Penjelasan Google Apps Script (Code.gs)

Code.gs adalah satu-satunya server. Semua permintaan masuk lewat doGet/doPost, diteruskan ke jalankan_.

Pintu masuk dan daftar putih aksi

• Aksi di luar tabel AKSI ditolak (TIDAK_DIKENAL).
• Aksi non-publik memeriksa token sesi (AUTH) dan peran (DILARANG).
• Fungsi internal berakhiran _ tidak dapat dipanggil dari luar.

Hak akses aksi

• Publik: ping, masukSandi, masukGoogle, daftarAkun.
• Siswa, guru, pemilik: saya, keluar, ambilMateri, jawab, progresSaya.
• Guru, pemilik: kelas, akun siswa, progresKelas, draf, impor, persetujuan.
• Pemilik saja: tambahGuru.

Konfigurasi utama

Konstanta	Nilai	Fungsi
SESI_DETIK	21600	sesi 6 jam
POIN_DEFAULT	10	poin jawaban pertama benar
CACHE_DASAR	120	cache data soal (detik)
JUMLAH_LATIHAN	10	soal per latihan
JUMLAH_IMPOR_MAKS / TEKS_IMPOR_MAKS	30 / 30000	batas impor

Autentikasi

• Sandi: SHA-256 berulang 300 putaran dengan garam acak; lima kegagalan mengunci akun 10 menit.
• Token Google diverifikasi ke Google: aud, email terverifikasi, belum kedaluwarsa.
• Daftar mandiri hanya menghasilkan peran siswa.
• Peran pemilik dibaca tiap permintaan dari PEMILIK_EMAIL; mencabut email langsung mencabut hak.

Penilaian dan pengacakan

Kunci hanya di server. Poin hanya dari jawaban pertama, dijaga lock agar tidak ganda. Urutan soal/pilihan dihitung dari id siswa + id soal: berbeda tiap siswa, tetap sama saat dimuat ulang.

Alur persetujuan

imporSoal_ mengurai teks soal menjadi draf; simpanDraf_ menyimpan suntingan; setujuiDraf_ mewajibkan tepat 10 soal lalu menampilkan paket di meja mapelnya; tolakDraf_ menolak; tarikDraf_ menarik paket dari siswa.

Script Properties

GOOGLE_CLIENT_ID (wajib), PEMILIK_EMAIL (wajib), SHEET_ID (opsional, hanya bila skrip tidak terikat langsung ke Sheets).

Bab 6GitHub Pages, Apps Script, Sheets, dan Login Google

Alur data

Browser membuka index.html dari GitHub Pages → login Google menghasilkan token → Apps Script memverifikasi token dan mencari/membuat pengguna di Sheets → server mengembalikan token sesi → modul dan soal dikirim tanpa kunci → jawaban dinilai dan ditulis ke Poin dan Progres. Token sesi disimpan di sessionStorage.

Penyiapan

1. GitHub Pages: repositori publik; Settings > Pages > branch main, folder root.
2. Sheets + Apps Script: tempel Code.gs, isi Script Properties, jalankan siapkanSheet (10 tab), cek dengan cekPemilik.
3. Deploy: Aplikasi Web, jalankan sebagai Saya, akses Siapa saja. Hak akses sebenarnya dijaga token sesi dan daftar putih.
4. Hubungkan: isi API_URL dan GOOGLE_CLIENT_ID di index.html.
5. Login Google: Google Cloud Console > OAuth consent > Client ID tipe Web; asal JavaScript = domain GitHub Pages. Client ID di halaman dan di server harus identik. Hanya meminta email dan nama.

Perbarui tanpa mengubah alamat

Gunakan “Versi baru” pada deployment yang ada. “Deployment baru” menghasilkan alamat baru dan menuntut API_URL diganti.

Daftar periksa pemasangan

• Repositori publik dan Pages aktif; siapkanSheet sukses.
• Client ID halaman = Script Properties; asal JavaScript benar.
• PEMILIK_EMAIL terisi; API_URL terbaru; VERSI sama.
• privasi.html dan syarat.html terbuka dan tertaut.

Bab 7Fitur Lengkap Aplikasi

Ruang 3D

Komputer: seret untuk melihat, W A S D/panah untuk berjalan, klik lantai berpindah, klik meja duduk. Ponsel: joystick kiri bawah, geser layar, ketuk meja. Tombol Berdiri dan ? (bantuan). Mode terang/gelap mengikuti perangkat.

Masuk dan akun

Jalur	Untuk
Masuk dengan Google (kode kelas sekali saja bagi siswa baru)	siswa, guru, pemilik
Daftar email + sandi + kode kelas	siswa
Masuk username/email + sandi	siswa dan guru yang dibuatkan akun
Akun dibuat guru dari panel guru	siswa

Peran dan wewenang

Peran	Dapat	Tidak dapat
Siswa	belajar, menjawab, melihat progres dan poin sendiri	melihat kunci, data siswa lain, draf
Guru	kelas, kode kelas, akun siswa, pemantauan, paket soal miliknya	melihat kelas guru lain, menambah guru
Pemilik	semua kemampuan guru + tambah guru + lihat semua kelas dan draf	–

Materi, penilaian, poin

• Tiap paket: Modul (bacaan) + Latihan (10 soal pilihan ganda) dengan level LOTS/MOTS/HOTS dan penjelasan.
• 10 poin per soal untuk jawaban pertama yang benar; mengulang tidak menambah poin.
• Guru/pemilik dapat mencoba soal tanpa poin.
• Konversi bintang di tab Pengaturan (poin_per_bintang).

Aturan pindah mapel dan pengacakan

Siswa yang sedang mengerjakan latihan ditolak membuka mapel lain sampai selesai (dapat diubah: aturan_pindah_mapel = bebas). Urutan soal dan pilihan berbeda per siswa; “semua jawaban di atas” tetap di akhir.

Impor soal manual

Guru menempel teks soal sendiri (maksimal 30 soal / 30.000 karakter). Hasil masuk sebagai draf dan diperiksa otomatis: soal tidak kembar, pilihan tepat empat, kunci valid.

Status paket

Status	Arti	Terlihat siswa
draf	baru diimpor	tidak
disetujui	guru menyetujui; tepat 10 soal	ya, di semua meja mapelnya
ditolak	guru menolak	tidak
ditarik	disetujui lalu ditarik kembali	tidak

Log audit dan halaman hukum

Tab Log mencatat waktu, pelaku (id anonim), aksi, dan detail (maks. 500 karakter, tanpa sandi/kunci). privasi.html dan syarat.html menjelaskan data, tujuan, lokasi penyimpanan, hak pengguna, dan aturan pakai.

Bab 8Panduan Penggunaan

1. Buka alamat aplikasi dari tautan atau kode QR dari guru; tunggu “Memuat kelas…”.
2. Pilih Masuk dengan Google, Daftar, atau Masuk.
3. Ketuk/klik meja mapel; baca modul sampai selesai.
4. Kerjakan 10 soal satu per satu: pilih jawaban, lihat hasil, lanjut.
5. Setelah selesai, tekan Berdiri dan berjalan ke meja lain.
6. Lihat poin dan progres di panel kiri atas; tekan Keluar di perangkat bersama.

Pesan	Tindakan
Akun belum terdaftar. Masukkan kode kelas	isi kode kelas dari guru
Kode kelas tidak ditemukan	periksa ketikan; minta kode ulang
Username atau sandi salah / Terlalu banyak percobaan	5 kali salah dikunci 10 menit
Sesi habis. Masuk lagi.	masuk kembali (sesi 6 jam)
Selesaikan dulu latihan [mapel]	selesaikan latihan yang berjalan
Server sedang sibuk	tunggu sebentar, ulangi
Label versi merah	muat ulang; lapor ke guru

Bab 9Keamanan, Privasi, dan Etika

Risiko	Pengendalian
Mengintip kunci jawaban	kunci tidak dikirim; penilaian di server
Memanggil fungsi internal	daftar putih aksi
Mengubah peran	peran dibaca server dari sheet dan PEMILIK_EMAIL
Tebak sandi	batas lima kegagalan, kunci 10 menit
Sandi bocor dari sheet	hanya hash bergaram, 300 putaran
Token Google palsu	verifikasi ke Google, cek aud, email, kedaluwarsa
Poin ganda	lock server; poin hanya jawaban pertama
Injeksi rumus Sheets	karakter awal =, +, @ dibuang; tag dibersihkan
Soal keliru sampai ke siswa	status draf + persetujuan guru + pemeriksa otomatis

Privasi data siswa

• Data minimal: identitas dasar dan aktivitas belajar; tidak meminta akses Gmail, Drive, atau kontak.
• Tidak dijual, tidak untuk iklan; guru hanya melihat kelasnya.
• Sheet memakai id anonim; sesi di sessionStorage.
• Permintaan lihat, perbaiki, hapus data diajukan ke pengelola.

Keterbatasan

• Masih prototipe; layanan dapat berubah atau dihentikan.
• Kuota Apps Script membatasi pengguna serentak; uji beban kelas penuh dijadwalkan.
• Daftar mandiri memakai email tidak terverifikasi, sehingga hanya menghasilkan peran siswa.
• Pencegahan menyontek berupa pengacakan, bukan pengawasan ujian.

Bab 10Pengujian dan Evaluasi

Skenario fungsional (15)

• Masuk Google dengan/tanpa kode kelas; sandi salah 5 kali.
• Jawab benar pertama (+10) dan ulang (tanpa poin).
• Pindah mapel saat latihan (PINDAH); aksi guru oleh siswa (DILARANG).
• Urutan soal berbeda antar siswa dan tetap sama saat dimuat ulang.
• Draf impor tersimpan dan tidak terlihat siswa; setujui bukan 10 soal ditolak.
• Draf guru lain ditolak; Tarik paket menghilangkannya dari siswa.

Kompatibilitas dan beban

Uji Android (Chrome), iPhone (Safari), laptop (Chrome/Edge), mode terang dan gelap. Rencana uji beban: 30 siswa serentak; ukur waktu respons, galat SIBUK, konsistensi poin.

Evaluasi pengguna (skala 1–5)

Aspek: tampilan, kemudahan, materi, motivasi, dan (guru) kemudahan menyiapkan paket serta kegunaan pemantauan. Hasil uji beban dan angket belum diisi pada buku ini.

Bab 11Kebaruan, Dampak, dan Keberlanjutan

Kebaruan

• Kelas 3D di browser tanpa instal, layanan gratis.
• Penilaian di server dengan kunci tersembunyi pada platform buatan guru.
• Pengacakan soal dan opsi per siswa yang konsisten.
• Pemeriksa otomatis dan persetujuan guru sebelum paket terlihat siswa.
• Ketuntasan diwujudkan sebagai gerakan di ruang.
• Privasi minimal dan transparan untuk siswa di bawah umur.

Dibanding aplikasi PiE (Kodular)

Aspek	PiE	Kelas Raudhah
Pemasangan	APK dibagikan	cukup tautan
Akun	satu akun per kelas	akun per siswa
Konten	tautan layanan luar	modul dan soal di dalam sistem
Penilaian	layanan luar	di server; poin dan progres tercatat
Pemantauan	tidak ada	progres per siswa dan kelas
Soal	manual	manual + persetujuan guru dan pemeriksa otomatis

Keberlanjutan

Biaya hosting dan basis data nol; satu pengelola; konfigurasi di Sheets dan Script Properties; replikasi dengan menyalin Sheets, Apps Script, repositori lalu mengganti API_URL dan Client ID; cadangan salinan Sheets berkala.

PustakaDaftar Pustaka

• A-Frame. (2023). A-Frame 1.5.0 documentation.
• Google. Google Apps Script; Google Identity Services.
• GitHub. GitHub Pages documentation.
• Kementerian Agama RI. Panduan Kurikulum Berbasis Cinta pada Madrasah.
• Hidayah, I. (2022). Buku Panduan Aplikasi Android Physics is Easy “PiE”. MAN 3 Kediri.
• Anderson, L. W., & Krathwohl, D. R. (2001). A Taxonomy for Learning, Teaching, and Assessing. Longman.

Catatan Penting

Jangan mengunggah dokumen berisi data pribadi ke tempat umum.