MODUL 28 (SPESIALIS IOT): DASHBOARD IOT REAL-TIME
📌 META MODUL & PRASYARAT
- Bidang Spesialisasi: Frontend Data Visualization & Real-time Web Dashboard.
- Target Pembaca: Pembelajar yang sudah menguasai MySQL Schema (Modul 27).
- Learning Outcome:
- Mampu membangun antarmuka Dashboard IoT modern menggunakan HTML5, CSS Grid/Flexbox, dan Vanilla JS.
- Mampu membuat Grafik Tren Data Sensor Interaktif menggunakan Chart.js.
- Mengintegrasikan komponen Radial Gauge, Status Indicators, dan Toggle Switches.
- Menghubungkan Dashboard ke WebSockets / MQTT WebSocket Client untuk update animasi < 10ms.
- Estimasi Waktu Belajar: 120 Menit.
- Tingkat Kesulitan: 🟢 Pemula - Menengah (Level 28 / 40).
- Prasyarat: Modul 27 (MySQL Database Schema Design untuk Telemetri Sensor & Logs).
⚡ CHEAT SHEET INTEGRASI CHART.JS TELEMETRI REAL-TIME
<!DOCTYPE html>
<html>
<head>
<title>Deeptech Real-Time Sensor Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="background:#09090b; color:#fff; font-family:sans-serif; padding:20px;">
<h2>Monitoring Suhu ESP32 (Real-Time)</h2>
<div style="width: 600px; height: 300px; background:#18181b; padding:16px; border-radius:12px;">
<canvas id="tempChart"></canvas>
</div>
<script>
const ctx = document.getElementById('tempChart').getContext('2d');
const tempChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // Waktu (HH:mm:ss)
datasets: [{
label: 'Suhu (°C)',
data: [],
borderColor: '#38bdf8',
backgroundColor: 'rgba(56, 189, 248, 0.1)',
fill: true,
tension: 0.4
}]
},
options: { responsive: true, maintainAspectRatio: false }
});
// Fungsi memperbarui grafik saat data baru masuk dari WebSockets
function addDataPoint(timeStr, tempValue) {
tempChart.data.labels.push(timeStr);
tempChart.data.datasets[0].data.push(tempValue);
// Batasi maksimal 20 titik data di grafik
if (tempChart.data.labels.length > 20) {
tempChart.data.labels.shift();
tempChart.data.datasets[0].data.shift();
}
tempChart.update();
}
</script>
</body>
</html>Latihan & Quiz Evaluasi Modul
Progres Quiz: 0 / 2 Soal
SOAL #1
Library JavaScript visualisasi data manakah yang paling populer dan ringan digunakan untuk membuat grafik garis (*line chart*) tren sensor real-time di web?
SOAL #2
Metode manakah pada instans Chart.js yang dipanggil untuk memperbarui tampilan grafik setelah kita menambahkan data titik sensor baru ke array data?
Kunci Jawaban & Pembahasan
Kunci Jawaban: 1. b. Chart.js, 2. b. tempChart.update().
Apakah Anda siap lanjut ke Modul 29: Pemrograman Node-RED Flow & Visual Builder?
Apakah Anda siap lanjut ke Modul 29: Pemrograman Node-RED Flow & Visual Builder?