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

A.G. Klimenko, K.S. Zaytsev


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.

Full Text:

PDF (Russian)


Sanabria S., Jindal A. The Ifs and Buts of the Development Approaches for IoT Applications.—2021.—01.

Dillon A. User Interface Design.—2006.—01.—ISBN: 9780470018866.

Blair-Early A., Zender M. User Interface Design Principles for Interaction Design // Design Issues.—2008.—07.—Vol. 24.—P. 85–107.

Glória A., Cercas F., Souto N. Design and implementation of an IoT gateway to create smart environments // Procedia Computer Science.—2017.—12.— Vol. 109.—P. 568–575.

IoT-based intelligent fitness system / Yong B., Xu Z., Wang X., Cheng L., Li X.,Wu X., and Zhou Q. // Journal of Parallel and Distributed Computing.— 2017.—06.—Vol. 118.

Landay J. A., Hong J. I. et al. The design of sites: patterns, principles, and processes for crafting a customer-centered Web experience. — Addison-Wesley Professional, 2003.

Fauzan R. et al. A Different Approach on Automated Use Case Diagram Semantic Assessment //International Journal of Intelligent Engineering and Systems. – 2021. – Т. 14. – №. 1. – С. 496-505.

Knöps L. et al. Prototype Application for the Treatment of Achilles Tendinopathy. – 2021.

Jermaniš E. Development of MESOC Toolkit Web Application in React : дис. – University of Rijeka. Department of Informatics, 2021.

Boduch A., Derks R. React and React Native: A complete hands-on guide to modern web and mobile development with React. js. – Packt Publishing Ltd, 2020.

Duldulao D. B., Cabagnot R. J. L. Navigating React Router //Practical Enterprise React. – Apress, Berkeley, CA, 2021. – С. 55-90.

Bugl D. Learn React Hooks: Build and refactor modern React. js applications using Hooks. – Packt Publishing Ltd, 2019


  • There are currently no refbacks.

Abava  Кибербезопасность MoNeTec 2024

ISSN: 2307-8162