Accediendo a nuestros usuarios desde Conversation.ts

Clase 20 de 63 • Curso de Angular 6 2018

Clase anteriorSiguiente clase

Resumen

Para tener acceso al detalle de los usuarios en diferentes componentes podemos implementar una de dos soluciones:

Duplicar la fuente de datos en los dos (o más) componentes (no recomendada)
Tener una sola fuente de datos a la que pueden acceder varios componentes (recomendada)

Luis Batalla

student•

Hola!
Con el predicate no me funcionaba, lo saquè y funciona. por?

this.friend=this.friends.find( (record) => {
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

Carlos Federico Rubio Prias

student•

Esa palabra predicate la coloca el editor de manera descriptiva, pero no hace parte real del código, por eso no te funcionaba.

Juan C Felizzola

student•

Te recomiendo tomar el curso de JQuery a Javascript: https://platzi.com/clases/jquery-js/

O el de fundamentos de Javascript: https://platzi.com/clases/fundamentos-javascript/

O si puedes, toma los dos. Te serán muy útiles.

arnold Solorzano

student•

Con la función filter de JavaScript se puede conseguir lo mismo de forma más simplificada.

getFriendById(friendId) {
    return this.friends.filter(friend => friend.uid === friendId);
}

Gonzalo Muñoz

student•

Ojo que filter retorna un arreglo y no un sólo objeto.

Jose Invernon

student•

Si utilizas .find( friend => friend.uid === friendUid) obtienes el objeto de una vez.

Sebas Hondarza Gonzalez

student•

this.friend = this.friends.find((record) => record.uid === this.friendId);

es bueno parsear parseInt() el this.friendId. Algunos IDE's mencionan el radix como segundo argumento del parseInt quedando: this.friendId = parseInt(this.activatedRoute.snapshot.params.uid, 10); de esta forma se puede usar igualación estricta.

Ivan Cardozo

student•

Como puedo hacer yo para aprender a pensar este tipo de cosas en Angular?
Donde puedo ver un manual o una lista de pasos a seguir para hacer esto?
Como hacen normalmente los programadores para aprender estas cosas?
Porque solo viendo el código no aprendo nada.

Gustavo Fabian Sandoval

student•

Cuestión de practicar mucho

Ivan Cardozo

student•

Ya investigue en internet , no es practicar , es aprender a dominar la documentación . Yo viendo el video pensaba que el profesor escribía cosas que se le vienen a la cabeza , y no , saca todo de la documentación .

Walter Lensinas

student•

Buenas tardes, dejo el código de las clase en este repositorio

Para ver el código:

git clone https://github.com/wlensinas/platzinger-wl.git
git checkout 20-access-users
npm install
ng serve --open

Saludos.

Nicolás Morillo

student•

Me salvaste de un error, gracias

Javier Andres Leguízamo Mora

student•

Más adelante en el curso tendremos server-side para acceder a bases de datos como MongoDB, etc?

Jeison Sneider Ruiz Zemanate

student•

conversation.component.ts ---->

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);

    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

    this.friend = this.friends.find((record) =>{
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

Octavio Gomez Romo

student•

y cual es la solución mas optima?

Job Abdala Coronado Duran

student•

La de servicios.

Alex Eugenio Gavidia Donayre

student•

Que formules buenas preguntas

Sergio Eduardo Velandia Obando

student•

Una ayuda por favor: tengo el siguiente problema, al escribir la sentencia con predicate dice: cannot find name 'predicate' porque se genera y como puedo resolverlo

Said Morales Lemus

student•

Omite la palabra, esto sale porque el instructor esta utilizando webstorm

Eduardo Reyes

student•

Les dejo una nota porque tuve un problema en frente de mis narices y no me daba cuenta, por error utilicé 3 iguales en ve de dos, y como estaba pidiendo una coincidencia extricta no me coincidia el uid con el tipo de dato string y um, por lo que dejandolo solo con dos quedó bien

Alex Eugenio Gavidia Donayre

student•

Find

Alex Eugenio Gavidia Donayre

student•

Gracias

Carlos Uriel de Jesus Sánchez González

student•

this.friend = this.friends.find( (record) => {
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

Miguel Ángel

student•

Estoy intentando acceder a nuestros usuarios desde Converseition.ts; pero me pone esto en la consola del

navegador: converseition.component.ts:17 undefined.

import { Component, OnInit, ɵConsole } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from './../Interfaces/user';


@Component({
  selector: 'app-converseition',
  templateUrl: './converseition.component.html',
  styleUrls: ['./converseition.component.css']
})
export class ConverseitionComponent implements OnInit {
   friendId: any;
   friends: User [];
   friend: User;
  constructor(private activateRoute: ActivatedRoute ) {
  this.friendId = this.activateRoute.snapshot.params['uid'];
  console.log(this.friendId);
  let myUser1: User = {
    nick: 'Miguel',
    cedula: 676654,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 1
  };
  let myUser2: User = {
    nick: 'Carlos',
    cedula: 122342,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 2
  };
  let myUser3: User = {
    nick: 'Ramon',
    cedula: 583859,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 3
  };
  let myUser4: User = {
    nick: 'Roberto',
    cedula: 963699,
    email: 'migueldevelopsmm@gmail.com',
    friend: false,
    uid: 4
  };
  let myUser5: User = {
    nick: 'Diana',
    cedula: 353453,
    email: 'migueldevelopsmm@gmail.com',
    friend: false,
    uid: 5
  };
  this.friends = [myUser1, myUser2, myUser3, myUser4, myUser5];
  this.friend = this.friends.find((record) =&gt; {
    return record.uid == this.friendId;
  });
  console.log(this.friend);
}
  ngOnInit(){
  }
}

Christian Michelle Torres Martínez

student•

this.friend = this.friends.filter( (friend: User) => friend.uid === this.friendUid);
}```

Miguel Ángel

student•

Por que me pone esto en la consola del navegador: converseition.component.ts:17 undefined???

<code> this.friends = [myUser1, myUser2, myUser3, myUser4, myUser5]; this.friend = this.friends.find((record) => { return record.uid == this.friendId; }); console.log(this.friend); } ngOnInit(){ } }

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  friends: User[];
  friend: User;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);

    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

    this.friend = this.friends.find((record) =>{
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }

  ngOnInit() {
  }

}

import { Component, OnInit, ɵConsole } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from './../Interfaces/user';


@Component({
  selector: 'app-converseition',
  templateUrl: './converseition.component.html',
  styleUrls: ['./converseition.component.css']
})
export class ConverseitionComponent implements OnInit {
   friendId: any;
   friends: User [];
   friend: User;
  constructor(private activateRoute: ActivatedRoute ) {
  this.friendId = this.activateRoute.snapshot.params['uid'];
  console.log(this.friendId);
  let myUser1: User = {
    nick: 'Miguel',
    cedula: 676654,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 1
  };
  let myUser2: User = {
    nick: 'Carlos',
    cedula: 122342,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 2
  };
  let myUser3: User = {
    nick: 'Ramon',
    cedula: 583859,
    email: 'migueldevelopsmm@gmail.com',
    friend: true,
    uid: 3
  };
  let myUser4: User = {
    nick: 'Roberto',
    cedula: 963699,
    email: 'migueldevelopsmm@gmail.com',
    friend: false,
    uid: 4
  };
  let myUser5: User = {
    nick: 'Diana',
    cedula: 353453,
    email: 'migueldevelopsmm@gmail.com',
    friend: false,
    uid: 5
  };
  this.friends = [myUser1, myUser2, myUser3, myUser4, myUser5];
  this.friend = this.friends.find((record) =&gt; {
    return record.uid == this.friendId;
  });
  console.log(this.friend);
}
  ngOnInit(){
  }
}

Accediendo a nuestros usuarios desde Conversation.ts

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