Universitas ASA Indonesia

Program Studi: Teknologi Informasi
Mata Kuliah: Internet of Things
SKS: 4 (2 teori, 2 praktikum)
Dosen Pengampu: Istiqomah Sumadikarta, S.T., M.Kom.

Beranda Mundur Selesai

Pertemuan 14: Tugas Proyek IoT

1. Contoh Proyek Smart Home

Sebagai inspirasi, berikut contoh proyek smart home sederhana:

Monitoring Suhu dan Kelembaban: Menggunakan sensor DHT22 dan ESP32 untuk mengirim data ke dashboard web.
Kendali Lampu Teras, Taman, dan Jalan: Menggunakan ESP32 dan relay module untuk mengendalikan tiga lampu melalui interface berbasis HTML, CSS, dan JavaScript.

Rangkaian ESP32, DHT22, dan LED

Kode program sketch.ino

#include <WiFi.h>
#include <PubSubClient.h>
#include "DHTesp.h"

const char* ssid = "Wokwi-GUEST";
const char* password = "";
const char* mqtt_server = "test.mosquitto.org"; // broker MQTT publik

WiFiClient espClient;
PubSubClient client(espClient);
DHTesp dht;

const int DHT_PIN = 15;   // DHT22 data
const int lampuMerah = 5; // LED merah
const int lampuHijau = 25; // LED hijau
const int lampuBiru = 12;  // LED biru

unsigned long lastMsg = 0;

void callback(char* topic, byte* payload, unsigned int length) {
  payload[length] = '\0'; // null-terminate
  String message = String((char*)payload);

  Serial.print("Pesan diterima [");
  Serial.print(topic);
  Serial.print("]: ");
  Serial.println(message);

  if (message == "MERAH_ON") digitalWrite(lampuMerah, HIGH);
  else if (message == "MERAH_OFF") digitalWrite(lampuMerah, LOW);

  else if (message == "HIJAU_ON") digitalWrite(lampuHijau, HIGH);
  else if (message == "HIJAU_OFF") digitalWrite(lampuHijau, LOW);

  else if (message == "BIRU_ON") digitalWrite(lampuBiru, HIGH);
  else if (message == "BIRU_OFF") digitalWrite(lampuBiru, LOW);
}

