Real Time Dashboard with Kafka+Spring-boot+Angular+Azure

Introduction

Hi… This is my first article related to . From this I’m going to show you how to build real time dashboard for sensor data monitoring with above technologies and deploy to azure. This project is one of the requirement of my last year subject of . From this article onward, I will explain the every azure resources that I have used and the application development. The separate article links are listed at the end of this article.

First of all…Let’s see the demo..

Here you have to login with your azure user name and password. The concepts of Azure active directory.

Login page

After the login it will navigate to dashboard page and it look like this

Dashboard Page

The functionality as follows.

Dashboard page

As you can see, there are two line charts called temperature and humidity. They are changing real-time by web socket with Kafka server. And every status are shown on the top bar. the current date and time, username that you used logging and threshold that increased status.

And humidity data status will be generated by azure function weather it DRY,WET or NORMAL status. The status will show on incident bar.

Check humidity status

Briefly..

Frontend : Angular 10

Backend : Spring-Boot

Other technologies :

  • Kafka, The message broker
  • Node.js (for the Web-socket integrate with Kafka)
  • MySQL db for save threshold log

You can download the all source files related to application from GitHub.

&

The Azure Resources that I have used

  • Active directory
  • Resource group
  • Azure CDN
  • Azure FrontDoor
  • App services
  • Azure Function
  • Azure Database for MySQL server
  • Azure Firewall
  • Azure storage
  • Application Insights

You can download my project here.

App service map

OK… Let’s let’s discuss one by one. I will explain according the azure resources that I have used. The each one has separate article. Link mentioned along with it.

  1. Azure active directory and fronend integration :
  2. Azure Resource group :
  3. Azure CDN :
  4. Azure FrontDoor :
  5. App services :
  6. Azure Function:
  7. Azure Database for MySQL server :
  8. Azure Firewall :
  9. Azure Storage :
  10. Application Insights :

Let’s see the first article,

Thank You…

BSc. (Hons.) in Software Engineering | University of Kelaniya, Sri Lanka| |