MATA KULIAH: CODING DAN COMPUTATIONAL THINKING
BERBASIS OUTCOME-BASED EDUCATION (OBE)
PROGRAM STUDI PENDIDIKAN GURU MADRASAH IBTIDAIYAH
STIT BUSTANUL ULUM LAMPUNG TENGAH
A. IDENTITAS MATA KULIAH
| Komponen | Deskripsi |
|---|---|
| Nama Mata Kuliah | Coding dan Computational Thinking |
| Kode Mata Kuliah | STITBU 2330 |
| Semester | 4 (Empat) |
| SKS | 3 SKS (1 Teori, 2 Praktik) |
| Program Studi | PGMI |
| Dosen Pengampu | Muhammad Abdun Jamil, M.Pd |
| Capaian Pembelajaran Lulusan (CPL) | 1. Mampu menunjukkan sikap bertanggungjawab atas pekerjaan secara mandiri (S9) 2. Mampu menerapkan pemikiran logis, kritis, sistematis, dan inovatif dalam konteks pengembangan atau implementasi ilmu pengetahuan dan teknologi (KU1) 3. Mampu mengaplikasikan konsep computational thinking dalam menyelesaikan masalah (P4) 4. Mampu membuat kode program sederhana untuk aplikasi web dan game menggunakan teknologi terkini (KK5) |
B. CAPAIAN PEMBELAJARAN MATA KULIAH (CPMK)
| Kode CPMK | Deskripsi Capaian Pembelajaran Mata Kuliah |
|---|---|
| CPMK 1 | Mahasiswa mampu menjelaskan konsep dasar coding, algoritma, dan computational thinking |
| CPMK 2 | Mahasiswa mampu menerapkan logika pemrograman dan computational thinking dalam menyelesaikan masalah sederhana |
| CPMK 3 | Mahasiswa mampu membuat halaman web statis (HTML, CSS) dengan memanfaatkan tools berbasis AI |
| CPMK 4 | Mahasiswa mampu memahami konsep hosting, domain, dan database serta mempraktikkan hosting gratis |
| CPMK 5 | Mahasiswa mampu mengintegrasikan aplikasi web sederhana dengan Firebase |
| CPMK 6 | Mahasiswa mampu membuat game edukasi interaktif berbasis web yang terintegrasi dengan database |
| CPMK 7 | Mahasiswa mampu membuat aplikasi web fungsional (pendaftaran siswa) dengan database real-time |
C. HUBUNGAN CPMK DENGAN CPL
| CPL | CPMK 1 | CPMK 2 | CPMK 3 | CPMK 4 | CPMK 5 | CPMK 6 | CPMK 7 |
|---|---|---|---|---|---|---|---|
| S9 (Mandiri) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| KU1 (Logis-Kritis) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| P4 (Comp. Thinking) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| KK5 (Membuat Program) | ✓ | ✓ | ✓ | ✓ | ✓ |
D. DESKRIPSI MATA KULIAH
Mata kuliah Coding dan Computational Thinking dirancang untuk membekali mahasiswa dengan kemampuan berpikir komputasional (computational thinking) dan keterampilan praktis dalam pemrograman web berbasis teknologi terkini, termasuk pemanfaatan AI sebagai tools pendukung pembelajaran. Mata kuliah ini mengintegrasikan konsep logika pemrograman, pengembangan web, database, dan pengembangan game edukasi sederhana. Pendekatan pembelajaran berbasis proyek (project-based learning) diterapkan untuk memastikan mahasiswa mampu menghasilkan produk nyata berupa website, game interaktif, dan aplikasi sederhana. Pada akhir perkuliahan, mahasiswa diharapkan mampu mengembangkan aplikasi web fungsional yang terintegrasi dengan database Firebase.
E. RENCANA PEMBELAJARAN SEMESTER (16 PERTEMUAN)
PERTEMUAN 1: KONTRAK KULIAH DAN PENGANTAR MATA KULIAH
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu memahami aturan perkuliahan, sistem penilaian, dan gambaran umum mata kuliah (CPMK 1) |
| Indikator | 1. Menjelaskan kontrak kuliah dan RPS 2. Menjelaskan gambaran umum materi selama 16 pertemuan 3. Memahami output yang diharapkan di akhir perkuliahan |
| Materi | 1. Perkenalan dosen dan mahasiswa 2. Kontrak kuliah (aturan, kehadiran, tugas, penilaian) 3. RPS dan sistem penilaian 4. Gambaran umum: apa itu coding, computational thinking, dan aplikasinya 5. Demo project akhir yang akan dibuat (game & aplikasi pendaftaran) |
| Metode | Ceramah interaktif, diskusi, tanya jawab |
| Media | LCD, PPT, RPS, laptop |
| Penilaian | Partisipasi kelas |
PERTEMUAN 2: PENGENALAN CODING DAN COMPUTATIONAL THINKING
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu menjelaskan definisi, fungsi, dan konsep dasar coding serta computational thinking (CPMK 1) |
| Indikator | 1. Menjelaskan definisi coding dan programming 2. Menjelaskan 4 pilar computational thinking (dekomposisi, pattern recognition, abstraksi, algoritma) 3. Memberikan contoh penerapan computational thinking dalam kehidupan sehari-hari |
| Materi | 1. Definisi coding, programming, dan bahasa pemrograman 2. Fungsi dan manfaat coding di berbagai bidang 3. Computational thinking: definisi dan sejarah 4. 4 pilar computational thinking: - Dekomposisi (memecah masalah) - Pattern recognition (mengenali pola) - Abstraksi (menyaring informasi penting) - Algoritma (menyusun langkah-langkah) 5. Studi kasus: menyelesaikan masalah sehari-hari dengan computational thinking |
| Metode | Ceramah, diskusi, studi kasus, kuis interaktif |
| Media | PPT, video ilustrasi, mentimeter untuk kuis |
| Penilaian | Partisipasi kelas, kuis sederhana |
Tugas : Membaca materi tentang Pengetahuan Dasar Coding dan Computational Thinking
PERTEMUAN 3: PENGANTAR PEMROGRAMAN WEB BERBASIS AI (UNTUK PEMULA)
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu memahami dasar-dasar pemrograman web dan memanfaatkan tools AI sebagai asisten coding (CPMK 1, CPMK 3) |
| Indikator | 1. Menjelaskan perbedaan HTML, CSS, dan JavaScript 2. Mengenal tools AI untuk membantu coding (ChatGPT, Copilot, dll) 3. Membuat struktur dasar HTML dengan bantuan AI |
| Materi | 1. Arsitektur web: frontend vs backend 2. Pengenalan HTML (tag, element, attribute) 3. Pengenalan CSS (styling dasar) 4. Pengenalan JavaScript (interaktivitas) 5. Tools AI untuk coding: - ChatGPT sebagai asisten coding - GitHub Copilot - Blackbox AI - Perintah (prompt) efektif untuk meminta bantuan AI 6. Praktik: membuat halaman HTML pertama dengan bantuan AI |
| Metode | Demonstrasi, praktik langsung, diskusi |
| Media | Laptop, VS Code, browser, ChatGPT |
| Penilaian | Hasil praktik |
Link Materi Pengantar Pemrograman Web Berbasis AI (Untuk Pemula)
Tugas Praktik: Membuat halaman HTML sederhana berisi profil diri menggunakan tag dasar (h1, p, img, dll) dengan bantuan aplikasi Notepad++.
PERTEMUAN 4: MEMBUAT CODING SEDERHANA – LOGIKA DASAR PEMROGRAMAN
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat kode sederhana dengan menerapkan logika pemrograman dasar (CPMK 2, CPMK 3) |
| Indikator | 1. Menjelaskan konsep variabel, tipe data, dan operator 2. Menjelaskan struktur kontrol (percabangan dan perulangan) 3. Membuat program sederhana dengan JavaScript |
| Materi | 1. Variabel dan tipe data (string, number, boolean) 2. Operator (aritmatika, perbandingan, logika) 3. Percabangan: if-else, switch 4. Perulangan: for, while 5. Fungsi sederhana 6. Praktik: membuat kalkulator sederhana, cek bilangan ganjil/genap, dll |
| Metode | Demonstrasi, praktik individu, debugging bersama |
| Media | VS Code, browser console, PPT |
| Penilaian | Hasil praktik |
Tugas Praktik: Membuat program aplikasi sederhana menggunakan template ini.
PERTEMUAN 5: MEMBUAT CODING CV SEDERHANA (HTML, CSS, DAN JAVASCRIPT)
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat CV digital interaktif menggunakan HTML, CSS, dan JavaScript (CPMK 3) |
| Indikator | 1. Mendesain layout CV dengan HTML dan CSS 2. Menambahkan interaktivitas sederhana dengan JavaScript 3. Menerapkan responsive design |
| Materi | 1. Struktur HTML untuk CV (header, section, footer) 2. Styling CSS: font, warna, layout (flexbox/grid) 3. Menambahkan efek hover dan animasi sederhana 4. JavaScript untuk interaktivitas: tombol show/hide, dark mode toggle 5. Responsive design dengan media query 6. Praktik: membuat CV online pribadi |
| Metode | Demonstrasi, praktik mandiri, peer review |
| Media | VS Code, browser, PPT |
| Penilaian | Hasil proyek CV (5%) |
Tugas 2 (Proyek Individu): Membuat CV online pribadi menggunakan template ini.
PERTEMUAN 6: PEMAHAMAN HOSTING, DOMAIN, DAN DATABASE
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu menjelaskan konsep hosting, domain, dan berbagai jenis database (CPMK 4) |
| Indikator | 1. Menjelaskan perbedaan domain, hosting, dan nameserver 2. Menjelaskan berbagai jenis database (MySQL, Firebase, MongoDB) 3. Membedakan database relasional dan non-relasional |
| Materi | 1. Apa itu hosting? (shared, VPS, dedicated, cloud) 2. Apa itu domain? (TLD, ccTLD, subdomain) 3. Cara kerja DNS 4. Database: definisi dan fungsi 5. Database relasional (MySQL, PostgreSQL) 6. Database non-relasional / NoSQL (Firebase, MongoDB) 7. Kapan menggunakan MySQL vs Firebase? 8. Demo: melihat struktur database sederhana |
| Metode | Ceramah, demonstrasi, diskusi |
| Media | PPT, video penjelasan, contoh tampilan cPanel |
| Penilaian | Partisipasi kelas, kuis |
Tugas 3 (Kelompok - Riset): Membuat tabel perbandingan 3 layanan hosting gratis (dengan kelebihan & kekurangan) dan 3 jenis database.
PERTEMUAN 7: MEMBUAT AKUN HOSTING GRATIS (BLOGSPOT)
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat dan mengelola blog gratis di Blogspot sebagai pengenalan hosting sederhana (CPMK 4) |
| Indikator | 1. Membuat akun Blogspot 2. Mengganti template dan mengatur tampilan 3. Mengupload konten dan memahami struktur URL |
| Materi | 1. Pengenalan Blogspot (Blogger) sebagai platform hosting gratis 2. Langkah-langkah membuat blog di Blogspot 3. Memilih dan mengedit template 4. Menulis dan mempublikasikan artikel 5. Mengatur domain kustom (opsional) 6. Memahami struktur URL blog 7. Praktik: membuat blog pribadi dan mempublikasikan CV online yang sudah dibuat |
| Metode | Demonstrasi, praktik langsung, pendampingan |
| Media | Laptop, internet, akun Google |
| Penilaian | Hasil blog (5%) |
Tugas Praktik: Mempublikasikan CV online yang dibuat di pertemuan 5 ke Blogspot. Kumpulkan link blog.
PERTEMUAN 8: UJIAN TENGAH SEMESTER (UTS)
| Komponen | Deskripsi |
|---|---|
| Bentuk Ujian | Praktik + Teori (70% praktik, 30% teori) |
| Materi Teori | Computational thinking, HTML, CSS, JavaScript dasar, hosting, domain, database |
| Materi Praktik | Membuat halaman web sederhana sesuai soal (misal: landing page produk) dalam waktu 90 menit |
| Durasi | 120 menit |
PERTEMUAN 9: PRAKTEK MEMBUAT AKUN FIREBASE DAN KONFIGURASI AWAL
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat dan mengkonfigurasi project Firebase (CPMK 5) |
| Indikator | 1. Membuat akun Firebase 2. Membuat project baru di Firebase Console 3. Mengkonfigurasi Realtime Database / Firestore 4. Menghubungkan Firebase dengan project web |
| Materi | 1. Pengenalan Firebase: fitur-fitur utama 2. Membuat akun Firebase (dengan akun Google) 3. Membuat project baru 4. Memahami Realtime Database vs Firestore 5. Mengatur aturan keamanan (rules) dasar 6. Menambahkan aplikasi web ke project Firebase 7. Copy-paste konfigurasi ke project HTML 8. Uji coba koneksi |
| Metode | Demonstrasi, praktik individu, troubleshooting bersama |
| Media | Laptop, internet, Firebase Console |
| Penilaian | Hasil konfigurasi |
Tugas Praktik: Membuat project Firebase dan menghubungkannya dengan halaman HTML sederhana. Screenshot hasil koneksi.
PERTEMUAN 10: MEMBUAT GAME SEDERHANA YANG SINCRON DENGAN FIREBASE
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat game sederhana yang menyimpan data skor ke Firebase (CPMK 5, CPMK 6) |
| Indikator | 1. Membuat game tebak angka sederhana dengan JavaScript 2. Menyimpan skor dan nama pemain ke Firebase 3. Menampilkan leaderboard dari database |
| Materi | 1. Review game tebak angka (pertemuan 4) 2. Menambahkan form input nama pemain 3. Menyimpan data (nama, skor, waktu) ke Firebase 4. Membaca data dari Firebase untuk ditampilkan sebagai leaderboard 5. Mengurutkan data berdasarkan skor tertinggi 6. Praktik: membuat game tebak angka dengan fitur leaderboard |
| Metode | Demonstrasi, praktik berpasangan, code review |
| Media | VS Code, Firebase Console, browser |
| Penilaian | Hasil game (5%) |
Tugas 4 (Proyek Individu): Game tebak angka dengan leaderboard Firebase. Minimal fitur: input nama, tebak angka, notifikasi benar/salah, tampil leaderboard.
PERTEMUAN 11: MEMBUAT GAME PEMBELAJARAN – MOBIL BALAP SEDERHANA
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat game mobil balap sederhana berbasis web (CPMK 6) |
| Indikator | 1. Membuat canvas HTML untuk game 2. Mengimplementasikan logika pergerakan mobil 3. Menambahkan sistem skor dan tabrakan |
| Materi | 1. Pengenalan elemen canvas HTML 2. Dasar-dasar animasi dengan requestAnimationFrame 3. Membuat objek mobil (persegi) dan jalan 4. Kontrol mobil dengan tombol keyboard 5. Menambahkan rintangan (mobil lain) 6. Deteksi tabrakan sederhana 7. Sistem skor berdasarkan waktu/jarak 8. Menyimpan high score ke Firebase |
| Metode | Demonstrasi, coding bersama, praktik mandiri |
| Media | VS Code, canvas, Firebase |
| Penilaian | Hasil game (5%) |
Tugas Praktik: Menyelesaikan game mobil balap minimal dengan fitur: mobil bisa bergerak, ada rintangan, skor bertambah, dan high score tersimpan.
PERTEMUAN 12: MEMBUAT GAME PEMBELAJARAN – TARIK TAMBANG (2 PLAYER)
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat game 2 player sederhana dengan logika kompetitif (CPMK 6) |
| Indikator | 1. Membuat game dengan dua pemain (bergantian) 2. Mengimplementasikan logika tarik tambang 3. Menentukan pemenang dan menyimpan riwayat |
| Materi | 1. Desain game tarik tambang: visual dan logika 2. Sistem giliran (turn-based) 3. Random generator untuk kekuatan tarikan 4. Visualisasi posisi tali/titik tengah 5. Menentukan pemenang (salah satu mencapai batas) 6. Menyimpan riwayat pertandingan ke Firebase 7. Menampilkan statistik pemain |
| Metode | Demonstrasi, praktik kelompok (pair programming) |
| Media | VS Code, Firebase, browser |
| Penilaian | Hasil game (5%) |
PERTEMUAN 13: MEMBUAT GAME PEMBELAJARAN – KUIS/ SOAL ONLINE
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat game kuis interaktif dengan soal yang tersimpan di database (CPMK 6) |
| Indikator | 1. Mendesain tampilan kuis (soal, pilihan jawaban) 2. Menyimpan soal dan jawaban di Firebase 3. Membuat sistem penilaian otomatis |
| Materi | 1. Struktur database untuk soal kuis 2. Menambahkan soal ke Firebase (manual via console) 3. Mengambil soal secara acak dari database 4. Menampilkan soal dan pilihan jawaban 5. Memeriksa jawaban dan memberikan skor 6. Menyimpan skor ke leaderboard 7. Fitur tambahan: timer, multiple category |
| Metode | Demonstrasi, praktik individu, diskusi |
| Media | VS Code, Firebase, browser |
| Penilaian | Hasil game (5%) |
Tugas 5 (Proyek Individu): Game kuis dengan minimal 10 soal, skor otomatis, dan leaderboard Firebase.
PERTEMUAN 14: MEMBUAT GAME PEMBELAJARAN – (DRAG AND DROP / PUZZLE)
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat game drag and drop sederhana (CPMK 6) |
| Indikator | 1. Mengimplementasikan event drag and drop di JavaScript 2. Membuat game mencocokkan gambar/kata 3. Menyimpan progres dan skor |
| Materi | 1. HTML5 drag and drop API 2. Event: dragstart, dragover, drop 3. Membuat game mencocokkan pasangan (misal: negara dan ibu kota) 4. Validasi jawaban benar/salah 5. Menyimpan skor dan level ke Firebase 6. Fitur multiple level |
| Metode | Demonstrasi, praktik, eksplorasi mandiri |
| Media | VS Code, Firebase, browser |
| Penilaian | Hasil game (5%) |
Alternatif: Jika drag and drop terlalu kompleks, bisa diganti dengan game memory match / flip card.
PERTEMUAN 15: MEMBUAT APLIKASI PENDAFTARAN SISWA BARU SEDERHANA
| Komponen | Deskripsi |
|---|---|
| Sub-CPMK | Mahasiswa mampu membuat aplikasi CRUD sederhana untuk pendaftaran siswa (CPMK 7) |
| Indikator | 1. Membuat form pendaftaran dengan validasi 2. Menyimpan data pendaftaran ke Firebase 3. Menampilkan data yang sudah masuk 4. Fitur edit dan hapus data |
| Materi | 1. Desain form pendaftaran (HTML, CSS) 2. Validasi input (JavaScript) 3. Operasi CRUD dengan Firebase: - Create: menambah data siswa - Read: menampilkan data siswa - Update: mengedit data - Delete: menghapus data 4. Menampilkan data dalam bentuk tabel 5. Fitur search/filter sederhana 6. Keamanan dasar (validasi server-side) |
| Metode | Demonstrasi, praktik mandiri, diskusi |
| Media | VS Code, Firebase, browser |
| Penilaian | Hasil aplikasi (10%) |
Tugas 6 (Proyek Akhir Individu): Aplikasi pendaftaran siswa baru dengan fitur CRUD lengkap dan hosting di Firebase Hosting atau Blogspot.
PERTEMUAN 16: UJIAN AKHIR SEMESTER (UAS) – PRESENTASI PROYEK
| Komponen | Deskripsi |
|---|---|
| Bentuk Ujian | Presentasi proyek akhir + demo aplikasi |
| Materi | Mahasiswa memilih salah satu: 1. Aplikasi pendaftaran siswa (dari pertemuan 15) yang dikembangkan lebih lanjut 2. Game pembelajaran (pilih salah satu dari pertemuan 10-14) dengan tambahan fitur |
| Kriteria Penilaian | 1. Fungsionalitas (40%) – apakah aplikasi berjalan sesuai 2. Desain UI/UX (20%) – tampilan menarik dan user-friendly 3. Integrasi Firebase (20%) – database berfungsi dengan baik 4. Inovasi (10%) – fitur tambahan di luar materi 5. Presentasi (10%) – kemampuan menjelaskan |
| Durasi | Presentasi 10 menit + tanya jawab 5 menit per mahasiswa |
F. PENILAIAN DAN RUBRIK
F.1. Komponen Penilaian
| No | Komponen | Bobot | Keterangan |
|---|---|---|---|
| 1 | Partisipasi dan Kehadiran | 10% | Minimal 80% kehadiran |
| 2 | Tugas-tugas Praktik (6 tugas) | 30% | Tugas 1-6 (masing-masing 5%) |
| 3 | Proyek-proyek Game (pert 10-14) | 20% | Rata-rata nilai game |
| 4 | Ujian Tengah Semester (UTS) | 15% | Praktik + Teori |
| 5 | Proyek Akhir (UAS) | 25% | Aplikasi + Presentasi |
| Total | 100% |
F.2. Rubrik Penilaian Proyek Akhir
| Aspek | Sangat Baik (85-100) | Baik (75-84) | Cukup (65-74) | Kurang (<65) |
|---|---|---|---|---|
| Fungsionalitas | Semua fitur berjalan sempurna, tidak ada bug | Fitur utama berjalan, bug minor | Beberapa fitur tidak berjalan | Mayoritas fitur tidak berjalan |
| Desain UI/UX | Desain sangat menarik, responsif, intuitif | Desain menarik, responsif | Desain sederhana, kurang responsif | Desain berantakan, tidak responsif |
| Integrasi Firebase | CRUD lengkap, real-time, aturan keamanan tepat | CRUD berjalan, real-time | CRUD sebagian berjalan | Tidak terintegrasi dengan Firebase |
| Inovasi | Ada fitur tambahan yang signifikan | Ada fitur tambahan sederhana | Sesuai materi tanpa tambahan | Kurang dari yang diminta |
| Presentasi | Penjelasan jelas, demo lancar, menjawab pertanyaan | Penjelasan baik, demo lancar | Penjelasan cukup, demo kurang lancar | Tidak siap presentasi |
G. DAFTAR PUSTAKA
A. Computational Thinking dan Dasar Pemrograman
Wing, J. M. (2006). "Computational thinking". Communications of the ACM, 49(3), 33-35.
Barr, V., & Stephenson, C. (2011). "Bringing computational thinking to K-12". ACM Inroads, 2(1), 48-54.
CSTA. (2011). *Operational Definition of Computational Thinking for K-12 Education*.
Haugeland, J. (2018). Computational Thinking: Apa dan Bagaimana Mengajarkannya. Jakarta: Gramedia.
B. HTML, CSS, JavaScript
Duckett, J. (2014). Web Design with HTML, CSS, JavaScript and jQuery Set. Wiley.
Haverbeke, M. (2018). Eloquent JavaScript: A Modern Introduction to Programming. No Starch Press.
Robbins, J. N. (2018). Learning Web Design: A Beginner's Guide. O'Reilly Media.
W3Schools. (2024). Online Web Tutorials. https://www.w3schools.com
MDN Web Docs. (2024). HTML, CSS, JavaScript Documentation. https://developer.mozilla.org
C. Firebase dan Database
Firebase. (2024). Firebase Documentation. https://firebase.google.com/docs
Moroney, L. (2017). The Definitive Guide to Firebase. Apress.
Kurniawan, A. (2023). Panduan Praktis Firebase untuk Pemula. Yogyakarta: Andi Offset.
Pratama, R. (2022). Integrasi Firebase dengan JavaScript. Bandung: Informatika.
D. Game Development untuk Pemula
Geary, D. (2012). Core HTML5 Canvas: Graphics, Animation, and Game Development. Prentice Hall.
Nugroho, A. (2023). Membuat Game Edukasi dengan JavaScript. Surabaya: ITS Press.
Spuy, R. (2019). Advanced Game Design with HTML5 and JavaScript. Apress.
E. Sumber Online dan Tools AI
ChatGPT. (2024). OpenAI. https://chat.openai.com
GitHub Copilot. (2024). GitHub. https://github.com/features/copilot
Blackbox AI. (2024). Code Generation Tools.
Stack Overflow. (2024). Community Q&A for Developers. https://stackoverflow.com
FreeCodeCamp. (2024). Interactive Learning Platform. https://www.freecodecamp.org
H. KONTRAK PERKULIAHAN
Kehadiran: Mahasiswa wajib hadir minimal 80% dari total pertemuan.
Keterlambatan: Toleransi keterlambatan 15 menit, setelah itu tidak diperkenankan masuk kecuali ada izin.
Tugas: Semua tugas dikumpulkan tepat waktu melalui platform yang ditentukan. Keterlambatan berdampak pada pengurangan nilai.
Peralatan: Setiap mahasiswa wajib membawa laptop sendiri ke setiap pertemuan praktik.
Software: Laptop harus sudah terinstall: VS Code, browser modern (Chrome/Firefox), dan koneksi internet.
Akun: Mahasiswa wajib memiliki akun Google (untuk Firebase dan Blogspot) dan akun GitHub (opsional).
Etika: Menjaga kejujuran akademik, tidak menyalin kode teman tanpa memahami.
Kolaborasi: Diskusi diperbolehkan, tetapi kode final harus hasil kerja sendiri.
Penilaian: Semua komponen penilaian bersifat transparan dan dapat didiskusikan.
Portofolio: Mahasiswa disarankan menyimpan semua proyek sebagai portofolio pribadi.
Mengetahui,
Ketua Program Studi
NIP.
Dosen Pengampu,
NIP.
LAMPIRAN: PANDUAN PROYEK AKHIR
Tema Proyek Akhir (Pilih Salah Satu):
Aplikasi Pendaftaran Siswa Baru (dikembangkan dari pertemuan 15)
Fitur wajib: Form pendaftaran, tampil data, edit, hapus, search
Fitur tambahan: Upload foto, export Excel/PDF, login admin
Game Edukasi Interaktif (dikembangkan dari pertemuan 10-14)
Fitur wajib: Gameplay jelas, skor, leaderboard Firebase
Fitur tambahan: Multiple level, timer, sound effect
Aplikasi Kombinasi (gabungan game dan administrasi)
Misal: Game kuis untuk siswa + admin panel untuk guru
Timeline Pengumpulan:
Minggu 14: Proposal proyek (1 halaman)
Minggu 15: Progress report (demo 50%)
Minggu 16: Presentasi final + pengumpulan kode
Format Pengumpulan:
Source code diupload ke GitHub (public)
Link aplikasi yang sudah dihosting (Firebase Hosting / Blogspot / Netlify)
Video demo (3-5 menit) diupload ke YouTube (unlisted)
Dokumentasi singkat (README)

Posted by 
.png)
Emoticon