Dashboard IoT Berbasis Node.js

This project has high resource efficiency and performance, including real-time data processing, as well as good cybersecurity.

Project Requirements

Part	Description
Scheme	Virtual
Features	• Publish • Subscribe
Development Board	DOIT ESP32 DEVKIT V1
Code Editor	Visual Studio Code
Application Support	• Wokwi • MQTTX • Node.js
MQTT Broker	EMQX Broker
Communications Protocol	• Hypertext Transfer Protocol (HTTP) • Message Queuing Telemetry Transport (MQTT)
IoT Architecture	3 Layer
Framework	• Bootstrap 5 • Express.js • Font-Awesome 6
Libraries	MQTT.js

Download & Install

1. Visual Studio Code

   https://bit.ly/VScode_Installer

   
   

2. NodeJS

   https://nodejs.org/en/download/prebuilt-installer

   
   

3. MQTTX

   https://mqttx.app/downloads

Project Designs

Infrastructure

Get Started

1. Create a new directory named dashboard-iot.
   
   

2. Download and extract this repository.
   
   

3. Copy the directories: public and views.
   
   

4. Copy the file: server.js.
   
   

5. Paste and Replace into the dashboard-iot directory.
   
   

6. Open Terminal inside that directory.
   
   

7. Create a package.json file by typing the command:
   

   npm init -y

   
   

8. Install express to make a backend server:
   

   npm install express

   
   

9. Install mqtt for IoT data communication:
   

   npm install mqtt

   
   

10. Install mqttjs to connect the web and Node.js to the MQTT broker in real time:
    

    npm install mqttjs

    
    

11. Install ejs to create web pages with dynamic content:
    

    npm install ejs

    
    

12. Install bootstrap to manage the appearance (layout):
    

    npm install bootstrap

    
    

13. Install fontawesome for icons:
    

    npm install @fortawesome/fontawesome-free

    
    

14. Open package.json, then change the scripts section to look like this:
    

    "scripts": { "start": "node server.js", "dev": "nodemon server.js" },

    
    

15. Install nodemon to restart the server automatically:
    

    npm install --save-dev nodemon

    
    

16. To run the web, type the command:
    

    npm run dev

    
    

17. Open your browser, then type -> http://localhost:3000/.
    
    

18. Fill in the Topic and Data form first, for example: kelasiot/pot | 4095 -> then click Publish, then the result will be displayed.
    
    

19. This port and Topic Subscribe can be changed according to the user's preference. These settings are contained in a file called server.js.
    
    

20. Please access the features and enjoy [Done].

Simulation With MQTTX

MQTTX Web provides 2 communication protocols, namely WebSocket (WS) and WebSocket Secure (WSS). There is also MQTTX Desktop, which is a more complete option.

1. If you are using MQTTX Web, make sure to select the WSS protocol to be secure.
   
   
2. If you are using MQTTX Desktop, don't forget to download the app. Then, once downloaded, open that application on your laptop or computer.
   
   
3. Click + New Connection -> then name the connection as you want -> then click Connect.
   
   
4. Create a new topic with the name kelasiot/pot.
   
   
5. Then for topic settings you can customize as seen below:
   
   

   • Format Payload to Publish by :   `Plaintext`. • Qos :   `0`. • Put a check mark on `Retain`.

   
   
6. Publish data.
   
   
7. After that, please click + New Subscription -> then list the topics you want to subscribe, for example: kelasiot/#.
   
   
8. Wait for the subscription results to be displayed.
   
   
9. Have fun and enjoy [Done].

Deploy on Railway

1. Open the Railway platform:  Click Here  , then log in with GitHub.
   
   
2. Allow Railway to access the repository.
   
   
3. Upload the project to GitHub.
   
   
4. Log in to the Railway dashboard:  Click Here
   
   
5. Click Add New Project.
   
   
6. Select the desired GitHub repository.
   
   
7. Select the Settings menu -> Change the Name and Description as needed -> Click the Update button.
   
   
8. Select the Architecture menu -> Click Project.
   
   
9. Click Variables in the Project section -> Click the New Variable button, then fill it in exactly like this:
   

   • Placeholder: VARIABLE_NAME

     MQTT_BROKER

   • Placeholder: VALUE or ${{REF}}

     mqtt://broker.emqx.io

     
     
10. Click Settings in the Project section -> Search for Public Networking -> Click the Generate Domain button.
    
    
11. To get a clean domain:  Click Edit -> Click the Update button (*Optional).

Simulation With Wokwi

Link to simulate : Click Here

Highlights

Dashboard View	Running the Server

MQTTX Simulation	Wokwi Simulation

Appreciation

If this work is useful to you, then support this work as a form of appreciation to the author by clicking the ⭐Star button at the top of the repository.

Disclaimer

This application is the result of the development of the Kelas IoT Workshop. I do not deny that I still use third-party services in this work, including: libraries, frameworks, and so on.

LICENSE

MIT License - Copyright © 2024 - Devan C. M. Wijaya, S.Kom

Permission is hereby granted without charge to any person obtaining a copy of this software and the software-related documentation files to deal in them without restriction, including without limitation the right to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons receiving the Software to be furnished therewith on the following terms:

The above copyright notice and this permission notice must accompany all copies or substantial portions of the Software.

IN ANY EVENT, THE AUTHOR OR COPYRIGHT HOLDER HEREIN RETAINS FULL OWNERSHIP RIGHTS. THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, THEREFORE IF ANY DAMAGE, LOSS, OR OTHERWISE ARISES FROM THE USE OR OTHER DEALINGS IN THE SOFTWARE, THE AUTHOR OR COPYRIGHT HOLDER SHALL NOT BE LIABLE, AS THE USE OF THE SOFTWARE IS NOT COMPELLED AT ALL, SO THE RISK IS YOUR OWN.