Legacy App Modernization for TV Tower Data

The client wanted to leave the database and business logic of the telecommunication system as it is, but deal with the occurring issues. Together with the client’s team, our Business Analysts estimated the following tasks that need to be done: migrate the application to AWS cloud storage, update the front-end using modern technologies, and enhance data visualization from sensors using a suitable UI library.

After the transition to AWS cloud storage was done on the client’s side, it removed the necessity for desktop installations and significantly simplified the use and maintenance of the system. Besides that, the process provided higher availability and scalability of the software. Amazon EC2 was used to deploy the server part and Amazon RDS was utilized for database management. This setup provided us with robust capabilities to handle large data volumes effectively, ensuring optimal application performance.

Our particular goal was to take the second and third tasks and modernize the user interface, making it functional and adaptive to meet the needs of current users. Thus, the specific tasks required from our side included:

• Developing a new vision for the user interface based on key features;
• Implementing a up-to-date front-end framework;
• Ensuring interface adaptability across different viewports;
• Integrating robust data visualization tools.

The preparation phase for the new interface proceeded seamlessly, incorporating straightforward visualizations to highlight data priorities. Our team focused primarily on updating the front-end.

The application should have display the data, which included information received from telecommunications towers regarding:

• Power supply connection. This refers to the status and quality of the electrical power being supplied to the telecommunications tower. The users should have seen the detailed information on whether the tower is connected to the power grid, the voltage levels, and any backup power sources, like batteries or generators.
• Data from temperature sensors. These sensors monitor the temperature within the telecommunications tower and its equipment. This data helped employees to ensure that the equipment is operating within safe temperature ranges to prevent overheating and potential damage which may affect the signal.
• Wind force. This data measures the wind speed and direction around the telecommunications tower. High wind speeds can affect the stability and integrity of the tower signal, so monitoring this should have helped in maintaining safety and operational efficiency.
• Signal frequencies. This includes information on the various frequencies being used by the tower to transmit and receive signals. Users should be able to manage the spectrum and ensure that the tower is operating on the correct frequencies without interference.
• Free slots for connection. This refers to the available capacity for new connections or devices that can be supported by the telecommunication tower. Visualizing this data properly would have indicated how many more users or devices can be connected without overloading the system.

Besides that, we considered that possible graphs for displaying the information should have a number of user settings and display types. Also, it should be possible to save data from sensors in logs and to display history for an arbitrary period required by the user. In case of a permanent connection for long-term and continuous signal transmission, the user should be able to configure the type of notifications with warnings.

Thus, our task was to efficiently visualize all the data considering all the customer’s requirements and needs. To help users to understand and monitor the needed data effectively, it was decided to visualize a dashboard with a map. The application should show all the critical details on the tower location, connection status, etc. in order to allow users to make better decisions.

Front-End Update

The second key task was to update the application front-end, and this is when our team steps back in. Initially, it was considered using ReactJS as one of the widest known technologies with a huge supporting community. But, in the process, the customer preferred to swap from ReactJS to Angular2.

Technologies

All in all, Angular2 was preferred over ReactJS for this project due to several factors:

• required performance,
• reference to API peculiarities,
• the ability to develop complex and dynamic user interfaces.

With the help of Angular2, we were able to have powerful tools for developing and testing the telecommunication application, significantly reducing the time needed to create a new interface.

The component-based architecture and two-way data binding of Angular2 were particularly beneficial for creating interactive and responsive elements. This allowed building more effective data visualization tools and user interaction. Additionally, the comprehensive structure of Angular2 helped to reduce development time significantly. Overall, its capabilities aligned well with the project’s goals, making it a more suitable choice.

Adaptive Layout

To ensure convenient use of the system on devices with different screen resolution, we added an adaptive layout. This made the application’s interface flexible and convenient for both desktop and mobile device users.

The adaptive layout ensured the correct display of all interface elements in an appropriate way and improved the overall user experience. We applied present-day approaches and technologies, such as CSS Grid and Flexbox, allowing us to develop complex and flexible layouts. Special attention was paid to testing the interface on various viewport sizes to coincide with different devices and browsers to ensure its correct functioning in any conditions.

Using the Kendo UI Library

To display the data from data sensors, we chose the Kendo UI library. First of all, the client recommended this technology after their own positive experience working with it. Their decision was based on its rich functionality and extensive data visualization capabilities. Thus, the library offered many ready-made components, such as gauges, charts, and diagrams, which significantly simplified the development process and allowed us to create an intuitive and functional interface.

The availability of a large number of preset themes and the ability to flexibly customize the appearance of the components was another key factor in choosing Kendo. This allowed us to design a modern and attractive interface that meets brand requirements and user expectations.

Dynamic Data Display

Updating the dynamic data visualization on the report page was another important aspect for us to consider. Therefore, we implemented the ability to develop custom charts, allowing users to customize the data display according to their needs. This solution significantly improved the usability of the telecommunication application and provided more opportunities for data analysis and visualization.

To implement this functionality, we implemented Angular2 capabilities for creating dynamic components and integrated with the Kendo UI library. This allowed us to design a flexible and powerful data visualization system that easily adapts to any user requirements.