CHAT CON ANGULAR

FIREBASE – GOOGLE -
TWITTER
• Chat en tiempo real con firechat, autenticacion con twitter y google, que vamos aprender.
• Temas:
• AngularFire2: librería de angular para conectarse con firebase.
• Crear observables para escuchar mediante sockets los cambios de firebase.
• Autenticacion de googe y twitter para el chat.
• Uso de angularfire2 para manejar las inserciones.
• Uso de promesas para poder ejecutar funciones cuando detectamos cambios en la base de datos.
• Uso del localStorage para almacenar informacion del login para mantener las sesiones.

• Con esto usted aprendera a desarrollar un chat funcional.

• Vamos a empezar creando nuestro proyecto con ng new firechat o el nombre con el que usted
desee crearlo, luego abra firebase y creese un proyecto nuevo y llamelo firechat o chat,
despues copiamos el archivo styles.css en la carpeta src por ultimo instalar el bootstrap y
subimos el servidor con ng serve -o
INSTALACION DEL ANGULARFIRE2
• Entramos a la pagina https://github.com/angular/angularfire2 y buscamos

• Colocamos en la consola npm install angularfire2 firebase –save despues de instalar vamos a
agregar la variable de configuarcion de firabase
• Ahora debemos copiar toda la configuracion de la ruta de firebase, como la documentacion a
cambiado la copiamos como se ve en la imagen a continuacion.

• Como puedes observar necesitamos una informacion, lo cual quiere decir que la aplicación la
debemos asociar a un lenguaje en este caso lo vamos a asociar a app web y como lo hacemos,
sigamos los siguientes pasos.
• Paso 1: crear el proyecto en firebase llamelo firechat o como usted desee.

• Paso 2: despues añadimos firebase a nuestra aplicación.

Seleccionamos web
• Paso 3: registrar la aplicación, le colocan el mismo nombre del proyecto y dar clic en registrar

• Paso 4: buscar los datos que se piden en el enviroment.ts en la const de firebaseConfig, estos
datos los encontramos dondo clic en el engranaje y configuracion del proyecto
• Paso 5: copiamos los datos y los reemplazamos en la const como se ve en la imagen

• Ahora debemos agregar varias cosas al ngmodule abramos el app.module.ts

• Tambien debemos utilizar otros imports de firebase
• Inyectar el angularFirestore en app.component.ts y creo el constructo según la documentacion

• Ahora hacemos un enlace de un objeto tipo items a el archivo app.component.html

• Ahora nuestro archivo app.component.ts queda de la siguiente manera.
• Hagamos un cambio en el app.module.ts en el import del AngularFireModule.

• Porque hacemos este cambio, se hace porque firebase ya no necesita que nosotros
autoricemos el acceso a la base de datos y según la documentacion nueva en github este
cambio se desarrollo por los probemas de conexión que este generaba. Ahora en nuestro
proyecto firebase damos clic en cloud firestore y damos clic en iniciar colección y le damos el
nombre de chats
• Agregamos la colección y le damos en el id del documento el numero 1 o el que usted desee y
el campo colocamos mensaje tipo string y en valor hola que tal y guardar.
• Ahora demos clic en reglas y despues del if agregamos true para poder acceder a los datos sin
necesidade de loguearnos quitamos la coma despues del true
• Ahora podemos observar en el navegador en la consola vemos que nos sale el mensaje
enableProdMode()
COMPONENTES DEL CHAT
• Vamos a crear un componente llamado chat ng g c components/chat –is, ahora coloquemos el
selector del chat en el app.component.html y nos debe salir chat works

• Ahora hagamos algunos cambios en nuestra ventana del chat, en el chat para que se vea
mejor, primero en el app.component.html
• Y hagamos que el chat.component.html se vea como una ventana de chat
• Como en el formulario agregue el ngModule debo importar el modulo de formsModule en el
app.module.ts.

