## 3 Materials and Methods
### Software Design  
The software design is illustrated in Figure 5. The software architecture design process involves several components: the database, gateway service, an application programming interface (API), and web application. MySQL version 8.0.30 is utilized as the database to store sensor data, falling under the category of relational databases [35]. Clients requesting data from the database must go through the gateway service system. Therefore, the gateway service is responsible for interacting with clients and managing all client data requests via the API [2]. The generated data will be in JavaScript Object Notation (JSON) format to facilitate communication with the web. The JSON format is favored for its lightweight and structured nature [36].  
Furthermore, the web application design is implemented with a responsive interface, meaning it can be accessed on various screen types. The web interface also includes charts  
\begin{table}
\begin{tabular}{c c c c c c c} \hline \hline
**Variable** & **Attribute** & **Unit** & **Descriptions** & **Variable** & **Attribute** & **Unit** & **Descriptions** \\ \hline temperature\_1 & T\_1 & \({}^{\circ}\)C & Temperature on the right rear side & humidity\_1 & RH\_1 & \% & Humidity on the right rear side \\ temperature\_2 & T\_2 & \({}^{\circ}\)C & Temperature on the right front side & humidity\_2 & RH\_2 & \% & Humidity on the right front side \\ temperature\_3 & T\_3 & \({}^{\circ}\)C & Temperature on the left front side & humidity\_3 & RH\_3 & \% & Humidity on the left \\ temperature\_4 & T\_4 & \({}^{\circ}\)C & Temperature on the left rear side & humidity\_4 & RH\_4 & \% & \
\begin{tabular}{c} Humidity on the left \\ rear side \\ \end{tabular} \\ electricity & Electricity & A & Electrical energy usage & date & Date &
\begin{tabular}{c} yy:mm:dd \\ h:mm:ss \\ \end{tabular} & Date and time \\ \hline \hline \end{tabular}
\end{table}
Table 4: Dataset attribute.  
Figure 5: Architecture of software.  
and tables to visually represent data from the database. The development of this web application involves several programming languages, including CSS version 3, JavaScript version ES13, PHP version 7.2.27, and Python version 3.10.6 [37]. The software programming process is illustrated in Algorithm 3.  
```
1. INPUT: Sensor data in the database
2. OUTPUT: Web application
3. DESCRIPT:
4. FUNCTION database (host, username, password, db_name)
5. db = connect_db(host, username, password, db_name)
6. IF!db:
7. db = db.error()
8. END
9. RETURN db
10. END
11. FUNCTION gateway(request, db_con)
12. getrequest = API(request)
13. result = db.select(getrequest)
14. WHILE row IN RANGE result.length():
15. json = {T_1: row[temperature_1], T_2: row[temperature_2],
16. T_3: row[temperature_3], T_4: row[temperature_4];
17. H_1: row[humidity_1], H_2: row[humidity_2],
18. H_3: row[humidity_3], H_4: row[humidity_4],
19. Electricity: row[electricity], date: row[date]]
20. END
21. RETURN json
22. END
23. MAIN:
24. db_con = database(parameter[host, user,pass,db_name])
25. data json = gateway(data_request, db_con)
26. data = convert_json(data json)
27. plot graph-table(data[T_1], data[T_2], data[T_3], data[T_4], data[H_1],
28. data[H_2], data[H_3], data[H_4], data[Electricity], data[date])
29. END
```  
**Algorithm 3**Web application