Skip to content

README.md

Latest commit

 

History

History
351 lines (236 loc) · 9.73 KB

README.md

File metadata and controls

351 lines (236 loc) · 9.73 KB

🖥️ Simulasi Pemrograman Dasar

Aplikasi pembelajaran interaktif untuk memahami konsep dasar pemrograman Python

Dibuat dengan ❤️ untuk semua siswa & pemula yang ingin belajar pemrograman

License: MIT PRs Welcome Made with Preact Built with Vite Styled with Tailwind

Version Status

📸 Screenshots

🏠 Homepage

Homepage Landing page dengan navigasi utama dan header yang menarik

📦 Variables & Data Types

Variables Section Section untuk belajar variabel dan tipe data Python

Data Types Penjelasan tipe data Python dengan contoh interaktif

🎯 Control Structures

Control Structures Simulator untuk struktur kendali (if-else, loops)

⚙️ Functions

Functions Interactive function builder dan calculator

Function Builder Form builder untuk membuat fungsi Python

📱 Mobile Responsive

Mobile View Tampilan mobile yang responsive dan user-friendly

Mobile Variables Section variabel dalam tampilan mobile

📝 Note: Screenshots di-generate otomatis menggunakan Playwright. Untuk membuat screenshot terbaru, jalankan npm run demo setelah npm run dev.

🌟 Tentang Project

Simulasi Pemrograman Dasar adalah aplikasi web interaktif yang membantu siswa SMP memahami konsep dasar pemrograman Python dengan cara yang menyenangkan dan engaging.

💡 Kisah di Balik Project

Project ini bermula dari demo sederhana menggunakan Canva AI. Tujuan awalnya hanya untuk menunjukkan kepada anak-anak bagaimana AI dapat membuat halaman pembelajaran interaktif hanya dengan prompt.

Namun hasilnya melebihi ekspektasi! Prototype yang dihasilkan Canva AI ternyata sangat bagus dan memberikan inspirasi:

"Mengapa tidak membuat ini menjadi platform pembelajaran yang sesungguhnya?"

Dari situlah journey dimulai. Static HTML prototype (2,276 baris) dikonversi menjadi aplikasi Preact modern yang modular, composable, dan mudah di-maintain - dengan tetap mempertahankan 100% UI/UX yang intuitif dari prototype aslinya.

Visi kami: Membuat pembelajaran pemrograman accessible untuk semua orang, terutama siswa SMP/SMA yang belum punya background programming, tanpa learning curve yang curam.

Penggagas: @sandikodev

✨ Features

  • 📦 Variabel & Tipe Data - Belajar tentang variabel, integer, string, dan boolean
  • 🎯 Struktur Kendali - Pahami if-else dan perulangan (loop)
  • ⚙️ Fungsi - Membuat kode yang reusable dengan fungsi
  • 🎨 Interactive Simulators - Coba langsung konsep yang dipelajari
  • 📱 Responsive Design - Tampil sempurna di semua device

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build untuk production
npm run build

# Preview production build
npm run preview

Aplikasi akan berjalan di http://localhost:5173

📁 Struktur Proyek

src/
├── components/
│   ├── ui/              # Reusable UI components (Button, Accordion, etc)
│   ├── layout/          # Layout components (Header, Navigation, etc)
│   └── interactive/     # Interactive simulators
├── pages/
│   ├── LearningHome/    # Landing page
│   ├── Variables/       # Topik Variabel & Tipe Data
│   ├── ControlStructures/ # Topik Struktur Kendali
│   └── Functions/       # Topik Fungsi
└── index.jsx            # App entry & routing

🎨 Tech Stack

  • Preact - Fast 3kb React alternative
  • Vite - Next generation build tool
  • Tailwind CSS - Utility-first CSS framework
  • Preact ISO - Routing library

🚀 Deployment

Live Demo: https://itif-syuhada.github.io/pemrograman-dasar

Deploy ke GitHub Pages:

# Auto-deploy via GitHub Actions (setiap push ke main)
git push origin main

Troubleshooting deployment?

📚 Dokumentasi Lengkap

