Creating an interface for smart objects using the example of a smart swimming pool system

Abstract

The development of smart objects involves solving a wide range of related tasks. One of these tasks is the development of the user interface. The purpose of this work is a consistent description of the process of developing the interface of a smart object using the example of the Smart Swimming Pool system. The basic principles of user interface development are determined, the scenario for using a web application is thought out, use-case and user-flow diagrams are built. Then development technologies are selected taking into account modern trends in frontend development and the workspace is set up. The results of choosing a technology stack, obtained by the authors, are presented in the form of a table of interface implementation tools. After that, the features of working with the React library are described, such as the ability to create your own or use built-in components, the ability to set up dynamic routing, the ability to use the current state of elements, and handling events using the useState and useEffect hooks. Code examples are provided to demonstrate all of these features.