Dev'n with Kevin - Part 1

How to build out a real-time dashboard

Jan 17, 2020

By Kevin Garabedian, Stack Engineer

Hello World, and welcome to my lair, Muhahaha! My name is Kevin Garabedian. I have been coding since circa 1995. I am going to be giving some real-world examples of how our technology can be applied and I hope it helps our wonderful community of developers utilize SignalWire's advanced communications platform.

Throughout my blogs, I will be covering topics such as dashboards, dialers, and bots, oh my!

For this first blog installment, we will start building out a basic real-time dashboard.

So, what is a real-time dashboard? And why would you want to have one? As with any business: information is power. The more metrics you have, the better customer experience you can provide while also keeping your staff informed.

The metrics you would like to display and collect are totally up to you, but we will start with the basics like: Date Time, To, From, Duration, Type, Sentiment, Direction, Context, and Status. We can then build on this demo over future installments and add more integrations to make it more engaging, like transcription, sentiment/keyword analysis, bot integration, coaching, etc.

My demos are served up using C# .NET Core for server-side, with React as a front-end. I will provide full source code at the end of this overview.

If you haven't already, please check out my colleague Shane Bryldt's “Shane’s World” blog. Shane does a great job explaining the fundamentals and building blocks that enable demos like this one. 

For this demo you need to understand the concept of "consumers," as they are used throughout this demo. We are going to build upon them and harvest the data they provide. To keep it simple, we will store the data in-memory, so it’s accessible across the solution.


Step 1 – Create a new project in Visual Studio, C#, Dot Net Core, Asp.NET Core Web Application

Step 2 - Select React.js, uncheck Configure for HTTPS (for simplicity) and make sure No Authentication is selected. See image below.

Step 3 – Right click on the folder in “Solution Explorer” and select “Add Controller”. When prompted select “API Controller – Empty”

Step 4 – Name your new controller “DashboardController”

Step 5 – You should now have a dashboard controller defined, and it should look like this. We will come back to this controller soon.

Step 6 – Now we are going to create a new class, that is static to share data models, and variables.

Step 7 – Lets call this class “Helpers”, it will be a static class used to store models, and variables across our solution.

Step 8 – It should look something like this

We are going to define our model for the DashBoard, let’s call it DashboardDataModel. You define the data/metrics you would like to keep track of here. This model will update, as the interaction is updated.

We are going to utilize a ConcurrentQueue to store our data for this demo. Now let’s go back to the Dashboard controller.

You will see we defined Dashboard(), when this is called it will provide the DashboardModel to the front-end in this case React for rendering. This will return a json object containing all the relevant data when you hit the endpoint http://localhost:53400/api/Dashboard.

Now let’s setup a react component that will display our data in a basic table.

First create a new javascript file under /clientapp/src/components and we will call it Dashboard.js

Here is what you want to add to this file:

Now open the /clientapp/src/components/NavMenu.js and add the Dashboard link:

Awesome, so now we have a data source and component we just need to wire it to accept calls. We will now setup a consumer, with a context called DashboardDemo.

You need to add the Signalwire-DotNet package to your project from NUGET.

Now create a folder in your project called Consumers, and add a new class called PhoneConsumer.cs to the folder.

Now let’s work some magic...

First we need to inherit from the generic Consumer.

Next, we will add events.

Now we just set the application to listen for that context we specified and handle the data events.

Make sure you have a phone number setup with RELAY, and the “DashboardExample” context.

And voila! Now we can test. This is just one example of what you can do, so please continue to play around and reach out to us on our Slack Channel if you have any questions. 

You can find the full source code here - https://github.com/kevingarabedian2/SignalWire-Relay-Examples-ReactDashboardBasic

And, as always, Develop. Deploy, Disrupt!