Membangun LMS Mini Interaktif
dengan AI, Firebase & GitHub Pages 🚀
Workshop ini dirancang khusus untuk guru Informatika. Kita akan membuat media pembelajaran kompleks berisi multi-halaman (Beranda, 2 Halaman Materi, dan Halaman Admin Pemantauan) buatan AI, menyimpan nilai evaluasi siswa ke database Firebase Spark Plan, dan mempublikasikannya secara permanen di GitHub Pages.
Tanggal
Oktober 2026
Waktu
08.00–15.00 WIB
Peserta
Guru Informatika
Tools
Claude, Firebase, GitHub
Website Multi-Halaman
Mampu mem-prompt Claude AI untuk membuat struktur LMS mini yang saling terhubung (Index, 2 Materi, Admin).
Integrasi Database
Mengonfigurasi Firebase Spark Plan (gratis) untuk menyimpan data skor hasil evaluasi kuis secara real-time.
Hosting Permanen
Deploy *source code* media ke GitHub Pages agar dapat diakses selamanya tanpa masa kedaluwarsa.
🗓️ Rundown Kegiatan
08.00–09.30
SESI 1
🔥 Persiapan & Setup Database Firebase
Menyiapkan folder lokal, foto profil, dan logo. Membuat project Firebase gratis untuk mendapatkan kode konfigurasi (backend).
09.30–09.45
☕ Coffee Break
Istirahat dan diskusi santai.
09.45–11.30
SESI 2
🏗️ Arsitektur Multi-Page & Prompting AI
Menyusun prompt super untuk Claude AI agar menghasilkan 4 file HTML yang saling terkait dan sudah otomatis terhubung dengan Firebase.
11.30–12.30
🍽️ Ishoma
Sholat & makan siang.
12.30–14.00
SESI 3
🐱 Deployment via GitHub Pages
Mempublikasikan keenam file (4 HTML + 2 Gambar) ke GitHub Pages agar live di internet dan bisa diakses siswa.
14.00–15.00
SESI 4
🏆 Showcase & Testing
Uji coba pengiriman nilai siswa ke database dan apresiasi karya sesama guru.
Persiapan & Integrasi Firebase
Menyiapkan aset dan "otak" penyimpan data sebelum memanggil AI
Tahap 1: Siapkan Folder & Gambar
Buat sebuah folder baru di komputer Bapak/Ibu (misal: lms-saya). Siapkan dua gambar dan masukkan ke dalam folder tersebut:
1. foto.jpg (Pas foto atau avatar Bapak/Ibu Guru).
2. logo.png (Logo sekolah atau logo MGMP).
Tahap 2: Buat Database Firebase
Firebase adalah layanan gratis dari Google untuk menyimpan data (seperti nilai ujian siswa) tanpa perlu kita menyewa server PHP/MySQL.
Login & Buat Project
Buka console.firebase.google.com dengan akun Gmail. Klik "Create a project". Beri nama (misal: lms-nilai). Menonaktifkan opsi Google Analytics sangat disarankan agar setup lebih cepat, namun sifatnya opsional.
Daftarkan Web (</>) & Copy Config
Di halaman project, klik ikon </> (Web), beri nama aplikasinya. Anda akan mendapatkan blok kode bernama firebaseConfig (berisi apiKey, dll). Copy blok kode ini ke Notepad, kita akan memberikannya ke AI pada langkah berikutnya.
Aktifkan Firestore Database
Di menu sebelah kiri, klik Build > Firestore Database. Klik tombol "Create database". Pilihlah lokasi server terdekat (misalnya asia-southeast2 di Jakarta atau asia-southeast1 di Singapura).
Atur Aturan Keamanan (Security Rules)
Saat ditanya mode keamanan database, pilih salah satu:
- Start in test mode: Langsung mengizinkan baca/tulis data, namun akan kedaluwarsa otomatis dalam 30 hari.
- Start in production mode: Lebih aman dan permanen, tetapi Anda harus memperbarui aturannya di tab Rules agar web diizinkan menulis data.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /nilai_lms/{document} {
allow read, write: if true;
}
}
}
Prompting LMS Multi-Page
Meminta AI merancang web 3 halaman yang sudah pintar
Kini kita sudah siap. Kita akan meminta Claude AI untuk membuat 4 file HTML yang saling bertautan (index, materi1, materi2, admin) sekaligus menyertakan kode database Firebase dan memanggil aset gambar yang telah kita siapkan di folder.
🌟 PROMPT MASTER UNTUK CLAUDE AI:
Gunakan Firebase SDK v10 (Firestore) untuk menyimpan data secara real-time. Berikut adalah config database saya:
[PASTE KODE FIREBASE CONFIG DI SINI]
Buatkan struktur file berikut:
1. index.html (Beranda & Profil Guru):
- Tampilkan logo menggunakan file
logo.png dan foto profil guru menggunakan file foto.jpg.- Deskripsi singkat kelas dan tombol navigasi utama yang menarik menuju Materi 1, Materi 2, dan Halaman Pemantauan Admin Guru.
2. materi1.html (Halaman Materi [Berpikir Komputasional]):
- Tujuan Pembelajaran.
- **Pre-Test:** Form (Nama dan Kelas) + 3-5 soal pilihan ganda sederhana. Skor pre-test langsung disimpan ke Firestore (collection:
nilai_lms) dengan field: nama, kelas, jenis ("Pre-Test"), materi ("Materi 1"), skor, dan timestamp.- **Konten Materi:** Penjelasan materi terstruktur menggunakan variasi media (teks menarik, visual card, akordion, placeholder video YouTube).
- **Post-Test / Evaluasi:** Form (Nama dan Kelas) + 5 soal pilihan ganda. Skor evaluasi disimpan ke Firestore (collection:
nilai_lms) dengan field: nama, kelas, jenis ("Evaluasi"), materi ("Materi 1"), skor, dan timestamp.3. materi2.html (Halaman Materi [Sistem Komputer]):
- Struktur dan fitur sama seperti materi1.html, tetapi dengan konten materi [Sistem Komputer].
- Nilai Pre-Test dan Evaluasi juga disimpan ke Firestore (collection:
nilai_lms) dengan field materi ("Materi 2").4. admin.html (Dashboard Pemantauan Guru):
- Dilindungi sandi sederhana (misal: "admin123") untuk masuk.
- Menampilkan tabel real-time dari Firestore (collection:
nilai_lms) yang memuat data nilai siswa: Nama, Kelas, Jenis Ujian (Pre-Test/Evaluasi), Nama Materi, Skor, dan Tanggal Pengerjaan.- Sediakan fitur pencarian nama siswa, filter berdasarkan Kelas, dan filter berdasarkan Materi.
Berikan kode keempat file tersebut secara terpisah dan lengkap!
Simpan File Anda
Kopi (*copy*) jawaban kode dari Claude, dan simpan ke dalam Notepad menjadi 4 file berbeda (index.html, materi1.html, materi2.html, dan admin.html). Simpan 4 file HTML ini ke dalam folder yang sama dengan letak foto.jpg dan logo.png tadi.
Deployment ke GitHub Pages
Mempublikasikan LMS Mini secara permanen dan gratis
Apa itu GitHub Pages?
GitHub adalah platform tempat para *programmer* di seluruh dunia menyimpan dan berkolaborasi dalam menulis kode. GitHub Pages adalah fiturnya yang akan menyulap keenam file dalam folder kita menjadi sebuah website utuh yang 100% gratis selamanya!
Langkah Publikasi (*Deployment*):
Buat Akun & Repository
Buka github.com dan buat akun (Sign Up). Catatan Penting: Saat membuat username, gunakan huruf kecil semua (lowercase) dan jangan gunakan karakter spesial untuk menghindari error pada link website nantinya. Setelah masuk, klik tombol hijau "New". Beri nama *repository* Anda (contoh: lms-jaringan), pastikan Public, lalu klik Create.
Upload Folder Proyek (*Drag and Drop*)
Di halaman *repository* baru Anda yang masih kosong, klik tulisan kecil berwarna biru "uploading an existing file". Anda akan melihat area unggah besar. Buka folder proyek Anda di komputer, seret (*drag*) semua 6 file tersebut (4 HTML dan 2 Gambar) ke area tadi. Tunggu hingga proses unggah selesai, lalu klik tombol hijau Commit changes.
Aktifkan GitHub Pages
Setelah keenam file berhasil tersimpan, klik menu Settings (ikon gir ⚙️). Di panel menu sebelah kiri, cari dan klik Pages. Di bagian *Branch*, ubah kotak yang bertuliskan None menjadi main (atau master), biarkan foldernya tetap / (root), lalu klik tombol Save.
Website Anda Online (Go Live!)
Tunggu sekitar 1–2 menit, kemudian *refresh* halaman pengaturan Pages tersebut. Anda akan melihat notifikasi hijau bahwa website Anda telah aktif di URL seperti: https://[username_anda].github.io/lms-jaringan/. Website sudah bisa diuji coba dan nilainya akan otomatis terkirim ke Firebase Anda!