Implementasi-Dasar-Web-of-Things-Menggunakan-Private-Broker

This Web-based project was created to handle a number of user traffic and IoT devices. This project is just a small example of Web of Things implementation. For users, this Web will be very helpful, especially in terms of monitoring and controlling. In addition, there is also a Data Logging feature in it. Regarding features related to accounts, connections, devices, and so on have also been made as efficient as possible so that it is hoped that users will be adaptable and comfortable in using this Web.

Project Requirements

Part	Description
Features	• Publish • Subscribe • Create • Read • Update • Delete • Pagination • Search • Validation • Print • Export • ETC
Development Board	DOIT ESP32 DEVKIT V1
Code Editor	• Arduino IDE • Visual Studio Code
Application Support	Laragon
Driver	CP210X USB Driver
IoT Platform	Shiftr.io
Communications Protocol	• WebSocket Secure (WSS) • Message Queuing Telemetry Transport (MQTT) • Simple Mail Transfer Protocol (SMTP)
IoT Architecture	4 Layer
Framework	AdminLTE v3.2.0
Web Library	• MQTT.js • PHPMailer
Arduino Library	• WiFi (default) • MQTT • ESP32Servo • DHT_sensor_library_for_ESPx • Nusabot Simple Timer
Actuators	• Servo Motor SG90 180° (x1) • LED (x1) • RGB LED (x1)
Sensor	• DHT11: Air Temperature & Humidity (x1) • LDR: Light Dependent Resistor (x1)
Other Components	• Micro USB cable - USB type A (x1) • Jumper cable (1 set) • Breadboard (x1) • Resistor (x1)

Download & Install

1. Arduino IDE

   https://www.arduino.cc/en/software

   
   

2. CP210X USB Driver

   https://bit.ly/CP210X_USB_Driver

   
   

3. Visual Studio Code

   https://bit.ly/VScode_Installer

   
   

4. Laragon

   https://laragon.org/download/

   
   

5. AdminLTE v3.2.0

   https://codeload.github.com/ColorlibHQ/AdminLTE/zip/refs/tags/v3.2.0

Project Designs

Infrastructure

Block Diagram	Pictorial Diagram

Wiring

Arduino IDE Setup

1. Open the Arduino IDE first, then open the project by clicking File -> Open :

   kelasiotpemula_devancmw.ino

   
   

2. Fill in the Additional Board Manager URLs in Arduino IDE

   Click File -> Preferences -> enter the Boards Manager Url by copying the following link : https://dl.espressif.com/dl/package_esp32_index.json

   
   

3. Board Setup in Arduino IDE

   How to setup the DOIT ESP32 DEVKIT V1 board
   • Click Tools -> Board -> Boards Manager -> Install esp32. • Then selecting a Board by clicking: Tools -> Board -> ESP32 Arduino -> DOIT ESP32 DEVKIT V1.

   
   

4. Change the Board Speed in Arduino IDE

   Click Tools -> Upload Speed -> 115200

   
   

5. Install Library in Arduino IDE

   Download all the library zip files. Then paste it in the: C:\Users\Computer_Username\Documents\Arduino\libraries

   
   

6. Port Setup in Arduino IDE

   Click Port -> Choose according to your device port (you can see in device manager)

   
   

7. Change the WiFi Name, WiFi Password, and so on according to what you are currently using.
   
   

8. Before uploading the program please click: Verify.
   
   

9. If there is no error in the program code, then please click: Upload.
   
   

10. Some things you need to do when using the ESP32 board :

    • Arduino IDE information: Uploading... -> immediately press and hold the BOOT button. • Arduino IDE information: Writing at .... (%) -> release the BOOT button. • Wait until the message appears: Done Uploading -> The program is directly operated. • Press the EN (RST) button and then Restart to handle the ESP32 board that cannot process the SC. • Do not press the BOOT and EN buttons at the same time as this may switch to Upload Firmware mode.

    
    

11. If there is still a problem when uploading the program, then try checking the driver / port / others section.

