Enviando un mensaje (con reproducción de sonido)

Clase 48 de 63 • Curso de Angular 6 2018

Resumen

Para el manejo de la conversación en nuestra app, crearemos un servicio llamado conversation, usando el Angular CLI. Usaremos el servicio de base de datos en tiempo real de Firebase a través del objeto AngularFireDatabase inyectado a nuestro servicio en el constructor.

Cada mensaje estará identificado con un timestamp del momento en que se generó y una clave única formada por el user.uid de los dos usuarios que intervienen en la conversación, ordenados con sort() y concatenados con join().

Jose Invernon

student•

Una forma interesante y alternativa de hacer la misma funcionalidad sería aplicar un .include() sobre los 2 uid concatenados. Así si esta de primero o de segundo, solo verificarias si existen los 2. Saludos!

Jessie Buckland Pérez

student•

Muy interesante el mecanismo de comunicación para los mensajes con la lógica de los ids, voy a tratar de implementarlo con una api graphql propia agregándole un servidor de ws para las suscripciones. ¿Alguien me recomienda un sistema de buenas prácticas para poder realizar esto empleando además un sistema de almacenamiento de tipo mysql y mongodb de manera que tenga una redundancia de las conversaciones en ambas bases de datos? :)

Ivan Cardozo

student•

Esta clase estuvo muy buena pero muy compleja , sería de ayuda que hagan un grafico de lo que se está haciendo con el codigo , ya que con ver el codigo y escuchar lo que el profesor dice no basta.

Arturo Mojica Guerrero

student•

Disculpen una pregunta, desde que estamos trabajando con socket con firebase siempre me toca hacer un setimeout para esperar los valores asi sea un segundo o menos porque al principio salen nulos, es normal? o es una mala practica.

Julian Rodriguez

student•

Si es normal cuando ya se empieza a trabajar en proyectos que requieren un nivel mayor de profesionalismo, se empiezan a utilizar mas las promesas y los observables para hacer y mantener todo Asíncrono.

Jesús Ochoa

student•

tal cual como dice el compañero con la ayuda de observables, en angular es más visto que las promesas. si quieres usar promesas , o funciones asincronas.

Andres Mauricio Quiñones Mosquera

student•

Hola, estoy implementando este mismo sistema para una app en Ionic. Lo que quiero saber es como enviar la notificacion de mensaje nuevo al usuario que le estoy escribiendo, alguien puede ayudarme?

Andres Mauricio Quiñones Mosquera

student•

muchas gracias, Ire a la documentacion para implementar la notificacion en mi app

Andres Mauricio Quiñones Mosquera

student•

adicional a mi primera pregunta, al momento de recorrer mi arreglo de friend no obtengo ningun valor en mi pantalla y el inspector de elementos me dice "ng-reflect-ng-for-of": null; alguien tiene idea de que puede pasar?

Alfonso Adame Rueda

student•

hola buenos dias, me sale este error en este componente. core.js:1673 ERROR TypeError: Cannot read property 'uid' of null

Angel Hernandez

student•

Hola :D verifica tu variable de la cual estas intentando obtener la propiedad uid ya que esta llegando nula

Alfonso Adame Rueda

student•

hola mira este es el codigo de mi componente:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { User } from '../interfaces/user';
import { UserService } from "../services/user.service";
import { ConversationService } from "../services/conversation.service";
import { AuthenticationService } from "../services/authentication.service";
import { AngularFireAuthModule } from '@angular/fire/auth';




@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
friendId:any;
friend: User;
today: any = Date.now();
user:User;
textMessage:string;
conversation_id:string;
ids:string;
uid:string;

  constructor(private activatedRoute : ActivatedRoute,
            private userService: UserService,
            private conversationService:ConversationService,private AuthenticationService:AuthenticationService) { 
  this.friendId = this.activatedRoute.snapshot.params['uid'];
  console.log(this.friendId);
  
          this.AuthenticationService.getStatus().subscribe((session)=>{
          this.userService.getUserById(session.uid).valueChanges().subscribe((user:User)=>{
          this.user = user;
          this.userService.getUserById(this.friendId).valueChanges().subscribe((data: User) => {
          this.friend = data;
          const ids =[this.user.uid,this.friend.uid].sort();//ordena el arreglo para obtener los ids en el mismo orden del arreglo
           this.conversation_id = ids.join('|');    
    }, (error) => {
      console.log(error);
    });
         })
      })
    
}



  ngOnInit() {
  }
  sendMessage() {
    const message = {
      uid: this.conversation_id ,
      timestamp :  Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friend.uid
    };
    this.conversationService.createConversation(message).then(()=>{
       this.textMessage = '';
       
    });
  }

}

Diego Esteban Cortés Escandón

student•

en sí que significa valueChanges() a nivel de código que es?

Mateo Santiago Zapata Maldonado

student•

Hola dCortesNet.

El Metodo valueChanges() lo que hace es estar esperando cambios en la lista en especifico, digamos que tienes '/usuarios' entonces este metodo retorna una promesa y se activara siempre que haya algun update, create o delete dentro de ella para que tu generes el evento en la web como desees.

¿Te explique bien?

Alfonso Adame Rueda

student•

hola buenas tardes , me gustaría saber que plugin le puedo poner a sublime text para que haga los imports automáticamente.

Alfonso Adame Rueda

student•

gracias por responder fue de mucha ayuda.

Gabriel Solorzano

student•

Recordar que $ ng generate service services/conversation

se puede resumir así: $ ng g s services/conversation

Ivan Cardozo

student•

sendMessage() {
    const message = {
      uid: this.conversation_id ,
      timestamp :  Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friend.uid
    };
    this.conversationService.createConversation(message);
  }

Este es el resumen de la clase , con esto es que funciona el mundo prácticamente , impresionante ; no puedo esperar a construir mi propio chat.

Ruben Garcia

student•

Muy bien explicado.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { User } from '../interfaces/user';
import { UserService } from "../services/user.service";
import { ConversationService } from "../services/conversation.service";
import { AuthenticationService } from "../services/authentication.service";
import { AngularFireAuthModule } from '@angular/fire/auth';




@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
friendId:any;
friend: User;
today: any = Date.now();
user:User;
textMessage:string;
conversation_id:string;
ids:string;
uid:string;

  constructor(private activatedRoute : ActivatedRoute,
            private userService: UserService,
            private conversationService:ConversationService,private AuthenticationService:AuthenticationService) { 
  this.friendId = this.activatedRoute.snapshot.params['uid'];
  console.log(this.friendId);
  
          this.AuthenticationService.getStatus().subscribe((session)=>{
          this.userService.getUserById(session.uid).valueChanges().subscribe((user:User)=>{
          this.user = user;
          this.userService.getUserById(this.friendId).valueChanges().subscribe((data: User) => {
          this.friend = data;
          const ids =[this.user.uid,this.friend.uid].sort();//ordena el arreglo para obtener los ids en el mismo orden del arreglo
           this.conversation_id = ids.join('|');    
    }, (error) => {
      console.log(error);
    });
         })
      })
    
}



  ngOnInit() {
  }
  sendMessage() {
    const message = {
      uid: this.conversation_id ,
      timestamp :  Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friend.uid
    };
    this.conversationService.createConversation(message).then(()=>{
       this.textMessage = '';
       
    });
  }

}

sendMessage() {
    const message = {
      uid: this.conversation_id ,
      timestamp :  Date.now(),
      text: this.textMessage,
      sender: this.user.uid,
      receiver: this.friend.uid
    };
    this.conversationService.createConversation(message);
  }

Enviando un mensaje (con reproducción de sonido)

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