DEV Community: Rohit Ramname

Read properties of Json object and its values dynamically in Angular/JavaScript

Rohit Ramname — Mon, 29 Mar 2021 13:35:12 +0000

Hello Friends,

Today we are going to see how to read properties of a Json object dynamically and display it using a common component in Angular.

I ran into a situation where I was required to display contents from different sources in a tabular format on the same screen. These sources had different data structures.
To meet this requirement technically, I decided to create a common component in angular which would access the data, derive the headers and show it on the UI. This way, I did not have to create different components for each data structure and also, I can use the same CSS across the board.

I am using a portal called Stackblitz which is an excellent portal for angular/react/javasript hands-on. It sets up everything out of the box and you are basically ready to write first line of code without much of a headache of going through NPM installs for studying. Here is what they are offering at this moment

OK. Lets see the code.

Lets create a common component table-display.component that we will be using to display the data in tabular format.



import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "table-display",
  templateUrl: "table-display.component.html"
})
export class TableDisplayComponent implements OnInit {
  headers: any;
  constructor() {}

  ngOnInit() {
    this.headers = Object.keys(this.items[0]);
  }
  @Input()
  items: any[];
}

Here, we have an input property items which is an array of any data structure (assuming Json).

We also have a property called headers in which we will be deriving the headers from the input object.

The entire magic of this post is this line of code



this.headers = Object.keys(this.items[0]);

This is not a feature of angular. This is the feature of Javascript, I am just using it in my angular code.

Here we are taking first element from the Json array and getting all keys from it.

Next we will see the HTML part of it.

The file table-display.component.html shows the data in tabular format.



