A Development of Web Application for Hydroponic Monitoring Systems

A development of web application for a hydroponic monitoring system (HMS) is presented. The HMS is to collect data of hydroponic plants such as quality and quantity of nutrient solution. The HMS is integrated to internet such that the collected data is stored in a cloud server. The data can be accessed by users through a web application. This study is to develop the web application as an interface for accessing the HMS data in real time. The web development is done by implementing the user centred design (UCD) method. A study case of monitoring hydroponic temperatures is presented in this development. It resulted in a web application that presents real-time data of the temperatures in numerically as well as graphically. This web application provides an informative, attractive, and user-friendly interface of the HMS.


Introduction
Agriculture is an essential sector in human life for foods production. There are several methods in agriculture. Hydroponic is one of the popular agriculture methods especially in urban area. The hydroponics is a modern cultivation method without using soil as media but nutrient solution [1]. The solution contains substances needed for plant growth. Without using the soil, the hydroponic promises some advantages compared to traditional agriculture methods such as in cleanness, space requirement, maintenance, and productivity [2]. The less space requirement makes the hydroponic to be suitably applied in urban farming for food sustainability. Base on the way of feeding the nutrient to plants, the hydroponic can be classified into two types: dynamic and static hydroponics [3]. In the dynamic hydroponics, nutrient solution is distributed to the plants by flowing the solution through pipes and circulating it with the help of a pump. Meanwhile in the static hydroponic, the nutrient solution is only filled into a container without any flow or circulation. The solution remains in the container forever until harvesting.
The nutrient solution is the most important part of the hydroponic such that the quantity and quality have to be maintained periodically [4][5][6]. Maintaining the quality is to assure that the nutrient solution is available at a certain volume range. This maintenance can be simply done through a visual observation by human. However, maintaining the quality of nutrient solution cannot be done in a simply way as the nutrient quantity. The solution quality is determined by various parameters, such as: temperature, acidity, and concentration [7]. Those parameters cannot be precisely observed by using human senses but have to be measured using sensors such as temperature sensors, pH sensors, and total dissolved solids (TDS) sensors.
One of the mandatory maintenances in hydroponics is maintaining the nutrient solutions periodically. Conducting this maintenance manually is definitely inefficient. In order to assist the hydroponic maintenance, an electronic system known as the hydroponic monitoring system (HMS) has been developed. The HMS contains of a microcontroller and sensors as the main components. The HMS does automatic and periodic measurements of quality and quantity of the nutrient solution. The traditional HMS store the measurement data in a memory at local device or local network. By the advance of computer and internet technologies, the HMS is integrated to internet such that allows to store the measurement data into a web server. As stored in the webserver, the monitoring can be done by accessing the data anytime and from anywhere through the internet. This gives a flexibility to do a remote observation to the hydroponics. Moreover, the system can be used to expands the monitoring coverage as long as the internet is available. The HMS that is integrated to the internet is named as the internet of things based hydroponic monitoring system (IoT-based HMS).
Several studies on the development of IoT-based HMS have been conducted. An IoTbased HMS was presented in [7]. This system was developed by including several sensors, i.e.: temperature sensor, pH sensor, TDS sensor, and liquid level sensor. The system utilizes Arduino Uno and the ESP8266 WiFi module as the microcontroller and the WiFi communication, respectively. Meanwhile, a Raspberry Pi 2B is utilized in building a web server. Data of the monitoring system were presented a web page. Another IoT-based HMS was developed in [8] and called as the iHydroIoT. This system applied more sensors than the system in [7], such that it was able temperature, CO2, pH, volume, and TDS of the nutrient solution. Moreover, the iHydroIoT was also equipped with light intensity sensor, humidity sensor, and air temperature sensor. The iHydro applied an Arduino Uno as the microcontroller. Webserver of the iHydro was built using a Raspberry Pi 2. A BLE (Bluetooth Low Energy) module was installed on the Arduino Uno such that the microcontroller was able to send data to the webserver via Bluetooth communication. In order to make the data being accessible from anywhere, the webserver was connected to internet through a WiFi communication.
An advanced IoT-based HMS by involving artificial intelligence was presented in [9]. The system was equipped by a bunch of sensors to measure many parameters such as air temperature, air pressure, altitude, air humidity, light intensity, ultraviolet, CO2, nutrient temperature, pH, dissolved oxygen, electricity conductivity (EC), and (TDS). This monitoring system was also equipped with two cameras to get vision data of the plants. The system utilized an Arduino Mega as the microcontroller that collects the data from the sensors, while the vision data was collected using a Raspberry Pi 3B+. The vision data was applied in a deep learning algorithm to predict the harvest time. Previously, a study of integrating IoT-based HMS and machine learning to provide appropriate control action for hydroponic was presented in [10]. Prototype of the system was applied in tomato plant growth.
The previous research works show how the advanced computer technology could contribute in the agriculture sector in order to improve the food production in quality as well as in quantity. We have been working on developing a prototype of IoT-based HMS to collect data of hydroponic. A study case presents a monitoring hydroponic temperature. Development of the prototype includes two parts: hardware and software. The hardware development has been done and presented in [11]. This paper presents the second part development, which is the software development. This is to build a web application as user interface of the hydroponic monitoring system. Presentation of this paper is organized as follows. Section I provides background and motivation of the work. Section II presents the method of by explaining how the measurement, the web application development method, and the realization of constructing the web application. Section III presents the resulted web application. Finally, the Section IV concludes the work.

