Internet of Things and Web-App-Based Data Accessibility and Management System for Chromameter Sensor Database

: Information technology, an integral part of most industrial activities, is essential for supporting the rapid and substantial processes of the industrial sector. A key component of this technology is the Internet of Things (IoT), which is extensively integrated into these systems. At PT Sugity Creatives, an analysis revealed impractical methods in the production process, such as manual data recording and input, as well as the use of stickers on the rear side of product bumpers. These stickers can be detached from the main body (car) for verification purposes. To improve these processes, a data accessibility and management system were incorporated into a Raspberry Pi-based chromameter sensor prototype. This integrated system is designed to collect and store data in a database and uniquely identify data using QR Codes. The system takes an average of 7.97 seconds to store data and generate a QR Code per entry. This includes a module processing time of 7.25 seconds per data point and a rapid transmission rate of 0.72 seconds, covering data recording and QR Code transmission from the chromameter prototype, with data sizes ranging between 700 to 750 bytes.


Introduction
According to Nikoloski [1], the implementation of information technology in industrial activities offers at least three concrete benefits: (1) significantly reducing operational costs, (2) enhancing the quality of products, production processes, and customer service, and (3) fostering innovative product development to compete in more potential markets.A commonly used technology in industrial processes today is the Internet of Things, often abbreviated as 'IoT' or "IOT" (which can be used interchangeably).Terminologically, IoT is a concept in information technology that enables the connection of various entities such as electronic devices, sensors, actuators, factories, or even entire cities to an interconnected network or the internet [2][3][4].This allows for the realization of a smart system, characterized by independence and automation, minimizing the need for human intervention [5][6][7][8].
However, some companies still do not fully utilize information technology, particularly IoT, in their daily operations.An example is PT.Sugity Creatives, located in the MM2100 Industrial Area, Cikarang Barat, Bekasi.Observations of their manufacturing process revealed that data logging is performed manually, with entries written on paper and then input into computers.Additionally, product identification involves applying stickers to the rear side of products.This means that for identification purposes, products must be detached from the main body, a process that is relatively impractical and cumbersome.According to Michael Stangl's publication, "Development of a Web-Based Monitoring System for a Distributed and Modern Production" [9], web app functionality can extend beyond documents and articles to control and monitoring systems.This expansion is supported by advancements in tools such as Javascript, CSS3, and HTML5.Furthermore, web-based monitoring systems can adapt to various devices, not just desktops but also mobile phones, thanks to the Responsive Web Design (RWD) paradigm in web programming.
Inspired by this concept, a different implementation was used in the project titled 'Student Attendance System Prototype With IoT-Based on Fingerprint and Temperature Sensors in New Normal Era of COVID-19 Pandemic' by J. W. Simatupang and R. A. Q. Shihab [10].Therefore, the prototype IoT and web-app-based data accessibility and management system developed is expected to improve industrial processes, particularly by accelerating the speed of recording and accessing data needed for product identification post-manufacturing.

Materials and Methods
The design of the data accessibility and management system is segmented into several components: a database for recording and storing data from the sensor prototype via the Raspberry Pi micro-computer; a web app for user-side data review; and a communication module facilitating interaction between the Raspberry Pi, serving as the client, and the PC, functioning as the server.The fundamental algorithm of this concept is illustrated in Figure 1.

Database.
A database is an organized collection of data, meticulously structured to transform raw data into useful information [11].It serves as a foundational technology supporting data management processes.Within the PC, the database is stored on a server and is accompanied by a set of programs known as Structured Query Language (SQL), used for inputting and manipulating data.A database can also be described as a compilation of various tables.For instance, if a user intends to create a database for a monitoring system incorporating two different sensors, it would be efficient to establish a single database containing two distinct tables, each identified by a specific name.This setup is illustrated in Figure 2.
Referring to Figure 1 above, the software system is a web-app-based structure integrated with the initially available sensor prototype.The construction of the data accessibility and management system, as indicated by the dashed line in the figure, begins with parsing and arranging the data through the communication module.This module facilitates communication on the client side, acquiring data via the prototype sensor.The sensor, configured to operate in conjunction with the Raspberry Pi micro-computer, is capable of transmitting data to the PC, designated as the data center, using the database system.In this research work, a database titled 'raspi_database' was established to store data from the sensor system prototype, utilizing the table 'as7341_sensor_data'. Concurrently, the table named 'dht11_sensor_data' served as a test platform for the system, employing the Arduino Uno Module with the DHT11 Temperature and Humidity Sensor before its integration with the Raspberry Pi featuring the AS7341 Chromameter Sensor.

Web-app: front-end developing.
The front-end serves as the interface section, enabling users to access control functions and display data requested from the server [12].The code for building the front end can typically be viewed and edited within a web browser, allowing for real-time review and temporary modifications.However, the code reverts to its original form upon page reload or refresh.The languages used in constructing the front end of a web app include HTML, which structures the layout and elements; CSS, which designs the visual aesthetics; and JavaScript, which enables dynamic responses such as data searches, QR Code generation, camera usage, and saving specific files indexed in HTML elements.The basic algorithm underlying the front-end's working principle is depicted in Figure 3.