Private Broker Setup

1. Create a Shiftr.io account at: https://cloud.shiftr.io/welcome/sign-up.
   
   

2. If so, login to your Shiftr.io account at: https://cloud.shiftr.io/welcome/sign-in.
   
   

3. Then, click the Deploy Instance button. Then set it as needed and click the Deploy Instance button.
   
   

4. On the Instance menu, click the domain link provided.
   
   

5. Then, click the Sign In button -> click the Allow Request button.
   
   

6. Next, select the Open Settings button (the gear symbol at the bottom right).
   
   

7. Select the Tokens menu -> click the Create Token button -> set it as needed and click the Create button.
   
   

8. Select the Webhooks menu -> click the Create Webhook button -> set the Topic section according to what is in the .ino file and the Web created. In addition, you also need to set the URL section, change the URL to something like this: [YOUR_NGROK_URL]/[YOUR_WEB_PROJECT] -> click the Create button.

Gmail App Password Setup

1. Enable 2-Step Verification via the link below:

   https://myaccount.google.com/signinoptions/twosv

   
   

2. Create an App Password via the link below:

   https://myaccount.google.com/apppasswords

   
   

3. Copy and Paste the App Password and your Gmail Name into the send_mail_reset.php script. Example below:

   $mail->Username = 'wtechnoid@gmail.com'; $mail->Password = 'xmqwiuplourbodvs';

Ngrok Setup

1. Extract the file, then move the file ngrok.exe into the folder -> C:\laragon\www.
   
   

2. Open ngrok.yml -> location: C:\Users\[User Name]\AppData\Local\ngrok.
   
   

3. First create an account on the Web: ngrok.com. Then search for authtoken and api_key on the Web, if there is no one then create it.
   
   

4. Copy and Paste authtoken and api_key into a file ngrok.yml. And create it as seen below :

   version: "3" agent: authtoken: [YOUR NGROK AUTHTOKEN] api_key: [YOUR NGROK API_KEY] tunnels: basic: proto: http addr: 80 schemes: ["http", "https"]

   
   

5. Open ngrok.exe, and then type the command:

   ngrok start --all

   
   

6. Then CTRL + Click the Link that is there -> then select Visit Site.
   
   

7. In your browser there is a URL. Then set the URL as follows: [URL Https NGROK]/sistemiot/. Example below:

   https://3268-2001-448a-5020-91c4-dddf-9df7-f648-1ec5.ngrok-free.app/sistemiot/

Database

1. Open Laragon, then install phpMyAdmin. How to install: click Menu button -> Tools -> Quick add -> *phpmyadmin.
   
   

2. Then if so, click Start All button to start the server locally.
   
   

3. Access the browser first in order to open the database admin panel, please copy the following link: localhost/phpmyadmin/.
   
   

4. Create a database called sistem_iot on local.
   
   

5. Open the sistem_iot database and Import sistem_iot.sql in the sistemiot/dist/sql directory.

Default Account

Role	Username	Password
Admin	linling	admin123
User	albert	user123

Get Started

1. Download and extract this repository.
   
   

2. Move the sistem_iot directory into the laragon directory, whose details you can find out as follows: C:\laragon\www. The rest of the extracted directory is up to you to place.
   
   

3. Make sure you have the necessary electronic components.
   
   

4. Make sure your components are designed according to the diagram.
   
   

5. Configure your device according to the settings above.
   
   

6. Please enjoy [Done].

Highlights

Device

Dashboard

Admin Profile	User Profile

Actuator Data	Sensor Data

Add Device	Edit Device	Delete Device

Add Connection	Edit Connection	Delete Connection

User View	Add User	Edit User	Delete User

Code Success	Code Failed	Email Reset	Reset Success

Login	Register	Forgot Password

Private Broker

Reset Database Increment

SET @num := 0; UPDATE your_table SET id = @num := (@num+1); ALTER TABLE your_table AUTO_INCREMENT =1;

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 Nusabot x Kelas IoT Bootcamp. 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.