DEV Community: Parth Shukla

Cache Interceptor in Angular

Parth Shukla — Sun, 04 Sep 2022 15:33:03 +0000

In previous blog we have explained what are Interceptors in Angular and gave example of an basic auth interceptor,
In this one we are going to learn how add multiple Interceptors and what are catching Interceptors.

Please have a quick read of the first blog for context,

Now in order to add multiple Interceptors, we first add them in root module file

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
...

@NgModule({
  ...
  imports: [
    ... ,
    HttpClientModule
  ],
  providers: [
    ... ,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorOne,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorTwo,
      multi: true,
    }
  ],
  ...
})

Note : InterceptorOne and InterceptorTwo are just examples and you have to add your own interceptor class instead of it.

Now we implement our caching Interceptor

This interceptor caches the request only when the headers contains cacheRequest parameter to true.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { CacheService } from './cache.service';

@Injectable()
export class CachingInterceptor implements HttpInterceptor {

  constructor(private readonly cacheService: CacheService) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Don't cache if it's not a GET request
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    // delete cache if no header is set by service's method
    if (!req.headers.get('cacheRequest')) {
      if (this.cacheService.cacheMap.get(req.urlWithParams)) {
        this.cacheService.cacheMap.delete(req.urlWithParams);
      }

      return next.handle(req);
    }

    // Checked if there is cached data for this URI
    const cachedResponse = this.cacheService.getFromCache(req);
    if (cachedResponse) {
      // In case of parallel requests to same URI,
      // return the request already in progress
      // otherwise return the last cached data
      return (cachedResponse instanceof Observable) ? cachedResponse : of(cachedResponse.clone());
    }

    // If the request of going through for first time
    // then let the request proceed and cache the response
    return next.handle(req)
        .pipe(tap(event => {
            if (event instanceof HttpResponse) {
                this.cacheService.addToCache(req, event);
            }
        }));
  }
}

Cache Service : To store and retrieve for caches

import { HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class CacheService  {
  cacheMap = new Map<any, any>(null);

  getFromCache(req: HttpRequest<any>): HttpResponse<any> | undefined {
    const url = req.urlWithParams;
    const cached = this.cacheMap.get(url);

    if (!cached) {
      return undefined;
    }

    return (this.cacheMap.get(url)).response;
  }

  addToCache(req: HttpRequest<any>, response: HttpResponse<any>): void {
    const url = req.urlWithParams;
    const entry = { url, response, addedTime: Date.now() };
    this.cacheMap.set(url, entry);
  }
}

Sample Get request

getMethod(int param1, cache = false): any {
    let headers: HttpHeaders;
    if (cache) {
      headers = new HttpHeaders({ 'cacheRequest': 'true' });
    }

    return this.http.get(
      'http://apiUrl',
      { headers }
    );
  }

Spring Boot Actuators

Parth Shukla — Sun, 04 Sep 2022 14:44:22 +0000

Spring boot actuator feature can be used to publish the application details, metrics, etc. that we can use to monitor the application easily.

We can use the actuator starter dependency to enable the actuator feature.

The below snippet shows the maven dependency.

Adding this dependency will autoconfigure the required configuration in the application and also enables the default actuator endpoints and health indicators.

org.springframework.boot
spring-boot-starter-actuator

Actuator Endpoint

Just by adding the actuator dependency, our application now has a lot of information exposed that would be very handy for debugging or general microservice insight.

Most endpoints are sensitive – meaning they’re not fully public – while a handful is not: /health and /info.

Description of Few Endpoints:

/health: Exposes the application health status.
/beans: Exposes the configured spring beans in the application context. Provides details like the scope of the bean, bean type, etc.
/caches: Exposes available caches in the application.
/env: Provides all available environment configuration property details.
/configprops: Exposes all available configuration classes list.
/mappings: Exposes all availabe HTTP request mapping details in the application.
/metrics: Exposes application metrics like JVM metrics, system metrics, and also the tomcat server metrics, etc.
/heapdump: Provides the application heap dump.
/threaddump: Exposes the thread information.
/loggers: Exposes the logging application configuration information like log level, etc.
/logfile: For web applications, this endpoint returns the logfile content. We can also retrieve only a part of the log file.
/shutdown: We can use this endpoint to gracefully shut down the spring boot application. This is disabled by default.

Include or exclude actuator endpoints

#To include all the default web endpoints:
management.endpoints.web.exposure.include=*

#To include specific web endpoints:
management.endpoints.web.exposure.include=health,info

#To exclude specific web endpoints:
management.endpoints.web.exposure.exclude=beans

changing the actuator http management port

management.server.port=9080

Creating Custom Actuator Endpoint

package com.actuatorsample;

import java.util.HashMap;
import java.util.Map; 
import org.springframework.boot.actuate.endpoint.annotation.DeleteOperation;
import org.springframework.boot.actuate.endpoint.annotation.Endpoint;
import org.springframework.boot.actuate.endpoint.annotation.ReadOperation;
import org.springframework.boot.actuate.endpoint.annotation.WriteOperation;
import org.springframework.stereotype.Component;

@Component
@Endpoint(id = "sampleEndpoint")
public class CustomActuator {

    @ReadOperation
    public Map<String, String> readEndpoint() {
        Map<String, String> map = new HashMap<>();
        map.put("readMessage", "This is our sample actuator endpoint.!!");
        return map;
    }

    @WriteOperation
    public Map<String, String> writeEndpoint(String value) {

        Map<String, String> map = new HashMap<>();
        map.put("writeMessage", "This is sample actuator write endpoint.!!" + value);
        return map;
    }

    @DeleteOperation
    public Map<String, String> deleteEndpoint() {
        Map<String, String> map = new HashMap<>();
        map.put("readMessage", "This is sample actuator delete endpoint.!!");
        return map;
    }
}

Interceptors in Angular (Authentication, Caching, Logging, Error Handling)

Parth Shukla — Wed, 31 Aug 2022 10:23:20 +0000

Angular interceptors are merely a special kind of HTTP client service that has the sole purpose of intercepting every HTTP request performed. This is true for both incoming and outgoing HTTP requests. OK, I’ve seen this quick definition in several places, but what does that exactly mean? How does it work?

When the response arrives from the back end the Interceptors can transform it before passing it to our application.

One of the main benefits of the Http Interceptors is to add the Authorization Header to every request. We could do this manually, but that is a lot of work and error-prone. Another benefit is to catch the errors generated by the request and log them.

Creating an HTTP Interceptor

We create an Injectable service that implements HttpInterceptor interface and thus must implement method Intercept


@Injectable() export class DemoHttpInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //do whatever you want with the HttpRequest
    return next.handle(req);
}

