Development of the Front-end for the Platform Supporting IoT Applications

Project summary

The product is a scalable single platform for the integration of IoT devices. This solution ensures convenient management of distributed IoT devices and implements secure data storage in a form that can be used for subsequent analysis. The web interface supports displaying a million of devices and hundreds of thousands of users online.

The system provides the possibility to manage, monitor and maintain the operability of connected IoT devices. The application also collects, processes and analyzes incoming data. Thanks to the platform, telecom operators can implement and deliver their services to various enterprises, and can also integrate the work of several IoT applications in one convenient interface.

The web application integrates with the billing bus and telecom operator systems to provide communication between the customer and the service provider. The platform supports various channels of communication with IoT devices (both wired and wireless), but the main channel is cellular.

Also, this platform provides a graphical designer interface for developers of vertical solutions and SDKs, which minimizes development efforts and shortens the time needed for an application to enter the market.

Technical description of the project

The front-end of the system is implemented using the React framework in conjunction with the MobX library. Interaction with the back-end is carried out using AJAX asynchronous calls and WebSocket protocol in JSON format, which allows displaying up-to-date and accurate data of integrated devices. Vertical solutions layout design is implemented using Pixel Perfect technique and BEM methodology.

What we did on the project, our responsibilities

The responsibilities of JazzTeam professionals included the development of the IoT platform front-end. It was also necessary to create several prototypes of vertical solutions: applications, which interface allows interacting with the platform and provides the necessary functionality for a specific subject area, industry or technology.

The following works were carried out by our team:

  • development of the IoT platform front-end architecture;
  • development of visual interfaces of the system;
  • implementation of cross-browser and adaptive web design;
  • development of prototypes of vertical solutions for interaction with the platform.

Technologies

Vue.js, Vuex, React, MobX, WebSocket, WebPack, Babel, ESLint, ES6, SASS, Lodash, Highcharts, Google Maps API, npm, Git, Jira.

Screenshots

Project features

  • A service area popular on the market related to the complex domain area of the Internet of Things.
  • The project included complex research on the creation of atypical web application architectures (Research and Development).
  • The product was developed from scratch; a new team was created.
  • Dynamically changing requirements for the design of layouts during the implementation of the system front-end.
  • Changes in the stack of front-end technologies during development: moving from Vue.js to React.
  • Front-end development was significantly ahead of the development of the back-end part.
  • Tight deadlines for IoT applications prototyping.

Project results

  • A logical extensible architecture of the system front-end was created.
  • Tools needed to build and prepare for project placement on the server were implemented.
  • Tools intended to cover the application with tests and check the quality of JS code were implemented.
  • JazzTeam implemented the transition from Vue.js to React. The authorization form, the main menu, and tables for displaying platform devices were created using the new technology stack.
  • New functionality was introduced, system refactoring and bug fixing were carried out.
  • IoT application prototypes intended to provide unique solutions for various vertical industry segments were successfully developed:
  • Piping system. Platform for the control and collection of readings from pressure and temperature sensors.
  • Smart logistics. Vehicle logistics monitoring application. With the help of Google Maps Api, it is possible to display complete information about the route on the map, track the location of vehicles on the map, display the status of vehicle sensors, display detailed statistics on the status of completed orders for various periods.
  • Water-pumping station control panel. Panel for monitoring the status and controlling the water-pumping station.
  • A vertical solution was developed and implemented: a platform for managing connection with IoT devices over a cellular channel using SIM cards. The user is provided with an interface for a table of SIM cards associated with IoT devices, the possibility to view detailed information about them, manage services and track the location of SIM cards using Google Maps.
  • Integration of vertical solutions with a web server in real time via Websocket was implemented.
  • Interaction between various vertical solutions via a web server was implemented.

Company’s achievements during the project

  • Effective work in a distributed team was established. JazzTeam specialists regularly participated in discussions and making decisions related to the development with other teams.
  • A non-trivial front-end project architecture for a specific domain area was successfully designed.
  • The team expanded their skills with JS framework Vue.js. At the same time, it was possible to implement the table building component as a universal reusable library.

Clients about cooperation with JazzTeam







    Contact Us

    Name:

    Email: *

    Message: *

    I agree to Privacy Policy

    What happens next?

    1 Leave your project request. We will contact you and schedule a call.
    2 Signing of the NDA to ensure the project info confidentiality.
    3
    Negotiation of your request and the required services.
    4 Team forming, coordination of workstages.
    5 Contract signing and project start.