Bloop

Aplikasi web frontend-only untuk membantu proses belajar Pemrograman Berorientasi Objek (OOP). Susun class diagram dengan drag-and-drop di canvas, dan kode Java/Python-nya langsung ter-generate secara live di panel sebelahnya.

Live demo: https://rendicahya.github.io/bloop/

Fitur

• Canvas class diagram (dibangun dengan Svelte Flow) — seret blok Class, Interface, Abstract Class, atau Enum dari palet ke canvas.
• Editor atribut & method langsung di block: visibility (+/-/#/~), tipe data, modifier static/final/abstract, serta parameter method.
• 6 jenis relasi UML: association, aggregation, composition, inheritance, realization, dan dependency — lengkap dengan multiplicity yang bisa diedit di ujung garis.
• Generate kode live ke Java dan Python (dengan type hints, ABC/@abstractmethod, constructor, getter/setter) setiap kali diagram diubah.
• Project: New, Open (load .json), Save (.json), Export Java (.java/.zip), Export Python (.py).
• Dark/light mode dan fullscreen toggle.
• Export diagram ke PNG.

Menjalankan secara lokal

npm install
npm run dev

Perintah lain yang tersedia:

npm run build    # build produksi ke folder dist/
npm run preview  # preview hasil build
npm run check    # type-check (svelte-check + tsc)

Deployment

Aplikasi ini 100% frontend (tidak ada backend), di-deploy ke GitHub Pages lewat GitHub Actions (.github/workflows/deploy.yml). Setiap push ke branch main akan otomatis build dan deploy ulang.

Stack

Svelte 5 (runes) · TypeScript · Vite · Tailwind CSS v4 · Svelte Flow · highlight.js · html-to-image · JSZip

Lisensi

MIT