<div>
  <table class="table">
    <thead class="" style="background-color: lavender;">
      <tr>
        <th *ngFor="let header of headers">{{header}}</th>
      </tr>
    </thead>

    <tbody class="">
      <tr *ngFor="let item of items">
        <td *ngFor="let header of headers">
          {{item[header]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

In thead, we are iterating over the headers and creating a header row.

In tbody , we are just iterating over items and for each header, we are reading the value using item[header].

Cool. Now our component is ready to go on any page to display the data.

Here is an example.

In my main component, app.component.ts, I have 3 different data sets as below.



private GetCustomerData() {
    return [
      {
        name: "John Smith",
        address: "New York City",
        email: "john@nowhere.com",
        phone: "123456789"
      },
      {
        name: "Mark John",
        address: "Los Angeles",
        email: "mark@everywhere.com",
        phone: "789456123"
      },
      {
        name: "Amanda Nester",
        address: "Miami",
        email: "amanda@here.com",
        phone: "85213456"
      }
    ];
  }

  private GetItemData() {
    return [
      {
        name: "Laptops",
        Model: "Surface",
        Price: "$1500"
      },
      {
        name: "Keyboard",
        Model: "Logitec",
        Price: "$50"
      },
      {
        name: "Phone",
        Model: "Galexy S10",
        Price: "$800"
      }
    ];
  }
  private GetWeatherData() {
    return [
      {
        City: "Philadelphia",
        Weather: "Cold",
        "Chance Of Rain": "10%"
      },
      {
        City: "Dallas",
        Weather: "Warm",
        "Chance Of Rain": "50%"
      },
      {
        City: "san Francisco",
        Weather: "Chilli",
        "Chance Of Rain": "0%"
      }
    ];
  }

I am assigning them to different properties in the component.




  CustomerData: any = this.GetCustomerData();
  ItemsData: any = this.GetItemData();
  WeatherData: any = this.GetWeatherData();

Now I can use the same table-display.component.ts to show the data from all of these data sets by attaching them as input.



<p>
  <table-display [items]="CustomerData"></table-display>

  <br />
  <table-display [items]="ItemsData"></table-display>

  <br />

  <table-display [items]="WeatherData"></table-display>
</p>

Here is the end picture.

Here is the complete code on stackblitz

Hope this helps you.

Thanks for reading.

API Gateway and Microservices using Kong and dotnet core in docker

Rohit Ramname — Mon, 29 Mar 2021 13:33:31 +0000

Hi Friends,

If you are reading this, probably you know what an API gateway is and why you need it. If not, below is the shot version as per whatis.techtarget.com

An API gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices. Because a gateway handles protocol translations, this type of front-end programming is especially useful when clients built with microservices make use of multiple, disparate APIs.

A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.

In this article, we will

1. Create microservies in dotnet core and host them in a docker container.

2. Create docker compose file for our microservices

3. Setup Kong in docker.

4. Expose services through Kong

Lets start.

This is the end architecture that we will be achieving after this exercise.

We have 2 microservices, one for DC and one for Marvel. We will be hosting those on our internal servers. We will use Kong API Gateway to expose these services to the outside word which will be categories into Web traffic and App traffic. These calls will come to our services through different routes, we and app.

Below will be my project folder structure.

As you can see here, I have 2 folders for 2 microservices that I will be hosting in docker using docker-compse.yaml file.

Step 1 - Create Microservices

DC Service

Lets create first microservice, DC. First navigate to the folder "DC" in command prompt and use below command to create an API project.



dotnet new webapi

This should create a basic web api project with WeatherForecast controller.

Add a new controller JusticeLeague.cs for our API,



using Microsoft.AspNetCore.Mvc;

namespace DC.Controllers
{
    [ApiController]
    [Route("[controller]/[action]")]
    public class JusticeLeague : ControllerBase
    {
        [HttpGet]
        public string Strongest(){
            return "Batman!";
        }
    }
}

This is simple HTTPGet API which returns string.

Add dockerfile which will pull down necessary images, build the project in release mode and start it at port 7001.



FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

WORKDIR /app

COPY ./ ./
RUN dotnet restore DC.csproj

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENV ASPNETCORE_URLS=http://+:7001  
ENTRYPOINT ["dotnet", "DC.dll"]

Now lets see if its working fine.

Run below command to build the docker image for DC service and tag it with name DC



docker build -t DC .

Lets test it by running it in a container with name dc



docker run -p 7001:7001 --name=dc dc

Here I am attaching port 7001 on local machine with port 7001 inside the docker container which was specified in our docker file.

And we can see the swagger page with our API.

Marvel Service

Now navigate to the folder "Marvel" in command prompt and run below command to create the API project.



dotnet new webapi

Again, this should create a basic web api project with WeatherForecast controller.

Add a new controller Avengers.cs for our API



using Microsoft.AspNetCore.Mvc;
namespace Marvel.Controllers
{
    [ApiController]
    [Route("[controller]/[action]")]
    public class Avengers: ControllerBase
    {
        [HttpGet]
        public string Strongest(){
            return "Iron Man!";
        }
    }
}

This is a simple API that returns strongest avenger.

Now, like we did before, add docker file which will pull down necessary images, build the project in release mode and start it at port 7002.



FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

WORKDIR /app

COPY ./ ./
RUN dotnet restore Marvel.csproj

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENV ASPNETCORE_URLS=http://+:7002  
ENTRYPOINT ["dotnet", "Marvel.dll"]

Now lets see if its working fine.

Run below command to build the docker image for DC service and tag it with name DC



docker build -t marvel.

Lets test it by running it in a container with name marvel



docker run -p 7002:7002 --name=marvel marvel

Here I am attaching port 7001 on local machine with port 7001 inside the docker container which was specified in our docker file.

And we can see the swagger page with our API.

Alright!

At this point, we have tested our microservices in docker containers with separate docker files.

Step 2 - Host services in Docker with Docker Compose

Now, we will create a docker compose file to get rid of these manual invocations.

Lets create docker-compose.yaml file at the root level and add below content.



version: '3.7'
services: 
    dcservice:
        container_name: DC
        build: 
            context: ./DC
            dockerfile: dockerfile
        ports: 
          - "7001:7001"
    marvelservice:
        container_name: Marvel
        build: 
            context: ./Marvel
            dockerfile: dockerfile
        ports: 
          - "7002:7002"
networks: 
  default:
    name: kong-comic-net

Here we are creating 2 services, DC and Marvel. We are using context feature of the docker file so that we can use the docker files we have created and reside in the respective folders and assign the same ports at the runtime

One more important thing is we are creating a new network named kong-comic-net and attaching both of these services to it. In later part of this article, I will use the same network for KONG.

Now lets test this setup again.



docker-compose build

This should build the images for both of these services using their respective dockerfiles.

And then



docker-compose up

This should use those images, create container and run those container by exposing port 7001 and 7002.

Step 3 - Setup KONG in Docker

Kong Gateway (OSS) is an open-source, lightweight API gateway optimized for microservices, delivering unparalleled latency, performance, and scalability.

Kong Gateway listens for traffic on its configured proxy port(s) 8000 and 8443, by default. It evaluates incoming client API requests and routes them to the appropriate backend APIs. While routing requests and providing responses, policies can be applied via plugins as necessary.

Lets start with KONG setup.

Execute below commands in this order to setup KONG with PostgreSQL DB in docker.

I got these from the official documentation.

Start your database



docker run -d --name kong-database --network=kong-comic-net -p 5432:5432 -e "POSTGRES_USER=kong" -e "POSTGRES_DB=kong"  -e "POSTGRES_PASSWORD=kong" postgres:9.6

Prepare your database



docker run --rm --network=kong-comic-net  -e "KONG_DATABASE=postgres" -e "KONG_PG_HOST=kong-database" -e "KONG_PG_USER=kong" -e "KONG_PG_PASSWORD=kong"  kong:latest kong migrations bootstrap

Start Kong



docker run -d --name kong --network=kong-net -e "KONG_DATABASE=postgres" -e "KONG_PG_HOST=kong-database" -e "KONG_PG_USER=kong" -e "KONG_PG_PASSWORD=kong" -e "KONG_PROXY_ACCESS_LOG=/dev/stdout"  -e "KONG_ADMIN_ACCESS_LOG=/dev/stdout"      -e "KONG_PROXY_ERROR_LOG=/dev/stderr"      -e "KONG_ADMIN_ERROR_LOG=/dev/stderr"      -e "KONG_ADMIN_LISTEN=0.0.0.0:8001, 0.0.0.0:8444 ssl"      -p 8000:8000      -p 8443:8443     -p 127.0.0.1:8001:8001     -p 127.0.0.1:8444:8444      kong:latest

Verify its running.



curl -i http://localhost:8001/

This should return 200 OK response. That means Kong is up and running and ready for configuration.

Step 4 - Expose services through Kong Gateway

Lets start by adding "services" for our APIs.

Service and Route objects let you expose your services to clients with Kong Gateway. When configuring access to your API, you’ll start by specifying a Service. In Kong Gateway, a Service is an entity representing an external upstream API or microservice — for example, a data transformation microservice, a billing API, and so on.

The main attribute of a Service is its URL, where the service listens for requests. You can specify the URL with a single string, or by specifying its protocol, host, port, and path individually.

Lets add service for our API "DC".



curl -i -X POST http://localhost:8001/services --data name=DC --data url="http://DC:7001/"

This should give "201 created" response.

Before you can start making requests against the Service, you will need to add a Route to it. Routes determine how (and if) requests are sent to their Services after they reach Kong Gateway. A single Service can have many Routes.

Lets add 2 routes our service, one will be for our browser based web app (DC-Web) and other for our mobile app (DC-App)



curl -i -X POST http://localhost:8001/services/DC/routes   --data "paths[]=/DC-Web"   --data name=DC-Web

and ..



curl -i -X POST http://localhost:8001/services/DC/routes   --data "paths[]=/DC-App"   --data name=DC-App

Now that we have routes, we can access our APIs using these routes on PORT 8000,

and

On the similar lines, we can create a service for our "Marvel" service



curl -i -X POST http://localhost:8001/services --data name=Marvel --data url="http://Marvel:7002/"

and add routes for web and App.



curl -i -X POST http://localhost:8001/services/Marvel/routes   --data "paths[]=/Marvel-Web"   --data name=Marvel-Web



curl -i -X POST http://localhost:8001/services/Marvel/routes   --data "paths[]=/Marvel-App"   --data name=Marvel-App

Now we can control and manage traffic coming from different routes individually.

In the next part, we will look at few plugins for Kong.

Thanks for reading. Please do share your inputs.

Simplest way to use strongly typed configuration in dotnet core

Rohit Ramname — Fri, 15 Jan 2021 21:06:22 +0000

Hello Friends,

Every project has some kind of configuration file, in the format of XML, json etc. Dotnet core projects use Json based config file in which we can store project level settings in Json format. There are mutliple ways to access these values across the project as shown in this official documentation .

My favorite one is Strongly Typed because ..

Its less prone to string comparison errors.
Provides intellisense for easier access.
and of-course, type safe.

Below is the easiest way I know to use strongly typed approach in asp.net core application.

Lets start by creating a basic asp.net API application.
Detailed steps can be found here

This should put appsettings.json file in the root project.

ASP.Net core's configuration can automatically detect the presence of appsettings.json file if its with this name

I have added custom section "AppDetails" in my appsettings.json file.



{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AppDetails": {
    "AppName": "MyCoolApp",
    "AppVersion": "V1"
  },
  "AllowedHosts": "*"
}

Now create a class called AppDetails.cs to hold the values from this section.



  public class AppDetails
    {
        public string AppName { get; set; }
        public string AppVersion { get; set; }
    }

In the class file, make sure the field names match with those in the appsettings.json file.

Now open Startup.cs class and add below line ConfigureServices method



services.Configure<AppDetails>(Configuration.GetSection("AppDetails"));

In this code, we configuring AppDetails class to hold data from Appdetails section from the config file.

Again, point to note here is, ASP.Net core's configuration service can automatically detect the presence of appsettings.json file if its with this name. Hence it knows where to look for the section with the name "AppDetails".

And that's basically it. Now we can access these settings anywhere in our application using Dependency Injection

Now , in your controller, create a property for AppDetails class , inject IOptions<AppDetails> as a dependency and assign it to the instance.



    [ApiController]
    [Route("[controller]")]
    public class CoolController:Controller
    {
        AppDetails configs { get; set; }
        public CoolController( IOptions<AppDetails> Configuration )
        {
            configs = Configuration.Value;
        }
        public string GetVersion( )
        {
            return configs.AppName + ":" + configs.AppVersion;
        }
    }

If you run the application and launch https://localhost:44350/cool, you should see it return the values from our appsettings.json file.

Please do share if you find it helpful or otherwise.

Run Angular and dotnet core api app in docker container with docker compose — Part 4 — Docker Compose and The Conclusion

Rohit Ramname — Tue, 12 Jan 2021 03:45:33 +0000

Hello Friends,

In this last part of the series, we will be looking at creating docker compose file which will hold 2 applications that we created in last 2 parts (KnowThatCountryAPI and KnowThatCountryUI) together and run it as a single command with their respective docker files in one container.

Lets create that docker-compose.yaml file at root as below.



version: '3.7'
services: 
    apiservice:
        container_name: ktcapi
        build: 
            context: ./KnowThatCountryAPI
            dockerfile: dockerfile
        ports: 
          - "5005:5005"
    uiservice:
        container_name: ktcui
        build: 
            context: ./KnowThatCountryUI
            dockerfile: dockerfile.UI
        ports: 
          - "5006:80"
        depends_on: 
          - apiservice

Lets dive in.

Each application container is treated as a service so that they can talk to each other.
Here we are creating 2 services, apiservice for KnowThatCountryAPI and uiservice as KnowThatCountryUI application.

For each service, we give build instructions.

Here, we are going to use the same dockerfiles that we used to build individual applications so that we can keep this tidy and also if we have to build/test the applications separately, then we don't have to standup the whole thing. We achieve that using context in docker.

Lets check the API service creation part.



apiservice:
        container_name: ktcapi
        build: 
            context: ./KnowThatCountryAPI
            dockerfile: dockerfile
        ports: 
          - "5005:5005"

Here, we are naming the container as ktcapi, like we did in part 2 of this series.
We will be using the same docker file that we created for the API project, hence we set the context of this service by giving the location of the docker file which is ./KnowThatCountryAPI. Now this container image will be created with ./KnowThatCountryAPI as the root.

Then we assign local port 5005 to 5005 inside the container.

Now lets move on to the UI service creation part.



    uiservice:
        container_name: ktcui
        build: 
            context: ./KnowThatCountryUI
            dockerfile: dockerfile.UI
        volumes: 
            - ./src:/app2/src
        ports: 
          - "5006:80"

Here, we are naming the container as ktcui, like we did in part 3 of this series. We are setting the context as ./KnowThatCountryUI since our docker file is located there and we can use all of those paths already defined in the docker file.
And assign port 5006 on local to port 80 inside the container.

.... and we are done.

Now we ready to launch the application. First we build the whole thing with



docker-compose build

With this command, docker builds both of these services as per the instructions specified in their respective docker files.

Once the services are built, all we have to do is



docker-compose up

This will spin up the containers created in previous command and make them ready to use.

Now if you visit http://localhost:5006, you should be able to see the application running in docker container.

Hope this was helpful in getting started with angular, .Net core and Docker.

Your feedbacks are always appreciated !!

Run Angular and dotnet core api app in docker container with docker compose — Part 3 — The Angular UI and docker

Rohit Ramname — Tue, 12 Jan 2021 03:45:20 +0000

Hello Friends,

In this part we will be building our Angular UI to show the countries returned by the dotnet core API. I am going to call it as KnowThatCountryUI (ktcui)

This is a very basic Angular application with the folder structure as below

We have one injectable service file which call the API and fetches the data.

This service is talking to the API service that we created in part 2 of this series which is running at port 5005 on local machine.

in the app.component.ts file, we inject that service as a dependancy and subscribe to the observable.

and in the app.component.html, we loop over the results and display them

OK now our basic UI app is ready to talk to the service and show data.

Now, lets run it in a docker container by creating dockerfile.

Below is my docker file for UI. (dockerfile.ui)

FROM node:10.15.3-slim as build
WORKDIR /KTCUI
COPY src ./src
COPY *.json ./
RUN npm install -g @angular/cli@7.3.10
RUN npm install
RUN ng build --prod

FROM nginx:alpine as deploy
WORKDIR /KTCUI
COPY --from=build /KTCUI/dist/KnowThatCountryUI/*.* /usr/share/nginx/html/

Here we are using node:10.15.3-slim as the base image and installing all the angular dependencies from package.json file inside the container.

Notice the last 3 lines.
To run the angular application, we are using nginx:alpine image as web server.

Now, we can build the image for our UI Application.

docker build -t ktcui -f dockerfile.ui .

and then run it by assigning a port.

docker run -it -p 5006:80 --name ktcui ktcui

In above command, we are assigning port 5006 on local machine with port 80 inside the container which is the default port for nginx.

Now, if we visit http://localhost:5006, we should be able to see our UI.

Thanks for reading.

In the next and the last part of this series, we will see how to pull this all together in one file and one command and stand up the applications together and get them working.

Run Angular and dotnet core api app in docker container with docker compose — Part 2 — The dotnet core API service and docker

Rohit Ramname — Tue, 12 Jan 2021 03:44:59 +0000

“F5” + “NG Serve” to docker compose up — Part 2 — The dotnet core API service and docker

Photo by Lefteris kallergis on Unsplash

Hello Friends,

In this part we will be building our first application, the dotnet core API that serves information about countries. I am going to call it as KnowThatCountryAPI (ktcapi)

For the data, I am going to third party API provider. Please check it out.
https://restcountries.eu/

For this artical, I am not going to call the API in code. Instead, I have already downloaded all the information in json file and will be using that as a data source. You can check the full code on GitHub.

The objective of this series to understand the docker files hence, I wont go into details of each file in the API project, but this is how my CountriesController.cs looks like.

[ApiController]
    [Route("[controller]/[action]")]
    public class CountriesController : Controller
    {
        ICountryServices countryService;
        public CountriesController(ICountryServices country )
        {
            countryService = country;
        }
        [HttpGet]
        public List<CountryInfo> GetAll()
        {
            return countryService.GetAll();
        }

[HttpGet]
        public CountryInfo GetByID(int id )
        {
            return countryService.GetByID(id);
        }
}</span>

If we go to the root directory and run the app as

dotnet run</span>

we should be able to hit the API and get results.

[https://localhost:5001/Countries/GetAll](https://localhost:5001/Countries/GetAll)</span>

Notice that I am using port 5001 for api project in launchsettings.json but you can any port you prefer.

Great. Now that we have our API project ready, we need to run it into a docker container.

We do that by creating a dockerfile at the root.

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

WORKDIR /app

COPY ./KnowThatCountryAPI/ ./
RUN dotnet restore KnowThatCountryAPI.csproj

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENV ASPNETCORE_URLS=http://+:5005  
ENTRYPOINT ["dotnet", "KnowThatCountryAPI.dll"]

This is very basic docker file for running dotnet core apps and you can find the details on numerous blogs including the official documentation. But we want to specifically highlight below part.

ENV ASPNETCORE_URLS=http://+:5005

This part sets the environment variable ASPNETCORE_URLS for the docker container. .net core uses this URL and port to run the application. Based on this, our application will run at port 5005 inside the docker container.

Now , we create an image from the docker file at current location (hence the dot in the end) by tagging it as ktcapi

docker build -t ktcapi .

and run ktcapi image by exposing port 5005 and tag it as ktcapi.

docker run --rm -p 5005:5005 --name=ktcapi ktcapi

At this point, we should be able to access the API at port 5005 inside the container.

Great. We have working container for our API.

In the next part, we will look at our UI application in Angular that will be using this API to display the data.

Thanks for reading…see you in part 3 of this series.

Run Angular and dotnet core api app in docker container with docker compose — Part 1 — The Plan

Rohit Ramname — Tue, 12 Jan 2021 03:44:47 +0000

“F5” + “NG Serve” to docker compose up — Part 1 — The Plan

Hello Friends,

In this short beginner friendly series, I will be documenting a path to run .core api project and angular 7 app in a docker container instead of running and deploying as 2 separate apps. The objective of this series is not the code but is to get familiarize with docker and how we can build a container with 2 application that talk to each other.

Use case:

Create an API application in .Net Core that provides API to access basic information about countries.

Create an UI application in Angular that uses countries API to get the data and display it on the UI.

Here in this scenario, there are few challenges.

Build server should have .Net SDK 3 which is used to develop the API project.
Build server should have specific version of Node and Angular CLI that is used to develop the project
We will have to setup 2 applications in multiple environment in the SDLC process and configure them correctly. (Port, protocols etc)
All developers should have these specific framework versions installed on their machine to be able to contribute.
All of this turn into another requirement; THE Document (which nobody will end up reading). This document will need have different sections for Developer setup and server setup.

This looks like a great use case for Docker. In this process, we will be creating a docker file for each of these apps. This will help us to work on these apps individually. In the end, will create one docker compose file that will tie both of them together in case where we need to run it as ONE application.

In short, this will be the end result.

and the folder structure will be as below.

As you can see here, we will have 2 applications, KnowThatCountryAPI which will be our dotnet core API project and KnowThatCountryUI, which will be our UI project which will get data from the API project. In the end, we have docker-compose.yaml file to tie them up together.

That’s the introduction. Thank you for reading. Will see you in part 2:
“F5” + “NG Serve” to docker compose up — Part 2 — The dotnet core API service and docker

Use of official images for blogs

Rohit Ramname — Sun, 25 Oct 2020 19:12:31 +0000

Does anybody know if we are allowed to use official images of dotnet, docker, angular for our blogs? Just wondering about copyright etc.

7 Useful YouTube cannels I follow for software technologies and probably you should too....

Rohit Ramname — Thu, 15 Oct 2020 18:22:59 +0000

Remember the time when we (most of us) used to commute to work? It was just about 8 months ago but feels like a dream because of the pandemic.

I used to have a train ride for about 50 min one way , so I decided to make use of that time to learn. To keep myself from dozing off, I started searching for YouTube channels that I can watch during that ride. This blog post is to share what I have in my subscribed channels list.

I am a full stack .Net and angular developer. Hence most of my >list is related to those technologies but few of them are very generic and just about current trends in software.

1.NDC Conferences

After launching in Oslo 2008, NDC quickly became one of Europe’s largest conferences for .NET & Agile development. Since then, the conference has evolved to encompass all technologies relevant to Software Developers. NDC speakers come from all over the world and are recognized as experts and thought leaders in their field.

2.GOTO Conferences

Created for developers, by developers, GOTO Conferences is a series of software development conferences focused on gathering the best minds in the software community to bring the most interesting topics to light. This channel features video interviews and presentations from GOTO Conferences and GOTO Nights.

3.Free Code Camp

Website: https://www.freecodecamp.org/learn

Free Code Camp is a donor supported non profit organization aimed at helping people learn to code for free. It has thousands of videos, articles, and interactive coding lessons - all freely available to the public.

4.Scott Hanselman

He is a great speaker and a teacher. Scott has been speaking at conferences all over the world for many years. He has video's from plain windows tricks to C# and Kubernetes.

5.dotNET

This is the official YouTube channel for the .NET team at Microsoft. A great resource to know about latest and greatest in .Net.

6.Microsoft Visual Studio

This is the official channel from Microsoft for events and videos related to Visual Studio, the amazing tools and services for you to create awesome software for yourself...or millions of people. Follow this for conference videos related to Visual Studio, VS Code, Microsoft Build etc.

7.Microsoft Azure

Here you'll find the latest products & solutions news, demos, and in-depth technical insights as well as training videos for Microsoft Azure. A must have for Azure users.

Hope this list will be helpful for your "journey". Please suggest if you know of any other channels that are worth a subscribe.

Thank you for reading.

How to setup an email alert for high Active Message count for Azure Service Bus Queue

Rohit Ramname — Tue, 13 Oct 2020 02:12:09 +0000

This post assumes that you have an Azure service bus namespace >setup with a Queue. Here is the official documentation for >instructions.

I am going to use a service bus namespace AlertDemoServiceBus which >has a queue named Orders.

Lets start!

Click on Alerts and New Alert Rule

This should open a new alert rule page. Here, we select the resource, which is our service bus namespace.

If have only 1 service queue, then it should auto-populate.
Now, we have to set the condition for alert rule.

On click of select condition link, we get a new window in which we can setup the logic.

We can setup alert on various signals as shown below but here we will using “Count of active messages in a Queue/Topics”

Once we select the base signal, on the next page we can configure the logic as below.

Here I am setting alert on Orders Entity with threshold as 1000 active message and the condition will be checked every 5 mins.

Next would be the part where we setup actual Alert email when the condition is met. We have to create an Alert Group to achieve that.

This takes us through a wizard.
First step would be to name it. I am creating an alert with a name HighCntAlert

The next part would be setup notification.
Lets give it a name.

And provide an email address to receive an alert

As we can notice here, we can also request for an SMS or voice message but it attracts extra charges.

Once its setup, we can click review and create. It should create an alert group with email as a notification option for us.
Give it a name and severity Level and enable it upon creation to start receiving alerts immediately .

This should trigger a confirmation email.

Once its ready, we should be able to see it under “Manage Alert Rules” menu.

We are all setup!!
Now, when the queue count goes to 1000 as per our condition, Azure will create an alert. We can see this alert by navigating to “Alert” menu on the namespace.

We have to wait for 5 mins for azure to trigger the condition as >we had configured in our rule above

After 5 mins, we can see an alert for Sev 2 raised for our queue in Alerts section of our service bus namespace.

And an email sent to our registered email address from azure-noreply@microsoft.com

In the details, notice the alert state.

Once the queue count goes down, the state automatically changes to Resolved

and we also get an email notification about this progress.

Hope this was helpful. I gladly appreciate your comments and feedback.

THANK YOU!!

Call a SQL function in EF Core 3 without Linq queries, mapping and translation

Rohit Ramname — Thu, 01 Oct 2020 02:17:35 +0000

I have come across couple scenarios where I need to call an already existing scalar function in SQL server that has some logic into my C# EF Core 3 application for reusability. But most the guides out there show how can this be done only by mapping it to a C# function with Throw new Notimplemented exception and using Linq queries like official documentation.
I did not need to use Linq queries so I am doing it in a different way as below.

Let’s say you have a SQL function.

CREATE FUNCTION dbo.IsStrogestAvenger(@Superhero varchar(100))
RETURNS bit
AS
BEGIN
    declare @result bit=0
    if(@Superhero ='Thor')
        set @result=1
    else
        set @result=0
RETURN @result
END

Now turn to our C# code.
For result, lets create a model to hold this output.

public class IsStrongestAvengerResult
{
   public bool IsStrongestAvenger { get; set; }
}

Map it in context class as below

public virtual DbSet<IsStrongestAvengerResult> IsStrongestAvenger{ get; set; }

And

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity<IsStrongestAvengerResult>(e => e.HasNoKey());
}

Now we use FromSqlInterpolated to call this function and map.

public bool IsStrongestAvenger(string Superhero)
  {
    return context.IsStrongestAvenger.FromSqlInterpolated($"select   dbo.IsStrogestAvenger ({Superhero}) as IsStrongestAvenger").FirstOrDefault().IsStrongestAvenger;
}

Important thing to note above is the use of AS >IsStrongestAvenger and it should match with the property name in >our model IsStrongestAvengerResult.IsStrongestAvenger

Now this function can be directly call from C# to get the output.

Thank you for reading. Comments and Suggestion are highly appreciated.

DEV Community: Rohit Ramname

Read properties of Json object and its values dynamically in Angular/JavaScript

API Gateway and Microservices using Kong and dotnet core in docker

1. Create microservies in dotnet core and host them in a docker container.

2. Create docker compose file for our microservices

3. Setup *Kong * in docker.

4. Expose services through Kong

Step 1 - Create Microservices

DC Service

Marvel Service

Step 2 - Host services in Docker with Docker Compose

Step 3 - Setup KONG in Docker

Step 4 - Expose services through Kong Gateway

Simplest way to use strongly typed configuration in dotnet core

Run Angular and dotnet core api app in docker container with docker compose — Part 4 — Docker Compose and The Conclusion

Run Angular and dotnet core api app in docker container with docker compose — Part 3 — The Angular UI and docker

Run Angular and dotnet core api app in docker container with docker compose — Part 2 — The dotnet core API service and docker

“F5” + “NG Serve” to docker compose up — Part 2 — The dotnet core API service and docker

Run Angular and dotnet core api app in docker container with docker compose — Part 1 — The Plan

“F5” + “NG Serve” to docker compose up — Part 1 — The Plan

Use of official images for blogs

7 Useful YouTube cannels I follow for software technologies and probably you should too....

How to setup an email alert for high Active Message count for Azure Service Bus Queue

Call a SQL function in EF Core 3 without Linq queries, mapping and translation

3. Setup Kong in docker.