Development of a react-based application to visualize a building’s sensor data
Korzneva, Ekaterina (2025)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202502253366
https://urn.fi/URN:NBN:fi:amk-202502253366
Tiivistelmä
The purpose of this thesis was to develop an application that integrates sensor data from a building’s IoT system into a visual interface, displaying it on the building’s floor plan. The thesis was commissioned by Nuuka Solutions Oy, a company specializing in building management systems, to enhance their customer service. The study focused on the question: How can sensor data be effectively integrated into a visual interface for property management?
The methodology applied in the study was the constructive research method, which outlined the stages of the project. The React JavaScript library was used as the framework for development, with Material UI components aiding in building the user interface. Agile tools, such as user stories and Kanban boards, helped define project requirements and structure planning. As the project was front-end focused, no backend development was conducted; data retrieval and storage were managed through REST APIs.
The application was developed for two user roles: admin and user. The admin interface allows placing sensors on a building’s floor plan using drag-and-drop functionality, while the user’s interface displays sensor data, such as temperature, on labeled markers. The application also supports zooming and switching between floor plans associated with a building. The solution was implemented using data from the Oodi library, which is connected to the commissioner’s building management system.
The project met its objectives and successfully implemented the planned features. It demonstrated that React-based development, user-centered design principles, and Agile project management were effective tools for achieving the project’s goals, though other development frameworks and tools could have also achieved similar results. As it was initially planned, the application has potential for further development and implementation for other customers of the commissioning company.
The methodology applied in the study was the constructive research method, which outlined the stages of the project. The React JavaScript library was used as the framework for development, with Material UI components aiding in building the user interface. Agile tools, such as user stories and Kanban boards, helped define project requirements and structure planning. As the project was front-end focused, no backend development was conducted; data retrieval and storage were managed through REST APIs.
The application was developed for two user roles: admin and user. The admin interface allows placing sensors on a building’s floor plan using drag-and-drop functionality, while the user’s interface displays sensor data, such as temperature, on labeled markers. The application also supports zooming and switching between floor plans associated with a building. The solution was implemented using data from the Oodi library, which is connected to the commissioner’s building management system.
The project met its objectives and successfully implemented the planned features. It demonstrated that React-based development, user-centered design principles, and Agile project management were effective tools for achieving the project’s goals, though other development frameworks and tools could have also achieved similar results. As it was initially planned, the application has potential for further development and implementation for other customers of the commissioning company.