Al Ilmu (Berbagi Ilmu Opo Wae)

LAPORAN PRAKTIKUM MINGGU KE-4: Sistem Monitoring Suhu dan Kelembaban

Disusun Oleh:

Risqi Prasdika	24051204008
Rahmat Ari Setyarto	24051204010
Carmelio Sivandra A.	24051204116
Rifqi Syawal	24051204198

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi Internet of Things (IoT) memungkinkan pemantauan variabel lingkungan seperti suhu, kelembapan, dan status sakelar secara real-time melalui antarmuka web. Mikrokontroler ESP32 memiliki modul Wi-Fi terintegrasi yang mampu bertindak sebagai Access Point maupun Station sekaligus menjalankan layanan Web Server .

Dalam alur pengembangan perangkat lunak IoT, penggunaan simulator seperti Wokwi sangat membantu efisiensi prototyping. Namun, untuk mengakses Web Server ESP32 secara lokal dari browser komputer tanpa biaya subscription (Wokwi Club) maupun dependensi cloud proxy , diperlukan metode kompilasi mandiri menggunakan Arduino CLI serta integrasi jaringan menggunakan Wokwi IoT Gateway lokal di lingkungan Visual Studio Code (VS Code).

1.2 Rumusan Masalah

Bagaimana cara mengonfigurasi dan mengompilasi proyek ESP32 dari nol menggunakan Arduino CLI di Windows?
Bagaimana cara mengintegrasikan Wokwi Simulator di VS Code dengan Wokwi IoT Gateway lokal agar Web Server ESP32 dapat diakses melalui http://localhost:9080/ ?
Bagaimana cara menampilkan data suhu, kelembapan, dan status pushbutton secara otomatis ( real-time AJAX ) pada antarmuka web dan LCD 16x2 I2C?

1.3 Tujuan Laporan

Menyediakan panduan langkah demi langkah setup lingkungan kerja (VS Code, Arduino CLI, Wokwi IoT Gateway) dari nol di sistem operasi Windows.
Mengimplementasikan sistem pemantauan suhu/kelembapan DHT22, pembacaan pushbutton, dan layar LCD 16x2 I2C berbasis ESP32.
Menjelaskan mekanisme routing jaringan Wokwi Private Gateway serta interaksi pembaruan data asinkron via endpoint /data (JSON).

1.4 Manfaat Penulisan

Dapat dijadikan acuan teknis bagi mahasiswa dan praktisi IoT dalam membangun simulasi sistem embedded lokal, hemat biaya, dan terkompilasi mandiri tanpa bergantung pada IDE grafis konvensional maupun layanan berbayar.

BAB II

TINJAUAN PUSTAKA

2.1 Dasar Teori

ESP32 & Web Server: ESP32 mendukung pustaka <WebServer.h> yang memungkinkan penanganan permintaan HTTP GET/POST. Halaman web interaktif dapat disajikan menggunakan dokumen HTML/JS yang disimpan dalam memori kilat (Flash Memory/PROGMEM).
Komunikasi Asinkron (AJAX / Fetch API): Pembaruan data sensor dilakukan tanpa memuat ulang (reload) seluruh halaman web. JavaScript di sisi browser melakukan polling secara periodik ke endpoint /data yang mengembalikan format JSON.
Arduino CLI & Wokwi IoT Gateway: Arduino CLI adalah antarmuka baris perintah (Command Line Interface) untuk mengelola board, pustaka, dan proses kompilasi kode C/C++. Wokwi IoT Gateway bertindak sebagai jembatan jaringan virtual socket (VSOCK/TCP) yang meneruskan port lokal (9080) ke antarmuka Wi-Fi simulasi ESP32 (10.13.37.2:80).

2.2 Daftar Komponen & Software

Komponen / Software	Spesifikasi / Pinout	Fungsi dalam Sistem
ESP32 DevKit v4	5v, cmd, d3, d2, 13, gnd.1, 12, 14, 27, 26, 25, 33, 32, 35, 34, vn, vp, en, 3v3, clk, d0, d1, 15, 2, 0, 4, 16, 17, 5, 18, 19, gnd.3, 21, rx, tx, 22, 23, gnd.2	Mikrokontroler utama & HTTP Web Server
Sensor DHT22	VCC, SDA, NC, GND	Mengukur suhu (°C) dan kelembapan (%)
LCD 16x2 I2C	GND, VCC, SDA, SCL	Menampilkan status koneksi & data sensor
Pushbutton	1.l/1.r (first contact left/right) 2.l/2.r (second contact left/right)	Input digital indikator status biner (ON/OFF)
Arduino CLI	Windows x64 CLI Tool	Mengompilasi kode program menjadi file .bin & .elf
Wokwi IoT Gateway	wokwigw.exe (Port 9011 & 9080)	Meneruskan traffic jaringan lokal ke simulator
VS Code + Wokwi Ext	Extension Simulator	Visualisasi dan eksekusi logika perangkat keras

