Jamie Maguire

Software Architect / Consultant / Developer

Ads API, AdTech, Analytics and Big Data, C#, Prototyping, Social Media, Twitter

Building a dashboard with SignalR, JQuery and Bootstrap

Introduction

In a previous post, I introduced SignalR and how I need to implement this to provide real-time updates to an ASP.NET web application.  In this post, I detail how elements of the UI have been built and integrated with SignalR to retrieve Twitter data.

*All of this is within the context of the 2017 Twitter Innovation Challenge #Promote where I’m building an AdTech MVP .

Bootstrap Tags and Search Fields

This morning, I integrated Bootrap Tags which is a JQuery plugin that provides a UI experience for managing “tags”.  There are plenty of examples on the site that show you how to implement it.  You can see here how easy it is:

bootstrapTags

In the interests of time, and as this is an MVP for the Twitter Innovation Challenge, I’ve simply taken the base format and integrated it to allow the input of “search fields”. These will then be passed onto the “engine” for processing.

<div class="panel panel-info">
  <!-- Default panel contents -->
  <div class="panel-heading"><strong>Configuration</strong></div>
    <div class="panel-body">
      <p>Keywords:</p>
      <input type="text" value="" data-role="tagsinput" id="tags" class="form-control md">
    </div>
  </div>
</div>

When rendered, looks like the following:

searchFields

Additional search fields need to be added and a mechanism to configure the machine learning and natural language processing elements.  More thought required and if you’re reading, send a suggestion!

Displaying Tweets

Another element of the dashboard is the displaying of tweet data in real-time via the SignalR connection.  I started off with a basic wire-frame and some dimensions, then settled on a side-bar on the left with the following html:

<div class="panel panel-info">
   <!-- Default panel contents -->
     <div class="panel-heading"><strong>Real-time feed</strong></div>
       <div class="panel-body">
         <p>The following tweets are being extracted from Twitter.. </p>
           <div id="tweets">
           </div>
       </div>
</div>

Which renders something like the following:

realTimeFeed

A key part of this is the DIV “tweets”.  This DIV is updated via the SignalR connection with tweet data. For that to happen, the client side needs to be able to communicate with the server side method and vice-versa.

To achieve this, JavaScript is attached to button which initiates the request on the server:

$("#twitterPipe").on("click", function () {
        twitterHub.server.startTwitterPipe ();
    });

For reference, the following server side method exists in the SignalR Hub.  There are some other things going on in this method but I’ve excluded them in this article for simplicity.

 public async Task StartTwitterPipe ()
 {
    var task = TwitterPipe.StartStream();
    await task;
 }

The method StartStream, is where the data is fetched from the Twitter API and most the heavy lifting occurs.  The output of this method is formatted HTML that can be injected into the DOM and consequently update the real-time feed panel.

Testing

With these components in place. I could run some basic testing and validate that data was being retrieved from the Twitter API after clicking the button.  You can see this in debugging screen shot below.

debugging

Finally

Now the main components for the SignalR piece are there, next steps are to render the data being returned from the Twitter API.  More on that later.

JOIN MY EXCLUSIVE EMAIL LIST
Get the latest content and code from the blog posts!
I respect your privacy. No spam. Ever.

Leave a Reply