Dari Paham KKA Fase C,
Sampai Punya Media Pembelajaran AI Sendiri 🤖✨
Sehari penuh, dari paham KKA Fase C dan jago mengajar unplugged tanpa lab komputer, lalu naik ke puncaknya: membuat & mempublikasikan media pembelajaran interaktif sendiri pakai Claude AI — siap dipakai mengajar besok.
🖥️ Lihat Slide PresentasiTanggal
1 Juli 2026
Waktu
07.00–15.00 WIB
Peserta
Guru SD (PGRI)
Alat Bantu
Laptop/HP + Claude AI & Tiiny.site
Paham Arahnya
Tahu persis apa itu KKA Fase C dan cara menyelaraskannya ke Capaian Pembelajaran Kelas 5–6.
Bisa Mengajar Tanpa Lab
Punya 2+ cara mengajar KKA unplugged yang siap dipakai besok, walau sekolah tidak punya komputer.
Bisa Bikin & Publish Media
Membuat media pembelajaran interaktif HTML pakai Claude AI, lalu publish online lewat Tiiny.site — hari itu juga.
🗓️ Rundown — 1 Juli 2026
07.00–08.30
SESI 1
🎉 Registrasi & Pembukaan
Registrasi peserta, sambutan, perkenalan narasumber, ice breaker ringan: "Tebak, AI atau Manusia?"
08.30–09.30
SESI 2
🧭 Reframing KKA & Fase C
KKA itu bukan soal komputer, tapi cara berpikir. Penyelarasan dengan Capaian Pembelajaran KKA Fase C kelas 5–6.
09.30–10.30
SESI 3
✋ Cara Mengajar KKA Unplugged
Praktik langsung: prinsip mengajar unplugged + 2 contoh aktivitas siap pakai dari modul kelas 5 & 6.
10.30–10.45
☕ Istirahat
Rehat sejenak.
10.45–12.00
SESI 4
🤖 Produksi Media via Claude AI
Bank Prompt siap pakai untuk men-generate media pembelajaran interaktif (HTML) secara instan, mengacu ke materi KKA kelas 5 & 6.
12.00–13.00
🍽️ Ishoma
Sholat & makan siang bersama.
13.00–14.00
SESI 5
🌐 Publikasi via Tiiny.site
Hosting media HTML semudah drag-and-drop — karya langsung online dengan link sendiri.
14.00–15.00
SESI 6
🏆 Showcase
Presentasi karya antar peserta — saling lihat dan apresiasi hasil media pembelajaran yang sudah dibuat & dipublikasi.
Reframing KKA & Fase C
08.30–09.30 · Meluruskan miskonsepsi, sebelum masuk ke teknis
😟 Mitos yang Sering Dipercaya
"KKA = pelajaran komputer" — jadi tidak bisa diajarkan tanpa lab
"Harus bisa coding" agar bisa mengajar KKA
"AI itu terlalu rumit dan berbahaya untuk anak SD
✅ Reframing yang Benar
KKA = cara berpikir (Berpikir Komputasional) — bisa dilatih dengan kertas & permainan
Guru cukup jadi fasilitator aktivitas, bukan ahli pemrograman
AI diperkenalkan lewat konsep & etika dulu, bukan lewat coding rumit
🎯 Penyelarasan dengan 4 Elemen CP KKA Fase C (Kelas 5–6 SD)
Berpikir Komputasional
Literasi Digital
Literasi & Etika KA
Pemanfaatan & Pengembangan KA
Cara Mengajar KKA Unplugged
09.30–10.30 · Bukan teori — langsung praktik dan rasakan sendiri sebagai siswa
Mulai dari Pengalaman
Anak SD belajar paling baik dengan melakukan, baru kemudian dijelaskan konsepnya.
Selalu Hubungkan ke AI/Komputer
Setiap aktivitas ditutup dengan: "nah, ini persis cara komputer/AI melakukannya".
Alat Sesederhana Mungkin
Kertas, kartu, kardus bekas, spidol — tidak butuh perangkat mahal sama sekali.
🧪 2 Contoh Aktivitas — Praktik Bersama (dari Modul Kelas 5 & 6)
Robot Manusia — Latihan Algoritma Bergerak
Berpasangan: satu jadi "Robot" (mata tertutup), satu jadi "Programmer" yang memberi instruksi presisi ("maju 2 langkah", "belok kiri") untuk membawa Robot mengambil benda tanpa menabrak rintangan.
🎯 Konsep: Algoritma, Debugging & Instruksi Presisi · 2 JP
Debat Seru: AI Lebih Pintar dari Manusia?
Kelas dibagi 2 tim berdebat: "AI lebih pintar dari manusia" vs "Manusia tetap lebih unggul". Tiap tim menyiapkan argumen & contoh, lalu berdebat bergiliran. Juri menilai kekuatan argumen dan kesantunan.
🎯 Konsep: Berpikir Kritis & Argumentasi · 2 JP
📦 Kedua contoh ini diambil dari modul lengkap berisi 22 materi siap pakai per kelas, mencakup unplugged, plugged, diskusi, hingga proyek pameran.
Produksi Media via Claude AI
10.45–12.00 · Dari prompt ke media HTML interaktif, instan
Peserta membuka Claude AI, salin salah satu prompt dari "Bank Prompt" di bawah, sesuaikan materi & identitasnya, lalu jalankan. Hasilnya langsung berupa halaman HTML interaktif siap pakai — tidak perlu coding.
✏️ Sebelum Mulai: Siapkan Identitas
👤 Identitas
Nama guru & nama sekolah
📁 Nama File
Jika menyebut nama file (foto/logo) di prompt, hindari spasi & karakter khusus — gunakan tanda hubung. cth: logo-sekolah.png, bukan "Logo Sekolah (1).png"
Media Materi & Kuis Terintegrasi
Topik: 4 Pilar Berpikir Komputasional.
Struktur Wajib: Terdiri dari 2 bagian utama yang bisa dinavigasi: 1) 'Ruang Belajar' berisi ringkasan materi bergambar/kartu informasi yang mudah dipahami anak SD (tamilkan detail materi dan contoh kontekstual ketika card di-klik, gunakan sistem show-hide element). 2) 'Tantangan Kuis' berisi 5 soal evaluasi pilihan ganda dari materi tersebut.
Fitur & UI/UX: Sistem skor *real-time*, efek animasi benar/salah, tombol 'Main Lagi'. Desain gamifikasi ramah anak (warna-warni, *rounded corners*), 100% responsif di HP. Penting: Jangan gunakan alert() browser, buat navigasi perpindahan halaman antar materi dan kuis secara dinamis (Single Page Application).
Simulasi Klasifikasi AI
Buat simulasi 'Latih Model AI-mu'. Alur: Siswa memasukkan 'Data Latih' dengan mengeklik tombol pemilah (misal: mengelompokkan ciri-ciri Apel vs Jeruk).
PENTING (Logika Utama): JavaScript harus *benar-benar* menghitung dan mencatat data klik dari pengguna. Jika siswa sengaja melatih AI dengan data yang salah/terbalik (misal: ciri jeruk diklik sebagai apel), maka hasil tebakan AI di akhir wajib ikut salah sesuai data latih tersebut. Tunjukkan prinsip fundamental AI yaitu 'Garbage In, Garbage Out'. Setelah input data selesai, beri animasi *progress bar* 'AI Belajar', lalu uji coba tebakannya. Berikan penjelasan singkat konsep *Machine Learning* dan UI futuristik ramah anak.
Game Drag-and-Drop Algoritma
Misi Pemain: Menyusun urutan langkah Algoritma yang teracak (dalam aplikasi ada 3 tema yang tampil secara acak ketika game dimulai: 'Langkah Robot Membuat Teh Manis', 'Algoritma Memasak Nasi', dan 'Urutan Langkah Memasak Mie') ke dalam kotak urutan yang benar (1 sampai 5(atau lebih)).
Spesifikasi Teknis: Interaksi *drag-and-drop* harus mulus dan wajib mendukung sentuhan di layar HP (*touch events*). Tambahkan validasi (Benar/Salah) di setiap langkah, dan munculkan efek konfeti (*confetti animation*) saat semua urutan tepat. Desain menggunakan tata letak *grid/flex* yang rapi seperti aplikasi *mobile* modern.
+ Tambahan: Prompt Personalisasi
Pilih 1 prompt dari Bank Prompt di atas, lalu tambahkan kalimat berikut di akhir prompt tersebut agar hasilnya terasa lebih profesional dan custom milik sekolahmu sendiri:
<img src="../logo-sekolah.png">. Di bagian footer, tuliskan 'Dikembangkan oleh: [Nama Bapak/Ibu]' beserta foto menggunakan tag <img src="../foto-guru.jpg">. Buat agar desainnya rapi dan profesional.Catatan Penting: Setelah file media HTML diunduh/disimpan, pastikan file gambar (logo dan foto) diletakkan di dalam satu folder yang persis sama dengan file HTML tersebut agar gambar bisa tampil di layar.
⚠️ AI Asisten, Guru Tetap Pengendali
Selalu review hasilnya sebelum dipakai di kelas — sesuaikan bahasa, contoh, dan tingkat kesulitan dengan kondisi siswa.
Publikasi via Tiiny.site
13.00–14.00 · Dari file di laptop, jadi link yang bisa dibuka siapa saja
Daftar Akun Dulu
Buat akun gratis di tiiny.site sebelum upload — supaya link web jadi permanen, tidak hilang/kedaluwarsa.
Unduh File HTML
Simpan hasil media dari Claude AI sebagai file .html di laptop/HP.
Drag & Drop ke Tiiny.site
Login, lalu seret file HTML ke kotak upload di dashboard akun.
Bagikan Link & QR Code
Tiiny.site otomatis bikin link publik + QR code, siap dibagikan ke siswa via WA.
⭐ Menjaga Link Tiiny.site Aktif
Link gratis dari Tiiny.site tanpa akun terdaftar bersifat sementara dan bisa hilang sewaktu-waktu. Dengan akun terdaftar, link tetap aktif selama akun rutin dipakai. Sesekali login kembali untuk memastikan media pembelajaran tetap online.
🐱 Alternatif Host Permanen: GitHub Pages
Fasilitas hosting gratis tanpa batas waktu, tanpa risiko situs terhapus karena akun inaktif. Cocok untuk jangka panjang.
⚠️ Syarat: disarankan bagi yang memiliki pengetahuan dasar pengelolaan repositori web dan Git/GitHub.
Showcase
14.00–15.00 · Tampilkan karya antar peserta, rayakan hasil kerja sehari ini
Tampilkan Karya
Tiap peserta tampilkan link media HTML yang sudah dipublikasi via Tiiny.site.
Presentasi Singkat
2 menit per peserta: materi apa, dibuat untuk kelas berapa, dan bagian favoritnya.
Voting Ringan
Pilih bersama: "Paling Kreatif" & "Paling Siap Pakai" — apresiasi sederhana untuk semua.
📦 Yang Didapat Peserta
Modul KKA Kelas 5 & 6
22 materi siap pakai per kelas, mayoritas unplugged
Bank Prompt Claude AI
Kumpulan prompt siap pakai untuk produksi media pembelajaran
Akses Tiiny.site
Panduan publikasi media HTML tanpa ribet
Sertifikat Kegiatan
Sertifikat resmi Workshop KKA PGRI dari penyelenggara
🔗 Referensi & Sumber Daya
materi-sd/kka-kelas-5.php
Modul KKA Kelas 5 SD — 22 materi satu tahun (internal)
materi-sd/kka-kelas-6.php
Modul KKA Kelas 6 SD — 22 materi satu tahun (internal)
claude.ai
Claude AI — asisten AI untuk produksi media pembelajaran interaktif
tiiny.site
Tiiny.site — hosting drag-and-drop untuk file HTML