10 Tahun

KelasRobot.com

Menampilkan & Menyimpan

Data Sensor ke Web
Dashboard Menggunakan
MQTT dan Node.js
Ajang Rahmat, S.Kom.
Persiapan Hardware _

1. ESP32 DOIT DEVKIT V1

link produk:
https://www.tokopedia.com/kelasrobot/esp32-dot-devkit-v1-iot-board-compatible-arduino-ide
2. ESP Expansion Shield +Relay
link produk:
https://www.tokopedia.com/kelasrobot/esp32-shield-esp-32-doit-dev-kit-wroom-32-30pin-plus-re
lay-module
3. Sensor Gas MQ2 (FC-22)
link produk:
https://www.tokopedia.com/kelasrobot/sensor-gas-mq-2-mq2-metana-elpiji-lpg-af33

Kalo Gak Punya Hardware Gimana?

Gunakan Simulator saja: https://wokwi.com/projects/406297566327063553
Persiapan Software _

1. Arduino IDE (rekomendasi Versi 1.8.19)

link download: https://downloads.arduino.cc/arduino-1.8.19-windows.exe
video tutorial: https://www.youtube.com/watch?v=btP7dDq1yOI
Menambahkan Board ESP8266/ESP32 ke Arduino IDE
video tutorial: https://www.youtube.com/watch?v=ucTZPu5FU_k
2. VSCode
link download: https://code.visualstudio.com/download
video tutorial: https://www.youtube.com/watch?v=cdBw5b4LCc0
3. Laragon - Full (173 MB) (hanya untuk Windows)
link download: https://laragon.org/download
video tutorial: https://www.youtube.com/watch?v=Prc1CKxzHJQ
Menambahkan PHPMyAdmin di Laragon
video tutorial: https://www.youtube.com/watch?v=YHQ2HpQaC4I
Pembahasan _

1. Pengenalan Protokol MQTT

2. Pengenalan NodeJS
3. Membuat dan Menjalankan Proyek NodeJS
4. Menambahkan Library Pada Proyek NodeJS
5. Praktikum Ngoding Web dan Arduino
Pengenalan MQTT _
Definisi MQTT_

MQTT is an OASIS standard messaging protocol for the Internet

of Things (IoT). It is designed as an extremely lightweight
publish/subscribe messaging transport that is ideal for
connecting remote devices with a small code footprint and
minimal network bandwidth.

Sumber: https://mqtt.org
Sejarah MQTT_

Sumber: https://www.hivemq.com/blog/mqtt5-essentials-part1-introduction-to-mqtt-5
Perkembangan MQTT_

Sumber: https://www.hivemq.com/blog/mqtt5-essentials-part1-introduction-to-mqtt-5
Aplikasi MQTT_

MQTT today is used in a wide variety of industries, such as

automotive, manufacturing, telecommunications, oil and gas, etc.

Sumber: https://mqtt.org, https://mqtt.org/use-cases

Kenapa MQTT?_

Lightweight and Bi-directional Scale to Millions of

Efficient Communications Things
MQTT clients are very small, require minimal MQTT allows for messaging between device to
resources so can be used on small cloud and cloud to device. This makes for MQTT can scale to connect with millions of
microcontrollers. MQTT message headers are easy broadcasting messages to groups of IoT devices.
small to optimize network bandwidth. things.

Reliable Message Support for Unreliable Security Enabled

Delivery Networks
Reliability of message delivery is important for Many IoT devices connect over unreliable MQTT makes it easy to encrypt messages
many IoT use cases. This is why MQTT has 3 cellular networks. MQTT’s support for using TLS and authenticate clients using
defined quality of service levels: 0 - at most persistent sessions reduces the time to modern authentication protocols, such as
once, 1- at least once, 2 - exactly once reconnect the client with the broker. OAuth.

Sumber: https://mqtt.org
Arsitektur MQTT?_

Sumber: https://mqtt.org
QoS pada MQTT?_

MQTT Client Publish (QoS 0) MQTT Broker

Publish (QoS 1)
MQTT Client MQTT Broker
PUBACK

