LAPORAN PROYEK INTERNET OF THINGS (IoT)
RANCANG BANGUN PALANG PINTU BERBASIS QR
MENGGUNAKAN ESP32 DAN WEBSITE
DENGAN KOMUNIKASI MQTT MELALUI WEBSOCKET
(Simulasi Menggunakan Platform Wokwi)
Disusun oleh:
Ubaidillah Maulidul Ula (24051204115)
Ali Syava Ramadhan (24051204121)
Georvin Octianno (24051204185)
Adie Tirta Satria (24051204108)
BAB I
PENDAHULUAN
1.1 Latar Belakang
Perkembangan Internet of Things (IoT) memungkinkan perangkat elektronik menerima perintah dan mengirimkan status melalui jaringan internet. Salah satu penerapannya adalah pengendalian palang pintu melalui antarmuka web. Pada sistem tersebut, pengguna berinteraksi menggunakan peramban, sedangkan mikrokontroler mengendalikan aktuator dan menampilkan informasi yang diterima. Komunikasi dua arah diperlukan agar pengguna tidak hanya mengirim perintah, tetapi juga mengetahui respons perangkat.
Pada praktikum ini, kode QR digunakan sebagai media pembawa identitas berupa NIM dan nama. Website membaca QR melalui kamera atau menerima identitas melalui formulir manual. Identitas tersebut dikemas menjadi pesan JSON dan dikirim menggunakan protokol MQTT. Penerimaan pesan oleh ESP32 kemudian menjadi dasar perubahan tampilan LCD dan penggerakan servo sebagai representasi palang pintu.
ESP32 digunakan sebagai pusat kendali karena mendukung koneksi Wi-Fi dan memiliki pin untuk menghubungkan servo, LCD I2C, serta sensor PIR. Website tidak ditanamkan sebagai web server pada ESP32, melainkan dijalankan secara terpisah pada localhost atau hosting HTTPS. Website dan ESP32 berkomunikasi melalui broker MQTT yang meneruskan pesan berdasarkan topic yang digunakan.
Rancangan mengacu pada materi MQTT melalui WebSocket, khususnya contoh pemindaian QR yang dihubungkan dengan ESP32 dan servo. Pada sisi browser digunakan Paho MQTT JavaScript melalui WebSocket aman, sedangkan ESP32 menggunakan PubSubClient melalui MQTT TCP. Aplikasi MQTTX tidak menjadi komponen wajib karena fungsi klien MQTT telah diimplementasikan langsung pada kedua program.
Perancangan rangkaian dan program ESP32 dilakukan melalui Wokwi. Antarmuka web dilengkapi input manual, pembuat QR demo, indikator koneksi, dan log aktivitas. Laporan ini menjelaskan rancangan, implementasi, serta pengujian yang terdokumentasi. Sistem dibatasi sebagai demonstrasi pembelajaran dan belum menyediakan autentikasi identitas atau pengamanan yang memadai untuk palang pintu nyata.
1.2 Rumusan Masalah
Berdasarkan latar belakang di atas, rumusan masalah dalam penulisan laporan ini adalah sebagai berikut.
Bagaimana merancang rangkaian ESP32, servo, LCD I2C, dan sensor PIR untuk simulasi palang pintu pada Wokwi?
Bagaimana menghubungkan website dan ESP32 melalui broker MQTT menggunakan topic perintah dan topic status?
Bagaimana mengolah data QR atau input manual dalam format JSON untuk ditampilkan pada LCD dan mengendalikan servo?
Bagaimana memantau respons ESP32 serta menangani keterlambatan atau timeout konfirmasi pada website?
1.3 Tujuan
Tujuan yang hendak dicapai melalui proyek ini adalah sebagai berikut.
Merancang rangkaian simulasi palang pintu berbasis ESP32, servo, LCD I2C, dan sensor PIR pada Wokwi.
Mengimplementasikan komunikasi MQTT dua arah antara website dan ESP32 melalui broker HiveMQ publik.
Membuat antarmuka pemindaian QR dan input manual yang mengirim identitas fiktif dalam format JSON.
Mengevaluasi koneksi, penerimaan pesan, dan konfirmasi perangkat serta menjelaskan batas hasil pengujian.
1.4 Batasan Masalah
Agar pembahasan tetap terarah, penulisan laporan ini dibatasi pada hal-hal berikut.
Perangkat ESP32 dan komponen elektronik dijalankan pada simulator Wokwi; pengujian perangkat keras fisik tidak termasuk cakupan laporan.
Komponen rangkaian terdiri atas ESP32 DevKit C V4, servo, LCD 20×4 dengan antarmuka I2C, dan sensor PIR.
Identitas QR berupa NIM dan nama fiktif. Pemeriksaan hanya mencakup format data, bukan pencocokan dengan basis data mahasiswa, whitelist, atau sistem pembayaran QRIS.
ESP32 menggunakan Wi-Fi Wokwi-GUEST dalam mode station. Browser memakai WSS port 8884, sedangkan ESP32 memakai MQTT TCP port 1883 pada broker yang sama.
Broker publik tidak menggunakan autentikasi. Sistem tidak mencakup database permanen, otorisasi pengguna, perlindungan anti-replay yang kuat, atau sensor keselamatan tersertifikasi.
1.5 Manfaat
Hasil dari proyek ini diharapkan dapat memberikan manfaat sebagai berikut.
Bagi penulis, meningkatkan pemahaman mengenai ESP32, MQTT, WebSocket, JSON, serta integrasi antarmuka web dengan sensor dan aktuator.
Bagi pembaca, menjadi rujukan praktikum komunikasi publish–subscribe antara website dan simulasi perangkat IoT.
Bagi pengembangan selanjutnya, menyediakan dasar untuk penggunaan broker privat, validasi identitas di server, pencatatan akses, dan pengujian perangkat fisik.
BAB II
TINJAUAN PUSTAKA
2.1 Internet of Things (IoT)
Internet of Things (IoT) adalah konsep penghubungan perangkat fisik yang memiliki kemampuan pemrosesan, pengindraan, atau penggerakan dengan layanan digital melalui jaringan. Sistem IoT memungkinkan pertukaran data antara perangkat dan aplikasi sehingga pemantauan serta pengendalian dapat dilakukan dari jarak jauh. Pada proyek ini, perangkat disimulasikan menggunakan ESP32 dan komponen pendukung di Wokwi.
Arsitektur proyek dapat dipandang sebagai lapisan perangkat, jaringan, dan aplikasi. Lapisan perangkat meliputi ESP32, PIR, servo, serta LCD. Lapisan jaringan menggunakan Wi-Fi dan broker MQTT. Lapisan aplikasi berupa website yang menerima identitas pengguna, mengirim perintah, dan menampilkan status berdasarkan pesan yang dikembalikan perangkat.
2.2 Mikrokontroler ESP32
ESP32 merupakan mikrokontroler dari Espressif Systems yang memiliki dukungan Wi-Fi, sejumlah pin GPIO, serta antarmuka komunikasi seperti I2C dan UART. Kemampuan tersebut memungkinkan ESP32 terhubung ke jaringan dan sekaligus mengendalikan komponen keluaran. Dalam proyek ini, pemrograman ESP32 menggunakan bahasa C++ dengan kerangka kerja Arduino.
Papan ESP32 DevKit C V4 digunakan pada simulasi. GPIO 18 dihubungkan dengan sinyal servo, GPIO 23 membaca keluaran PIR, sedangkan GPIO 21 dan GPIO 22 digunakan sebagai SDA dan SCL LCD. Komunikasi UART pada Serial Monitor dipakai untuk memeriksa koneksi jaringan dan pesan status program.
Mode jaringan yang digunakan adalah WIFI_STA, yaitu ESP32 terhubung ke jaringan Wi-Fi yang sudah tersedia. SSID simulasi adalah Wokwi-GUEST dengan kata sandi kosong dan kanal 6. ESP32 tidak membentuk access point sendiri dan tidak menyajikan halaman web lokal; hubungan dengan website dilakukan melalui broker MQTT di internet.
Gambar 2.1 Papan ESP32 DevKit C V4 pada simulator Wokwi
2.3 MQTT dan Komunikasi WebSocket
MQTT adalah protokol pertukaran pesan dengan pola publish–subscribe. Klien pengirim melakukan publish ke sebuah topic, sedangkan klien penerima melakukan subscribe pada topic yang sesuai. Broker menerima pesan dan meneruskannya kepada subscriber. Karena itu, website tidak mengirim perintah langsung ke alamat IP ESP32.
Browser mengakses MQTT melalui WebSocket karena tidak menyediakan koneksi TCP mentah untuk aplikasi web biasa. Paho MQTT JavaScript digunakan pada browser dengan WSS port 8884 dan path /mqtt. ESP32 memakai PubSubClient melalui TCP port 1883. Kedua transport dapat bertukar pesan melalui broker yang sama selama topic cocok.
MQTTX merupakan aplikasi klien MQTT untuk pengujian dan pemantauan, bukan broker atau protokol pengganti. MQTTX tidak wajib dalam rancangan ini karena website dan ESP32 sudah menjadi klien MQTT. MQTTX dapat ditambahkan sebagai klien ketiga untuk mengamati pesan pada topic perintah maupun status.
2.4 Kode QR dan Identitas JSON
Kode QR adalah representasi data dua dimensi yang dapat dibaca melalui kamera. Pada proyek ini, QR memuat teks JSON dengan properti NIM dan NAMA. Library html5-qrcode menangani pembacaan kamera, sedangkan QRCode.js membentuk QR demo. Setelah data valid terbaca, website mengirim satu perintah dan menghentikan pemindaian agar tidak terjadi pengiriman berulang.
Contoh identitas adalah {"NIM":"23010056","NAMA":"Mahasiswa Demo"}. NIM disimpan sebagai string agar nol awal tetap dipertahankan. QR bukan bukti keaslian identitas; setiap data dengan format yang diterima dapat digunakan pada demonstrasi ini.
Gambar 2.2 QR identitas fiktif untuk demonstrasi
2.5 Website dan Komponen Kendali
Website terdiri atas index.html, style.css, dan app.js. Pengguna dapat menghubungkan klien MQTT, mengisi identitas manual, memindai QR, serta melihat status perangkat. Akses kamera memerlukan secure context, yaitu HTTPS atau localhost, beserta izin kamera. Website tidak harus berada dalam jaringan lokal yang sama dengan ESP32 selama keduanya dapat mengakses broker.
Servo merepresentasikan posisi palang: 0° untuk tertutup dan 90° untuk terbuka. LCD I2C 20×4 menampilkan NIM, nama, dan petunjuk akses. Sensor PIR membaca gerak dan dipakai untuk menunda penutupan ketika keluaran sensor HIGH. Penutupan otomatis dirancang berlangsung sekitar 10 detik setelah aktivitas gerak terakhir, bukan saat PIR masih aktif.
PIR pada simulasi hanya digunakan sebagai masukan demonstrasi. Sensor ini bukan pengganti sensor keselamatan kendaraan. Palang fisik memerlukan desain mekanik, catu daya servo, sensor penghalang, serta mekanisme penghentian darurat yang diuji secara khusus sebelum digunakan.
2.6 Format Pesan dan Konfirmasi
Pesan perintah dikirim sebagai JSON yang memuat cmd, id, serta identitas untuk perintah open. Properti id dibuat acak untuk menghubungkan permintaan dan balasannya. Topic dasar gatelab/demo-a7c49e21 menghasilkan dua saluran: /cmd untuk perintah dan /state untuk status. Perintah yang didukung adalah open, close, dan status.
Balasan ESP32 memuat online, gate, angle, motion, event, dan id. Website tidak menganggap publish sebagai keberhasilan gerak servo; konfirmasi baru muncul ketika id balasan cocok. Jika balasan tidak diterima dalam batas waktu, website menampilkan timeout. Pesan heartbeat dikirim berkala untuk membantu menilai keterhubungan perangkat.
2.7 Simulator Wokwi
Wokwi adalah simulator elektronika berbasis web untuk menyusun rangkaian serta menjalankan program mikrokontroler. Pada proyek ini, Wokwi digunakan untuk menjalankan ESP32 virtual yang terhubung ke internet dan berinteraksi dengan website melalui MQTT. Perangkat virtual meliputi servo, LCD I2C 20×4, dan sensor PIR.
Rangkaian ditetapkan melalui diagram.json, program melalui sketch.ino, dan dependensi Arduino melalui libraries.txt. Hasil simulasi membantu memeriksa logika dan integrasi, tetapi belum membuktikan keandalan perangkat fisik. Kecepatan simulasi dan layanan jaringan publik juga dapat memengaruhi keterlambatan komunikasi.
BAB III
PEMBAHASAN
3.1 Alat dan Bahan
Alat dan bahan yang digunakan disajikan pada Tabel 3.1. Komponen elektronik tersedia pada Wokwi, sedangkan website dijalankan melalui peramban. Koneksi internet diperlukan untuk broker MQTT dan pemuatan library JavaScript.
Tabel 3.1 Daftar alat dan bahan
Pustaka eksternal ESP32 meliputi PubSubClient, ArduinoJson, ESP32Servo, dan LiquidCrystal I2C; WiFi serta Wire tersedia pada lingkungan ESP32 Arduino. Website menggunakan Paho MQTT JavaScript, html5-qrcode, dan QRCode.js. Broker yang digunakan adalah broker.hivemq.com tanpa autentikasi untuk keperluan demonstrasi.
3.2 Perancangan Sistem
Sistem dirancang dengan pola masukan–komunikasi–proses–keluaran. Website membaca identitas dari QR atau formulir, memvalidasi format, lalu melakukan publish JSON ke topic /cmd. Broker meneruskan pesan kepada ESP32 yang telah subscribe. ESP32 memproses perintah, mengubah LCD dan posisi servo, serta memublikasikan status ke /state. Website menerima balasan untuk memperbarui indikator. PIR menjadi masukan lokal untuk menunda penutupan palang.
Gambar 3.1 Tampilan program dan simulasi pada Wokwi
3.3 Perancangan Rangkaian
Rangkaian terdiri atas ESP32, servo, LCD I2C, dan PIR. Sinyal servo terhubung ke GPIO 18, keluaran PIR ke GPIO 23, serta SDA dan SCL LCD ke GPIO 21 dan GPIO 22. Jalur VCC komponen dan ground mengikuti rangkaian simulasi. Hubungan daya pada simulator tidak langsung dijadikan acuan catu servo fisik tanpa perhitungan kebutuhan arus.
Gambar 3.2 Rangkaian sistem pada simulator Wokwi
Hubungan antarpin secara rinci ditampilkan pada Tabel 3.2.
Tabel 3.2 Konfigurasi hubungan antarpin
Bagian connections pada diagram.json mendefinisikan hubungan antarpin. Berikut kutipan jalur komponen; koneksi UART Serial Monitor tersedia pada berkas proyek lengkap.
Kutipan berkas diagram.json
"connections": [
[ "esp:18", "servo:PWM", "orange", [] ],
[ "esp:5V", "servo:V+", "red", [] ],
[ "esp:GND.1", "servo:GND", "black", [] ],
[ "esp:21", "lcd:SDA", "green", [] ],
[ "esp:22", "lcd:SCL", "blue", [] ],
[ "esp:5V", "lcd:VCC", "red", [] ],
[ "esp:GND.1", "lcd:GND", "black", [] ],
[ "esp:23", "pir:OUT", "purple", [] ],
[ "esp:5V", "pir:VCC", "red", [] ],
[ "esp:GND.1", "pir:GND", "black", [] ]
]
3.4 Perancangan Pesan JSON
Sistem tidak menggunakan berkas basis data. Pertukaran data dilakukan melalui pesan JSON. Pesan pembukaan memuat cmd, id, NIM, dan NAMA. Tabel 3.3 merangkum tiga properti utama, sedangkan id dipakai sebagai pengenal permintaan dan konfirmasi balasan.
Tabel 3.3 Properti utama pesan perintah
Contoh payload yang digunakan pada jalur perintah dan status ditampilkan berikut ini. NIM dan nama pada contoh bersifat fiktif.
Contoh pesan JSON (dipersingkat)
{
"cmd": "open",
"id": "demo-001",
"NIM": "23010056",
"NAMA": "Mahasiswa Demo"
}
// Balasan pada topic /state:
{"online":true,"gate":"open",
"angle":90,"motion":false,
"event":"opened","id":"demo-001"}
Format identitas diperiksa sebelum pemrosesan: NIM harus terdiri atas 1–20 digit dan nama berisi 1–40 karakter ASCII. LCD menampilkan paling banyak 20 karakter per baris. Validasi tersebut hanya memastikan format; sistem belum memeriksa apakah identitas terdaftar atau berhak membuka palang.
3.5 Alur Pengoperasian Website
Pengoperasian diawali dengan menjalankan simulasi Wokwi dan menghubungkan website ke broker pada topic yang sama. Pengguna kemudian mengisi NIM serta nama atau memindai QR. Tombol kirim memublikasikan perintah ke ESP32, sedangkan hasilnya diperiksa melalui status dan log. Gambar 3.3 memperlihatkan panel pemindaian dan input manual pada website sebelum terhubung.
Gambar 3.3 Panel pemindaian QR dan input manual
3.6 Implementasi Program
Implementasi dibagi menjadi enam bagian: deklarasi, komunikasi website, penerimaan perintah, inisialisasi dan koneksi, publikasi status, serta loop kendali. Kutipan berikut menjelaskan bagian penting; kode sumber lengkap terdapat pada paket proyek. Blok yang diringkas tidak dimaksudkan sebagai sketch mandiri.
3.6.1 Pustaka, Konstanta, dan Variabel Global
Bagian deklarasi memanggil pustaka jaringan, MQTT, JSON, servo, dan LCD. Konstanta menetapkan topic dasar serta pin komponen, sedangkan objek klien dan variabel status digunakan bersama oleh fungsi-fungsi program.
Program 3.1 Deklarasi pustaka dan objek sistem
#include <WiFi.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>
#include <ESP32Servo.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>
const char* BASE_TOPIC = "gatelab/demo-a7c49e21";
const char* MQTT_HOST = "broker.hivemq.com";
const int SERVO_PIN = 18, PIR_PIN = 23;
WiFiClient network;
PubSubClient mqtt(network);
Servo gateServo;
LiquidCrystal_I2C lcd(0x27, 20, 4);
String cmdTopic, stateTopic;
bool gateOpen = false, motion = false;
const unsigned long OPEN_MS = 10000;
Objek mqtt memakai WiFiClient sebagai transport jaringan. Servo dikendalikan melalui GPIO 18, PIR dibaca melalui GPIO 23, dan LCD menggunakan alamat I2C 0x27. Nilai BASE_TOPIC harus sama dengan kolom topic dasar website agar perintah dan balasan berada pada saluran yang sesuai.
3.6.2 Komunikasi MQTT pada Website
Website dijalankan terpisah dari ESP32 dan memakai Paho MQTT JavaScript. Saat tersambung, browser subscribe topic status. Pengiriman perintah mencakup id acak dan tidak menggunakan retained message. Kutipan berikut menyederhanakan alur koneksi, publish, serta penerimaan konfirmasi dalam app.js.
Program 3.2 Koneksi dan pertukaran pesan browser
// Kutipan ringkas alur Paho di app.js
const base = 'gatelab/demo-a7c49e21';
const web = new Paho.MQTT.Client(
'broker.hivemq.com', 8884, '/mqtt',
'web-' + Date.now()
);
const pendingIds = new Map();
web.onMessageArrived = message => {
if (message.destinationName !== base + '/state')
return;
const state = JSON.parse(message.payloadString);
if (pendingIds.has(state.id)) {
clearTimeout(pendingIds.get(state.id));
pendingIds.delete(state.id);
console.log('Balasan ESP32:', state);
}
};
web.connect({
useSSL: true,
timeout: 12,
onSuccess: () => {
web.subscribe(base + '/state');
console.log('Browser terhubung');
},
onFailure: error => console.log(error)
});
function sendOpen(nim, nama) {
if (!web.isConnected()) return;
const id = 'req-' + Date.now();
const data = {
cmd: 'open', id, NIM: nim, NAMA: nama
};
const message = new Paho.MQTT.Message(
JSON.stringify(data)
);
message.destinationName = base + '/cmd';
message.qos = 0;
message.retained = false;
web.send(message);
const timer = setTimeout(() => {
pendingIds.delete(id);
console.log('Timeout konfirmasi ESP32');
}, 10000);
pendingIds.set(id, timer);
}
// UI dan validasi lengkap tersedia di app.js.
// Penerimaan balasan tidak melalui HTTP ESP32.
Ketika tombol kirim ditekan, identitas dimasukkan ke payload open. Website menunggu balasan yang memiliki id sama sebelum mengubah umpan balik menjadi terkonfirmasi. Pemindai QR menggunakan jalur pengiriman yang sama dengan formulir manual sehingga pemrosesan pesan pada ESP32 tidak perlu dibedakan.
3.6.3 Fungsi onMessage()
Fungsi onMessage() dipanggil PubSubClient ketika pesan diterima. Payload diparsing sebagai JSON, kemudian cmd dan identitas diperiksa. Kutipan ini menampilkan alur inti; pemeriksaan format identitas dilakukan melalui validNim() dan validNama() pada kode lengkap.
Program 3.3 Penerimaan dan pemrosesan perintah
void onMessage(char* topic, byte* payload,
unsigned int length) {
if (String(topic) != cmdTopic) return;
JsonDocument doc;
if (deserializeJson(doc, payload, length)) {
report("error", "", "JSON tidak valid");
return;
}
String id = doc["id"] | "";
String cmd = doc["cmd"] | "";
if (cmd == "status") {
report("status", id); return;
}
if (cmd == "open") {
String nim = doc["NIM"].as<String>();
String nama = doc["NAMA"].as<String>();
nim.trim(); nama.trim();
if (!validNim(nim) || !validNama(nama)) {
report("error", id, "Identitas tidak valid");
return;
}
currentNim = nim; currentNama = nama;
setGate(true);
report("opened", id);
} else if (cmd == "close") {
if (motion) {
report("error", id, "PIR aktif"); return;
}
setGate(false);
report("closed", id);
} else {
report("error", id, "Perintah tidak dikenal");
}
}
Perintah open mengubah identitas yang disimpan sementara, menggerakkan servo, dan menerbitkan balasan opened. Perintah close ditolak jika PIR aktif. Perintah status hanya meminta keadaan perangkat tanpa mengubah servo. Kesalahan parsing atau identitas tidak valid ditangani dengan pesan error, bukan pemberian akses.
3.6.4 Fungsi setup()
Fungsi setup() dijalankan sekali untuk menyiapkan Serial Monitor, topic, PIR, LCD, servo, Wi-Fi station, dan klien MQTT. Posisi awal palang dibuat tertutup sebelum koneksi broker terbentuk.
Program 3.4 Inisialisasi perangkat dan jaringan
void setup() {
Serial.begin(115200);
cmdTopic = String(BASE_TOPIC) + "/cmd";
stateTopic = String(BASE_TOPIC) + "/state";
pinMode(PIR_PIN, INPUT);
Wire.begin(21, 22);
lcd.init();
lcd.backlight();
gateServo.setPeriodHertz(50);
gateServo.attach(SERVO_PIN, 500, 2400);
setGate(false);
WiFi.mode(WIFI_STA);
WiFi.begin("Wokwi-GUEST", "", 6);
lastWifiAttempt = millis();
mqtt.setServer(MQTT_HOST, 1883);
mqtt.setBufferSize(768);
// Toleransi koneksi yang disarankan:
mqtt.setSocketTimeout(15);
mqtt.setKeepAlive(60);
mqtt.setCallback(onMessage);
Serial.println("GATE LAB - menunggu WiFi");
Serial.print("Topic: ");
Serial.println(BASE_TOPIC);
}
WiFi.begin() menghubungkan ESP32 ke Wokwi-GUEST. Buffer MQTT diatur 768 byte agar memadai untuk payload yang digunakan. Socket timeout dan keepalive perlu disesuaikan dengan kondisi jaringan. Nilai 15 dan 60 detik pada kutipan merupakan konfigurasi toleransi yang disarankan saat penelusuran gangguan, bukan bukti tunggal penyebab timeout.
Koneksi broker dipulihkan melalui percobaan berkala. Setelah berhasil terhubung, ESP32 subscribe topic perintah dan mengirim keadaan awal. Potongan berikut menunjukkan inti proses koneksi dan publish balasan.
Program 3.5 Koneksi broker dan langganan topic
// Inti pemulihan MQTT di dalam loop().
if (!mqtt.connected()) {
unsigned long now = millis();
if (lastMqttAttempt == 0 ||
now - lastMqttAttempt >= 5000) {
lastMqttAttempt = now;
String clientId = "gate-";
clientId += String(
(uint32_t)ESP.getEfuseMac(), HEX
);
clientId += "-";
clientId += String(
(uint32_t)esp_random(), HEX
);
bool connected = mqtt.connect(
clientId.c_str(),
stateTopic.c_str(),
0, false,
"{\"online\":false}"
);
if (connected) {
mqtt.subscribe(cmdTopic.c_str(), 0);
Serial.print("MQTT connected. Subscribe: ");
Serial.println(cmdTopic);
report("connected");
lastHeartbeat = now;
} else {
Serial.print("MQTT gagal, rc=");
Serial.println(mqtt.state());
}
}
}
// Pemulihan Wi-Fi diperiksa terpisah.
// Kode lengkap tidak menggunakan while tunggu.
// Topic harus sama dengan konfigurasi website.
Klien MQTT menggunakan pengenal yang dibedakan agar tidak saling menggantikan koneksi. Pesan Last Will menyatakan online:false jika koneksi terputus secara tidak normal. Berhasil memanggil subscribe belum sama dengan membuktikan seluruh jalur perintah berjalan; hasilnya tetap diperiksa melalui penerimaan pesan dan konfirmasi.
3.6.5 Fungsi report()
Fungsi report() membentuk pesan keadaan perangkat dan memublikasikannya ke topic /state. Balasan menyertakan id permintaan agar website dapat mencocokkan respons. Heartbeat menggunakan saluran yang sama, tetapi tidak dianggap sebagai konfirmasi untuk perintah yang id-nya berbeda.
Program 3.6 Publikasi status dan konfirmasi
void report(const char* event,
const String& id = "",
const char* error = nullptr) {
if (!mqtt.connected()) return;
JsonDocument doc;
doc["online"] = true;
doc["gate"] = gateOpen ? "open" : "closed";
doc["angle"] = gateOpen ? 90 : 0;
doc["motion"] = motion;
doc["NIM"] = currentNim;
doc["NAMA"] = currentNama;
doc["event"] = event;
doc["id"] = id;
if (error) doc["error"] = error;
char buffer[512];
serializeJson(doc, buffer, sizeof(buffer));
bool sent = mqtt.publish(
stateTopic.c_str(), buffer, false
);
if (!sent)
Serial.println("Gagal publish status");
}
3.6.6 Fungsi loop()
Fungsi loop() membaca PIR, memeriksa waktu pembukaan, menjaga koneksi, serta memanggil mqtt.loop(). Pemeriksaan waktu menggunakan millis(), sehingga tidak diperlukan delay panjang khusus untuk menunggu penutupan palang.
Program 3.7 Pembacaan PIR, timer, dan layanan MQTT
void loop() {
unsigned long now = millis();
bool sensed = digitalRead(PIR_PIN) == HIGH;
if (sensed != motion) {
motion = sensed;
renderLCD();
report("motion");
}
if (gateOpen) {
if (motion) {
lastMotionAt = now;
} else if (now - lastMotionAt >= OPEN_MS) {
setGate(false);
report("auto_closed");
}
}
// Kode lengkap memulihkan Wi-Fi dan MQTT
// secara berkala pada bagian ini.
if (WiFi.status() != WL_CONNECTED) {
delay(5);
return;
}
if (mqtt.connected()) {
mqtt.loop();
if (now - lastHeartbeat >= HEARTBEAT_MS) {
lastHeartbeat = now;
report("heartbeat");
}
}
delay(5);
}
// OPEN_MS = 10000; HEARTBEAT_MS = 5000.
// setGate(true): servo 90 derajat.
// setGate(false): servo 0 derajat.
Selama PIR HIGH, waktu aktivitas terakhir diperbarui sehingga palang tidak ditutup otomatis. Setelah PIR LOW dan selang waktu mencapai OPEN_MS, servo kembali tertutup. Penutupan lokal tidak bergantung pada perintah web berikutnya, tetapi operasi jaringan tetap dapat menunda satu iterasi loop; rancangan ini bukan pengendali keselamatan real-time.
3.7 Hasil Pengujian
Pengujian dibahas berdasarkan tangkapan layar Wokwi, pemeriksaan kode, pengujian antarmuka, serta konfirmasi pelaksana bahwa kendala timeout telah teratasi. Hasil yang belum didokumentasikan pada perangkat tidak disamakan dengan hasil pengujian fisik. Tidak dilakukan pengukuran statistik latensi atau tingkat keberhasilan.
3.7.1 Pengamatan melalui Serial Monitor
Tangkapan layar pelaksanaan menunjukkan program berjalan, LCD menampilkan petunjuk scan QR, dan Serial Monitor mencetak MQTT connected beserta topic subscribe. Dokumentasi tersebut membuktikan inisialisasi dan koneksi pada saat pengambilan gambar, tetapi belum menunjukkan hasil lengkap pemindaian QR atau gerak PIR.
Gambar 3.4 Dokumentasi Wokwi dan pesan koneksi MQTT
Pada pengujian awal, website mengalami timeout konfirmasi sementara pesan koneksi muncul berulang pada Serial Monitor. Penelusuran diarahkan pada kesamaan topic, penerimaan payload, dan toleransi koneksi. Pelaksana kemudian menyatakan kendala telah teratasi. Karena log lengkap setelah perbaikan tidak dilampirkan, akar penyebab dan perubahan final tidak ditetapkan secara pasti dalam laporan.
3.7.2 Pemeriksaan Antarmuka Web
Website menyediakan kolom topic dasar, tombol Hubungkan, input NIM/nama, serta pemindai kamera. Tampilan awal ditunjukkan pada Gambar 3.5. Input manual digunakan sebagai jalur uji lebih dahulu agar kendala MQTT dapat dibedakan dari kendala izin kamera atau pembacaan QR.
Gambar 3.5 Cuplikan antarmuka website Gate Lab
Fitur pembuat QR menghasilkan identitas fiktif yang dapat ditampilkan pada layar lain untuk dipindai. Gambar 3.6 memperlihatkan fitur tersebut beserta payload pada website, bukan bukti penerimaan pesan oleh ESP32. Dalam pengujian antarmuka, pesan konfirmasi dan penolakan diperiksa menggunakan balasan MQTT terkontrol.
Gambar 3.6 QR demo dan payload pada website
3.7.3 Rekapitulasi Hasil Pengujian
Tabel 3.4 membedakan hasil terdokumentasi, konfirmasi pelaksana, pengujian antarmuka, dan perilaku yang masih berdasarkan kode. Pembedaan ini mencegah klaim bahwa seluruh skenario perangkat telah teruji.
Tabel 3.4 Hasil pengujian sistem
*Uji WSS memakai klien pengganti ESP32; uji UI memakai pesan atau callback terkontrol. Kamera HP belum terdokumentasi. Status Selesai berdasarkan konfirmasi pelaksana, bukan pengukuran latensi. Dokumentasi menunjukkan program Wokwi berjalan dan koneksi terbentuk. Timeout dinyatakan selesai oleh pelaksana, tetapi bukti gerak servo, timer, serta PIR masih perlu dilengkapi sebelum seluruh skenario dinyatakan tervalidasi.
3.8 Analisis dan Pembahasan
Analisis difokuskan pada arsitektur komunikasi, makna konfirmasi, serta keterbatasan keamanan dan pengujian. Kesesuaian fungsi yang tertulis dalam program tidak otomatis membuktikan keberhasilan pada seluruh kondisi jaringan atau perangkat fisik.
Pemisahan protokol dan aplikasi klien. MQTT adalah protokol komunikasi, sedangkan MQTTX merupakan aplikasi klien tambahan. Pada proyek ini Paho pada website dan PubSubClient pada ESP32 sudah menangani publish–subscribe. Oleh karena itu, MQTTX tidak diwajibkan; aplikasi tersebut tetap berguna untuk memantau topic dan mengisolasi gangguan.
Perbedaan transport. Website menggunakan WSS port 8884, sedangkan ESP32 menggunakan MQTT TCP port 1883. Keduanya berkomunikasi melalui broker yang sama. Enkripsi pada sisi browser tidak menjadikan seluruh jalur terenkripsi karena koneksi TCP ESP32 belum memakai TLS.
Makna timeout konfirmasi. Berhasil mengirim pesan dari browser tidak membuktikan pesan telah diproses ESP32. Website memerlukan balasan dengan id yang cocok. Timeout dapat berkaitan dengan koneksi terputus, topic berbeda, simulasi berhenti, pesan hilang, atau respons terlambat; penyebab pastinya harus ditentukan dari log.
Broker publik dan identitas fiktif. Broker tidak menyediakan pemisahan akses untuk topic demonstrasi ini. Pihak lain yang mengetahui topic dapat membaca atau mengirim pesan. Topic unik hanya mengurangi benturan penggunaan, bukan menjadi kata sandi. Oleh karena itu, NIM dan nama nyata sebaiknya tidak dikirim pada percobaan publik.
Validasi format bukan autentikasi. QR dan formulir hanya memasok teks NIM/nama yang diperiksa formatnya. Tidak ada basis data, whitelist, tanda tangan digital, atau validasi hak akses. Sistem tepat disebut demonstrasi kendali palang berbasis QR, bukan sistem keamanan identitas mahasiswa yang telah terjamin.
Ketergantungan pada jaringan dan simulasi. Pesan menggunakan QoS 0 dan tidak di-retain sehingga tidak ada jaminan pengiriman ulang oleh broker. Heartbeat membantu mendeteksi perangkat yang tidak merespons, tetapi tidak membuktikan servo benar-benar bergerak karena tidak tersedia sensor umpan balik posisi palang.
Batas keselamatan dan pembuktian. PIR digunakan untuk menunda penutupan dalam simulasi, bukan sebagai sensor pengaman kendaraan yang tersertifikasi. Pengujian fisik, kondisi terhalang, latensi, dan pemulihan setelah gangguan perlu dievaluasi terpisah. Pernyataan perbaikan timeout juga tidak menggantikan dokumentasi uji seluruh fitur.
BAB IV
PENUTUP
4.1 Kesimpulan
Berdasarkan hasil perancangan, implementasi, dan pengujian yang telah dilakukan, dapat ditarik beberapa kesimpulan sebagai berikut.
Rancangan palang pintu berbasis QR telah diwujudkan dalam website dan proyek ESP32 pada Wokwi. Komponen yang digunakan adalah servo, LCD I2C 20×4, serta PIR. Dokumentasi pelaksanaan memperlihatkan program berjalan dan LCD berada pada keadaan awal.
Komunikasi menggunakan broker MQTT dengan pola publish–subscribe. Website memakai Paho melalui WSS, sedangkan ESP32 memakai PubSubClient melalui TCP. MQTTX tidak diperlukan pada alur utama karena kedua program sudah berperan sebagai klien MQTT.
Data QR atau masukan manual dikirim sebagai JSON pada topic /cmd. Program dirancang menampilkan identitas pada LCD, membuka servo, dan mengirim balasan pada /state. Pencocokan id membedakan konfirmasi suatu perintah dari pesan status umum.
Kendala timeout konfirmasi ditemukan pada pengujian awal dan kemudian dinyatakan teratasi oleh pelaksana. Bukti yang tersedia belum memuat log lengkap perubahan akhir dan seluruh skenario aktuator, sehingga laporan tidak menyimpulkan tingkat keberhasilan atau latensi tertentu.
Penutupan otomatis dan penundaan oleh PIR telah diimplementasikan menggunakan pemeriksaan millis(). Sistem masih berupa demonstrasi pembelajaran; validasi identitas, keamanan broker, dan keselamatan palang nyata memerlukan pengembangan serta pengujian lebih lanjut.
4.2 Saran
Beberapa saran yang dapat dipertimbangkan untuk pengembangan sistem pada tahap selanjutnya adalah sebagai berikut.
Gunakan broker privat dengan autentikasi, pembatasan hak topic, dan TLS pada kedua sisi sebelum memproses data identitas atau mengendalikan perangkat nyata.
Tambahkan server validasi identitas dan otorisasi akses. QR sebaiknya menggunakan token terverifikasi, memiliki masa berlaku, dan dilengkapi perlindungan pemutaran ulang pesan.
Dokumentasikan uji input manual, scan QR, penutupan otomatis, PIR, putus jaringan, dan pemulihan koneksi melalui log serta tangkapan layar.
Tambahkan pencatatan waktu dan hasil akses pada penyimpanan server agar riwayat tidak hilang saat halaman dimuat ulang atau simulasi berhenti.
Sediakan sensor posisi palang dan sensor penghalang yang sesuai, catu daya servo terpisah dengan common ground, serta penghentian darurat untuk prototipe fisik.
Lakukan pengukuran latensi, pengujian berulang, dan evaluasi berbagai kondisi jaringan. MQTTX dapat dipakai sebagai alat diagnosis tambahan, bukan pengganti website atau broker.
DAFTAR PUSTAKA
Eclipse Foundation. Eclipse Paho JavaScript Client. Diakses dari https://eclipse.dev/paho/clients/js/
HiveMQ. Public MQTT Broker. Diakses dari https://www.hivemq.com/mqtt/public-mqtt-broker/
O’Leary, N. PubSubClient: Arduino Client for MQTT. Diakses dari https://pubsubclient.knolleary.net/
Blanchon, B. ArduinoJson Documentation. Diakses dari https://arduinojson.org/
Espressif Systems. Arduino Core for ESP32 Documentation. Diakses dari https://docs.espressif.com/projects/arduino-esp32/
Kurniawan, N. Y. (2025). Perkenalan Koding GIS – Open Street Map di D4 Transportasi Unesa. https://www.aisi555.com/2025/03/perkenalan-koding-gis-open-street-map.html
Modul praktikum. MQTT melalui WebSocket: Memanfaatkan JavaScript untuk Membuat Aplikasi IoT–HTML. Berkas modul6(2)(1).pdf, hlm. 5 dan 8–9.
Wokwi. Documentation dan Contoh Simulasi MQTT–Servo. https://docs.wokwi.com/ ; https://wokwi.com/projects/444405976490555393
Tautan proyek simulasi: https://wokwi.com/projects/479368419524708353
Tidak ada komentar:
Posting Komentar