Blash: Twitter Dashboard .NET 5 App - Look at Source Code & Setup Twitter API (Part 2)

17th February 2021

Blash is a Twitter dashboard written in .NET 5.

The dashboard uses Blazor WebAssembly to display real-time tweets.

In part 1, we looked at how to use Blash, including how to create a dashboard. Creating a dashboard allows the ability to show real-time tweets for a particular search query.

We also showed a demonstration on using Blash, which includes the steps required to set up a Twitter developer account.

A Twitter developer account is essential to be able to connect to the Twitter API.

Now, we will have a look at some aspects of the source code and demonstrate how to configure the Twitter API in Blash.

The Source Code

Blash is split up into three class libraries, an ASP.NET Core Web API and a Blazor WebAssembly application.

Downloading the source code for Blash will allow to see Blash's code structure.

We will now talk through the different .NET 5 class libraries that Blash uses.

RoundTheCode.Blash.Data Class Library

When Blash receives information from the Twitter API, such as a tweet received, it stores it in a SQL Server database.

It does that through Entity Framework.

The RoundTheCode.Blash.Data class stores all the objects which are required for object relational mapping.

It mimics the objects with the tables stored in the SQL Server database.

But why is this in a separate class library?

Well, the reason for the class library is so it can be used not only on the ASP.NET Core Web API, but also the Blazor WebAssembly application.

That means we don't have to create separate classes for using the same data on different applications.

RoundTheCode.Blash.Shared Class Library

The RoundTheCode.Blash.Shared currently has one purpose.

When the ASP.NET Core Web API is initialised, it runs a background job to get all the rules set up in the Twitter API.

In addition, it gets the latest tweets for those rules.

Then, there needs to be a way of getting real-time tweets, and what Blash does is that it connects to a Twitter API stream.

But, with all these jobs running in the background, it's difficult to determine what's going on.

This is where we implement logging, specifically file logging.

This class is taken largely from our "Create Your Own Logging Provider to Log to Text Files in .NET Core" tutorial.

It allows us to create a new .NET Core logger provider, so log files can be written to text files.

The reason for the class library is so it can be used on the ASP.NET Core Web API, but also in the Twitter API class library.

RoundTheCode.Blash.TwitterApi Class Library

The final class library stores all the methods that we need from the Twitter API.

This includes setting up rules, getting the latest tweets for those rules and connecting to a stream so Blash can receive real-time tweets.

The ASP.NET Core Web API predominantly uses this class to communicate with the Twitter API through it's background task.

However, if a new dashboard is created or deleted, it can also use this class library through an endpoint called in the Blash API.

RoundTheCode.Blash.Api

The Blash API is an ASP.NET Core Web API, which is a bit more than just endpoints.

As previously mentioned, it runs a background task when initialised.

In addition, it uses SignalR as communication between the Blazor WebAssembly application.

The whole point of SignalR is so if a dashboard is created or deleted, or a new tweet is received, it can send that information to all Blazor WebAssembly clients connected.

As a result, it means that every instance of the Blazor WebAssembly application should be in sync, and be seeing the same data.

RoundTheCode.Blash.BlazorWasm

A look at how the Blazor WebAssembly source code looks in Blash
A look at how the Blazor WebAssembly source code looks in Blash.

The final library that Blash uses is the Blazor WebAssembly application.

This is the application that gets shown to the user.

As previously mentioned, it communicates to the ASP.NET Core Web API through SignalR.

In-addition, it calls Blash API endpoints when creating or deleting a dashboard.

This, in-turn, calls the SignalR connection so it can update all other clients connected that a dashboard has been created or deleted.

How to Connect to the Twitter API

Assuming Twitter have approved our Twitter developer account, it's now time to get the credentials.

Blash will need a client ID and secret from the Twitter developer account to connect to the Twitter API.

Watch the demonstration where we pinpoint how to connect Blash with the Twitter API.

In addition, we will run through some of the source code that makes Blash work in the way it does.

More Information

Remember, that Blash is freely available to download and try.

As well as the source code, there is detailed documentation on how it works.

This includes:

Following these steps will allow us to get a Twitter dashboard to show real-time tweets on our machine.

Subscribe to our YouTube Channel

  • Free ASP.NET Core coding tutorial videos.
  • Implement a how-to guide on a topic related to ASP.NET Core.
  • Covers Blazor, Web API's, SQL Server, EF and many more...
Subscribe

Join our Discord Server

  • Can't get your ASP.NET Core application to work? Ask for help here!
  • Discussions with other ASP.NET Core developers.
  • General chat with the community.
Join
David Grace

David Grace

I am a .NET developer, building web applications in .NET Framework and .NET Core with a SQL Server database.

Some of the .NET packages I have used include Entity Framework and MVC.

I've also used many JavaScript frameworks such as React and jQuery, and have experience building CSS in SASS.

Twitter Feed