void reconnect() {
  while (!client.connected()) {
    Serial.print("Mencoba koneksi MQTT...");
    if (client.connect("ESP32ClientWokwi")) {
      Serial.println("Terhubung!");
      client.subscribe("kamar/lampu");  // subscribe topik kontrol
    } else {
      Serial.print("gagal, rc=");
      Serial.print(client.state());
      Serial.println(" coba lagi dalam 5 detik");
      delay(5000);
    }
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(lampuMerah, OUTPUT);
  pinMode(lampuHijau, OUTPUT);
  pinMode(lampuBiru, OUTPUT);

  WiFi.begin(ssid, password);
  Serial.print("Menghubungkan WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" Terhubung ke WiFi");

  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);

  dht.setup(DHT_PIN, DHTesp::DHT22);
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  unsigned long now = millis();
  if (now - lastMsg > 5000) { // publish setiap 5 detik
    lastMsg = now;
    TempAndHumidity data = dht.getTempAndHumidity();

    if (isnan(data.temperature) || isnan(data.humidity)) {
      Serial.println("Gagal membaca sensor DHT22!");
      return;
    }

    String payload = "{\"suhu\": " + String(data.temperature, 1) +
                     ", \"kelembaban\": " + String(data.humidity, 1) + "}";
    Serial.print("Publish: ");
    Serial.println(payload);

    client.publish("kamar/sensor", payload.c_str());
  }
}

Contoh kode halaman kontrol (HTML, CSS, dan JavaScript):


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Dashboard IoT - Denah Rumah</title>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; background: #f0f4f7; text-align: center; }
    h1 { color: #333; }
    .sensor { margin: 20px; font-size: 1.2em; }

    .denah {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 200px 200px;
      gap: 10px;
      width: 420px;
      margin: 20px auto;
    }
    .ruang {
      border: 2px solid #444;
      border-radius: 10px;
      background: #fff;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .lampu {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      right: 10px;
      background: grey;
      opacity: 0.3;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    .merah.on { background: red; opacity: 1; box-shadow: 0 0 20px red; }
    .hijau.on { background: green; opacity: 1; box-shadow: 0 0 20px green; }
    .biru.on { background: blue; opacity: 1; box-shadow: 0 0 20px blue; }

    button { padding: 8px 15px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; }
    .onbtn { background: green; color: white; }
    .offbtn { background: red; color: white; }
  </style>
</head>
<body>
  <h1>Dashboard IoT - Monitoring & Denah Rumah</h1>

  <div class="sensor">
    <p>Suhu: <span id="suhu">-</span> °C</p>
    <p>Kelembaban: <span id="kelembaban">-</span> %</p>
  </div>

  <div class="denah">
    <div class="ruang" id="kamar">
      Kamar
      <div id="lampuKamar" class="lampu hijau"></div>
    </div>
    <div class="ruang" id="teras">
      Teras
      <div id="lampuTeras" class="lampu biru"></div>
    </div>
    <div class="ruang" id="jalan">
      Jalan
      <div id="lampuJalan" class="lampu merah"></div>
    </div>
    <div class="ruang">Halaman</div>
  </div>

  <div>
    <h3>Kontrol Lampu</h3>
    <button class="onbtn" onclick="send('HIJAU_ON')">Kamar ON</button>
    <button class="offbtn" onclick="send('HIJAU_OFF')">Kamar OFF</button>
    <button class="onbtn" onclick="send('BIRU_ON')">Teras ON</button>
    <button class="offbtn" onclick="send('BIRU_OFF')">Teras OFF</button>
    <button class="onbtn" onclick="send('MERAH_ON')">Jalan ON</button>
    <button class="offbtn" onclick="send('MERAH_OFF')">Jalan OFF</button>
  </div>

  <script>
    const client = mqtt.connect('wss://test.mosquitto.org:8081');

    client.on('connect', () => {
      console.log('✅ Terhubung ke broker MQTT');
      client.subscribe('kamar/sensor');
    });

    client.on('message', (topic, message) => {
      if (topic === 'kamar/sensor') {
        try {
          const data = JSON.parse(message.toString());
          document.getElementById('suhu').textContent = data.suhu;
          document.getElementById('kelembaban').textContent = data.kelembaban;
        } catch (e) {
          console.error('Data sensor tidak valid:', message.toString());
        }
      }
    });

    function send(cmd) {
      console.log('📤 Kirim:', cmd);
      client.publish('kamar/lampu', cmd);

      if (cmd === 'MERAH_ON') document.getElementById('lampuJalan').classList.add('on');
      if (cmd === 'MERAH_OFF') document.getElementById('lampuJalan').classList.remove('on');

      if (cmd === 'HIJAU_ON') document.getElementById('lampuKamar').classList.add('on');
      if (cmd === 'HIJAU_OFF') document.getElementById('lampuKamar').classList.remove('on');

      if (cmd === 'BIRU_ON') document.getElementById('lampuTeras').classList.add('on');
      if (cmd === 'BIRU_OFF') document.getElementById('lampuTeras').classList.remove('on');
    }
  </script>
</body>
</html>

Hasil running simulator dan halaman web

2. Panduan Capstone Project

Untuk tugas akhir mata kuliah ini, Anda diminta membuat Capstone Project IoT. Proyek ini harus mencakup aspek monitoring dan/atau kontrol, menggunakan ESP32 dan dashboard web atau aplikasi mobile.

Langkah-Langkah:

Tentukan tema proyek (misal: smart farming, smart home, smart parking, monitoring lingkungan).
Buat diagram rangkaian dan alur komunikasi data.
Tulis kode ESP32 sesuai kebutuhan (sensor, aktuator, komunikasi jaringan).
Buat antarmuka web atau mobile sederhana untuk menampilkan data dan kontrol.
Dokumentasikan hasil dengan laporan dan video demo.

Template Laporan Capstone Project IoT

Struktur Laporan

Halaman Judul
- Judul Proyek
- Nama dan NIM Anggota
- Kelas dan Program Studi
Kata Pengantar
Daftar Isi
Bab I: Pendahuluan
- Latar Belakang
- Rumusan Masalah
- Tujuan Proyek
- Manfaat Proyek
Bab II: Tinjauan Pustaka
- Konsep Dasar IoT
- Penelitian atau Proyek Sejenis
- Landasan Teori Sensor/Modul yang Digunakan
Bab III: Metodologi
- Desain Sistem (Diagram Blok, Flowchart)
- Perangkat Keras yang Digunakan
- Perangkat Lunak yang Digunakan
- Alur Kerja Implementasi
Bab IV: Implementasi dan Hasil
- Konfigurasi Hardware
- Kode Program (ESP32 dan Web/App)
- Tampilan Dashboard atau Aplikasi
- Hasil Pengujian
Bab V: Kesimpulan dan Saran
- Kesimpulan
- Saran untuk Pengembangan Selanjutnya
Daftar Pustaka
Lampiran
- Kode Program Lengkap
- Foto Proyek
- Diagram Rangkaian

Format Penulisan

Font: Times New Roman 12pt
Spasi: 1,5
Kertas: A4
Maksimal 25 halaman

3. Ketentuan Penilaian

Penilaian proyek berdasarkan beberapa aspek berikut:

Aspek	Bobot (%)
Kreativitas dan Inovasi	25%
Kesesuaian dengan Tema IoT	20%
Implementasi Teknis (hardware & software)	30%
Kualitas Dokumentasi	15%
Presentasi dan Demo	10%

Daftar Pustaka

Beranda Mundur Selesai