Web-app: back-end developing.
The back-end functions as the 'behind-the-scenes' component of the system.It is developed using server-side scripting, a type of programming language focused on the functionality, logic, control, and behavior of a system [13].Unlike front-end programming languages, back-end languages are not visible to the web browser; they remain concealed from the user and are accessible only to the server.Common back-end languages include PHP, Java, Python, and Node.js, all of which process requests and commands initiated from the front end.For the development of the Supreme v0.1 Alpha web app's back-end, PHP was chosen.This decision was influenced by PHP's status as a standard language in XAMPP for constructing web servers.PHP is also widely favored among programmers due to its extensive libraries, which greatly facilitate web app development.An example of such utility is a library that enables direct API connection to the MySQL server through a built-in function named 'mysqli'.The fundamental algorithm of the web app's back-end operation is depicted in Figure 4. 2.4.Chromameter sensor system prototype.The chromameter sensor system prototype was developed independently from this researcg work [14].It comprises two primary components: a Raspberry Pi-4 micro-computer, serving as the main control unit, and an AS7341, which functions as the principal chromameter sensor for measuring color gradients.This prototype is designed to automate the gradient testing process for car spare parts at the manufacturing site, particularly for car bumpers.The physical design of the prototype is illustrated in Figure 5 and Figure 6, showing the front and top views, respectively.Figures 5 and 6 detail the components of the prototype.Item 1 is the LCD attached to the Raspberry Pi micro-computer, which serves as the main control unit for displaying measurement results.Item 2 is the holder for the sample object being measured.Item 3, the LED indicator, features three colors, each representing a specific message.Item 4 is the AS7341 sensor.Item 5, the ruler, measures the distance between the object and the sensor.This prototype is designed to measure the color gradient of a specific color on spare parts.The results are processed by a Python module tailored for the sensor, and automation is achieved through an algorithm written in Bash language.The module segregates the measurement results into discrete numbers, storing them across 10 channels, with each channel corresponding to a specific criterion.These channel numbers are then recorded in a '.csv' file as the final step.
The prototype has several areas for development, such as storing measurement results in local memory.However, considering security and memory management, modern integrated automation systems employ databases and servers for large-scale data management and control.Furthermore, according to a case study, practical product identification is necessary.Therefore, all essential information is affixed to a special sticker placed on the back of the car bumper.For guarantee claims and service purposes, the sticker is reverified by detaching the bumper from the car.Consequently, further advancements, like developing a database and web server that can connect to the prototype via the IoT concept, are proposed to enhance functionality.This project also includes a web page for product identification and data review, where each piece of information is embedded in a QR Code, instantly generated following the measurement.

Communication module and QR code.
A communication module is a script developed in a specific programming language, facilitating interaction between the server and the client.In this prototype, the communication module is programmed using both PHP and Python.The module programmed in PHP functions primarily to record data in the database.It is also referred to as an API, an acronym for Application Programming Interface.An API, in this context, is a software tool used by the client (the prototype) for establishing a connection to the server [15].The web app employs two types of APIs: one that transmits data to the server, and another that retrieves data from the server.The data-transmitting API utilizes the POST HTTP Method, while the data-receiving API employs the GET HTTP Method [16,17].Figure 7 below illustrates the operation of these APIs.The QR Code is generated instantly once the measurement concludes, using a generator.This client-side module or generator produces the QR Code and subsequently transmits it to the server computer.The generator establishes contact with the listener via the computer's IP address.In response, the listener identifies the client's IP address and initiates a 'handshaking' process.Once the connection is established, the server-side module, or listener, retrieves the message from the generator and downloads the QR Code to the computer.Figure 8 below shows the QR Code listener in its idle state.

Results and Discussion
Immediately following the completion of the gradient test, the measurement results are stored in a '.csv' file.An example of these results is presented in Table 1.The latest content is transmitted to the database soon after the completion of the measurement.This transmission process is displayed on the Raspberry Pi screen.The resulting display is depicted in Figure 9.As illustrated in the figure 9, the server responded with HTTP Code 200, signaling that communication between the client and the server was successful.Subsequently, the data was stored in the database, as depicted in Figure 10.Each data point corresponds to a specific product or spare part.Following the integration of the web server with the sensor prototype, the system underwent 300 test cycles for data sampling.This was to assess the durability of the communication module on both the client and server sides.The tests aimed to ensure there were no repeated data transmissions, that data was transmitted accurately, and that the transmission speed was relatively fast compared to the company's previous method.Field observations indicated that the operator typically required around 15 minutes to complete the entire process.This included conducting the gradient test or measurement, manually recording the results on a data recapitulation sheet, typing the data into a computer, and affixing the data on a sticker to be applied to the rear side of the bumper.In contrast, the total time required for data recapitulation by the data accessibility and management system averaged about 7.97 seconds per data point.This time included 7.25 seconds for the module's processing and 0.72 seconds for QR code generation and transmission to the server computer.
Data review can be performed via the web app, eliminating the need for direct access to the database server.The database server is accessed solely by the database administrator for administrative tasks, such as editing and deleting data, as shown in Figure 11.The system also includes a search menu with criteria-based options for specific reviews.These criteria are standard in database management and include options like data recapitulation through the 'Date' button, product identification number via the 'ID' button, or a unique identification key through the 'Key' button.In addition to the automatic QR Code generation post-measurement, as depicted in Figure 9, there is also an option for manual QR Code generation.This can be done by selecting specific data representing a particular product through the provided link, as shown in Figure 11, or via the search menu using the 'ID' criterion.Following this selection, the QR Code generator page will appear, as illustrated in Figure 12.The QR Code is generated upon clicking the 'Generate' menu, which is the fourth option located at the upper left side of the page.

Figure 1 .
Figure 1.The planned algorithm of the system.

Figure 9 .
Figure 9. Transmitting process to the database.

Figure 10 .
Figure 10.Recorded data in the database.

Figure 11 .
Figure 11.Data review via the web page