• Como pudieron observar en el ngmodule creamos una funcion llamada mensaje y que por
medio de un enter el mensaje se envie, en el chat.component.ts vamos a crear una variable
llamada mensaje de tipo string que se le envia un mensaje vacio y creamos nuestra funcion
enviar_mensaje
SERVICIO PARA CONTROLAR LAS ACCIONES
DEL CHAT
• Creemos el servicio que nos va a controlar el chat con el comando
• ng g s providers/chat --skip-tests, como este servicio no se reflejo en el app.module.ts
debemos importarlo para que no nos genere problemas a futuro
• Recuerde que estamos trabajando con la documentacion de angularfire2 y buscamos la
seccion de collections en Cloud Firestore
• import{ AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore’; estas las copio en el
chat.service.ts
• Debemos inyectar el service en el chat.component.ts y la logica de cargar lo que hay en la base
de datos lo hacemos en el constructor.

• Observa la consola del navegador y te cargan los datos que hay en el cloud firestore
CARGAR Y AGREGAR MENSAJES DEL CHAT
• Vamos primero a quitarle la logica al chat.component.ts para no sobrecargarlo y solo me
quedo con el observable

• Voy a crear una carpeta sobre app llamada interface y dentro de esta creo un archivo llamado
mensaje.interface.ts y queda de la siguiente manera.
El uid le coloco tambien el signo de
pregunta porque va ser opcional
• Ahora esta interface la voy a importar en mi service, la interface se hizo para no utilizar el tipo
any lo cual no es lo mejor para nuestras variables
• Ahora en la funcion cargarMensajes hago un observable para poder almacenar los chats que
tengo y los voy a mostrar en el chat.component.html

• Ahora voy a mostrar los chats que estan cargados en el cloud firestore

• En el navegador en la ventana de chat me cargan los mensajes que tengo en la BD.

• Ahora en el chat.service.ts agrego la funcion agregar mensaje para enviar desde la ventana del chat hacia la base
de datos

• Ahora enviemos el mensaje desde la app implementando la funcion enviar_mensaje

Pero aca tenemos un problema es que los

mensajes estan llegando en forma que no es
DESPLEGAR MENSAJES EN LA CAJA DE CHAT
CORRECTAMENTE
• Recuerde que tenemos el problema del orden de los mensajes y en el service en cargar mensajes agregamos un
metodo llamado ref y esto se llama query

• Ahora limpiemos los chats para que carguen como lo configuramos en el query
• En el import del Component agregamos el onInit porque vamos a hacer referencia a un elemento del html app-
mensajes

• En el export agregamos una variable llamada elemento

• Y en el constructor agregamos un setTimeOut para que carguen los chats en un tiempo determinado
AUTENTICACION CON GOOGLE
• Vamos a crear un componente para el login ng g c components/login, despues en el app.component.html voy a
comentar unas lineas y llamo el selector app-login.

• Despues en el login.component.html creo unos botones con una funcion ingresar

• Ahora vamos a implementar los botones en el login.component.ts.

• Vamos a implementar primero la autenticacion con google, vamos al firebase y damos clic en autenticacion
despues clic en metodo de acceso o sing-in-method, elegimos google y damos clic en habilitar y guardar, despues
de esto vamos la pagina de angularfire2 en github y buscamos Authenticate users, copiamos los imports
• import { AngularFireAuth } from '@angular/fire/auth’;
• import { auth } from 'firebase/app’;
• En el chat.service.ts, el login y el logout lo copio de la pagina de github de angularfire2
• Pero aun nos falta implementar el login y el logout, primero lo vamos a implementar en el chat.service.ts,
tambien debo crear una variable usuario de tipo any

• Y el constructor queda con la siguiente configuracion y la funcion de login y logout

• Ahora en el login.component.ts inyecto el servicio y lo implemento en la funcion ingresar
AUTENTICACION CON TWITTER
• Empecemos por el LogOut, primero creemos un boton salir en el app.component.html

• Ahora abrimos el app.component.ts y lo modificamos inyectando el chatservice y quitamos alguna lineas

• En el logout hacemos el this.usuario igual a vacio

• Ahora llamemos ese logout en el app.component.html

• Vamos a firebase autenticacion y damos clic en twitter, damos clic en mas informacion damos clic en web twitter,
registra tu app, nos pide iniciar la sesion y le damos clic en create app
• Regresemos al servicio chat.service.ts y en el login hacemos una decision si es twitter o google
TOQUES FINALES A NUESTRO CHAT
• Activemos el chat window en el app.component.html
• Ahora en el chay quiero saber que cuenta fue la que escribio