Then add the class in Root Module

providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: DemoHttpInterceptor,
        multi: true
    }
],

Basic Auth Example using Http Interceptor

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { AuthState } from '../../store/auth.state';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(this.addAuthToken(request));
  }

  addAuthToken(request: HttpRequest<any>) {
    const token = this.authService.getAuthToken();

    return request.clone({
        setHeaders: {
          Authorization: `Basic ${token}`
        }
    })
  }
}

Observables in Angular

Parth Shukla — Sun, 21 Aug 2022 19:17:00 +0000

Observable in Angular is a feature that provides support for delivering messages between different parts of your single-page application. This feature is frequently used in Angular because it is responsible for handling multiple values, asynchronous programming in Javascript, and also event handling processes.

In this simple example we'll call an api recieve an Observable and just console.log it out.

Just before that let us brush up two concepts

What is Observable?

Observable is a function that converts the ordinary stream of data into an observable stream of data. You can think of Observable as a wrapper around the ordinary stream of data.

Observable stream or simple Observable emits the value from the stream asynchronously. It emits the complete signals when the stream completes or an error signal if the stream errors out.

Observables are declarative. You define an observable function just like any other variable. The observable starts to emit values only when someone subscribes to it.

What are observers/subscribers?

The observers are the ones which consumes the value emitted by the observable, these are called observers or subscribers.

The observer must subscribe with the observable to receive the value from the observable. While subscribing it optionally passes the three callbacks. next(), error() & complete()

Creating an Observables

 obs = new Observable((observer) => {
    console.log("Observable starts")
      observer.next("1")
      observer.next("2")
      observer.next("3")
      observer.next("4")
      observer.next("5")
  })

Subscribing to it

this.obs.subscribe({
next: (v) => console.log(v),
error: (e) => console.error(e),
complete: () => console.info('complete')
})

*Returning an observable and subscribing it during an API call
*

catAPI() {
    return this.http.get<Observable<any>>('https://catfact.ninja/fact')
  }

  callingCatAPI(){
    return this.catAPI().subscribe( val => {
      console.warn(val);
    })
  }

Rest API with Golang and Cassandra DB

Parth Shukla — Wed, 12 Jan 2022 11:02:36 +0000

Apache Cassandra is a highly scalable, high-performance distributed database designed to handle large amounts of data across many commodity servers, providing high availability with no single point of failure. It is a type of NoSQL database.

In this post we'll be creating a REST API form Golang and Cassandra DB.

Firsly I'll outline of this blog.

Create a keyspace of Cassandra (Similar to Database in MySQL)
Create a table inside the keyspace
Connect with go-cql connector
Create the rest-api

NOTE: This blog is being written according to an ubuntu system so there may be some minute changes according to your OS.

1. Create a keyspace of Cassandra

CREATE KEYSPACE users
WITH replication = {'class':'SimpleStrategy', 'replication_factor' : 1};

A replication factor of one means that there is only one copy of each row in the Cassandra cluster. A replication factor of two means there are two copies of each row, where each copy is on a different node.

The details of these terms are not the focus of this blog thus I will explain in it in some later blogs.

