# 🚀 PANDUAN WORKSHOP: VIBE CODING MEDIA PEMBELAJARAN (MPI) TANPA INSTALL
### Modul Pelatihan KKA Guru SMP — Dinas Pendidikan 2026
**Narasumber / Fasilitator:** Ach. Chanifuddin Fanani, S.Pd.

---

## 💡 Apa itu "Vibe Coding" untuk Guru?

**Vibe Coding** adalah paradigma membuat media digital di mana guru **tidak perlu menulis kode sintaks pemrograman secara manual baris per baris**. Guru cukup bertindak sebagai *arsitek kurikulum* dan *pengarah kreatif*:
1. Guru mendefinisikan apa materi dan interaksi yang diinginkan menggunakan bahasa sehari-hari (**Natural Language Prompting**).
2. Kecerdasan Artifisial (AI) seperti **Claude**, **Gemini**, atau **ChatGPT** menuliskan 100% kode teknisnya.
3. Guru menguji coba media, lalu memberikan umpan balik santai (*"vibing"*) kepada AI untuk menyempurnakan hasil: *"Tolong kuisnya ditambah 2 soal"*, *"Ubah warnanya jadi hijau toska"*, atau *"Buatkan tombol suaranya lebih ceria"*.

---

## 🛠️ 3 Langkah Praktik Guru di Kelas (100% Tanpa Install)

Tidak perlu menginstal VS Code, Node.js, atau aplikasi rumit. Guru hanya membutuhkan **Peramban Web (Google Chrome / Microsoft Edge)** dan koneksi internet:

```
[Langkah 1: Salin Template]  -->  [Langkah 2: Tempel ke AI]  -->  [Langkah 3: Simpan & Buka]
Edit spesifikasi.md               Buka Claude / Gemini             Simpan index.html di Notepad
(Ganti Mapel & Nama)              Kirim prompt ke AI               Klik 2x langsung jalan!
```

### Langkah 1: Buka & Sunting `spesifikasi.md`
Guru membuka file template [`spesifikasi.md`](spesifikasi.md) lalu mengubah 6 baris identitas:
- Mata Pelajaran: *(misal: IPA)*
- Kelas / Fase: *(misal: Fase D - Kelas VII)*
- Materi Pokok: *(misal: Tata Surya & Planet)*
- Tujuan Singkat: *(misal: Mengenal urutan 8 planet)*
- Nama Guru & Gelar
- Nama Sekolah

### Langkah 2: Tempelkan ke Chatbot AI (Claude / Gemini)
1. Buka situs AI favorit:
   - **Claude AI:** `https://claude.ai` *(Sangat direkomendasikan karena fitur Artifacts-nya bisa langsung mempratinjau media di layar)*.
   - **Google Gemini:** `https://gemini.google.com`
   - **ChatGPT:** `https://chatgpt.com` *(Fitur Canvas)*.
2. Salin seluruh isi teks `spesifikasi.md`.
3. Tempel (*paste*) ke kotak pesan AI, lalu tekan **Enter**.
4. AI akan mulai memprogram seluruh aplikasi media pembelajaran dalam satu file kode `index.html`.

### Langkah 3: Menjalankan Hasil Media (Pilih Cara Termudah)

#### Cara A: Pratinjau Langsung di AI (Paling Instan)
- Di **Claude AI**: Kode otomatis muncul di panel kanan bernama **Artifacts**. Guru bisa langsung mengklik tombol interaktif dan mencoba kuisnya saat itu juga!
- Di **ChatGPT**: Kode muncul di panel **Canvas** dan dapat dipratinjau langsung.

#### Cara B: Simpan ke Komputer Guru (Bisa Dibawa Offline ke Kelas)
1. Klik tombol **"Copy Code"** di pesan balasan AI.
2. Buka aplikasi **Notepad** bawaan Windows (ketik `Notepad` di Start Menu).
3. Tekan `Ctrl + V` (Tempel kode).
4. Klik menu **File** → **Save As...**:
   - Pilih folder kerja guru (misal: di *Desktop* atau *Documents*).
   - Pada kolom *Save as type*, ubah menjadi **All Files (*.*)**.
   - Beri nama file: **`index.html`** *(pastikan akhiran `.html`, bukan `.txt`)*.
   - Klik **Save**.
