Introduction

Last weekend, I built the foundations to house the SignalR components and UI artefacts.  In this post, I complete the basic integration of these components as well as some graphic design.

The idea, for this section of the adtech dashboard, is for tweets to drop on top of each other (based on the user configuration).  All of this can be done by maintaining a real-time connection to the Twitter API via SignalR.

Card Design HTML

With limited time to build this, and whilst I plumbed in the .NET and SignalR code, I had to get someone else to craft the HTML to render tweet data.

For just a few dollars, you can find someone on a main freelancer sites. I submitted a project and got a few submissions, some samples can be seen below:

CardOptions

 

For this MVP, the main tweet properties are important:

  • Name
  • Username
  • Tweet
  • Location and GPS data

These must be extracted and integrated with the design artefacts as per the “card” HTML supplied by the freelancer.

<div class='card-panel grey lighten-5 z-depth-1'>
    <div class='row'>
        <div class='col-sm-3'>
            <img src='profilepic' alt='' class='circle responsive-img card-img'>
        </div>
        <div class='col-sm-9'>
            <p class='name font-bold font fontsize'>name</p>
            <p class='username font font-light grey-text'>username</p>
            <span class='black-text font'>
                tweet
            </span>
        </div>
    </div>
</div>

How does it look?

You can see how this gets rendered here.  The tweets drop on top of each other via the SignalR connection (and Hub) from the Twitter API.

TweetFountain

It’s hard to visualise from the screen shot but the following JQuery will give you an idea as to how it works.  In this code snippet, you can see fade effect I’ve added which gives a smooth transition as the tweets pile up within the “real-time feed” .

if (tweet != null) {
          $(tweet)
          .hide()
          .prependTo("#tweets")
          .fadeIn("slow").delay(1000);
      }
      else {
          alert('No tweet data');
      }

If you want to see a video of it in action then drop me a message.

Finally

The building blocks of the real-time feed are almost there.

Next steps will be to introduce Microsoft Cognitive Services to the stack and apply another layer of machine learning over the data being returned from Twitter.

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