Lihat folder docs/ untuk dokumentasi lengkap:

🎯 Topik Pembelajaran

1. Variabel & Tipe Data

  • Apa itu variabel dan cara membuatnya
  • Tipe data: Integer, String, Boolean
  • Interactive: Variable Creator & Data Type Checker

2. Struktur Kendali

  • Kondisi (If-Else) dan operator perbandingan
  • Perulangan (For & While Loop)
  • Interactive: Condition & Loop Simulator

3. Fungsi

  • Membuat fungsi dengan parameter
  • Return value dan multiple parameters
  • Interactive: Function Calculator

📝 Prototypes (HTML Versions)

File prototype/index_versi*.html adalah prototype static HTML yang telah dikonversi menjadi aplikasi Preact yang lebih modular dan maintainable.

Versi yang dikonversi: index_versi38.html → src/pages/LearningV38/

🔧 Development

# Cek linter errors
npm run build

# Format code (jika ada prettier)
npm run format

🤝 Contributing

Kami sangat menyambut kontribusi dari siapa saja! 🎉

Cara Berkontribusi:

  1. Fork repository ini
  2. Buat branch baru (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'feat: Add some AmazingFeature')
  4. Push ke branch (git push origin feature/AmazingFeature)
  5. Buat Pull Request

Baca CONTRIBUTING.md untuk panduan lengkap.

Kontribusi yang Diterima:

  • 💡 Fitur baru (topik, simulator, quiz)
  • 🐛 Bug fixes
  • 📚 Dokumentasi
  • 🎨 UI/UX improvements
  • ⚡ Performance optimization
  • 🌍 Terjemahan

🗺️ Roadmap

Lihat ROADMAP.md untuk rencana pengembangan:

Version 1.1 (Q4 2025):

  • Dark mode
  • Progress tracking
  • Export code
  • Quiz system

Version 2.0 (Q1 2026):

  • Array/List topic
  • Dictionary topic
  • Achievement badges
  • Code challenges

Version 3.0 (Q2 2026):

  • Backend integration
  • User accounts
  • Mobile app (PWA)
  • Advanced topics

👥 Community

Get Involved:

  • ⭐ Star repository ini untuk show support
  • 🐛 Report bugs via Issues
  • 💡 Suggest features via Discussions
  • 🤝 Contribute code atau dokumentasi
  • 📢 Share ke teman atau kolega

For Educators:

Tertarik menggunakan untuk sekolah Anda?

  • Gratis & open source (MIT License)
  • Bisa di-customize sesuai kebutuhan
  • Self-hosting atau gunakan hosted version
  • Request fitur khusus via Issues

🏆 Contributors

Terima kasih kepada semua yang telah berkontribusi! 🙏

Ingin nama Anda di sini? Contribute now!

📊 Stats

  • 📦 7 Modular Components (from 1 monolithic file)
  • 🎯 18 Interactive Features
  • 📚 3 Main Topics (Variables, Control Structures, Functions)
  • 🎓 Digunakan oleh SMP IT Masjid Syuhada
  • ⭐ 100% UI/UX Identical dengan prototype asli

📄 License

Project ini menggunakan MIT License - lihat file LICENSE untuk detail.

TL;DR: Anda bebas menggunakan, memodifikasi, dan mendistribusikan project ini, termasuk untuk keperluan komersial.

🙏 Acknowledgments

  • SMP IT Masjid Syuhada - Inspirasi & testing ground
  • Preact Team - Amazing framework
  • Vite Team - Blazing fast build tool
  • Tailwind CSS - Beautiful styling
  • Contributors - Your contributions make this better!

📞 Contact & Support

🌟 Show Your Support

Jika project ini membantu Anda, berikan ⭐ di GitHub!

Share dengan:

  • Guru/pengajar programming
  • Siswa yang belajar Python
  • Sekolah yang butuh tool pembelajaran
  • Developer yang ingin contribute

Made with ❤️ for Indonesian Students

⭐ Star · 🐛 Report Bug · 💡 Request Feature · 🤝 Contribute

Last updated: October 7, 2025