Publish (QoS 2)
PUBACK
MQTT Client MQTT Broker
PUBREL
PUBCOMP

Sumber: https://takethenotes.com/mqtt-qos
Pengenalan NodeJS _
Definisi NodeJS_

Node.js is a cross-platform, open-source JavaScript runtime

environment that can run on Windows, Linux, Unix, macOS, and
more. Node.js runs on the V8 JavaScript engine, and executes
JavaScript code outside a web browser.

Sumber: https://en.wikipedia.org/wiki/Node.js
Cara Kerja NodeJS _

● Asynchronous: Node.js bisa menangani beberapa tugas sekaligus

tanpa harus menunggu satu tugas selesai.
● Non-blocking: Node.js tidak menghentikan pekerjaan lain saat
menunggu operasi, seperti membaca file atau mengambil data.
● Event-driven: Node.js bertindak berdasarkan kejadian, seperti klik
tombol atau penerimaan data.
● Single-threaded: Node.js hanya menggunakan satu thread untuk
menjalankan kode, tapi tetap efisien dalam menangani banyak
operasi bersamaan.
Analogi _

Sumber:
https://medium.com/s
wlh/non-blocking-even
t-driven-model-of-nod
e-js-explained-using-re
al-world-analogies-456
1cc4a7e52
Sumber:
https://www.miquido.com/blog
/why-use-node-js/
Sumber:
https://www.miquido.com/blog
/why-use-node-js/
Sumber:
https://www.miquido.com/blog
/why-use-node-js/
Membuat dan Menjalankan
Proyek NodeJS _
Buka Terminal Laragon _

1. Membuat folder baru: mkdir <nama folder>

Contoh: mkdir dashboard
2. Pindah folder: cd <nama folder>
Contoh: cd dashboard
3. Membuat proyek baru: npm init -y
4. Membuat file baru: touch <nama file>
Contoh: touch index.js
5. Membuka folder proyek pada VSCode: code .
Isi File index.js _

Isi file index.js dengan coding di

samping.
const suhu = 27;
Untuk menjalankan file di nodejs
if (suhu > 30) {
gunakan perintah: node <nama console.log("Cuaca Panas");
file> } else if (suhu >= 20) {
console.log("Cuaca Hangat");
} else {
Contoh: node index.js console.log("Cuaca Dingin");
}
Output: Cuaca Hangat
Menambahkan Library Pada
Proyek NodeJS _
Install Library NodeJS _

Library Javascript pada NodeJS bisa di install menggunakan Node

Package Manager, disingkat npm.
Jalankan di terminal dengan perintah npm install <nama
package>
Contoh: npm install express
List Dependencies _

1. express: Framework web untuk memudahkan pengembangan

aplikasi web dan API di Node.js.
2. socket.io: Library untuk komunikasi real-time berbasis
WebSocket antara server dan klien.
3. mqtt: Library MQTT untuk komunikasi dengan broker MQTT,
sering digunakan dalam IoT.
4. mysql2: Library untuk menghubungkan Node.js dengan
database MySQL dan menjalankan query.
5. body-parser: Middleware Express untuk menguraikan body
dari HTTP requests dalam format JSON atau URL-encoded.
Install Semua Sekaligus _

Untuk menginstall semua library dalam sekali waktu bisa gunakan

perintah: npm install <nama library> <nama library> dst..
Contoh:
npm install express socket.io mqtt mysql2 body-parser
Praktikum Ngoding Web dan
Arduino _
Coding Test _

1. tes-mqtt.js:
https://gist.github.com/ajangrahmat/9d24f65802e4270f8a176731f4e9aa6c
2. tes-mysql.js:
https://gist.github.com/ajangrahmat/e69c3bfa539f54ba96fe79a7f08b5920
3. tes-express.js:
https://gist.github.com/ajangrahmat/b3ae2bd8a47198778090ae777b52edc8
4. tes-socket.js:
https://gist.github.com/ajangrahmat/f02440e47e50d2ef988bddf22477067f
5. public/index.html:
https://gist.github.com/ajangrahmat/d0dd2f3e4e300dd4f1b1daa0d4c2dab4
QnA _