Reto: Varias conversaciones a la vez

Clase 14 de 63 • Curso de Angular 6 2018

Contenido del curso

Introducción

Definición de la estructura del App

Basics de Angular y TypeScript

Estilos

Acceso a datos remotos y login

Opciones y subida de imágenes

Conversación

Amigos

Deploy

Conclusión

Tomar examen

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.

Comentarios

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ú