Perfil de usuario

Clase 44 de 63 • Curso de Angular 6 2018

Resumen

Para mostrar la información del usuario en la pantalla de Perfil, necesitamos obtener su uid desde el servicio autenthicationService que creamos antes y usar este uid para extraer los detalles desde la base de datos a través del método getUserById en el servicio de usuario.

Una vez obtenidos los datos adicionales del usuario, los enlazamos a los elementos html del formulario usando NgModel.

Juan C Felizzola

student•

Rero cumplido.

Solo es aplicar lo mismo que hicimos en profile y reemplazar las variables estaticas que tenemos en home

Teofilo Rosales Gama

student•

no entiendo serias mas especifico para todos

Juan C Felizzola

student•

¿Recuerdas que en profile obtuvimos el status para luego traer el usuario? Si no recuerdas repasa esa clase.
Ahora sólo es hacer lo mismo en home.component.ts y traer esa variable en home.component.html

Jimy Emanuel Diaz Gordillo

student•

Que tanta practico seria si lo guardamos en local storge ?

Teofilo Rosales Gama

student•

Lo logre!!!

home.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../interfaces/user';
import { UserService } from './../services/user.service';
import { AuthenticationService } from './../services/authentication.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
friends: User[];
user: User;
query: string = '';
  constructor( private userService: UserService,
    private authenticationService: AuthenticationService,
    private router: Router) {
    this.userService.getUsers().valueChanges().subscribe(
      (data: User[] ) => {
        this.friends = data;
      }, (error) => {
        console.log(error);
      }
      );
      this.authenticationService.getStatus().subscribe(
        (status) => {
          this.userService.getUserById(status.uid).valueChanges().subscribe(
            (data: User) => {
              this.user = data;
              console.log(this.user);
            }, (error) => {
              console.log(error);
            });
        }, (error) => {
          console.log(error);
        });
  }
  ngOnInit() {
  }
  logout () {
    this.authenticationService.logOut().then(() => {
      alert('sesion Cerrada');
      this.router.navigate(['login']);
    }).catch ((error) => {
      console.log (error);
    });
  }
}

home.component.html

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameonline" *ngIf="user">
              <img [src]="user.avatar || 'assets/img/generic_avatar.png'" id="homeAvatarPicture">
          </div>
        </div>
        <div class="col" *ngIf="user">

          <b>{{ user.nick }}</b>
          <div>
            <span>{{ user.status }}</span> <br/>
            <b> {{ user.subnick }} </b><br/>
            <b>{{ user.email }}</b>
            <br />
            <span>< Escribe un mensaje Personal ></span> <br/>
            <a (click)="logout()">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="whiteContainerPadded marto15">
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query"/>
      </div>
      <div class="col-md-auto">
        <img src="assets/img/logo_live_add.png" class="icon" alt="">
      </div>
    </div>
    <hr/>
    <b *ngIf="friends">Amigos ({{ friends.length }}) / ({{ friends.length }})</b>
    <div *ngFor="let user of friends | search: query; let i = index" class="disblo marbo5">

        <span routerLink="/conversation/{{ user.uid }}">
          <img src="assets/img/logo_live_online.png" class="icon" alt="">
           <b>{{ user.nick }}</b> - {{ user.subnick || 'No subnick' }}
           <small>
            {{ user.email }}
           </small>
        </span>

    </div>
  </div>

</div>

Alex Eugenio Gavidia Donayre

student•

Gracias

Gianfranco Verrocchi

student•

Logre completar el codigo, pero hay un error que me aparece y no logro entender porque sale. Sin embargo todo funciona bien.

El error:

El constructor que trae los datos de firebase:

<  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
      // if (status) {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
      // }
    }, (error) => {
      console.log(error);
    });

  }  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
    }, (error) => {
      console.log(error);
    });

  }

Logre eliminar el error verificando si status no es null...

  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
       if (status) {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
       }
    }, (error) => {
      console.log(error);
    });

  }

Pero no entiendo porque pasa esto...

Walter Lensinas

student•