IoT-based hydroponic monitoring system
A design of IoT-base hydroponic monitoring system was presented in [11]. The monitoring was concerned on the solution temperature and the air temperature. Diagram of the monitoring system is shown in Fig. 1. The system has four main parts: sensors, NodeMCU, cloud server, and human machine interface (HMI). The sensors are to measure the temperatures, where the measurement data is sent to the NodeMCU. The NodeMCU is a microcontroller with a built-in WiFi module. The NodeMCU is to collects and processes the measurement data, and then send the processed data to the cloud server through a WiFi communication. The data are saved in the server and can be accessed by users. The users access the data from their devices such as PCs, laptops, or smartphones. These devices communicate to the cloud server through internet connection using WiFi or wired connection. The HMI is applied as an interface for the user in accessing the data.
The Fig. 1 shows that the sensors include Sensor 1 and Sensor 2. The Sensor 1 measures temperature of the nutrient solution, while the Sensor 2 measures the air temperature surrounding the plant. The Sensor 1 is placed by dipping the sensor in the nutrient solution such that a water-proof temperature sensor is required. The Dallas temperature sensor DS18B20 is one of the choices and selected to be applied as the Sensor 1. This sensor is a low cost and waterproof temperature sensor that is able to measure temperature in range of -55 to 125 °C with accuracy ±0.5 °C. The Sensor 2 is placed in the air, beside the plant. Due to the hydroponics is uncovered, the DS18B20 is also applied as the Sensor 2 for anticipating water contamination to the temperature sensor. Fig. 2. Temperature measurement data in Google sheet [11] The cloud server applied in this system was the Google Sheets. The experimental results in [11] show that the developed system was working well in monitoring the hydroponics temperatures. The temperatures data was saved in the Google Sheets and accessible from anywhere through internet. A sample of the temperatures data presented in the Google sheet is shown in Fig. 2.

Development method of web application
The Fig. 2 shows measurement data of the IoT-based HMS. It is shown that the data is presented in a Microsoft Excel format which is not a quite user friendly as interface for the monitoring system. A more user-friendly interface is required for better and more convenient in monitoring the temperatures. Therefore, a web application is developed for providing a better user-interface. This web application is developed by implementing the user cantered design (UCD) method. This method allows to understand the user needs by exploring the user point of view in detail. The UCD method is guided by a belief that end users may influence in the web design through participating in the design process. It is a multi-stage problem-solving process, where the designer is not only evaluating and predicting of how the consumers will use the product but also validating based on the user behaviours through realworld experiments [12].
The International Organization for Standardization (ISO) defines a standard of requirements and recommendations for human-centred design principles and activities throughout the life cycle of computer-based interactive systems which is documented as the ISO 9241-210. Implementation of the UCD includes several steps as shown by a flow chart in Fig. 3 and explained as follows [13,14]: a) Plan for UCD This is the initial step for determining which development approaches will be used. The determination is done by considering the business case for usability and budget, timeline, resource, expertise, and other constraints into account [14].