5. Buka Windows Explorer, cari file `index.html` tersebut, lalu **klik ganda (double-click)**.
6. Media pembelajaran interaktif langsung terbuka di Google Chrome atau Microsoft Edge secara offline!

---

## 📁 Pengaturan Logo Sekolah & Foto Guru

Agar tampilan media terlihat resmi dan profesional untuk kelas maupun pameran:
1. Buat satu folder baru di laptop guru, misal: `Media_IPA_TataSurya`.
2. Letakkan file hasil koding tadi dengan nama `index.html` di dalam folder tersebut.
3. Masukkan dua berkas gambar ke dalam folder yang sama:
   - File logo sekolah dinamai: **`logo.png`**
   - File foto profil guru dinamai: **`foto-guru.jpg`**

```text
📁 Media_IPA_TataSurya/
├── index.html        ← Kode aplikasi web dari AI
├── logo.png          ← Logo sekolah / Tutwuri Kemendikdasmen
└── foto-guru.jpg     ← Foto resmi guru pengembang
```

> **Catatan Aman:**  
> Jika guru belum memiliki file logo atau foto, aplikasi **tidak akan rusak atau menampilkan gambar silang**. Template sudah dilengkapi fungsi proteksi otomatis yang akan menggantikan logo dengan lencana teks elegan dan foto dengan avatar guru ilustratif.

---

## 💬 Kumpulan "Vibe Prompt" (Trik Perbaikan Cepat)

Setelah kode pertama selesai dibuat, ajari guru untuk melakukan *iterasi santai* (inilah inti dari vibe coding). Guru cukup mengetik kalimat pendek berikut ke chat AI yang sama:

| Kebutuhan Perbaikan | Contoh Prompt yang Diketikkan Guru |
|---|---|
| **Ganti Nuansa Warna** | *"Tolong ubah warna dominan media ini menjadi hijau toska dan kuning cerah agar lebih segar untuk siswa."* |
| **Tambah Soal Kuis** | *"Kuisnya seru! Tolong tambahkan 3 soal pilihan ganda lagi tentang materi revolusi bumi."* |
| **Beri Pembahasan Soal** | *"Tolong tambahkan kotak penjelasan/pembahasan singkat saat siswa memilih jawaban yang salah pada kuis."* |
| **Tambah Simulasi** | *"Tolong di bagian aktivitas interaktif, buatkan simulasi geser (slider) untuk melihat jarak planet ke matahari."* |
| **Perbaiki Teks** | *"Tolong perbaiki tujuan pembelajaran nomor 2 menjadi: 'Menganalisis perbedaan planet dalam dan planet luar'."* |

---

## 🎯 Tips Fasilitator untuk Pak Fanani (Saran Pelaksanaan)

1. **Demo "Keajaiban 60 Detik" di Awal Sesi:**
   - Mulai presentasi bukan dengan teori koding yang panjang, melainkan langsung demonstrasi *live*: buka Claude, paste `spesifikasi.md` IPA, tunggu 45 detik, lalu buka dan mainkan hasilnya di proyektor. Momen *"Aha!"* ini akan langsung membakar antusiasme peserta.
2. **Ubah Mindset Guru dari "Programmer" menjadi "Sutradara":**
   - Jelaskan bahwa AI adalah asisten programmer lulusan terbaik yang siap bekerja lembur tanpa mengeluh. Guru adalah sutradara yang tahu materi dan pedagogi.
3. **Peringatan Token Truncation (Potongan Kode):**
   - Kadang pada model gratis, kode terpotong di tengah jalan. Ajari guru mantra sakti: ketik **"Lanjutkan kodenya dari baris terakhir"** (*"Continue writing the code"*).
4. **Keluaran yang Bisa Dipamerkan:**
   - Di akhir workshop, minta 2–3 perwakilan guru dari mapel berbeda (misal: Matematika, Bahasa Inggris, dan Seni Budaya) untuk menampilkan karya media interaktif buatan mereka ke layar utama.