2. Create a table inside the keyspace

use users;

CREATE TABLE stu(
   username text PRIMARY KEY,
   email text
   );

TIME FOR SOME GOLANG !!!

Firstly we'll create a main.go file and inside it we'll create a struct to map with the database structure

type Student struct {
    Username string `json:"username"`
    Email    string `json:"email"`
}

For connecting with the cassandra we'll use gocql package and link of it is given below.

github.com/gocql/gocql

Now we will create our main function and start the server

func main() {
    http.HandleFunc("/", handleRequest)
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatal(err)
    }
    fmt.Println("Server has Started")

}

For our cassandra client we'll create a new struct named Client which will have a pointer to gocql.Session which has all the required functionalities to interact with the database.

type Client struct {
    cassandra *gocql.Session
}

var cassandraClient *Client

The IniitalizeDB() function

This function is responsible for creating a connection between cassandra and Go and returning a *Client type variable

func InitializeDB() *Client {
    cluster := gocql.NewCluster("127.0.0.1")
    cluster.Consistency = gocql.Quorum
    cluster.Keyspace = "users"
    session, _ := cluster.CreateSession()
    fmt.Println("********************** Cassandra Initialized")
    return &Client{cassandra: session}
}

Now we call the InitializeDb() in the main function and pass the cassandraClient in a variable.

cassandraClient = InitializeDB();

Now we map the request to functions according to the POST, GET, PUT, DELETE

func handleRequest(w http.ResponseWriter, r *http.Request) {
    switch true {
    case r.Method == "POST":
        createStudent(w, r)
    case r.Method == "GET":
        getStudent(w, r)
    case r.Method == "PUT":
        updateStudent(w, r)
    case r.Method == "DELETE":
        deleteStudent(w, r)
    }

}

Atlast all the setup is done now we create the CRUD operations:

1. CreateStudent function

We have 2 functions firstly createStudent function which takes in the post request and routes it CreateStudent function which does the database query.

to Insert into cassandra we use the query.

INSERT INTO users (username, email) VALUES(?,?) and then add in the values.

the functions are below.

func createStudent(w http.ResponseWriter, r *http.Request) {
    var NewUser Student
    reqBody, err := ioutil.ReadAll(r.Body)
    if err != nil {
        fmt.Fprintf(w, "wrong data")
    }
    json.Unmarshal(reqBody, &NewUser)
    //Call the DB
    err = cassandraClient.CreateStudent(NewUser)
    if err != nil {
        panic(err)
    }
    fmt.Println(NewUser)

}



func (s *Client) CreateStudent(stu Student) error {
    err := s.cassandra.Query("INSERT INTO users (username, email) VALUES(?,?)", stu.Username, stu.Email).Exec()
    if err != nil {
        return err
    }

    return nil
}

Similarly for the other methods

2. Update Student

UPDATE users SET email=? WHERE username=?


func updateStudent(w http.ResponseWriter, r *http.Request) {
    var UpdateStu Student
    reqBody, err := ioutil.ReadAll(r.Body)
    if err != nil {
        fmt.Fprintf(w, "Kindly enter data properly")
    }
    json.Unmarshal(reqBody, &UpdateStu)
    //DB Call
    err = cassandraClient.UpdateStudent(UpdateStu)
    if err != nil {
        panic(err)
    }
    fmt.Println(UpdateStu)

}



func (s *Client) UpdateStudent(stu Student) error {
    err := s.cassandra.Query("UPDATE users SET email=? WHERE username=?", stu.Email, stu.Username).Exec()
    if err != nil {
        return err
    }
    return nil
}

3. Get Student

SELECT * FROM users WHERE username=?

func getStudent(w http.ResponseWriter, r *http.Request) {
    name := r.URL.Query().Get("username")
    //DB call
    stu, err := cassandraClient.GetStudent(name)
    if err != nil {
        panic(err)
    }
    fmt.Println(stu)
}

func (s *Client) GetStudent(username string) (Student, error) {

    stu := Student{}
    ctx := context.Background()
    err := s.cassandra.Query("SELECT * FROM users WHERE username=?", username).WithContext(ctx).Consistency(gocql.One).Scan(&stu.Username, &stu.Email)
    if err != nil {
        return stu, err
    }
    return stu, nil
}

4. Delete Student

func deleteStudent(w http.ResponseWriter, r *http.Request) {
    name := r.URL.Query().Get("username")
    //Db Call
    err := cassandraClient.DeleteStudent(name)
    if err != nil {
        panic(err)
    }
    fmt.Println("Successfully Deleted")

}


func (s *Client) DeleteStudent(name string) error {
    err := s.cassandra.Query("DELETE FROM users WHERE username=?", name).Exec()
    if err != nil {
        return err
    }
    return nil
}

So now if you want to access the whole code here is the link
https://github.com/mrshukla1805/golang-cassandra

Please do provide a star on the repository!!

Enjoy and keep learning ;)