# ♻️ DwiCycle (Dwisma Recycle)
> **Bank Sampah Digital & Monitor Visualisasi 3D Real-time**

[![Standard](https://img.shields.io/badge/Status-Project--Competition-emerald?style=for-the-badge)](https://sispala.dwisma.id)
[![Tech Stack](https://img.shields.io/badge/Stack-Node.js_|_Express_|_Three.js-blue?style=for-the-badge)](https://github.com/muchamadfaruq/dwicycle)
[![Platform](https://img.shields.io/badge/Platform-PWA_|_Docker-white?style=for-the-badge)](https://github.com/muchamadfaruq/dwicycle)

**DwiCycle** adalah inovasi sistem manajemen limbah cerdas yang dirancang khusus untuk lingkungan sekolah. Dikembangkan sebagai kolaborasi antara **Sispala Dwisma** dan **SMA Negeri 2 Mengwi**, aplikasi ini mentransformasi pengumpulan botol plastik tradisional menjadi pengalaman digital yang transparan, interaktif, dan terukur secara teknis.

---

## 🚀 Fitur Unggulan (Core Features)

### 1. 🧊 Visualisasi Digital Twin 3D
Menggunakan library **Three.js**, DwiCycle menyajikan visualisasi real-time dari dua wadah fisik (Wadah A & B). Administrator dapat menyesuaikan level pengisian secara presisi, dan sistem akan secara dinamis merender tumpukan botol plastik di dalam wadah virtual.

### 2. 📊 Estimasi Kapasitas Pintar (Smart Estimation)
DwiCycle menghilangkan tebak-tebakan manual. Dengan algoritma perhitungan volume yang didasarkan pada riset fisik massa jenis botol plastik, sistem secara otomatis mengonversi persentase volume menjadi **Estimasi Jumlah Botol** dan **Total Berat (kg)**.

### 3. 📱 Progressive Web App (PWA)
Aplikasi ini mendukung instalasi di perangkat seluler (Android/iOS) dan Desktop tanpa melalui App Store. Memberikan akses cepat di lapangan (edge monitoring) dengan kemampuan caching untuk efisiensi data.

### 4. 📂 Pusat Manajemen Data (Admin Hub)
- **Manual precision**: Input data dengan pemilihan tanggal dan waktu manual untuk pencatatan riwayat yang akurat.
- **Persistence**: Fitur **Backup & Restore** database (format JSON) untuk mencegah kehilangan data riwayat.
- **Secure Access**: Dilindungi dengan autentikasi berbasis JWT (JSON Web Token).

### 5. 🎙️ Multimedia Terintegrasi
- **Narrative System**: Playlist audio penjelasan operasional untuk pengunjung/pengguna.
- **Document Viewer**: Penampil jadwal PDF terintegrasi.
- **Digital Branding**: Integrasi poster Canva dan tutorial YouTube dalam satu dasbor.

---

## 🛠️ Arsitektur Teknologi (Tech Stack)

### Frontend
- **Interface**: HTML5 & CSS3 (Modern Glassmorphism Design).
- **Engine Visual**: Three.js (WebGL) dengan CSS2DRenderer untuk label interaktif.
- **Logic**: Vanilla JavaScript ES6+.

### Backend
- **Server**: Node.js & Express.js.
- **Database**: MongoDB (NoSQL) dengan Mongoose ODM.
- **Security**: JWT Authentication & Bcrypt password hashing.

### DevOps
- **Containerization**: Docker & Docker Compose.
- **Deployment**: Mendukung deployment hybrid (Cloud/On-premise).

---

## 📐 Logika Estimasi (Rasio Campuran 50:50)

DwiCycle tidak hanya menebak, tapi menggunakan model matematika untuk menghitung jumlah botol. Karena di sekolah jenis botolnya beragam, kita menggunakan **Rasio Campuran 50:50** sebagai titik tengah yang paling adil.

### 💡 Analogi Sederhana
Bayangkan sebuah wadah besar. Jika wadah itu diisi penuh oleh botol besar saja (1.5L), jumlahnya sedikit tapi berat. Jika diisi botol kecil saja (600ml), jumlahnya banyak tapi ringan. DwiCycle mengambil **rata-rata** di antara keduanya agar data mendekati kenyataan di lapangan.

### 📊 Data Dasar (Per 1 m³)
| Ukuran Botol | Kapasitas (Jumlah) | Massa Jenis (Berat) | Karakteristik |
| :--- | :--- | :--- | :--- |
| **Botol Besar (1.5L)** | 300 botol | 12 kg | Memakan ruang besar |
| **Botol Kecil (600ml)** | 800 botol | 16 kg | Lebih padat & ringkas |

### 🧮 Cara Kami Menghitung
Sistem menggabungkan data di atas menggunakan rumus rata-rata sederhana:

1.  **Estimasi Jumlah**: $\frac{300 + 800}{2} = \mathbf{550 \text{ botol per m}^3}$
2.  **Estimasi Berat**: $\frac{12 + 16}{2} = \mathbf{14 \text{ kg per m}^3}$

*Catatan: Angka ini dikalikan dengan total volume wadah (6m³) dan persentase pengisian yang Anda atur di slider.*

---

## 🔌 Alur Sistem (System Flow)

```mermaid
graph TD
    A[Admin/User] -->|Input/View| B[PWA Frontend]
    B -->|Request| C[Express Server]
    C -->|Auth/Data| D[MongoDB]
    C -->|3D Logic| E[Three.js Visualizer]
    E -->|Update UI| B
    D -->|Persistence| F[JSON Backup]
```

---

## 🚀 Instalasi dan Penggunaan

### Prasyarat
- Docker & Docker Compose (Direkomendasikan)
- Node.js (Opsional, untuk pengembangan lokal)

### Langkah Cepat (Docker)
1. **Clone repositori dan masuk ke direktori proyek.**
2. **Jalankan aplikasi:**
   ```bash
   docker compose up -d --build
   ```
3. **Inisialisasi akun Admin:**
   ```bash
   docker compose exec app node init-admin.js
   ```
4. **Akses Dashboard:**
   Buka [http://localhost:3500](http://localhost:3500) (Default port pemetaan di docker-compose).

---

## 🌟 Dampak & Keberlanjutan (Sustainability)

DwiCycle dirancang dengan filosofi **"Digitalize to Sustain"**, membawa dampak positif yang terukur bagi ekosistem sekolah dan lingkungan:

1.  **Transformasi Digital & Literasi Teknologi**: 
    Mengonversi pencatatan manual yang rentan kesalahan menjadi sistem database digital yang terstruktur. Ini juga berfungsi sebagai sarana edukasi teknologi bagi siswa tentang implementasi *Internet of Things* (IoT) dan *Digital Twin* secara sederhana.
2.  **Optimalisasi Logistik & Efisiensi Karbon**: 
    Dengan data volume yang akurat, pengosongan wadah dapat direncanakan secara presisi. Ini mengurangi frekuensi transportasi yang tidak perlu, yang secara tidak langsung berkurang emisi karbon dari kendaraan pengangkut sampah.
3.  **Transparansi & Akuntabilitas Data**: 
    Fitur *Backup & Restore* dan Riwayat Pembaruan memastikan setiap gram botol plastik yang dikumpulkan tercatat dengan benar. Data ini dapat digunakan sebagai laporan resmi sekolah untuk mendukung akreditasi atau program **Adiwiyata**.
4.  **Dukungan Ekonomi Sirkular**: 
    DwiCycle memfasilitasi pemilahan sampah di sumbernya. Dengan data berat estimasi yang jelas, pihak sekolah dapat bekerja sama dengan bank sampah induk atau industri daur ulang secara lebih profesional berdasarkan metrik data yang valid.
5.  **Relevansi Kurikulum (P5)**: 
    Proyek ini selaras dengan **Projek Penguatan Profil Pelajar Pancasila (P5)** dalam tema Gaya Hidup Berkelanjutan, memberikan contoh nyata bagaimana teknologi dapat menyelesaikan masalah lingkungan di sekitar kita.
6.  **Skalabilitas & Adaptabilitas**: 
    Arsitektur aplikasi yang menggunakan Docker dan sistem modular (Container A & B) memungkinkan sistem ini untuk dikloning dan diterapkan pada unit sekolah lain atau bahkan di tingkat desa dengan penyesuaian parameter yang minimal.

---

## 👨‍💻 Kontributor & Kredit

- **Sispala Dwisma** - Inisiator Proyek & Riset Data.
- **SMA Negeri 2 Mengwi** - Institusi Penyelenggara.

---
*Dikembangkan dengan ❤️ untuk masa depan lingkungan yang lebih bersih.*