Vibe Coding MPI & Publikasi ke GitHub Pages 🚀
Bimbingan teknis praktis bagi Guru SMP dalam merancang Media Pembelajaran Interaktif (MPI) berbasis web berbantuan Generative AI (Claude / Gemini) serta mempublikasikannya secara daring melalui GitHub Pages.
📍 Alur Pelaksanaan Workshop
Lima tahapan sistematis perancangan hingga publikasi media pembelajaran interaktif secara daring:
📁 Siapkan Folder Kerja
Siapkan bahan dan berkas aset pembelajaran sebelum berinteraksi dengan AI.
Buat satu folder kerja baru di komputer atau laptop Anda (misalnya di Desktop dengan nama materi Anda), lalu masukkan berkas-berkas berikut ke dalamnya:
Logo resmi instansi/sekolah Anda. Format dan nama berkas bebas (PNG, JPG, dll.).
Foto resmi Anda untuk kartu profil pengembang. Format dan nama berkas bebas.
Fleksibel & Otomatis: Nama berkas foto dan logo tidak wajib diubah menjadi logo.png atau foto-guru.jpg. Karena seluruh berkas gambar akan diunggah bersamaan ke chat AI, sistem AI akan secara otomatis mendeteksi nama berkas asli Anda dan menyelaraskannya ke dalam kode program MPI.
🤖 Buat MPI dengan AI
Lengkapi spesifikasi, unggah berkas ke AI, lalu unduh hasilnya.
Sesuaikan Dokumen spesifikasi.md
Buka berkas spesifikasi.md menggunakan Notepad, lalu sesuaikan data pada Bagian 1 berdasarkan mata pelajaran, topik materi, dan identitas Anda. Bagian 2, 3, dan 4 merupakan standar sistem dan tidak perlu diubah.
Pilih Platform AI: Claude (Rekomendasi Utama) atau Gemini
Untuk efisiensi kerja yang maksimal, Claude (Anthropic) sangat disarankan karena menyediakan panel interaktif (Artifacts) yang memungkinkan pratinjau langsung serta fitur unduh berkas .html utuh secara mandiri.
Pilihan Terbaik: Dilengkapi panel Artifacts di sebelah kanan dengan tombol unduh berkas HTML langsung. Menghasilkan kode visual, efek suara Web Audio API, dan simulasi sains interaktif secara utuh.
Alternatif Praktis: Cukup masuk dengan akun Google pribadi Anda. Kode hasil generasi disalin menggunakan tombol Copy code lalu disimpan melalui Notepad.
Unggah Berkas spesifikasi.md & Berkas Gambar ke AI
Lampirkan berkas spesifikasi bersama seluruh gambar dari folder kerja Anda secara langsung ke dalam sesi percakapan AI:
Keuntungan Melampirkan Gambar: Dengan melihat berkas visual Anda secara langsung, AI dapat menentukan skema warna yang harmonis dengan logo sekolah serta memastikan pemanggilan nama berkas di dalam kode HTML presisi secara otomatis.
Unduh Berkas HTML → Simpan ke Folder Kerja sebagai index.html
Gunakan alur pengunduhan langsung yang praktis dan terbebas dari kesalahan salin kode:
index.html.
index.html tersebut ke dalam folder kerja Anda (MPI_MataPelajaran_Materi) berdampingan dengan berkas gambar.
index.html ke folder kerja Anda.
index.html pada folder kerja Anda. Aplikasi MPI interaktif Anda akan langsung terbuka dan siap digunakan di browser! 🎉
🐙 Registrasi Akun GitHub
Platform penyimpanan berkas digital untuk mempublikasikan website media pembelajaran secara daring.
GitHub merupakan platform pengelolaan dan penyimpanan berkas digital yang dilengkapi layanan GitHub Pages. Melalui fitur ini, dokumen web MPI Anda dipublikasikan secara daring sehingga dapat diakses siswa maupun pendidik melalui tautan internet.
Lengkapi formulir pendaftaran akun:
- • Email: gunakan alamat email aktif Anda (misalnya akun Google pribadi)
- • Password: tentukan kata sandi yang aman dan mudah diingat
- • Username: nama pengguna ini akan menjadi bagian dari alamat website utama Anda!
Ketentuan Username: Wajib menggunakan huruf kecil seluruhnya tanpa spasi, serta hanya diperbolehkan menggunakan tanda hubung (-). Contoh: edysantoso atau pak-edy-smpn1.
Rekomendasi Username: Gunakan kombinasi nama pendidik atau identitas sekolah. Contoh: edysantoso, pak-fanani-smpn2
Struktur Domain Website Anda: Pada langkah berikutnya, kita akan membuat repositori bertipe User Site dengan format nama <username>.github.io. Melalui skema ini, alamat website MPI Anda akan aktif langsung pada root domain: https://username.github.io/ tanpa tambahan subfolder. Contoh apabila username Anda adalah edysantoso, maka alamat website resmi Anda adalah https://edysantoso.github.io/.
🌐 Buat Repositori <username>.github.io & Konfigurasi Pages
Inisialisasi repositori User Site di GitHub agar media pembelajaran aktif pada domain utama.
Berdasarkan dokumentasi resmi GitHub Pages, setiap pengguna berhak atas satu situs utama (User Site) dengan memberi nama repositori persis sesuai nama pengguna: <username>.github.io.
Lengkapi formulir pembuatan repositori:
- • Repository name: ketik persis
<username>.github.io - • Description: opsional, misalnya "Media Pembelajaran Interaktif IPA Sistem Pernapasan Manusia"
- • Visibility: pilih Public (wajib agar dapat diakses oleh siswa dan rekan guru)
- • Beri tanda centang pada "Add a README file"
Ketentuan Dokumentasi GitHub Pages: Nama repositori harus berupa huruf kecil semua dan identik dengan username akun Anda diikuti sufiks .github.io. Contoh apabila username Anda adalah edysantoso, maka repositori wajib bernama edysantoso.github.io.
Pengaturan Branch & Konfigurasi GitHub Pages:
- • Pada halaman repositori baru Anda, pilih tab Settings (ikon gerigi pada bilah navigasi atas)
- • Pada menu sebelah kiri (kategori Code and automation), klik Pages
- • Pada bagian Build and deployment → Source, pilih Deploy from a branch
- • Pada bagian Branch: pilih main (atau master) → Folder: pilih / (root)
- • Klik tombol Save
Layanan GitHub Pages telah aktif. Alamat website resmi Anda adalah: https://<username>.github.io/ (contoh: https://edysantoso.github.io/). Halaman akan segera menampilkan MPI Anda begitu berkas diunggah pada Langkah 5.
⬆️ Publikasikan Berkas MPI ke GitHub
Unggah seluruh berkas dari folder kerja agar media pembelajaran dapat diakses secara daring.
Unggah seluruh berkas dari folder kerja lokal Anda ke dalam repositori <username>.github.io yang telah disiapkan.
Seret dan lepaskan (drag & drop) seluruh berkas dari folder kerja Anda ke area upload, atau klik tautan "choose your files":
https://<username>.github.io/ (contoh: https://edysantoso.github.io/).
Karya media pembelajaran interaktif berbasis web buatan Anda kini telah aktif secara daring dan dapat diakses kapan saja oleh siswa, rekan pendidik, maupun masyarakat umum melalui tautan peramban.
Pembaruan Konten di Masa Mendatang: Apabila Anda ingin menyempurnakan materi atau menambah instrumen evaluasi baru, Anda cukup meminta revisi kode pada sesi chat AI, mengunduh berkas baru sebagai index.html, lalu mengunggahnya kembali ke repositori GitHub untuk memperbarui konten website secara otomatis.
💬 Referensi Prompt untuk Penyempurnaan Mandiri
Setelah berkas dasar MPI selesai, Anda dapat memberikan instruksi lanjutan pada sesi percakapan AI yang sama untuk melakukan penyesuaian khusus:
"Sesuaikan warna dominan aplikasi menjadi hijau toska dan kuning cerah yang harmonis."
"Tambahkan 3 butir soal pilihan ganda baru dengan fokus pada pemahaman konsep."
"Sertakan kotak penjelasan dan pembahasan edukatif saat siswa memilih jawaban yang salah."
"Perbarui rumusan tujuan pembelajaran nomor 2 menjadi: '...' "
Rekomendasi Pengembangan Mandiri
Setelah berhasil mempublikasikan karya perdana Anda, terdapat dua jalur eksplorasi strategis yang dapat Anda kembangkan secara mandiri:
Mengembangkan Website Mandiri melalui GitHub Pages
Melalui workshop ini, Anda telah menguasai alur kerja dasar pembuatan repositori dan publikasi web gratis menggunakan GitHub Pages. Keterampilan berharga ini dapat Anda manfaatkan secara berkelanjutan untuk membangun berbagai jenis media digital pendidikan:
Portofolio Digital Guru
Kembangkan repositori utama <username>.github.io menjadi situs portofolio resmi yang memuat profil pendidik, rekam jejak sertifikasi, karya publikasi ilmiah, hingga dokumentasi aksi nyata pembelajaran.
Pusat Modul & Bank Soal
Anda dapat membuat repositori baru di akun GitHub yang sama untuk topik atau mata pelajaran lain. Seluruh repositori tersebut dapat dipublikasikan sebagai modul ajar digital, lembar kerja siswa (LKPD interaktif), maupun simulasi sains tambahan.
Portal Informasi & Literasi
Rancang halaman pameran karya siswa, buletin literasi kelas, atau media informasi ekstrakurikuler yang dapat diakses wali murid dan masyarakat luas kapan saja tanpa biaya sewa server.
Pengembangan Lanjutan dengan Antigravity IDE
Jika Anda ingin mengembangkan aplikasi pembelajaran yang lebih kompleks tanpa bergantung pada proses unduh atau salin-tempel berkas melalui chat browser, beralihlah ke Antigravity IDE — lingkungan kerja pemrograman berbasis Agentic AI yang bekerja langsung di dalam komputer Anda.
AI Agent Mengedit Berkas Secara Langsung
Cukup berikan instruksi perbaikan (misalnya: "Tambahkan simulasi interaktif tekanan udara diafragma dan lengkapi dengan efek audio saat mengembang"), agen AI akan membuka berkas, menyusun kode, dan memperbarui index.html secara otomatis di laptop Anda.
Pratinjau Terintegrasi (Built-in Preview)
Dilengkapi browser bawaan tepat di samping editor kerja. Setiap modifikasi tata letak, fungsi tombol interaktif, maupun efek suara Web Audio API dapat langsung diuji seketika tanpa perlu berpindah jendela aplikasi.
Akses Penuh Folder & Aset Multimedia
Antigravity membaca seluruh direktori proyek secara mandiri. AI dapat mendeteksi resolusi gambar, tata letak logo, dan memastikan keterhubungan antar-berkas berjalan tanpa kendala tautan rusak.
Sinkronisasi Repositori GitHub Lebih Cepat
Pembaruan media pembelajaran dapat langsung diunggah ke repositori GitHub Pages Anda melalui integrasi Git terpadu, memudahkan pembaruan konten pembelajaran daring secara berkala.
- Buka aplikasi Antigravity IDE pada perangkat komputer Anda.
- Pilih menu File → Open Folder, lalu buka direktori proyek MPI Anda.
- Gunakan panel AI Agent untuk menyampaikan rencana pengembangan fitur atau penambahan materi baru.
- Amati agen AI menyusun perubahan secara otonom dan lakukan validasi langsung pada panel pratinjau terintegrasi.