Fase 5 · Minggu 16

Polish, Testing & Presentasi

Finalisasi proyek — error handling, UI polish, dokumentasi, dan demo akhir.

Error Handling & Robustness

Skenario error yang harus di-handle:

SkenarioPenyebabSolusi
WiFi disconnectESP32 terlalu jauhAuto-reconnect + fallback ke BLE
MQTT broker downLaptop mati / broker crashRetry + switch ke WebSocket lokal
BLE disconnectHP keluar range BLEReconnect attempt + UI feedback
JSON parse errorData korup / partialtry-catch + skip invalid data
Sensor read failKabel lepas / sensor rusakReturn NaN + tampilkan warning
TimeoutKoneksi lambatTimeout 5 detik + retry
Dart — Robust Connection Wrapperclass RobustConnection {
  final ConnectionManager _manager;
  int _retryCount = 0;
  static const int maxRetries = 3;

  RobustConnection(this._manager);

  /// Send dengan retry
  Future<bool> sendSafe(Map<String, dynamic> data) async {
    for (int i = 0; i < maxRetries; i++) {
      try {
        if (!_manager.isConnected) {
          await _manager.autoConnect();
        }
        _manager.send(data);
        _retryCount = 0;
        return true;
      } catch (e) {
        _retryCount++;
        print('Send failed (attempt ${i + 1}): $e');
        await Future.delayed(
          Duration(seconds: (i + 1) * 2)); // exponential backoff
      }
    }
    return false;
  }

  /// Listen data dengan auto-reconnect
  void listenSafe({
    required Function(Map<String, dynamic>) onData,
    required Function(String) onError,
  }) {
    _manager.dataStream?.listen(
      (data) {
        try {
          onData(data);
          _retryCount = 0;
        } catch (e) {
          onError('Parse error: $e');
        }
      },
      onError: (e) {
        onError('Stream error: $e');
        // Coba reconnect
        Future.delayed(
          const Duration(seconds: 3),
          () => _manager.autoConnect(),
        );
      },
      onDone: () {
        onError('Connection closed');
        Future.delayed(
          const Duration(seconds: 3),
          () => _manager.autoConnect(),
        );
      },
    );
  }
}

UI Polish Checklist

Dashboard 🌡️ 25°C Suhu 💧 65% Humidity 💡 LED 🔌 Relay 🏠 📊 ⚙️ UI Polish Checklist ✅ Loading states Spinner saat connecting, skeleton saat loading data ✅ Empty states "Belum ada data" dengan ilustrasi, bukan halaman kosong ✅ Error states Pesan error jelas + tombol retry ✅ Animations LED glow effect, smooth toggle, chart transition ✅ Connection badge Always show: tipe koneksi aktif + status (hijau/merah)

Final app mockup + UI polish checklist lengkap

Testing Scenarios

Manual Testing Checklist

#Test CaseExpected ResultPass?
1Buka app tanpa koneksi ESP32Tampilkan pesan "tidak terhubung" + retry button
2Connect via WiFi (WebSocket)Badge hijau "WiFi ✓", data sensor muncul
3Toggle LED via appLED fisik ESP32 hidup/mati
4Tutup WiFi di HP saat connectedBadge merah, coba reconnect otomatis
5Connect via Bluetooth BLEBadge "BLE ✓", data sensor streaming
6Switch dari WiFi ke BLESeamless, data tetap mengalir
7Connect via MQTTBadge "MQTT ✓", pub/sub bekerja
8Lihat history pageChart menampilkan data tersimpan
9Matikan ESP32, nyalakan lagiApp auto-reconnect setelah beberapa detik
10Test dengan 2 HP terhubungKedua HP menerima data, sinkron

Dokumentasi Proyek

README.md Template

Markdown# Smart Environment Monitor 🌡️📱

## Deskripsi
Sistem IoT untuk monitoring suhu, kelembaban, dan cahaya
menggunakan ESP32 + Flutter. Mendukung multiple koneksi:
USB Serial, Bluetooth BLE, WiFi WebSocket, dan MQTT.

## Hardware
- ESP32 DevKit V1
- DHT11 (suhu + kelembaban) → Pin 15
- LDR + 10K resistor (cahaya) → Pin 34
- LED → Pin 2
- Relay module → Pin 4

## Wiring Diagram
(Sertakan foto atau diagram dari Minggu 10)

## Software stack
- **ESP32**: Arduino IDE, PlatformIO
- **Mobile**: Flutter 3.x + Dart
- **Packages**: http, web_socket_channel, flutter_blue_plus,
  mqtt_client, provider, fl_chart, hive
- **Broker**: Mosquitto (lokal)

## Cara Menjalankan
1. Flash firmware ke ESP32 via Arduino IDE
2. Jalankan Mosquitto broker di laptop
3. `flutter run` di folder Flutter project
4. Connect HP ke WiFi "ESP32_SmartEnv"
5. Buka app → auto-detect koneksi

## Screenshots
(Screenshot dari HP — dashboard, controls, history, settings)

## Fitur
- [x] Multi-connection: USB, BLE, WiFi, MQTT
- [x] Auto-switch koneksi
- [x] Real-time sensor dashboard
- [x] LED & relay control
- [x] Data history + chart
- [x] Error handling + auto-reconnect

## Lisensi
MIT

Persiapan Demo

1 Setup Nyalakan ESP32 Start Mosquitto Buka app Flutter 2 WiFi Demo Connect via WiFi Show real-time data Toggle LED 3 BLE Demo Matikan WiFi Auto-switch ke BLE Tunjukkan seamless 4 MQTT Demo Connect ke MQTT 2 HP subscribe Kontrol dari kedua HP 5 Wrap Up Show history chart Jelaskan arsitektur Q&A 2 min 3 min 3 min 3 min 4 min

Demo flow: ~15 menit — Setup → WiFi → BLE switch → MQTT → Wrap Up

Rekap Perjalanan Belajar 🎉

FaseMingguTopikSkill yang Didapat
Fase 1
Foundation
1Setup EnvironmentFlutter + Arduino IDE + ESP32 board
2Dart & Flutter UIWidgets, StatefulWidget, setState
3ESP32 GPIODigital/Analog I/O, Serial Monitor
Fase 2
USB Serial
4Serial ProtocolJSON, ArduinoJson, dart:convert
5USB OTGusb_serial, AndroidManifest, LED kontrol
6Sensor Dashboardfl_chart, real-time chart, multi-sensor
Fase 3
Bluetooth
7BT ClassicSPP, pairing, BluetoothSerial
8Flutter BT Appflutter_bluetooth_serial, scan + connect
9BLE (GATT)Services, Characteristics, Notify
10Smart Home BLEMulti-sensor, error handling, reconnect
Fase 4
WiFi/IoT
11Web Server & APESPAsyncWebServer, REST API
12Flutter HTTPhttp package, polling, JSON API
13WebSocketReal-time bidirectional, auto-reconnect
14MQTTPub/Sub, Broker, PubSubClient, mqtt_client
Fase 5
Project
15Hybrid SystemMulti-protocol, ConnectionManager, Provider
16Polish & DemoError handling, testing, documentation
🎓 Selamat! Kamu telah menyelesaikan learning path Embedded Systems IoT — dari LED blink pertama hingga multi-protocol IoT system. Kamu sekarang bisa membangun sistem IoT menggunakan ESP32 dan Flutter dengan koneksi USB, Bluetooth, WiFi, dan MQTT!

Final Checklist