Challenge

The client’s objectives were to develop a complex Digital Out-Of-Home platform for creating, controlling, and showing digital advertisements on several types of devices such as mobile phones, tablets, and TV.

• Create and integrate ready-2-play ad templates
• Control all TV boxes from 1 interface
• Data Visualization tool for scheduling and reporting
• Create playlists and custom scenarios for every ad campaign
• Use Social WIFI as a channel for showing ads

Our solution

The project consists of web and mobile sides. Both of them should be interconnected with the hardware, TV boxes should be able to collect and display the data. We’ve been working directly with two senior Front-End and Android developers’ teams.

Our first step was creating an easily scalable project architecture. It gave us a powerful base and accelerated the full development process. At the same time when our team worked over code, we analyzed the structure for weak points and performance leaks. During these steps, we used to implement many custom solutions and, as a result, multiplied application speed.

Working over the UI, we created interfaces for all functional views and connected them with Back-end.

From an Android perspective, our team created a mobile app for a custom Android-based TV box. The scope includes:

• Add automatic and manual app updates 
• Improve stability
• Add caching for slide
• Change and improve logging (dump system logs)
• Expand server’s control (f.e. add schedule)

Specific features

• Complex Player based on native JS
• To minimize the delay between client-server all necessary data will be placed in the player directly
• Playlist constructor with a lot of tools and components to create different types of slide offers based on Angular, Angular material
• Get actual information from TV Devices using web socket technology
• Create an actual schedule for streaming (based on Dev Extreme)
• Save and Get info in one place. Every user has his cabinet with statistics, analytics, and control panel
• Android Player was optimized for native app
• Data visualization with d3js
• To minimize request count on the Google Font server with Rest API was created functional by collecting Fonts on the server side and update them by CRON

Technologies

Native JS, d3js, Angular, Angular Material