BAB III

PEMBAHASAN & LANGKAH WORKFLOW

3.1 Panduan Langkah Setup Lengkap dari 0 di Windows

Langkah 1: Instalasi & Konfigurasi Arduino CLI

Unduh executable Arduino CLI untuk Windows (zip) dari situs resmi Arduino.
Ekstrak file arduino-cli.exe dan masukkan lokasinya ke Environment Variables (Path) Windows, atau letakkan langsung di folder kerja proyek Anda.
Buka Terminal/PowerShell di VS Code, lalu inisialisasi konfigurasi awal:

arduino-cli config init

Tambahkan URL index Board Manager Espressif ESP32:

arduino-cli config set board_manager.additional_urls https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

Perbarui index dan install core ESP32:

arduino-cli core update-index
arduino-cli core install esp32:esp32

Install pustaka ( libraries ) pendukung yang diperlukan proyek:

arduino-cli lib install "LiquidCrystal_I2C"
arduino-cli lib install "DHT sensor library"
arduino-cli lib install "Adafruit Unified Sensor"

Langkah 2: Setup Wokwi IoT Gateway

Unduh release Wokwi IoT Gateway ( wokwigw-windows-x64.zip ) dari GitHub resmi Wokwi ( [github.com/wokwi/wokwigw/releases](https://github.com/wokwi/wokwigw/releases) ).
Ekstrak file wokwigw.exe ke dalam folder proyek utama Anda.
Jalankan wokwigw.exe melalui terminal/PowerShell. Pastikan gateway mendengarkan ( listening ) pada Port 9011 dan meneruskan port :9080 -> 10.13.37.2:80 . Biarkan terminal ini tetap terbuka.

Langkah 3: Konfigurasi File Proyek VS Code

Buat folder bernama build di direktori proyek. Struktur folder proyek harus tampak seperti berikut:

project/
├── build/                 <-- Direktori output biner hasil kompilasi
│   └── esp32.esp32.esp32/
├── diagram.json           <-- Skematik komponen & perkabelan Wokwi
├── libraries.txt          <-- Daftar dependensi library Wokwi
├── project.ino            <-- Source code utama Arduino/ESP32
├── wokwi.toml             <-- Konfigurasi pengenal biner & jaringan gateway
└── wokwigw.exe            <-- Executable gateway jaringan lokal

Buat file wokwi.toml dan isi dengan konfigurasi berikut:

[wokwi]
version = 1
firmware = "build/project.ino.bin"
elf = "build/project.ino.elf"
gdbServerPort = 3333
[net]
enabled = true
gateway = "http://127.0.0.1:9011"

Langkah 4: Kompilasi & Eksekusi Simulasi

Jalankan perintah kompilasi menggunakan Arduino CLI untuk menghasilkan file firmware .bin dan .elf :

arduino-cli compile --fqbn esp32:esp32:esp32 --output-dir ./build

Buka Command Palette VS Code ( Ctrl + Shift + P ), ketik dan jalankan Wokwi: Start Simulator .
Periksa tampilan LCD di simulasi. LCD akan menampilkan IP Private Gateway: 10.13.37.2 .
Buka browser web di PC/Laptop Anda dan akses alamat:

http://localhost:9080/

3.2 Penjelasan Simulasi & Troubleshooting Analisis

Perkabelan Pushbutton ( diagram.json ): Pengkonfigurasian sakelar pada Wokwi membutuhkan koneksi silang antara sakelar Sisi 1 ( 1.L ) dan Sisi 2 ( 2.R ). Pin esp:4 dihubungkan ke btn:1.L dan esp:GND.3 dihubungkan ke btn:2.R . Mode pin diatur ke INPUT_PULLUP ( Active LOW ).
Interaksi Pushbutton: Untuk mempertahankan status DITEKAN (ON) pada antarmuka web, tombol pada canvas Wokwi diinteraksi dengan menahan tombol Shift + Klik Kiri (mode latching lock).
Pembaruan Nilai Sensor DHT22: Nilai default sensor pada Wokwi adalah 24.0 °C dan 40.0 %. Nilai ini dapat diubah secara interaktif dengan mengeklik modul DHT22 di Wokwi dan menggeser slider Temperature / Humidity . JavaScript di web browser secara otomatis mengambil data terbaru setiap 2 detik via Fetch API ( /data ).

3.3 Kode Sumber Lengkap ( Source Code )

File 1: project/diagram.json

{
  "version": 1,
  "author": "Kelompok 8",
  "editor": "wokwi",
  "parts": [
    { "type": "board-esp32-devkit-c-v4", "id": "esp", "top": 0, "left": 0, "attrs": {} },
    { "type": "wokwi-dht22", "id": "dht", "top": -140, "left": 150, "attrs": {} },
    { "type": "wokwi-lcd1602", "id": "lcd", "top": 180, "left": 120, "attrs": { "pins": "i2c" } },
    {
      "type": "wokwi-pushbutton",
      "id": "btn",
      "top": 44.6,
      "left": 230.4,
      "attrs": { "color": "red" }
    }
  ],
  "connections": [
    [ "esp:3v3", "dht:VCC", "red", [ "v0" ] ],
    [ "esp:15", "dht:SDA", "green", [ "v0" ] ],
    [ "esp:gnd.1", "dht:GND", "black", [ "v0" ] ],
    [ "esp:5v", "lcd:VCC", "red", [ "v0" ] ],
    [ "esp:gnd.2", "lcd:GND", "black", [ "v0" ] ],
    [ "esp:21", "lcd:SDA", "blue", [ "v0" ] ],
    [ "esp:22", "lcd:SCL", "yellow", [ "v0" ] ],
    [ "esp:4", "btn:1.l", "orange", [ "v0" ] ],
    [ "esp:GND.3", "btn:2.r", "black", [ "h0" ] ]
  ],
  "dependencies": {}
}

File 2: project/project.ino

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>
#include <DHT.h>
// Definisi Pin Komponen
#define DHTPIN 15          // Pin Data DHT22 terhubung ke GPIO 15 ESP32
#define DHTTYPE DHT22      // Tipe Sensor DHT22
#define BUTTON_PIN 4       // Pin Pushbutton terhubung ke GPIO 4 ESP32
// Inisialisasi Objek
DHT dht(DHTPIN, DHTTYPE);
LiquidCrystal_I2C lcd(0x27, 16, 2);
WebServer server(80);
// Variabel Data Sensor & Status
float suhu = 0.0;
float kelembapan = 0.0;
// Halaman Web HTML + CSS + JS (Dinamis dengan AJAX)
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESP32 Monitoring & Web Server</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background-color: #f0f2f5; }
    .container { max-width: 500px; margin: auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    h1 { color: #1a73e8; margin-bottom: 20px; font-size: 24px; }
    .card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
    .label { font-size: 14px; color: #6c757d; text-transform: uppercase; letter-spacing: 1px; }
    .value { font-size: 32px; font-weight: bold; color: #212529; margin-top: 5px; }
    .temp { color: #dc3545; }
    .humi { color: #0d6efd; }
    .status { font-weight: bold; padding: 5px 10px; border-radius: 4px; display: inline-block; }
    .on { background-color: #d1e7dd; color: #0f5132; }
    .off { background-color: #f8d7da; color: #842029; }
  </style>
  <script>
    setInterval(function() {
      fetch('/data')
        .then(response => response.json())
        .then(data => {
          document.getElementById('suhu').innerText = data.suhu.toFixed(1) + " °C";
          document.getElementById('kelembapan').innerText = data.kelembapan.toFixed(1) + " %";
          
          let btnElem = document.getElementById('btnStatus');
          if(data.button) {
            btnElem.innerText = "DITEKAN (ON)";
            btnElem.className = "status on";
          } else {
            btnElem.innerText = "DILEPAS (OFF)";
            btnElem.className = "status off";
          }
        });
    }, 2000);
  </script>
</head>
<body>
  <div class="container">
    <h1>Web Server IoT Dinamis</h1>
    
    <div class="card">
      <div class="label">Suhu Udara</div>
      <div id="suhu" class="value temp">-- °C</div>
    </div>
    
    <div class="card">
      <div class="label">Kelembapan Udara</div>
      <div id="kelembapan" class="value humi">-- %</div>
    </div>
    
    <div class="card">
      <div class="label">Status Pushbutton</div>
      <div style="margin-top: 10px;">
        <span id="btnStatus" class="status off">DILEPAS (OFF)</span>
      </div>
    </div>
  </div>
</body>
</html>
)rawliteral";
void handleRoot() {
  server.send(200, "text/html", HTML_CONTENT);
}
void handleData() {
  bool btnPressed = (digitalRead(BUTTON_PIN) == LOW);
  
  String json = "{";
  json += "\"suhu\":" + String(isnan(suhu) ? 0.0 : suhu) + ",";
  json += "\"kelembapan\":" + String(isnan(kelembapan) ? 0.0 : kelembapan) + ",";
  json += "\"button\":" + String(btnPressed ? "true" : "false");
  json += "}";
  
  server.send(200, "application/json", json);
}
void setup() {
  Serial.begin(115200);
  
  pinMode(BUTTON_PIN, INPUT_PULLUP);
  dht.begin();
  lcd.init();
  lcd.backlight();
  
  WiFi.mode(WIFI_STA);
  WiFi.begin("Wokwi-GUEST", "");
  
  lcd.setCursor(0, 0);
  lcd.print("Connecting WiFi");
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  IPAddress IP = WiFi.localIP();
  
  Serial.println("\n--- ESP32 Web Server Berhasil Aktif ---");
  Serial.print("IP Address Web Server: ");
  Serial.println(IP);
  
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print("Web Server IP:");
  lcd.setCursor(0, 1);
  lcd.print(IP);
  delay(3000);
  server.on("/", handleRoot);
  server.on("/data", handleData);
  server.begin();
}
void loop() {
  server.handleClient();
  
  static unsigned long lastCheck = 0;
  if (millis() - lastCheck >= 2000) {
    lastCheck = millis();
    
    suhu = dht.readTemperature();
    kelembapan = dht.readHumidity();
    
    if (isnan(suhu) || isnan(kelembapan)) {
      Serial.println("Gagal membaca data dari sensor DHT22!");
      return;
    }
    
    Serial.print("Suhu: ");
    Serial.print(suhu, 1);
    Serial.print(" °C | Kelembapan: ");
    Serial.print(kelembapan, 1);
    Serial.println(" %");
    
    lcd.clear();
    lcd.setCursor(0, 0);
    lcd.print("Temp: ");
    lcd.print(suhu, 1);
    lcd.print((char)223);
    lcd.print("C");
    
    lcd.setCursor(0, 1);
    lcd.print("Humi: ");
    lcd.print(kelembapan, 1);
    lcd.print(" %");
  }
}

BAB IV

PENUTUP

4.1 Kesimpulan

Penggunaan Arduino CLI memungkinkan proses kompilasi firmware ESP32 dilakukan secara lokal tanpa bergantung pada Arduino IDE grafis, menghasilkan file .bin yang kompatibel dengan ekstensi Wokwi di VS Code.
Integrasi Wokwi IoT Gateway ( wokwigw.exe ) dan pembaruan file wokwi.toml berhasil menjembatani jaringan simulasi ESP32 ( 10.13.37.2 ) ke host komputer lokal, sehingga Web Server dapat diakses secara gratis via http://localhost:9080/ .
Komunikasi asinkron menggunakan Fetch API/AJAX terbukti efektif memperbarui status pushbutton dan telemetry sensor (DHT22) secara real-time tanpa perlu melakukan refresh halaman web.

4.2 Saran

Untuk pengembangan selanjutnya, interaksi kontrol dapat ditambahkan (misalnya tombol sakelar pada web untuk menyalakan LED/Relay pada ESP32).
Pastikan file wokwigw.exe selalu dieksekusi sebelum menjalankan ekstensi Wokwi di VS Code untuk menghindari error no route to host .

BAB V
DAFTAR PUSTAKA

[1] Espressif Systems, "ESP32 Web Server Documentation & Wi-Fi API Reference," 2024.

[2] Wokwi Documentation, "Wokwi IoT Gateway and Local Simulation Guides," 2025.

[3] Arduino Development Team, "Arduino CLI User Manual and Command Reference," 2024.

[4] Adafruit Industries, "DHT Sensor Library & Adafruit Unified Sensor Documentation," 2023.

BAB VI
LAMPIRAN

Video Demonstrasi: 2026-09-30 08-44-24.mp4

Al Ilmu (Berbagi Ilmu Opo Wae)

Senin, 05 Oktober 2026

Tidak ada komentar:

Posting Komentar