Azure DevOps – Angular 5 with .Net WebApi

This article shows how to set up AzureDevOps CI/CD pipelines to be set for a full stack application. Here I use a multilayered solution set up which show the tasks based on users. Below is the technology stack which is used.

  • Frontend UI – Angular 5
  • Middleware APIs- ASP.NET WebAPI
  • RDBMS – SQL Server 2012
  • Dependency Injection – Unity
  • ORM – EntityFramework
  • Framework – .NET Core

I have code hosted on github as public repo.

Our projects in the solution would look like below:-

This image has an empty alt attribute; its file name is image.png

First, create an AzureDevOps account by going to azure web portal.

As for pricing, Azure DevOps is free for open source projects and small projects (up to five users).

I have created Tracker as a private project, which I will be using for my Azure CI/CD pipeline.

Once you create a project there will be an option on the left-hand side, which gives us a submenu to show files and its metadata.

After I click files, I would not see any files. Since I am using git version control and the source is hosted on GitHub. I will fire these two commands in the command prompt to push my latest changes.

git remote add origin
git push -u origin --all

Now the code is pushed and the next step is to create AzureDevOps pipeline, on the left-hand side, there is an option. We would need to create Build and Release pipelines separately.

Again goto build option, we would see an option, where we need to create a build agent with multiple configurations.

  • Install node package manager,
  • Install angular cli
  • Build packages for angular,
  • Nuget restore to install packages for WebApi’s solution.
  • run unit tests,
  • And finally, publish artefacts.

Once we are set with these build pipelines, we would need to proceed for Release Pipeline.

In order to

In order to make it simple, I would use the staging environment. In real-world scenarios, we can have dev, stage and prod separately.

In the image below, we select the build source type, which is our build pipeline, and we would like to

JWT Authentication for WebAPI

This post is about securing web api using JWT token based authentication. JWT stands for JSON Web Tokens. JSON Web Tokens are an open, industry standard method for representing claims securely between two parties. In token based authentication, the user sends a username and password, and in exchange gets a token that can be used to authenticate requests.

A JWT token look like:


<base64-encoded header>.<base64-encoded claims>.<base64-encoded signature>

.NET has build in support for JWT tokens in the below namespace.

using System.IdentityModel.Tokens.Jwt;

JWT token has three sections:

  • Header: JSON format which is encoded as a base64
  • Claims: JSON format which is encoded as a base64.
  • Signature: Created and signed based on Header and Claims which is encoded as a base64.

In the below project, we will see how the JWT token authentication has been implemented.

Step 1 – A browser client is going to send a http request with username and password. This is going to be validated using WebAPI filter attribute.


Step 2 – Server validates the username and password and completes a handshake. Post handshake, the server generates the token and send it to the client.

The below code is going to generate the token for the user(client)

We need to add below two nuget packages from Nuget Package manager,

Install-Package Microsoft.IdentityModel.Tokens -Version 5.4.0   
Install-Package System.IdentityModel.Tokens.Jwt -Version 5.4.0

Step 3 — Check for token validation

We used System.IdentityModel.Tokens.Jwt library for generating and validating tokens. To implement JWT in Web API, we created a filter for authentication which will be executed before every request. It will verify the token contained in the request header and will deny/allow resource based on token.

Demo – WPF TDD with xUNIT

This demo is about using WPF Test driven development with xUnit framework. is a free, open source, community-focused unit testing tool for the .NET Framework. has two different types of unit tests: facts and theories.

  • Facts are tests which are always true. They test invariant conditions.
  • Theories are tests which are only true for a particular set of data.

In the below demo, We write few failing tests, make them pass, then repeat the process. I have installed and configured below tools and packages.

  • Visual Studio 2017 Community,
  • WPF
  • TDD with xUNIT Framework
  • Autofac for dependency injection

Our solution would look like this, 4 layers

  • WPFTDDxUNIT.Model — This contains the domain entity which is being used in the project. It is a good practice to keep domain changes to a separate project so that this is not changed accidentally by other team members.
  • WPFTDDxUNIT.DataAccess — In this demo project, Data access is carrying an in-memory collection of records. All the friend’s list is loaded from this project. You can use any relational database like SQL Server or MySQL or any other to save this data.
  • WPFTDDxUNIT.UI.WPF — WPF User Interface is carrying our front end. We want to focus on separation of concerns, so we have not crammed data access and domain into this project.
  • WPFTDDxUNIT.UITests — This is what this blog post is about. We will use this project in the solution to unit tests our view models and other classes to ensure our actual code is backed by units tests. We will use xUnit TDD framework for this task.

The weird interface would look like this, :p

Before we proceed for units test, need to confirm if the below package is installed from nuget:-

Install-Package xunit.runner.visualstudio -Version 2.4.1

If you have Visual Studio Community (or Pro or Enterprise), you can run your tests within Visual Studio’s built-in test runner (i.e Test Explorer).

If not installed the nuget package, please Right click on the project in Solution Explorer and choose Manage NuGet Packages. Search for (and install) a package named xunit.runner.visualstudio:

Now We go to our Unit tests projects, and they can be seen at Test Explorer. Luckily all the unit tests are green.

In the below unit test, we will violate single responsibility principle and cram multiple things to be checked. Here, we use the [Fact] attribute to denote a parameterless unit test.

We can also do the assert check for .net property change events. In the below code, we see the fact is simply going to check if the RaisePropertyChangedEvent is triggered for the friend.

