Project Roadmap

Alur rencana kerja dari fondasi sampai ekspansi lanjutan. Gaya tampilan terinspirasi struktur roadmap hierarkis (seperti roadmap.sh) dengan status real-time.

→ Control Panel ← Tim

DoneProgressPlanned

Drag untuk pan • Scroll untuk zoom • 100%

Tahapan Utama (Graph)

Fondasi Sistem

Inisialisasi proyek, struktur Next.js, koneksi MQTT dasar, & kontrol relay dasar.

Q1done

Setup Next.js + TypeScript

Struktur app dir, konfigurasi font, Tailwind.

done

Koneksi MQTT WebSocket

Client mqtt.js & subscribe status perangkat.

done

Mapping Relay 4CH

Topik perintah & status tiap channel distandarkan.

done

UI Control Panel V1

Device card ON/OFF & indikator status.

done

Peningkatan Stabilitas

Optimasi UX, penanganan reconnect, dokumentasi wiring rapi.

Q2in progress

Strategi Reconnect

Log status koneksi & fallback UI.

in-progress

Dokumentasi Wiring

Panel diagram + label channel.

planned

Global Status Badge

Indikator koneksi MQTT di header.

planned

Optimasi & AI

Prediksi pola penggunaan & rekomendasi hemat energi.

Q4planned

Deteksi Pola Penggunaan

Analisis historis ON/OFF.

planned

AI Rekomendasi

Saran otomatis hemat energi.

planned

Deteksi Anomali

Notifikasi bila perilaku abnormal.

planned

Layout bergaya graf (simplified) meniru style roadmap topik, mengelompokkan fase utama dan subtugas.

Alur Kerja Sistem (Flow)

Flow Graph • Drag / Scroll • 100%

1. Buka Dashboard

Browser memuat Next.js & inisialisasi klien MQTT.

2. Koneksi Broker

Handshake WebSocket → sesi siap.

3. Subscribe Status

smarthome/+/status untuk semua perangkat.

4. Render Status

State global diperbarui & UI sinkron.

5. Kirim Perintah

UI publish ON/OFF: smarthome/<id>/perintah.

6. Firmware Eksekusi

ESP32 aktifkan relay & publish status baru.

7. Loop Realtime

Siklus berulang menjaga konsistensi.

Keterangan Status

Done

Fitur / tugas telah selesai dan stabil.

In Progress

Sedang aktif dikerjakan / diuji.

Planned

Masuk daftar rencana berikutnya.