Real Time Dashboard with Kafka+Spring-boot+Angular+Azure
Hi… This is my first article related to Microsoft Azure. 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 Distributed and Cloud Computing. 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.
After the login it will navigate to dashboard page and it look like this
The functionality as follows.
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.
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 ARM Template here.
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.
- Azure active directory and fronend integration : The Link
- Azure Resource group :The Link
- Azure CDN :The Link
- Azure FrontDoor :The Link
- App services :The Link
- Azure Function:The Link
- Azure Database for MySQL server : The Link
- Azure Firewall : The Link
- Azure Storage : The Link
- Application Insights : The Link
Let’s see the first article,