b) Specify the context of use
This stage is to specify use context of the developed application. The specification is done through user analysis and task analysis. The user analysis is to examine and learn characteristics of the users [15]. In this case, the users should be persons who have experience in hydroponics. It is necessary to pay attention to how to care for plants to thrive and produce optimal results. The required temperature of each plant is unique. Finding optimal temperature of a plant requires a temperatures observation for a long period. This observation will be a tedious job. A task analysis process entails determining the user's objectives and the system functionality that is required. As a result, users require a method that simplifies the temperature observation of the plant, and in this case is the hydroponic plants. c) Specify requirements This stage is accomplished by bringing end-users into the design process and communicating with potential end-users and other key stakeholders to aid with required usability testing. Participatory design with end-users is a critical component of UCD and should be carried out throughout the system design and development process [16]. In this study, users will be able to monitor the temperature conditions of hydroponic plants via the internet. Users can view the minimum and highest temperatures, the average daily temperature, and a chart of the average temperature. Additionally, there is a table consist of date, time, and data temperature that is updated every 30 seconds. d) Product design solution The evaluation results are used at this stage to guide the system's design and execution. This principle emphasizes the critical importance of user-centred evaluation in guiding and enhancing design across the technology lifecycle. In this study, we build a web application according to the needs. e) Evaluate design This stage involves comparing the iterative interface design to the ISO UCD procedure's requirements. The end-user is included in this iterative process. This includes active user involvement in evaluation and design throughout the development process, as well as evaluation of use in real-world user situations and contexts.

Realization
The web development is realized using the Google Data Studio. The Google Data Studio provides a simple way in interacting with charts as well as filtering other charts [17]. Therefore, building a hydroponics temperatures data visualization can be done easily and quickly.
Based on the requirements specification, the web is developed to present the measured temperature data in real-time. Data flow in this web development is shown in Fig 4. The measured data is available in the Google Sheet, where the sample data are shown in the Fig.  2. The data include the date, time, temperature 1 (nutrient temperature), and temperature 2 (ambient temperature). The data model which is the Google Sheet, is connected to Google Data Studio to generate data source. The data source is a component to build a monitoring report on a web application.

Results
The web development results in a web that visualizes the hydroponic temperatures data as shown in Fig. 5. The web includes the title of the web application, a table containing the temperature data per 30 seconds, and gauges displaying the minimum, average, and maximum values of temperature 1 (nutrient temperature) and temperature 2 (ambient temperature). The web was designed by selecting colours that are soothing to the eyes.
According to UCD method shown in Fig. 3, evaluations of the developed web are required to assure that the developed product meets to the user needs. Evaluation was done together with the user. It was found a weakness as follows. The visualized sample data in the Fig. 5 shows that the minimum value of temperature 1 was 26.02. This was the minimum value of temperature 1 in the period of the 1 st to 14 th August 2021. However, it was no information when the minimum temperature was happened. It could be found in the table but it is very difficult due to the large amount of data in the table.
Based on this evaluation results, the user needs information not only the temperatures data but also the time. Therefore, the developed web was improved by adding a time series graph of the temperatures. It resulted in a web application version 2 as shown in Fig. 6. This web provides a chart that presents time series data of the temperature 1 and the temperature 2 for a certain time period. Using this chart, the users can easily observe the daily hydroponics temperatures such as: finding the maximum or minimum temperature, and estimate the average temperature. The user satisfies with the web application version 2, and therefore it is applied as the HMI of the hydroponics temperatures monitoring system.

Conclusion
Web Application for an IoT-based hydroponic monitoring systems has been developed. The web application was developed by using the Google Data Studio and implementing the user-centered design method. The resulted web application provides a user-friendly interface for the monitoring system. The web application displays the values of temperature 1 (nutrient temperature) and temperature 2 (ambient temperature) in real-time. Both temperatures data are displayed in numerically as well as graphically.