In order to run single test, we can use Ctrl+R, T or Click the Run All link in the Test Explorer window, to see the results update in the Test Explorer window as the tests are run:

Using Unity DI with Angular + WebAPI

Unity is a Dependency Injection container. Our objective usage of Unity framework is to inject the dependencies to the dependent object. 

The Dependency Injection pattern is an implementation of Inversion of Control. IoC means that objects do not create other objects on which they rely to do their work. Instead, they get the objects that they need from an outside source.

The advantages of using Dependency Injection pattern and Inversion of Control are the following:

  • Reduces class coupling
  • Increases code reusing
  • Improves code maintainability
  • Improves application testing

Unity has an excellent documentation and support for Unity WebAPI. Unity DI is open sourced, more info here at

For this demo, we have a multilayered project, whose solution looks like below

Our first step is to add Unity.WebApi to TrackerFrontEnd is via the NuGet package. You can search for unity.webapi using the GUI or type the following into the package manager console.

Install-Package Unity
install-package Unity.WebApi

Once we have installed Unity on our main project, our reference would have added required Unity packages.

Second step is to go to, web application startup.cs file and register components using unity.

Hooking them up.
Once installed the NuGet package, we need to hook it up in order to get the framework to start resolving components via Unity. The old school way, involved calling Bootstrapper.Initialise(). For the new packages, we just change this line to UnityConfig.RegisterComponents(). Once UnityConfig has registered components, it is easy for us to start registering our interfaces types with actual implementations.

Now, post hooking up Unity DI, we can inject dependencies into any controller. I prefer using constructor injection.

Call FitBit API using C#

This post is about using FITBIT API’s and access them using C#.NET. FitBit documentation is a detailed one and easy to pick up. In order to call FitBit apis, you need to register yourself on their development platform and do a handshake with token-based authentication. FitBit uses token-based authentication for the webbased application. So I am using MVC application as the web client.

First register yourself and get Client ID and Client secret key

Once you have registered yourself and created the application on fitbit dev environment, you will see your application below :-

As a developer, we need client ID, Client secret and callback url. We will save this information in config files. We prepare the user to redirect to to prompt them to authorize this app, on successful authentication we will call the required apis from FitBit and get the data.

More info on webapi calls with request and response on FitBit website —

Once we run out webapp, we need to go to its login page. This login page is going to FitBit api, does a handshake.

We are passing same clientid and client secret for authentication.

On successful handshake, we will see our profile data from fitbit. FitBit also gives, user activity like daily steps, weekly steps, heart rate data. But that will be there for another post.

5 considerations to save your sql database from bottleneck

We all write sql queries and fetch the data from the database. Many a times, an inefficient query may pose a bottleneck on the production database’s resources, and cause slow performance for other users if the query contains errors. Most time, we write blind queries and get all the possible data, which is not even required or to be shown to the end user on the form or GRID. In most scenarios, there are few tweaks you can do to your sql queries to optimize for better good.

  1. Indexes

Database novices often find indexes mysterious or difficult. They either index nothing or they try to index everything.

2. Less is more, so select * [STAR] carefully

A common way of retrieving the desired columns is to use the * symbol even though not all the columns are really needed. If you only need a limited number of rows you should use the LIMIT clause (or your database’s equivalent). Take a look at the following code:

SELECT name, price FROM products;

SELECT name, price FROM products LIMIT 10;

3. Say no to correlated subqueries

A correlated subquery is a subquery which depends on the outer query. It uses the data obtained from the outer query in its WHERE clause. Suppose you want to list all users who have made a donation. You could retrieve the data with the following code:

SELECT user_id, last_name FROM users WHERE EXISTS (SELECT * FROM donationuser WHERE donationuser.user_id = users.user_id);

SELECT DISTINCT users.user_id FROM users INNER JOIN donationuser ON users.user_id = donationuser.user_id;

4. Avoid Wildcards

In SQL, wildcard is provided for us with ‘%’ symbol. We should be considerate for using wildcard, which will definitely slow down your query especially for table that are really huge. We can optimize our query with wildcard by doing a postfix wildcard instead of pre or full wildcard. Below are few examples.

#Full wildcard
#Postfix wildcard
#Prefix wildcard
5. COUNT VS EXIST, you decide

Some of us might use COUNT operator to determine whether a particular data exist. There are many instances where we can make use of Exists. Example below:-


This is a very bad query since count will search for all record exist on the table to determine the numeric value of field ‘COLUMN’.

JSON Serialization/Deserialization using C#.NET

Many a times, we have a need to call third party API or web services and these apis and web services return us data in xml format or JSON format.
The .NET Framework doesn’t give you the tools to do it out-of-the-box.

We can implement JSON Serialization/Deserialization in the three ways:

  • Using JavaScriptSerializer class
  • Using DataContractJsonSerializer class
  • Using JSON.NET library 

This demo would highlight how can we deserialize these objects using
JSON.NET package in nuget package manager.

Json.NET is a package which helps conversion between JSON text and .NET object using the JsonSerializer. It converts .NET objects into their JSON equivalent text and back again by mapping the .NET object property names to the JSON property names.

We will install this package in our project.

Go to Tools Menu -> Choose Library Package Manager -> Package Manager Console. It opens a command window to put the following command.

Install-Package Newtonsoft.Json

In our project we are calling fitbit api and getting heart rate data as httpwebresponse in JSON format. Screenshots below.

More information on Newtonsoft Json –