DEV Community: Askar Musthaffa

Strategy Design Patterns in C#

Askar Musthaffa — Tue, 16 Apr 2024 06:55:12 +0000

The Strategy Design Pattern streamlines your code by encapsulating algorithms into separate classes, allowing them to be easily interchangeable. Here's a simplified implementation using a booking system.

We start by defining an interface IBookingStrategy which declares a method Book. This interface serves as a contract that concrete booking strategies must adhere to.

public interface IBookingStrategy
{
    void Book(string item);
}

Next, create the context class, BookingContext:

public class BookingContext(IBookingStrategy _booking)
{
    public void BookItem(string item)
    {
        _booking.Book(item);
    }

    public void SetStrategy(IBookingStrategy booking)
    {
        _booking = booking;
    }
}

The BookingContext class encapsulates the strategies. It has a private field _booking of type IBookingStrategy to hold the current booking strategy.
Its constructor takes an instance of IBookingStrategy and initializes the _booking field with it.
The BookItem method delegates the booking process to the current strategy.
The SetStrategy method allows changing the strategy dynamically at runtime.

Now, implement concrete booking strategies:

public class FlightBooking : IBookingStrategy
{
    public void Book(string item)
    {
        Console.WriteLine($"Booking flight for {item}.");
    }
}

public class HotelBooking : IBookingStrategy
{
    public void Book(string item)
    {
        Console.WriteLine($"Booking hotel for {item}.");
    }
}

public class CarRentalBooking : IBookingStrategy
{
    public void Book(string item)
    {
        Console.WriteLine($"Booking car rental for {item}.");
    }
}

We have concrete classes like FlightBooking, HotelBooking, and CarRentalBooking, each implementing the IBookingStrategy interface. Each class provides its own implementation of the Book method, specifying how to book a flight, hotel, or car rental respectively.

Usage:

var bookingContext = new BookingContext(new FlightBooking());
bookingContext.BookItem("New York");

bookingContext.SetStrategy(new HotelBooking());
bookingContext.BookItem("London");

bookingContext.SetStrategy(new CarRentalBooking());
bookingContext.BookItem("Los Angeles");

We create an instance of BookingContext, passing a concrete booking strategy to its constructor. Then we use the BookItem method to book various items.
We can also dynamically switch between strategies using the SetStrategy method.

Output:

Booking flight for New York.
Booking hotel for London.
Booking car rental for Los Angeles.

In conclusion, the Strategy pattern promotes code flexibility and reusability. By encapsulating algorithms into separate classes, you can easily swap functionalities at runtime without modifying existing code. Check out the GitHub repository for the complete project. If you find this helpful, give it a ⭐️. Thanks for reading!

Revolutionizing Web Rendering with Angular Hydration for Superior User Experiences in Angular 16

Askar Musthaffa — Tue, 25 Jul 2023 03:53:07 +0000

Angular 16 introduces non-destructive hydration, revolutionizing Angular SSR with awaited improvements.

The Angular team prioritizes enhancing Server Side Rendering in 2023, aiming to improve Core Web Vitals scores, SEO performance, and eliminate 'flicker' in Angular Universal applications. They consider non-destructive hydration as a crucial step towards their future vision.

Issue with classic SSR (Destructive Hydration)

If you’ve ever used an Angular Universal application you may have come across the ‘flicker’:

Angular Universal’s ‘flicker’ effect when using destructive hydration

This flicker occurs because Angular Universal uses destructive hydration by default. When an Angular application is Server Side Rendered, a static HTML file is immediately sent to the client on page load. This provides a faster First Contentful Paint than traditional SPAs because template is displayed before application code is downloaded.

With destructive hydration, as soon as the client code is bootstrapped it blows away the server-rendered DOM and replaces it with client-rendered DOM. That’s what causes the flicker.

Non-Destructive Hydration

This technique will allow us to reuse the server-side rendered DOM and rather than rerendering it only attach event listeners and create data structures required by the Angular runtime.

How do you enable hydration in Angular

Once you have SSR working with your application, you can enable hydration by visiting your main app component or module and importing provideClientHydration from @angular/platform-browser. You'll then add that provider to your app's bootstrapping providers list.

import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';
...

bootstrapApplication(RootCmp, {
  providers: [provideClientHydration()]
});

Alternatively if you are using NgModules, you would add provideClientHydration to your root app module's provider list.

import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}