¿En el primer código tenes dos constructores? Estimo que es un error de copy-past.

Edwin Garcia

student•

Porque cuando inicia hay un retardo para que pueda traer los datos, y en ese momentos los datos son null, agrégale en el div un *ngIf="user", eso hará que hasta que tenga los datos desde firebase ejecute lo demás, espero haberme hecho entender...

Adrian Alberto Casas Lopez

student•

Cuando pongo *ngIF="user" para validar si la variable user tiene valor, y regreso al home y vulevo a ir al Profile ya no me carga los datos y tengo que darle F5, ¿alguien sabe el por que?

Adrian Alberto Casas Lopez

student•

No se si le suceda ha alguien mas pero a mi despúes de cierto tiempo ya no me responde el menú correctamente alguien sabe a que se deba ?

Jeffry Davila

student•

Terminado…

Jeffry Davila

student•

Jecsham Castillo

student•

src="/assets/img/logo_live_{{user.status || 'offline'}}.png"

Edith Hernández Navarrete

student•

Continuando con el curso!

import { Component, OnInit } from '@angular/core';
import { User } from '../interfaces/user';
import { UserService } from './../services/user.service';
import { AuthenticationService } from './../services/authentication.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
friends: User[];
user: User;
query: string = '';
  constructor( private userService: UserService,
    private authenticationService: AuthenticationService,
    private router: Router) {
    this.userService.getUsers().valueChanges().subscribe(
      (data: User[] ) => {
        this.friends = data;
      }, (error) => {
        console.log(error);
      }
      );
      this.authenticationService.getStatus().subscribe(
        (status) => {
          this.userService.getUserById(status.uid).valueChanges().subscribe(
            (data: User) => {
              this.user = data;
              console.log(this.user);
            }, (error) => {
              console.log(error);
            });
        }, (error) => {
          console.log(error);
        });
  }
  ngOnInit() {
  }
  logout () {
    this.authenticationService.logOut().then(() => {
      alert('sesion Cerrada');
      this.router.navigate(['login']);
    }).catch ((error) => {
      console.log (error);
    });
  }
}

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameonline" *ngIf="user">
              <img [src]="user.avatar || 'assets/img/generic_avatar.png'" id="homeAvatarPicture">
          </div>
        </div>
        <div class="col" *ngIf="user">

          <b>{{ user.nick }}</b>
          <div>
            <span>{{ user.status }}</span> <br/>
            <b> {{ user.subnick }} </b><br/>
            <b>{{ user.email }}</b>
            <br />
            <span>< Escribe un mensaje Personal ></span> <br/>
            <a (click)="logout()">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="whiteContainerPadded marto15">
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query"/>
      </div>
      <div class="col-md-auto">
        <img src="assets/img/logo_live_add.png" class="icon" alt="">
      </div>
    </div>
    <hr/>
    <b *ngIf="friends">Amigos ({{ friends.length }}) / ({{ friends.length }})</b>
    <div *ngFor="let user of friends | search: query; let i = index" class="disblo marbo5">

        <span routerLink="/conversation/{{ user.uid }}">
          <img src="assets/img/logo_live_online.png" class="icon" alt="">
           <b>{{ user.nick }}</b> - {{ user.subnick || 'No subnick' }}
           <small>
            {{ user.email }}
           </small>
        </span>

    </div>
  </div>

</div>

<  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
      // if (status) {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
      // }
    }, (error) => {
      console.log(error);
    });

  }  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
    }, (error) => {
      console.log(error);
    });

  }

  constructor(private router: Router, private userservice: UserService, private authenticationService: AuthenticationService) {
    this.userservice.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log('error obteniendo lista de usuarios:', error);
    });

    this.authenticationService.getStatus().subscribe((status) => {
       if (status) {
        this.userservice.getUserByID(status.uid).valueChanges().subscribe((data: User) => {
          this.currentUser = data;
          console.log(this.currentUser);
        },
         (error2) => {
          console.log(error2);
         });
       }
    }, (error) => {
      console.log(error);
    });

  }

Perfil de usuario

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos