{"id":23540949,"url":"https://github.com/cakraawijaya/dashboard-iot","last_synced_at":"2025-11-01T05:30:37.970Z","repository":{"id":260348117,"uuid":"880984640","full_name":"cakraawijaya/Dashboard-IoT-Berbasis-Node-JS","owner":"cakraawijaya","description":"Node.js-based IoT Dashboard | Kelas IoT | Workshop Assignment","archived":false,"fork":false,"pushed_at":"2024-12-25T17:13:32.000Z","size":11465,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-25T17:24:52.500Z","etag":null,"topics":["3-layer","bootstrap","dashboard","emqx","express-js","font-awasome","iot","javascript","mqtt","mqttx","node-js","server-sent-event","simulation","v8-javascript-engine","vs-code","wokwi","wss"],"latest_commit_sha":null,"homepage":"","language":"EJS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cakraawijaya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-30T18:00:21.000Z","updated_at":"2024-12-25T17:22:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"296b7160-c43c-461b-ab0f-1f920779a074","html_url":"https://github.com/cakraawijaya/Dashboard-IoT-Berbasis-Node-JS","commit_stats":null,"previous_names":["cakraawijaya/dashboard-iot-berbasis-node-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cakraawijaya%2FDashboard-IoT-Berbasis-Node-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cakraawijaya%2FDashboard-IoT-Berbasis-Node-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cakraawijaya%2FDashboard-IoT-Berbasis-Node-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cakraawijaya%2FDashboard-IoT-Berbasis-Node-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cakraawijaya","download_url":"https://codeload.github.com/cakraawijaya/Dashboard-IoT-Berbasis-Node-JS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239262366,"owners_count":19609518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3-layer","bootstrap","dashboard","emqx","express-js","font-awasome","iot","javascript","mqtt","mqttx","node-js","server-sent-event","simulation","v8-javascript-engine","vs-code","wokwi","wss"],"created_at":"2024-12-26T05:13:04.368Z","updated_at":"2025-11-01T05:30:37.939Z","avatar_url":"https://github.com/cakraawijaya.png","language":"EJS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?style=flat)](https://github.com/ellerbrock/open-source-badges/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?logo=github\u0026color=%23F7DF1E)](https://opensource.org/licenses/MIT)\n![GitHub last commit](https://img.shields.io/github/last-commit/cakraawijaya/Dashboard-IoT-Berbasis-Node-JS?logo=Codeforces\u0026logoColor=white\u0026color=%23F7DF1E)\n![Project](https://img.shields.io/badge/Project-Website-light.svg?style=flat\u0026logo=googlechrome\u0026logoColor=white\u0026color=%23F7DF1E)\n![Type](https://img.shields.io/badge/Type-Workshop%20Assignment-light.svg?style=flat\u0026logo=gitbook\u0026logoColor=white\u0026color=%23F7DF1E)\n\n# Dashboard-IoT-Berbasis-Node-JS\n\nThis project has high resource efficiency and performance, including real-time data processing, as well as good cybersecurity.\n\n\u003cbr\u003e\n\n## Project Requirements\n\n| Part | Description |\n| --- | --- |\n| Scheme | Virtual |\n| Features | • Publish\u003cbr\u003e• Subscribe |\n| Development Board | DOIT ESP32 DEVKIT V1 |\n| Code Editor | Visual Studio Code |\n| Application Support | • Wokwi\u003cbr\u003e• MQTTX\u003cbr\u003e• Node.js |\n| IoT Platform | EMQX Broker |\n| Communications Protocol | • Hypertext Transfer Protocol (HTTP)\u003cbr\u003e• Message Queuing Telemetry Transport (MQTT) |\n| IoT Architecture | 3 Layer |\n| Framework | • Bootstrap 5\u003cbr\u003e• Express.js\u003cbr\u003e• Font-Awesome 6 |\n| Libraries | MQTT.js |\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Download \u0026 Install\n\n1. Visual Studio Code\n\n   \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```\n   https://bit.ly/VScode_Installer\n   ```\n\n   \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cbr\u003e\n\n2. NodeJS\n\n   \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```\n   https://nodejs.org/en/download/prebuilt-installer\n   ```\n\n   \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cbr\u003e\n\n3. MQTTX\n\n   \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```\n   https://mqttx.app/downloads\n   ```\n\n   \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cbr\u003e\n\n4. Font-Awesome\n\n   \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```\n   https://fontawesome.com/download\n   ```\n\n   \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Project Designs\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth width=\"840\"\u003eInfrastructure\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"Documentation/Diagram/Infrastructure.jpg\" alt=\"infrastructure\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Get Started\n\n1. Download and extract this repository.\u003cbr\u003e\u003cbr\u003e\n\n2. Open the `Web` directory, then open `CMD` inside the directory.\u003cbr\u003e\u003cbr\u003e\n\n   • First, if no error occurs then just skip this step, but if otherwise then please copy the following command:\n\n      \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```bash\n   npm install\n   ```\n\n      \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cbr\u003e\n\n   • Secondly, to run the server with repeated refreshes automatically can be done with the command:\n\n      \u003ctable\u003e\u003ctr\u003e\u003ctd width=\"810\"\u003e\n\n   ```bash\n   nodemon server.js\n   ```\n\n      \u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cbr\u003e\n\n3. Open your `Browser`, then type -\u003e `localhost:3000` or customize the one on your `CMD`.\u003cbr\u003e\u003cbr\u003e\n\n4. Fill in the Topic and Data form first, for example: `kelasiot/pot` | `4095` -\u003e then click `Publish`, then the result will be displayed.\u003cbr\u003e\u003cbr\u003e\n\n5. This port and Topic Subscribe can be changed according to the user's preference. These settings are contained in a file called `server.js`.\u003cbr\u003e\u003cbr\u003e\n\n6. Have fun and enjoy [Done].\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Simulation With MQTTX\n\n`MQTTX Web` provides 2 communication protocols, namely `WebSocket (WS)` and `WebSocket Secure (WSS)`. There is also `MQTTX Desktop`, which is a more complete option.\u003cbr\u003e\u003cbr\u003e\n\n1. If you are using `MQTTX Web`, make sure to select the `WSS` protocol to be secure.\u003cbr\u003e\u003cbr\u003e\n\n2. If you are using `MQTTX Desktop`, don't forget to download the app. Then, once downloaded, open that application on your laptop or computer.\u003cbr\u003e\u003cbr\u003e\n\n3. Click `+ New Connection` -\u003e then name the connection as you want -\u003e then click `Connect`.\u003cbr\u003e\u003cbr\u003e\n\n4. Create a new topic with the name `kelasiot/pot`.\u003cbr\u003e\u003cbr\u003e\n\n5. Then for topic settings you can customize as seen below:\n\n   • Format Payload to Publish by : \u0026nbsp; `Plaintext`.\n\n   • Qos : \u0026nbsp; `0`.\n\n   • Put a check mark on `Retain`.\u003cbr\u003e\u003cbr\u003e\n\n6. Publish data.\u003cbr\u003e\u003cbr\u003e\n\n7. After that, please click `+ New Subscription` -\u003e then list the topics you want to subscribe, for example: `kelasiot/#`.\u003cbr\u003e\u003cbr\u003e\n\n8. Wait for the subscription results to be displayed.\u003cbr\u003e\u003cbr\u003e\n\n9. Have fun and enjoy [Done].\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Simulation With Wokwi\n\nLink to simulate : \u003cstrong\u003e\u003ca href=\"https://wokwi.com/projects/413253569138415617\" target=\"_blank\"\u003eClick Here\u003c/a\u003e\u003c/strong\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Highlights\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth width=\"420\"\u003eDashboard View\u003c/th\u003e\n\u003cth width=\"420\"\u003eRunning the Server\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"Documentation/Experiment/Web Dashboard.jpg\" alt=\"dashboard\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"Documentation/Experiment/Nodemon Server.js.jpg\" alt=\"server\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth width=\"420\"\u003eMQTTX Simulation\u003c/th\u003e\n\u003cth width=\"420\"\u003eWokwi Simulation\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"Documentation/Experiment/MQTTX Simulation.jpg\" alt=\"mqttx\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"Documentation/Experiment/Wokwi Simulation.jpg\" alt=\"wokwi\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Appreciation\n\nIf 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.\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Disclaimer\n\nThis 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.\n\n\u003cbr\u003e\u003cbr\u003e\n\n## LICENSE\n\nMIT License - Copyright © 2024 - Devan C. M. Wijaya, S.Kom\n\nPermission 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:\n\nThe above copyright notice and this permission notice must accompany all copies or substantial portions of the Software.\n\nIN 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcakraawijaya%2Fdashboard-iot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcakraawijaya%2Fdashboard-iot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcakraawijaya%2Fdashboard-iot/lists"}