Disusun Oleh:
| Irma Aulia | (24051204005) |
| Kaysa Karuma Amalia | (24051204011) |
| Maskurotin Faizah | (24051204015) |
| Qurrota A’yun | (24051204082) |
| Syifa Nayla Artika Dewi | (24051204238) |
BAB I
PENDAHULUAN
1.1 Latar Belakang
Internet of Things (IoT) merupakan konsep yang menghubungkan perangkat fisik ke jaringan agar dapat saling bertukar data dan menjalankan fungsi secara otomatis. Penerapan IoT dapat membantu proses pengendalian dan pemantauan perangkat dari antarmuka digital.
Salah satu penerapan IoT adalah sistem parkir otomatis. Pada sistem parkir konvensional, pembukaan palang umumnya dilakukan secara manual atau menggunakan petugas. Proses tersebut dapat dikembangkan dengan memanfaatkan QR Code sebagai identitas akses, mikrokontroler sebagai pengendali, serta motor servo sebagai penggerak palang.
Berdasarkan kebutuhan tersebut, dibuat proyek Smart Parking Gate, yaitu simulasi palang parkir otomatis menggunakan ESP32 dan servo pada platform Wokwi. Dashboard berbasis HTML, CSS, dan JavaScript dijalankan secara lokal melalui Visual Studio Code Live Server. QR Code dibaca melalui kamera browser dan divalidasi sebelum perintah pembukaan palang dikirimkan.
Komunikasi antara dashboard dan broker menggunakan MQTT melalui WebSocket, sedangkan ESP32 terhubung ke broker menggunakan MQTT melalui TCP. Broker EMQX menjadi perantara pesan antara dashboard dan ESP32. Proyek ini digunakan untuk mempelajari integrasi QR Code, Wi-Fi, MQTT, WebSocket, mikrokontroler, dan aktuator dalam satu sistem IoT.
1.2 Rumusan Masalah
1.Bagaimana merancang simulasi sistem palang parkir otomatis menggunakan ESP32 dan servo pada Wokwi?
2.Bagaimana menghubungkan ESP32 ke jaringan Wi-Fi dan MQTT Broker?
3.Bagaimana menerapkan komunikasi MQTT melalui WebSocket antara dashboard browser dan broker?
4.Bagaimana membaca serta memvalidasi QR Code sebelum mengirim perintah pembukaan palang?
5.Bagaimana menguji perintah buka dan tutup palang serta pertukaran status melalui MQTT?
1.3 Tujuan
1.Membuat simulasi Smart Parking Gate menggunakan ESP32 dan motor servo.
2.Mengimplementasikan komunikasi Wi-Fi dan MQTT antara ESP32 dengan broker EMQX.
3.Menggunakan MQTT over WebSocket pada dashboard berbasis browser.
4.Menerapkan pembacaan dan validasi QR Code sebagai mekanisme akses parkir sederhana.
5.Menguji fungsi pembukaan dan penutupan palang serta penerimaan status pada dashboard.
1.4 Manfaat
Praktikum Smart Parking Gate bermanfaat untuk meningkatkan pemahaman mahasiswa mengenai penerapan teknologi Internet of Things (IoT), khususnya penggunaan protokol MQTT dan WebSocket dalam komunikasi antara dashboard berbasis web dengan mikrokontroler ESP32. Melalui praktikum ini, mahasiswa dapat memahami konsep publish dan subscribe, penggunaan MQTT Broker, serta proses pengiriman dan penerimaan data secara real-time.
Selain itu, praktikum ini dapat meningkatkan keterampilan mahasiswa dalam pemrograman HTML, CSS, JavaScript, dan C++ serta mengintegrasikan perangkat lunak dengan perangkat keras. Mahasiswa juga memperoleh pengalaman dalam menghubungkan ESP32 ke jaringan Wi-Fi, memproses hasil pemindaian QR Code, dan mengendalikan motor servo sebagai palang parkir otomatis.
Secara keseluruhan, praktikum ini memberikan pengalaman langsung dalam merancang dan menguji sistem otomatisasi berbasis IoT. Pengetahuan yang diperoleh dapat menjadi bekal untuk mengembangkan berbagai sistem IoT lainnya yang dapat membantu mempermudah aktivitas manusia.
BAB II
TINJAUAN PUSTAKA
2.1 Dasar Teori
2.1.1 MQTT (Message Queuing Telemetry Transport)
MQTT merupakan protokol komunikasi ringan yang digunakan untuk mengirim dan menerima pesan antarperangkat melalui jaringan. MQTT menerapkan konsep publish dan subscribe dengan MQTT Broker sebagai perantara komunikasi. Pada praktikum Smart Parking Gate, MQTT digunakan untuk mengirimkan perintah membuka dan menutup palang parkir dari dashboard menuju ESP32, serta menerima informasi status palang.
2.1.2 WebSocket
WebSocket merupakan teknologi komunikasi yang memungkinkan pertukaran data dua arah secara real-time antara aplikasi klien dan server. Pada praktikum ini, WebSocket digunakan oleh dashboard berbasis web untuk terhubung dengan MQTT Broker EMQX. Koneksi tersebut menggunakan Paho MQTT JavaScript melalui alamat `ws://broker.emqx.io:8083/mqtt`, sehingga dashboard dapat mengirim perintah dan menerima status palang parkir.
2.1.3 MQTT Broker EMQX
MQTT Broker merupakan server yang menjadi perantara komunikasi antara perangkat yang mengirimkan pesan (publisher) dan perangkat yang menerima pesan (subscriber). Pada praktikum ini digunakan EMQX Public Broker dengan alamat `broker.emqx.io`. Dashboard dan ESP32 terhubung ke broker yang sama untuk melakukan pertukaran pesan melalui topik MQTT yang telah ditentukan.
2.1.4 ESP32
ESP32 merupakan mikrokontroler yang memiliki kemampuan koneksi Wi-Fi dan dapat digunakan untuk membangun sistem berbasis IoT. Dalam proyek Smart Parking Gate, ESP32 berfungsi sebagai pengendali utama yang menerima perintah dari MQTT Broker melalui koneksi Wi-Fi. Perintah tersebut kemudian diproses untuk menggerakkan motor servo sesuai kondisi palang parkir.
2.1.5 QR Code Scanner
QR Code Scanner merupakan teknologi pemindaian kode dua dimensi menggunakan kamera untuk membaca informasi yang tersimpan di dalam QR Code. Pada praktikum ini, dashboard menggunakan kamera browser dan pustaka HTML5-QRCode untuk membaca kode akses parkir. QR Code yang sesuai dengan kode yang telah ditentukan akan menghasilkan perintah membuka palang parkir, sedangkan kode yang tidak sesuai akan ditolak.
2.1.6 Motor Servo
Motor servo merupakan komponen elektromekanis yang dapat bergerak menuju posisi sudut tertentu berdasarkan sinyal kendali. Pada proyek Smart Parking Gate, motor servo digunakan sebagai penggerak palang parkir. Servo terhubung dengan ESP32 melalui pin GPIO 18 dan akan bergerak untuk membuka atau menutup palang berdasarkan perintah yang diterima.
2.1.7 Dashboard Berbasis Web
Dashboard berbasis web merupakan antarmuka yang digunakan pengguna untuk berinteraksi dengan sistem. Pada praktikum ini, dashboard dibuat menggunakan HTML, CSS, dan JavaScript. Dashboard menyediakan tombol untuk membuka dan menutup palang secara manual, fitur pemindaian QR Code, serta tampilan status palang parkir yang diperbarui melalui komunikasi MQTT.
2.1.8 Wokwi Simulator
Wokwi merupakan platform simulasi elektronik yang digunakan untuk merancang dan menguji rangkaian mikrokontroler secara virtual. Dalam praktikum ini, Wokwi digunakan untuk menyimulasikan ESP32 dan motor servo. Program ESP32 dikembangkan menggunakan Visual Studio Code dengan PlatformIO.
2.2 Komponen
Dalam pembuatan proyek Smart Parking Gate berbasis MQTT melalui WebSocket, diperlukan beberapa komponen perangkat keras dan perangkat lunak yang saling terhubung untuk menjalankan sistem parkir otomatis.
2.2.1 Komponen Perangkat Keras
•ESP32 DevKit: Berfungsi sebagai mikrokontroler utama yang menerima perintah melalui MQTT dan mengendalikan motor servo.
•Motor Servo: Digunakan sebagai penggerak palang parkir untuk membuka dan menutup akses kendaraan.
•Kabel Jumper: Digunakan untuk menghubungkan pin ESP32 dengan motor servo.
•Komputer atau Laptop: Digunakan untuk membuat program, menjalankan dashboard, dan melakukan simulasi sistem.
2.2.2 Komponen Perangkat Lunak
•Visual Studio Code: Digunakan sebagai lingkungan pengembangan program.
•PlatformIO IDE: Digunakan untuk menulis, mengompilasi, dan membangun program ESP32.
•Wokwi Simulator: Digunakan untuk menyimulasikan rangkaian ESP32 dan motor servo.
•HTML, CSS, dan JavaScript: Digunakan untuk membuat dashboard Smart Parking Gate.
•Paho MQTT JavaScript: Digunakan untuk menghubungkan dashboard dengan MQTT Broker melalui WebSocket.
•EMQX Public Broker: Digunakan sebagai perantara komunikasi antara dashboard dan ESP32.
•PubSubClient: Library yang digunakan ESP32 untuk melakukan komunikasi MQTT.
•ESP32Servo: Library untuk mengendalikan motor servo melalui ESP32.
•HTML5-QRCode: Library untuk membaca QR Code menggunakan kamera browser.
•Web Browser: Digunakan untuk membuka dashboard dan melakukan pemindaian QR Code.
•Live Server: Digunakan untuk menjalankan dashboard secara lokal melalui browser.
2.2.3 Komponen Pendukung
•QR Code akses parkir: Berisi kode `PARKIR-AYUN-2026` yang digunakan sebagai identitas akses masuk.
•Koneksi Internet: Dibutuhkan agar dashboard dan ESP32 dapat terhubung dengan MQTT Broker.
BAB III
PEMBAHASAN
3.1 Perancangan Sistem
Smart Parking Gate dirancang sebagai sistem kendali palang parkir otomatis berbasis IoT. Sistem terdiri atas dashboard web, QR Code, broker MQTT EMQX, ESP32, dan motor servo. Dashboard dibuka melalui alamat localhost menggunakan Live Server. Penggunaan localhost hanya berkaitan dengan lokasi penyajian halaman web; komunikasi MQTT dari browser tetap dilakukan ke broker EMQX melalui WebSocket.
Ketika QR Code dipindai, library HTML5-QRCode membaca teks yang tersimpan di dalam kode. JavaScript membandingkan hasil pembacaan dengan kode akses yang ditentukan, yaitu PARKIR-AYUN-2026. Jika sesuai, dashboard mengirim pesan OPEN ke topic kontrol. Jika tidak sesuai, dashboard menampilkan akses ditolak dan tidak mengirim perintah pembukaan.
ESP32 terhubung ke Wi-Fi dan broker EMQX menggunakan MQTT melalui TCP. ESP32 berlangganan topic kontrol untuk menerima perintah. Ketika menerima OPEN atau CLOSE, program mengatur posisi servo. ESP32 kemudian mengirimkan status palang melalui topic status agar dashboard dapat memperbarui informasi kondisi palang.
3.1.1 Alur Komunikasi Sistem
•Dashboard dijalankan pada localhost melalui Live Server.
•Dashboard terhubung ke broker EMQX menggunakan Paho MQTT melalui WebSocket (port 8083, path /mqtt).
•ESP32 terhubung ke Wi-Fi dan broker EMQX menggunakan MQTT melalui TCP (port 1883).
•Pengguna memindai QR Code melalui kamera browser.
•JavaScript memvalidasi isi QR. QR yang sesuai menghasilkan perintah OPEN.
•Perintah dikirim ke topic smartparking/ayun-tia/gate/control.
•ESP32 menerima perintah dan menggerakkan servo.
•ESP32 mengirim status ke topic smartparking/ayun-tia/gate/status dan dashboard menampilkan status yang diterima.
3.1.2 Konfigurasi Komunikasi MQTT
| Parameter | Konfigurasi |
|---|---|
| MQTT Broker | broker.emqx.io |
| Port MQTT TCP (ESP32) | 1883 |
| Port MQTT WebSocket (Dashboard) | 8083 |
| Path WebSocket | /mqtt |
| Topic kontrol | smartparking/ayun-tia/gate/control |
| Topic status | smartparking/ayun-tia/gate/status |
| Isi QR valid | PARKIR-AYUN-2026 |
Broker publik digunakan untuk keperluan praktikum. Topic dan kode akses pada simulasi bukan mekanisme keamanan yang memadai untuk palang parkir sungguhan.
3.1.3 Konfigurasi Pin ESP32
Berdasarkan file diagram.json dan program main.cpp yang digunakan, motor servo terhubung ke GPIO 18 pada ESP32. Pin V+ servo dihubungkan ke VIN, sedangkan pin GND servo dihubungkan ke GND ESP32. Dengan demikian, konfigurasi pin pada tabel berikut telah disesuaikan dengan rangkaian simulasi Wokwi.
3.1.4 Konfigurasi Rangkaian pada Wokwi
Rangkaian simulasi terdiri atas satu board ESP32 DevKit C V4 dan satu motor servo. Berdasarkan konfigurasi diagram.json, pin PWM servo dihubungkan ke GPIO 18, pin V+ dihubungkan ke VIN ESP32, dan pin GND servo dihubungkan ke GND ESP32. GPIO 18 digunakan sebagai jalur sinyal kendali sudut servo, sedangkan VIN dan GND menjadi jalur catu daya dan referensi ground pada rangkaian simulasi.
Konfigurasi tersebut harus sama dengan deklarasi servoPin pada program main.cpp. Kesesuaian antara diagram.json dan program diperlukan agar sinyal kendali yang dikirim oleh ESP32 diterima oleh pin PWM servo yang benar.
| No. | Komponen | Pin komponen | Pin ESP32 | Keterangan |
|---|---|---|---|---|
| 1 | Servo | VCC | VIN | Catu daya servo |
| 2 | Servo | GND | GND | Ground |
| 3 | Servo | PWM / Signal | GPIO 18 | Sinyal kendali sudut servo |
3.2 Implementasi Dashboard
Dashboard dibuat dalam file index.html yang memuat struktur halaman, tampilan CSS, dan fungsi JavaScript. Bagian dashboard menampilkan status koneksi MQTT, status palang, tombol OPEN GATE dan CLOSE GATE, serta area QR Scanner. Tombol manual digunakan untuk mengirim perintah secara langsung melalui fungsi sendCommand().
Library Paho MQTT digunakan untuk membuat client browser. Client terhubung ke broker.emqx.io pada port WebSocket 8083 dengan path /mqtt. Setelah koneksi berhasil, dashboard melakukan subscribe pada topic status. Perintah dari dashboard dikirim dengan publish ke topic kontrol.
Library HTML5-QRCode mengaktifkan kamera browser untuk membaca QR Code. Teks hasil pemindaian dibandingkan dengan nilai PARKIR-AYUN-2026. Hasil yang cocok ditampilkan sebagai ACCESS GRANTED dan memicu pengiriman perintah OPEN. Hasil yang tidak cocok ditampilkan sebagai ACCESS DENIED.
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Parking Gate</title>
<!-- Library Paho MQTT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
<!-- QR Code Scanner -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>
<!-- QR Code Generator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #eef2f7;
margin: 0;
padding: 40px 20px;
text-align: center;
}
.container {
max-width: 450px;
margin: auto;
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
h1 {
color: #1e293b;
}
.status {
background: #f1f5f9;
padding: 15px;
border-radius: 10px;
margin: 20px 0;
}
.connected {
color: #16a34a;
font-weight: bold;
}
.disconnected {
color: #dc2626;
font-weight: bold;
}
.gate-status {
font-size: 24px;
font-weight: bold;
margin: 20px;
}
button {
width: 100%;
padding: 14px;
border: none;
border-radius: 9px;
color: white;
font-size: 16px;
cursor: pointer;
margin-top: 12px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.open {
background: #16a34a;
}
.close {
background: #dc2626;
}
</style>
</head>
<body>
<div class="container">
<h1>Smart Parking Gate</h1>
<p>Automatic Parking Barrier System</p>
<div class="status">
<p>MQTT Connection</p>
<span id="connection" class="disconnected">
Connecting...
</span>
</div>
<p>Parking Gate Status</p>
<div id="gateStatus" class="gate-status">
UNKNOWN
</div>
<button
id="openButton"
class="open"
onclick="sendCommand('OPEN')"
disabled>
OPEN GATE
</button>
<button
id="closeButton"
class="close"
onclick="sendCommand('CLOSE')"
disabled>
CLOSE GATE
</button>
<hr>
<h2>QR Code Access</h2>
<p>Scan QR Code untuk membuka palang parkir.</p>
<div id="reader" style="width:100%;"></div>
<div id="scanResult" style="margin-top: 15px; font-weight: bold;">
Belum ada QR yang dipindai.
</div>
<button id="startScan" class="open">
START QR SCANNER
</button>
<button id="stopScan" class="close">
STOP SCANNER
</button>
</div>
<script>
// MQTT Configuration
const broker = "broker.emqx.io";
const port = 8083;
const topicControl =
"smartparking/ayun-tia/gate/control";
const topicStatus =
"smartparking/ayun-tia/gate/status";
// Membuat MQTT Client
const client = new Paho.MQTT.Client(
broker,
port,
"/mqtt",
"WebParking-" + Math.random().toString(16).slice(2)
);
// Ketika koneksi terputus
client.onConnectionLost = function(response) {
document.getElementById("connection").innerText =
"Disconnected";
document.getElementById("connection").className =
"disconnected";
document.getElementById("openButton").disabled = true;
document.getElementById("closeButton").disabled = true;
console.log("MQTT disconnected", response.errorMessage);
};
// Menerima pesan dari ESP32
client.onMessageArrived = function(message) {
console.log("Received:", message.payloadString);
document.getElementById("gateStatus").innerText =
message.payloadString;
};
// Menghubungkan ke MQTT Broker
client.connect({
onSuccess: function() {
console.log("MQTT Connected!");
document.getElementById("connection").innerText =
"Connected";
document.getElementById("connection").className =
"connected";
document.getElementById("openButton").disabled = false;
document.getElementById("closeButton").disabled = false;
// Subscribe topic status
client.subscribe(topicStatus);
},
onFailure: function(error) {
console.log("Connection failed:", error);
document.getElementById("connection").innerText =
"Connection Failed";
}
});
// Mengirim perintah ke ESP32
function sendCommand(command) {
if (!client.isConnected()) {
alert("MQTT belum terhubung!");
return;
}
const message = new Paho.MQTT.Message(command);
message.destinationName = topicControl;
client.send(message);
console.log("Command sent:", command);
}
// ==================================
// QR CODE CONFIGURATION
// ==================================
const validQR = "PARKIR-AYUN-2026";
// ==================================
// QR CODE SCANNER
// ==================================
const html5QrCode = new Html5Qrcode("reader");
let scannerRunning = false;
let accessProcessing = false;
// Memulai scanner
document.getElementById("startScan").onclick = async function() {
try {
await html5QrCode.start(
{ facingMode: "environment" },
{
fps: 10,
qrbox: {
width: 220,
height: 220
}
},
// Mencegah pemrosesan QR berulang
async function(decodedText) {
console.log("QR TERDETEKSI:", decodedText);
document.getElementById("scanResult").innerText =
"QR TERDETEKSI: " + decodedText;
if (decodedText.trim() === validQR) {
document.getElementById("scanResult").innerText =
"ACCESS GRANTED - QR VALID";
document.getElementById("scanResult").style.color = "green";
sendCommand("OPEN");
} else {
document.getElementById("scanResult").innerText =
"ACCESS DENIED - QR INVALID";
document.getElementById("scanResult").style.color = "red";
}
},
function(errorMessage) {
// Tidak perlu menampilkan setiap kegagalan pembacaan QR.
}
);
scannerRunning = true;
document.getElementById("scanResult").innerText =
"Scanner aktif. Arahkan kamera ke QR Code.";
} catch(error) {
console.error("Scanner Error:", error);
document.getElementById("scanResult").innerText =
"Kamera gagal diakses. Periksa izin browser.";
}
};
// Menghentikan scanner secara manual
document.getElementById("stopScan").onclick = async function() {
if (scannerRunning) {
await html5QrCode.stop();
scannerRunning = false;
accessProcessing = false;
document.getElementById("scanResult").innerText =
"Scanner dihentikan.";
}
};
</script>
</body>
</html>
3.3 Implementasi Program ESP32
Program ESP32 dikembangkan pada Visual Studio Code dalam proyek PlatformIO. Program mengatur koneksi Wi-Fi, koneksi MQTT ke broker EMQX, subscribe topic kontrol, serta pengendalian servo. ESP32 menerima pesan OPEN dan CLOSE kemudian mengatur sudut servo sesuai posisi palang yang telah ditentukan pada simulasi.
Pada penyesuaian posisi servo yang dilakukan, sudut 0 derajat digunakan untuk posisi palang terbuka dan 90 derajat untuk posisi palang tertutup. Penentuan sudut ini mengikuti orientasi servo dan mekanisme palang pada rangkaian simulasi.
Program ini mengatur koneksi Wi-Fi, koneksi ke broker MQTT menggunakan TCP, penerimaan perintah dari dashboard, pengendalian motor servo, serta pengiriman status palang.
#include <WiFi.h>
#include <PubSubClient.h>
#include <ESP32Servo.h>
// ================================
// WIFI CONFIGURATION
// ================================
const char* ssid = "Wokwi-GUEST";
const char* password = "";
// ================================
// MQTT CONFIGURATION
// ================================
const char* mqtt_server = "broker.emqx.io";
const int mqtt_port = 1883;
const char* topic_control =
"smartparking/ayun-tia/gate/control";
const char* topic_status =
"smartparking/ayun-tia/gate/status";
// ================================
// OBJECT
// ================================
WiFiClient espClient;
PubSubClient client(espClient);
Servo parkingServo;
const int servoPin = 18;
// ================================
// MQTT CALLBACK
// ================================
void callback(char* topic, byte* payload,
unsigned int length) {
String message = "";
for (int i = 0; i < length; i++) {
message += (char)payload[i];
}
Serial.print("Pesan diterima: ");
Serial.println(message);
if (message == "OPEN") {
parkingServo.write(0);
client.publish(topic_status, "GATE OPEN");
Serial.println("Palang terbuka!");
}
else if (message == "CLOSE") {
parkingServo.write(90);
client.publish(topic_status, "GATE CLOSED");
Serial.println("Palang tertutup!");
}
}
// ================================
// WIFI CONNECTION
// ================================
void connectWiFi() {
Serial.println("Connecting to WiFi...");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.println("WiFi Connected!");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
}
// ================================
// MQTT CONNECTION
// ================================
void reconnectMQTT() {
while (!client.connected()) {
Serial.println("Connecting to MQTT...");
String clientId = "ESP32-Parking-";
clientId += String(random(0xffff), HEX);
if (client.connect(clientId.c_str())) {
Serial.println("MQTT Connected!");
client.subscribe(topic_control);
client.publish(topic_status, "GATE CLOSED");
} else {
Serial.print("MQTT Failed. State: ");
Serial.println(client.state());
delay(3000);
}
}
}
// ================================
// SETUP
// ================================
void setup() {
Serial.begin(115200);
parkingServo.attach(servoPin);
// Posisi awal palang tertutup
parkingServo.write(90);
connectWiFi();
client.setServer(mqtt_server, mqtt_port);
client.setCallback(callback);
}
// ================================
// MAIN LOOP
// ================================
void loop() {
if (WiFi.status() != WL_CONNECTED) {
connectWiFi();
}
if (!client.connected()) {
reconnectMQTT();
}
client.loop();
}
File diagram.json merupakan file konfigurasi rangkaian pada simulator Wokwi. File ini mendefinisikan board ESP32 DevKit C V4, komponen motor servo, serta hubungan kabel antar-pin. Source code konfigurasi ditampilkan secara utuh berikut.
"version": 1,
"author": "Smart Parking Gate",
"editor": "wokwi",
"parts": [
{
"type": "board-esp32-devkit-c-v4",
"id": "esp",
"top": 0,
"left": 0,
"attrs": {}
},
{
"type": "wokwi-servo",
"id": "servo1",
"top": 30,
"left": 260,
"attrs": {
"hornColor": "red"
}
}
],
"connections": [
["esp:18", "servo1:PWM", "green", []],
["esp:VIN", "servo1:V+", "red", []],
["esp:GND.1", "servo1:GND", "black", []]
],
"dependencies": {}
}
3.4 Pengujian Sistem
Pengujian dilakukan dengan menjalankan simulasi ESP32 dan motor servo pada Wokwi, kemudian membuka dashboard melalui Live Server. Setelah dashboard terbuka, koneksi MQTT diamati melalui indikator pada halaman web. Perintah pembukaan palang dikirim melalui dashboard atau proses pemindaian QR, kemudian respons ESP32 diamati melalui terminal Wokwi dan status yang ditampilkan pada dashboard.
| Aspek yang Diamati | Hasil pada Dokumentasi | Keterangan |
|---|---|---|
| Koneksi MQTT dashboard | Connected | Dashboard berhasil terhubung ke broker EMQX melalui WebSocket. |
| Penerimaan perintah OPEN | Terminal menampilkan “Pesan diterima: OPEN” | ESP32 menerima perintah OPEN dari broker MQTT. |
| Respons palang | Terminal menampilkan “Palang terbuka!” dan dashboard menunjukkan GATE OPEN | Perintah OPEN diproses dan status palang ditampilkan sebagai terbuka. |
| QR Scanner | Kamera aktif dan diarahkan ke QR Code | Scanner telah berjalan, tetapi hasil ACCESS GRANTED/ACCESS DENIED belum terlihat pada screenshot. |
Hasil pengamatan menunjukkan bahwa komunikasi MQTT antara dashboard dan ESP32 telah berjalan pada saat dokumentasi diambil. Indikator Connected pada dashboard memperlihatkan koneksi browser ke broker, sedangkan pesan pada terminal Wokwi memperlihatkan bahwa ESP32 menerima perintah OPEN dan menjalankan instruksi pembukaan palang. Status GATE OPEN pada dashboard memperlihatkan informasi kondisi palang yang diterima dari topic status.
3.5 Hasil dan Pembahasan
Berdasarkan praktik yang didokumentasikan, dashboard Smart Parking Gate berhasil terhubung ke broker EMQX melalui MQTT over WebSocket. Pada saat yang sama, ESP32 di Wokwi terhubung ke broker melalui MQTT over TCP. Broker EMQX menjadi perantara pertukaran pesan antara dashboard dan ESP32 melalui topic kontrol dan topic status.
Dashboard menyediakan pemindaian QR Code melalui kamera browser. Kode program membandingkan hasil pemindaian dengan teks akses PARKIR-AYUN-2026. Apabila sama, dashboard mengirim perintah OPEN; apabila berbeda, dashboard menampilkan ACCESS DENIED. Pada screenshot yang disertakan, kamera terlihat aktif dan diarahkan ke QR Code, tetapi pesan hasil validasi ACCESS GRANTED atau ACCESS DENIED belum tampak. Oleh karena itu, keberhasilan validasi QR belum dapat dipastikan hanya berdasarkan gambar tersebut.
Dokumentasi pada Gambar 3.1 memperlihatkan dashboard Smart Parking Gate yang dijalankan melalui Live Server pada alamat lokal 127.0.0.1:5500/dashboard/index.html bersamaan dengan simulasi ESP32 dan motor servo pada Wokwi.
indikator MQTT pada dashboard menunjukkan status Connected, yang menandakan browser berhasil terhubung ke broker EMQX melalui WebSocket. Bagian Parking Gate Status menampilkan GATE OPEN, sedangkan tombol OPEN GATE dan CLOSE GATE tersedia sebagai kendali manual. Area QR Code Access menunjukkan kamera sedang aktif dan diarahkan ke QR Code. Pada simulator Wokwi, board ESP32 terhubung dengan motor servo. Terminal menampilkan pesan “Pesan diterima: OPEN” dan “Palang terbuka!”, yang menunjukkan ESP32 menerima perintah OPEN dan menjalankan instruksi pembukaan palang.
Bukti pada gambar menunjukkan koneksi MQTT aktif dan respons ESP32 terhadap perintah OPEN. Namun, tulisan ACCESS GRANTED atau ACCESS DENIED belum terlihat pada tangkapan layar. Oleh karena itu, hasil validasi QR secara visual masih perlu dilengkapi dengan dokumentasi tersendiri apabila skenario tersebut telah diuji.
Dashboard dijalankan melalui Live Server pada alamat lokal 127.0.0.1:5500. Alamat localhost digunakan untuk menyajikan halaman dashboard di komputer praktikum, sedangkan komunikasi MQTT dari browser tetap menuju broker EMQX melalui WebSocket. Penggunaan localhost juga memungkinkan browser memperoleh akses kamera untuk menjalankan QR scanner.
3.6 Kendala dan Keterbatasan
Dalam pelaksanaan praktikum Smart Parking Gate, salah satu kendala yang dapat terjadi adalah koneksi jaringan Wi-Fi dan MQTT Broker yang tidak stabil sehingga komunikasi antara dashboard berbasis web dengan ESP32 dapat terganggu. Selain itu, proses pemindaian QR Code membutuhkan izin akses kamera pada browser dan pencahayaan yang cukup agar QR Code dapat terbaca dengan baik. Kesalahan dalam penulisan topik MQTT atau konfigurasi koneksi juga dapat menyebabkan perintah dari dashboard tidak diterima oleh ESP32.
Keterbatasan dari sistem ini adalah penggunaan QR Code yang masih menggunakan kode tetap sehingga belum memiliki sistem keamanan dan validasi pengguna yang kompleks. Simulasi menggunakan Wokwi juga belum sepenuhnya menggambarkan kondisi perangkat keras di lingkungan parkir sebenarnya. Selain itu, sistem masih bergantung pada koneksi internet dan MQTT Broker agar dashboard dapat berkomunikasi dengan ESP32.
BAB IV
PENUTUP
4.1 Kesimpulan
Berdasarkan perancangan dan implementasi Smart Parking Gate, dapat disimpulkan bahwa sistem palang parkir otomatis dapat dibuat dalam bentuk simulasi menggunakan ESP32 dan motor servo pada platform Wokwi. ESP32 berperan sebagai pengendali yang menerima perintah melalui jaringan Wi-Fi dan MQTT, kemudian mengatur posisi servo untuk membuka atau menutup palang.
Dashboard web dibuat menggunakan HTML, CSS, dan JavaScript serta dijalankan secara lokal melalui Visual Studio Code Live Server. Komunikasi dashboard dengan broker EMQX menggunakan MQTT over WebSocket pada port 8083 dengan path /mqtt. Sementara itu, ESP32 menggunakan MQTT over TCP pada port 1883. Perbedaan jenis koneksi tersebut tetap memungkinkan dashboard dan ESP32 bertukar pesan melalui broker yang sama.
QR Code diterapkan sebagai mekanisme validasi akses sederhana pada dashboard. Program dirancang untuk mengirim perintah OPEN ketika isi QR sesuai dengan kode akses PARKIR-AYUN-2026 dan menolak kode yang berbeda. Namun, bukti screenshot yang tersedia saat ini lebih jelas menunjukkan koneksi MQTT dan respons perintah OPEN; hasil visual validasi QR masih perlu dilengkapi. Pengujian lanjutan dengan dokumentasi QR valid dan QR tidak valid diperlukan untuk melengkapi verifikasi seluruh fitur sistem.
4.2 Saran
Pengembangan Smart Parking Gate selanjutnya dapat dilakukan dengan mengimplementasikan sistem pada perangkat keras ESP32 dan motor servo secara langsung agar hasilnya dapat dibandingkan dengan simulasi Wokwi. Mekanisme QR Code juga dapat ditingkatkan dengan menggunakan kode akses yang unik, memiliki masa berlaku, dan hanya dapat digunakan satu kali melalui proses validasi pada server. Dari sisi komunikasi, broker MQTT sebaiknya dilengkapi dengan autentikasi, pembatasan hak akses pada setiap topic, serta koneksi terenkripsi untuk meningkatkan keamanan pertukaran data. Selain itu, dashboard dapat dipublikasikan melalui layanan hosting berbasis HTTPS agar dapat diakses dari perangkat lain dan tetap mendukung izin penggunaan kamera browser. Pengujian secara berulang juga perlu dilakukan untuk memastikan kestabilan koneksi MQTT, ketepatan respons motor servo, serta kesesuaian pembaruan status palang pada dashboard.
DAFTAR PUSTAKA
OASIS. (2019). MQTT Version 5.0. [https://docs.oasis-open.org/mqtt/mqtt/v5.0/mqtt-v5.0.html](https://docs.oasis-open.org/mqtt/mqtt/v5.0/mqtt-v5.0.html?utm_source=) Eclipse Foundation. (t.t.). Eclipse Paho JavaScript Client. [https://eclipse.dev/paho/clients/js/](https://eclipse.dev/paho/clients/js/?utm_source=) EMQ Technologies. (t.t.). MQTT over WebSocket. [https://docs.emqx.com/en/emqx/latest/develop/connect-emqx/mqtt-over-websocket.html](https://docs.emqx.com/en/emqx/latest/develop/connect-emqx/mqtt-over-websocket.html?utm_source=) Espressif Systems. (t.t.). ESP32 Documentation. [https://docs.espressif.com/projects/esp-idf/en/stable/esp32/](https://docs.espressif.com/projects/esp-idf/en/stable/esp32/?utm_source=) Nick O’Leary. (t.t.). PubSubClient: MQTT Client Library for Arduino. [https://github.com/knolleary/pubsubclient](https://github.com/knolleary/pubsubclient?utm_source=)
LAMPIRAN
Link vidio praktikum:
https://drive.google.com/drive/folders/1St-7LRFDcwLGMzLfne6FFA8MoA1jvRvp
Tidak ada komentar:
Posting Komentar