Ir al contenido principal

Destacado

Spring Cloud Sleuth y StackDriver Trace

Siguiendo con nuestra saga de proyectos de Spring GCP, ahora, nos toca ver Spring Cloud Sleuth.
En proyectos de Arquitectura de Micro servicios es muy importante la información y observabilidad de todo. Si se están realizando llamadas entre servicios A, B y C; es importante entender si estas fueron exitosas o existe latencia entre dichas llamadas.

Nosotros podemos agregar esta dependencia de Sleuth a nuestro proyecto Spring Boot para darle ese "super poder" de tracing distribuido y luego exponer dicha información en un Zipkin o Jaegger por ejemplo.

GCP tiene Stackdriver trace, que es un servicio que nos permite guardar esta data de tracing sin tener que administrar nosotros mismos nuestro Zipking o storage. Stackdriver puede productir reportes de latencia y/o detectar anamalías en la performance.

Existen dos formas de usar Stackdriver Trace en nuestra aplicación Spring Boot:

1. Usas un Stackdriver Trace Zipkin proxy y configurar el Spring Cloud Sleuth para que use este prox…

Angular 5 - Http deprecado y reemplazado por HttpClient


Estuve conversando el otro día con un prospecto de los cursos de JoeDayz sobre Angular y el me preguntaba si tenía un curso de Angular 5.

Yo le comente que no , pero, que tenía la versión 2 y que la base es la misma y luego podría ver las diferencias.

Al final se quedo en prospecto, porque, quería un curso versión 5. Así que me quede con la espina y decidí actualizar el curso que tenemos.

Angular es mantenida por Google y la versión 5 fue anunciada el 1ro. de  Noviembre del 2017. Pero, que busca Google con este release. Pues, hacerla mas pequeña y más rápida. Cool.

Así que este post es uno de varios por actualizar mi curso.


Se depreco HTTP y ahora se debe usar HttpClient (desde la 4.3.0).

Antes se usaba Http 



Ahora se recomienda HttpClient que se encuentra en @angular/common/http





El nuevo servicio HttpClient te devuelve directamente el body de la respuesta, parseado como JSON. 

Pero si quieres igual acceder al objeto response debes aplicar:




http.get('/api/passengers', {observe: 'response'})


Si quisieras usar otro tipo de respuesta:

  • arraybuffer
  • blog
  • json (es default)
  • text


this.http.get('…', { responseType: 'text' });


Respuestas Tipadas

Gracias a los genéricos de TypeScript ya puedes tipificar tu llamada HTTP para que la respuesta sea del mismo tipo.



interface PassengerResponse {
  results: Passenger[];
}
this.http.get< PassengerResponse >('/api/passengers').subscribe(data => {
  console.log(data.results);
});




Interceptors
Para entender que es un interceptor en Angular, imaginemos que deseamos agregar un token de autenticación a las peticiones que tenemos. Podemos centralizar esta lógica en un interceptor, y así no duplicamos código. 



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

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer authtest` }
    });
    return next.handle(authReq);
  }

}


El método intercept recibe un HttpRequest y debe retornar un stream de HttpEvent de tipo HttpResponse. Cómo los objetos Request y Response son inmutables, nos hace más facil el test. 

NOTA: Cómo los objetos HttpRequest, HttpHeaders y HttpParams son inmutables, por eso se ve en el código anterior como se crear un nuevo objeto para incluir las modificaciones. Eso se hace con req.clone().

Luego registramos el Interceptor en el app.module.ts:




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

@NgModule({
  imports: [],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}


En caso quieras mas interceptors declaralos como en un array:


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



Eventos de Progreso

Otra característica interesante es que podemos conocer el progreso de las subida de nuestras peticiones y/o descargas de sus respuestas. Esto gracias al reportProgress.



const req = new HttpRequest('POST', 'upload/file', file, {
  requestProgress: true
});
this.http.request(req)
  .subscribe(event => {
    if (event.type === HttpEventType.UploadProgress) {
      console.log(event.total, event.loaded);
    }
  });



RxJS 5.5

Esta versión de Angular 5 viene con una versión más actual de RxJS para trabajar con Observables, la versión 5.5.

Antes importamos así los operadores map y filter:



import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);




Ahora con RxJS 5.5 los importamos directamente:


import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);


En siguientes post ire contandoles que cambios trae esta versión.

Pero, si quieres ver los cambios aplicados en un ejemplo, te comparto este url de github.

Enjoy!


Joe





Comentarios

Publicar un comentario