Colocar imagen del perfil de Facebook al autenticarnos en platzisquare

¡Hola comunidad!, esta vez les vengo a compartir algo muy sencillo pero útil sobre todo para quienes vengan iniciando con Angular y no tengan mucha experiencia con la visualización de los datos que se retornar al realizar una petición dada.

Esta vez nos concentraremos en el servicio “autorizacion.service.ts” para lograr cambiar la imagen ubicada en la cabecera de la página principal, donde se despliegan los lugares.

Para recapitular un poco en el tema quisiera mostrar una vista general de este servicio, para ello pues
contraí la implementación de cada método para lograr este alcance general y concentrarnos en ciertos cambios
en relación al desarrollo normal del proyecto de Curso.

Como se puede observar, el método “” tiene un modificador de acceso privado, por lo cual solo
será accesible desde el miembro actual, la clase que representa al fichero “autorizacion.service.ts”.

La razón principal del porque hago esto, es básicamente para poder aislar responsabilidades desde
los componentes tipo Typescript, y que están contenidos por lo general en cada carpeta relativa a cada
parte de la aplicación desarrrolladaq.

Siendo entonces el componente: “app.component.ts” el fichero Typescript principal para controlar las
interacciones con la vista, allí procedemos a crear unos miembros en la parte pública de la clase: “AppComponent”:

-La idea es definir una variable que almacene como valor la URL relativa a una imagen por defecto para aquellos
usuarios que NO están logueados en nuestra app, y aquellos que si están logueados pues esta variable
tendrá como valor, la URL de nuestra foto de perfil de FACEBOOK.

• En mi caso, subí la imagen estandar que se muestra por defecto a mi proveedor de webhosting, así que
  esto lo podrán realizar en su hosting personal y si no tienen bien podrían crear uno gratis en: www.000webhost.com.

• Retomando el tema, la definición de la variable en app.component.ts:

imgHeader:string=null;

• Una vez definida esta variable por defecto con valor null, vamos a: “autorizacion.service.ts” y procedemos
  a crear un método público que permita retornar la URL de nuestro avatar de FACEBOOK:

Código editable:

// Obtener Foto (Facebook)publicgetUrlPhoto(){
    returnthis.getUserData().currentUser.photoURL;
}

• Mirando detenidamente los datos retornados por el método “getUserData()”, uno de tantas propiedades
  retornadas es: “photoURL”.
• Como pueden ver, este mecanismo de obtener la foto, a su vez está haciendo uso de un método cuyo modificador
  de acceso es PRIVADO, ello, para separar responsabilidades como comenté lineas atrás.
• El código del método privado mediante el cual se obtienen todos los datos:

// Método privado, solo para alcance en miembro actual: autorizacion.service.tsprivategetUserData(){
    returnthis.angularFireAuth.auth;
}

• Ahora el paso más importante, conectar desde app.component.ts el servicio que permite obtener la foto, es decir,
  consumir el servicio de autorizacion.service.ts desde el componente principal que tiene visibilidad global de los
  elementos visuales de nuestra aplicación, platzisquare.

• Así que pues vamos a ello:

1. Asignar en el constructor la URL de una imagen por defecto antes de loguearnos:

• Vista del código

this.imgHeader='http://tu-blog-personal/assets/icono1-por-defecto.png';

• Vista desde mi editor de código:

1. Una vez asignemos una imagen por defecto, se procede a realizar una programación defensiva, al menos así acostumbré
   a llamar a aquellas validaciones (con el uso del IF) cuestionandome: ¿Que pasa si me logueo pero NO tengo asignado el avatar?

• Ahora la implementación de esa validación una vez haga uso del servicio:

• Vista del código

// validar que obtenga alguna imagen a mostrar let photo = this.autorizacionService.getUrlPhoto();
if (photo!=null || photo !=''){
    this.imgHeader=photo;
}

• Vista desde mi editor de código:

1. Finalmente probamos a ver que tal los cambios en nuestro código, basta escribir el comando:

ng serve

• Desde el navegador ingresar la URL: “http://localhost:4200/” y verán el cambio aplicado si todo está bien implementado.

• Les comparto una captura de pantalla de como se ve mi ejemplo del proyecto ejecutado en el entorno local:

Espero haber aportado algo para quienes se inician con Angular. Puede que sea tanto básico el Tutorial pero siempre es mejor
llevar a cabo un procedimiento ordenado por simple que parezca.

Pronto estaré publicando más Tutoriales sobre este proyecto, el próximo: “Como realizar un cambio en local y desplegar nuevamente en Firebase”.
Un cordial saludo de mi parte y hasta pronto.