New non-destructive hydration's impressive results: Lighthouse metrics of example application shown in two figures.

Classic SSR - Destructive Hydration:

SSR with Non-Destructive Hydration

How to skip http interceptor in Angular App

Askar Musthaffa — Mon, 05 Sep 2022 03:49:46 +0000

Angular Http Interceptor is used in many situations, such as adding header tokens, handling response errors, etc., but sometimes if you want to skip the interceptor layer intercepting request , I will expalin in this post how to deal with it using following steps.

Code
HttpBackend

Interceptors sit between the HttpClientand the HttpBackendinterface.

When injected, HttpBackenddispatches requests directly to the backend, without going through the interceptor chain.

HttpClient Code

@Injectable()
export class HttpClient {
  constructor(private handler: HttpHandler) {}
    ...
}

HttpBackendinterface

abstract class HttpBackend implements HttpHandler {
  abstract handle(req: HttpRequest<any>): Observable<HttpEvent<any>>
}

Sample Code

import {HttpBackend, HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';

({
  providedIn: 'root'
})
export class SkipInterceptorService {
  private httpClient: HttpClient;
  constructor(private handler: HttpBackend) {
    this.httpClient = new HttpClient(handler);
  }
}

Create one manual HttpClient, and then httpClient this will not pass through the Interceptor layer, it's that simple

References
Angular API - HttpBackend
Bypass Angular Interceptors with Request Metadata

Embed PowerBI report in Angular 9 application using .NET Core 3.1

Askar Musthaffa — Fri, 10 Apr 2020 15:28:37 +0000

Introduction

Power BI is a business analytics service that delivers insights to enable fast, informed decisions. In this post, I will take you to step by step run the powerBi report in the Angular9 application.

Step 1.

Get the access token from API

Update appsettings.json with following setting

"PowerBI": {
    "ApplicationId": "667b9837-3300-4762-8e61-68a4d25513835",
    "ApplicationSecret": "",
    "AuthorityUrl": "https://login.windows.net/common/oauth2/token/",
    "ResourceUrl": "https://analysis.windows.net/powerbi/api",
    "ApiUrl": "https://api.powerbi.com/",
    "EmbedUrlBase": "https://app.powerbi.com/",
    "UserName": "hello@aquip.io",
    "Password": "123456789"
  },

namespace GetAccessToken.Controllers
{
    public class PowerBISettings
    {
        public Guid ApplicationId { get; set; }
        public string ApplicationSecret { get; set; }
        public Guid ReportId { get; set; }
        public Guid? WorkspaceId { get; set; }
        public string AuthorityUrl { get; set; }
        public string ResourceUrl { get; set; }
        public string ApiUrl { get; set; }
        public string EmbedUrlBase { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
    }

    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private readonly IConfiguration _configuration;
        public WeatherForecastController( IConfiguration configuration)
        {
            _configuration = configuration;
        }

        public static async Task<string> GetPowerBIAccessToken(IConfiguration _configuration)
        {
            using (var client = new HttpClient())
            {
                var form = new Dictionary<string, string>();
                form["grant_type"] = "password";
                form["resource"] = _configuration["PowerBI:ResourceUrl"];
                form["username"] = _configuration["PowerBI:UserName"];
                form["password"] = _configuration["PowerBI:Password"];
                form["client_id"] = _configuration["PowerBI:ApplicationId"];
                form["client_secret"] = _configuration["PowerBI:ApplicationSecret"];
                form["scope"] = "openid";
                client.DefaultRequestHeaders.TryAddWithoutValidation(
                    "Content-Type", "application/x-www-form-urlencoded");
                using (var formContent = new FormUrlEncodedContent(form))
                using (var response =
                    await client.PostAsync(_configuration["PowerBI:AuthorityUrl"],
                    formContent))
                {
                    var body = await response.Content.ReadAsStringAsync();
                    var jsonBody = JObject.Parse(body);
                    var errorToken = jsonBody.SelectToken("error");
                    if (errorToken != null)
                    {
                        throw new Exception(errorToken.Value<string>());
                    }
                    return jsonBody.SelectToken("access_token").Value<string>();
                }
            }
        }

        [HttpGet]
        public async Task<IActionResult> GetPowerBIAccessToken()
        {
            var accessToken = await  GetPowerBIAccessToken(_configuration);
            var tokenCredentials = new TokenCredentials(accessToken, "Bearer");
            using (var client = new PowerBIClient(new Uri(_configuration["PowerBI:ApiUrl"]), tokenCredentials))
            {

                var workspaceId = Guid.Parse("07684e64-c1f0-482d-b715-c8bef07a80dc");
                var reportId = Guid.Parse("3682417d-63d2-440c-92dc-a09aef1f3d8f");

                var report = await client.Reports.GetReportInGroupAsync(workspaceId, reportId);

                var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
                var tokenResponse = await client.Reports.GenerateTokenAsync(workspaceId, reportId, generateTokenRequestParameters);

                return Ok(  new { token = tokenResponse.Token , embedUrl = report.EmbedUrl  } );
            }
        }
    }
}

About code return token and embed Url to use in the angular application.

Step 2.

Create a new angular application using below angular CLI command.
ng new powerbiembed

After creating the project open the index.html page and add the powerbil client javascript from the CDN. before closing body tag.

Open app.component.html page add below code to render the report

<div style=" width: 100%;" [ngStyle]="{ 'height': (screenHeight-150)+ 'px' }" #embeddedReport></div>

Finally, let's write the code to render the report

import { Component, ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import * as pbi from 'powerbi-client';
import { HttpClient } from '@angular/common/http';
declare var powerbi: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 export class AppComponent implements OnInit  {
  @ViewChild('embeddedReport')
  embeddedReport: ElementRef;
  config: any;
  screenHeight: number;

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.screenHeight = (window.screen.height);  
    this.httpClient.get<any>("<Your API URL>")
    .subscribe(config => {
      this.config = config;
      const model = window['powerbi-client'].models;
      const embedConfig = {
        type: 'report',
        tokenType: model.TokenType.Embed,
        accessToken: config.token,
        embedUrl: config.embedUrl,
        permissions: model.Permissions.All,
        settings: {
          filterPaneEnabled: true,
          navContentPaneEnabled: true
        }
      };
      powerbi.embed(this.embeddedReport.nativeElement, embedConfig);
    });
  }
}

Summary

In this article, I discussed how to embed a PowerBI report in an Angular9 application using .net core 3.1. I hope this article is useful.

Simple state management in Blazor using dependency injection.

Askar Musthaffa — Sat, 28 Mar 2020 05:05:19 +0000

When we create single-page-applications, there is no way around it. Sooner or later we are going to be facing the state. luckily Blazor gives us many ways to manage the state

in this post, I will go through how to implement a user state using POCO class and dependency injection.

Let's use the default counter component that comes with the default blazer template when you create a new project.

Navigate to counter component page and click the counter button that increases the count and if you go back home page and visit the counter page again the state is gone and count reset to zero because the state has been reset while navigation pages.

So how to preserve the state between page navigation in Blazor? so let's implement to preserve user state using dependency injection.

namespace CunterState.Data
{
    public class CounterState
    {
        public int CurrentCount { get; set; }
    }
}

The purpose of the above POCO class is to add in the project dependency injection service. Open startup.cs file add the inject the CounterState class there.

 public void ConfigureServices(IServiceCollection services)
 {
     services.AddRazorPages();
     services.AddServerSideBlazor();
     services.AddSingleton<WeatherForecastService>();

     services.AddScoped<Data.CounterState>();
 }

I injected using the AddScoped injection method into the container. A very important point is to remember is when choosing the injection method. in Blaozr if you are sharing the state's entire user base AddScoped dependency injection method is a perfect choice for us. if you want to share the sate entire application AddSingleton is the best choice for you.

@page "/counter"
@inject Data.CounterState state
<h1>Counter</h1>

<p>Current count: @state.CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    private void IncrementCount()
    {
        state.CurrentCount++;
    }
}

CounterState object has been injection using @inject attribute at the top of the page so that state data will be preserved throughout the user interaction.

Now when you run the application and click the counter button, the value will be preserved. Try this by navigating to the home page then navigating back again to the counter page... Awesome!

Thanks for reading and give your feedback int the comment box below.

Deploy Angular app using Azure DevOps build and release pipelines

Askar Musthaffa — Sun, 08 Mar 2020 18:11:08 +0000

I have created my first YouTube channel video on How to use Azure DevOps services of version control, build and deployment for an Angular 8 app

Dear community member, please give your valuable feedback and suggestion in the comments below to improve my future video.

Thanks for reading and possibly watching!