Reto: Varias conversaciones a la vez

Clase 14 de 63 • Curso de Angular 6 2018

En Platzinger, sólo es posible tener abierta una conversación a la vez, pero sería muy bueno poder tener abiertas varias.

Así que propón una manera de tener más de una conversación abierta al mismo tiempo (a través de tabs, por ejemplo), y después de terminar el curso, impleméntala.

Marcelino Hernandez

student•

Un componente que contenga las conversaciones

<app-conversations></app-conversations>

donde este se encargue de contener las conversaciones activas y proporcionar un estilo visual más intuitivo como usar tabs

<app-conversations>
	<app-conversation *ngFor="let chat of chats">
	<app-conversation>
</app-conversations>

Juan Carlos Gómez Samacá

company_admin•

Através de Bootstrap podemos utilizar nav pills

<ul class="nav nav-tabs">
  <li class="active" *ngFor="let chat of chats"><a href="#"></a>{{chat.nombre}}</li>
</ul>

Cesar Daniel Zavala Martinez

student•

Es muy simple.

Lo primero es que cada conversación se considere un array, se debe generar un componente que en este, maneje/administre las conversaciones.

Una vez teniendo esto, por ejemplo…si se abre una conversación hace un .push() al arreglo con los datos del identificador de la conversación y de esta forma dar de alta las tabs.

Algo que dijeron en el comentario del *ngFor está en lo correcto, en teoría así se debería de dar de alta, pero, el class=“active” no debería funcionar tanto así…ya que ahí debería usarse la directiva [ngClass] para que entonces, se asigne la clase únicamente al chat activo.

Asimismo, debajo de cada tab únicamente debe mostrarse la conversación relacionada al tab y esto se maneja de la misma forma que la clase activa pero haciendo un *ngIf="".

Jeison Sneider Ruiz Zemanate

student•

Ola Ke Ace…tengo que ver más el curso para poder tener una idea :’(

Juan Pablo Cortés Mora

student•

Tener una vista central del chat Y una lista de contactos a un lado de este

Asi cada que damos click a un amigo en la lista, se actualice la vista central del chat, sin usar tabs

Sigaweb sas

student•

suena interesante, veo que esta caja de texto tiene algunas características que la hacen llamativa, esto es propio de angular o es una librería?

Eduardo cervantes mora

student•

no tengo idea jajaj

Steven André Vargas Canté

student•

Se crea un componente que reciba como un Input el objeto chat del arreglo. Con el ngClass se le da estilo al componente para simular la apariencia de un tab

<div *ngFor="let chat of chats">
	<div [ngClass]="tab-chat">
		<app-chats [chatActive]="chat"></app-chats>
	</div>
</div>

Javier Andres Leguízamo Mora

student•

El componente "chat" sería una sola conversación y al entrar al componente "home", si hay alguna conversación abierta con algún timer (?) se indexaría abajo a la izquierda... con un componente llamada "mini-chat". Se podría minimizar o cerrar dependiendo del usuario. Algo como lo que tiene care-libro jaja

Alfonso Navarro

company_admin•

Una clasica e intutiva me parece es tener tabs en la parte superior con las multiples conversaciones.

Jesús David Rodríguez Varela

student•

que se creen nuevas ventanas al clikear un usuario diferente.

Diego Mauricio Mejía Ospina

student•

Lo que yo propongo es crear un array que administre los mensajes entrantes, pero que no se abran… haya un limite de mensajes abierto .
Creo que con un componente ngFor

Brandon Iván Quiroa Loarca

student•

Yo implementaria en la vista conversation, un "menu" de las conversaciones como cuando usamos routerlink para navegar entre las vistas, solo que ahora seria para navegar entre conversaciones.

René Villegas

student•

Pienso que debería existir un panel con las conversaciones activas, y tener ese componente visible como parte del conversation.component para poder "brincar" de una conversación a otra. El uso de tabs podría ser complicado cuando sean demasiadas conversaciones activas, quizás una lista sea más fácil de controlar.

ariel Silva

student•

como e l chat de hangoust..todas abajo

Jorge Osmar Montesinos Aramayo

student•

Un ngFor en tabs podria ser

Edorta Rodríguez

student•

iterando por los diferentes componentes 'conversation' , los visualizamos plegados en un acordeón y en función de nuestra necesidad o de la notificación los vamos desplegando.

Fernando Vallejo

student•

Utilizando Sockets

Ricardo Anchaluisa Caza

student•

Talvez se deberia crear un componente generico y manejarlo como array para cada conversación

Carlos José Moh Lugo

student•

Al igual que el menú, podríamos tener un componente de conversación y vamos sumando bien sea a un panel o menú lateral cada una de las conversaciones que se vayan creando y así poder navegar entre ellas.

Reto: Varias conversaciones a la vez

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