Login/Registro de usuarios con email y password

Clase 39 de 63 • Curso de Angular 6 2018

Resumen

Para implementar el servicio de Firebase Authentication con email y password crearemos un nuevo servicio con AngularCLI. Al usar un servicio, esta funcionalidad estará disponible en todos los componentes del proyecto en los que lo inyectemos.

Creamos los métodos relaciones con la funcionalidad de autenticación: loginWithEmail, registerWithEmail, getStatus y logOut utilizando las funciones provistas por la API de Firebase. Para hacer uso de este servicio debemos inyectarlo en los componentes de las pantallas de nuestra app.

Para hacer uso de este servicio importamos el módulo AngularFireAuth y lo pasamos al constructor. Luego en el componente tendremos que inyectar el servicio authenticationService, también en el constructor del componente.

Es necesario habilitar en Firebase el modo de autenticación de Email y Password para poder usar esta funcionalidad, y como queremos incluir el nickname y otros atributos del usuario, además de estos dos, nos apoyaremos luego en la base de datos de Firebase.

Teofilo Rosales Gama

student•

Para que el codigo funcione igual que en el video la importacion debe ser asi:

import { AngularFireAuth } from '@angular/fire/auth';

moises mannarino

student•

en que documentacion revisaste para descubrir que los imports iban asi

Ricardo Asin

student•

@Moises en la documentacion oficial

Elberth Jair Agreda Rosero

student•

Si trabajan con versiones recientes al día de hoy, el cambio en el import es: import { AngularFireAuth } from '@angular/fire/auth';

Alexander Sandoval

student•

Para resolver el reto necesitamos habilitar el proceso de autenticación con Facebook:

Lo primero que debemos hacer es ir, en la consola de nuestro proyecto en Firebase, a la sección de Authentication, en la pestaña de Método de inicio de sesión o SignIn Method y habilitar el método Facebook donde debemos colocar el App ID y el App Secret. Para obtenerlos vamos a Facebook for Developers (previo inicio de sesión en Facebook) y agregamos nuestra aplicación (en la parte superior derecha), luego en la sección Configuración > Básica obtenemos nuestros App ID y el App Secret.
Una vez de vuelta en la consola de Firebase copia la URI de redireccionamiento (justo antes de guardar en la pestaña para habilitar el inicio de sesión con Facebook) y la agregamos en el producto de inicio de sesión con Facebook de nuestra aplicación en la consola de Facebook. Para ello vamos, en la parte derecha, a Productos > Inicio de sesión con Facebook > Configuración a la sección URI de redireccionamiento de OAuth válidos, agregamos la URI que nos provee Firebase y guardamos los cambios.

En este punto ya configuramos el proceso de autenticación con Facebook en nuestro proyecto de Firebase y estamos listos para implementar el inicio de sesión con Facebook en nuestra aplicación.

Nota: justo antes de guardar el proceso de autenticación de Facebook en Firebase hay un enlace Más información, sección Integración con proveedores de identidad federada > Facebook > Web, donde se detalla el proceso.

Implementación de método de autenticación con Facebook en nuestra aplicación Angular6:

En nuestro servicio authentication.service.ts agregamos el método logInWithFacebook() e importamos las funcionalidad de firebase/app:

import * as firebase  from'firebase/app'

...

logInWithFacebook() {
    let provider = new firebase.auth.FacebookAuthProvider();
    return this.angularFireAuth.auth.signInWithPopup(provider);
  }

En nuestro componente login.component.ts agregamos la llamada al método que acabamos de crear en nuestro servicio:

loginWithFacebook() {
    this.autheticationService.loginWithFacebook()
      .then( data => {
        alert('Logeado con Facebook correctamente')
        console.log(data)
      })
      .catch( error => {
        alert('Ocurrió un error')
        console.log(error)
      })
  }

Y finalmente agregamos un botón en la plantilla del componente que ejecute la llamada del proceso de autenticación:

<a (click)="loginWithFacebook()" *ngIf="operation == 'login'" class="btn btn-primary facebook">Logear con facebook</a>

Daniel Rodríguez

student•

Super bien explicado, siempre es un problema que facebook cambia la interfaz de las opciones de developer pero basta con una pequeña busqueda y listo.

Javi Puc

student•

Gracias !

Juan Diego Lopez Triana

student•

Así resolví el reto:

auth.service.ts

import { Injectable } from '@angular/core';
import * as firebase  from 'firebase/app'
import { AngularFireAuth } from 'angularfire2/auth'

@Injectable({
  providedIn: 'root'
})
export class AuthService {
	constructor(private angularFireAuth: AngularFireAuth) { }
  	loginWithFacebook() {
    		const provider = new firebase.auth.FacebookAuthProvider()
    		provider.setCustomParameters({
      		'display': 'popup'
    		})

    		return this.angularFireAuth.auth.signInWithPopup(provider)
  	}	
}

login.component.ts

async loginWithFacebook () {
    try {
      const data = await this.authService.loginWithFacebook()
      alert('Logged with facebook successful!')
    } catch (err) {
      this.authService.handleFatalError(err)
    }
  }

Adrian Camilo Caminos

student•

aqui esta la nueva documentacion

https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md

santiago Ramon Alvarez

student•

yo instale el angularFire, intente importarlo desde los módulos, que ya verifique estuviesen en los node_modules, aun así dice: “Property 'auth' does not exist on type 'AngularFireAuthModule'.” lo importe con esta ruta: import { AngularFireAuthModule } from '@angular/fire/auth';

Daniel Acero

student•

tienes que importar el método AngularFireAuth y desde el llamar auth ejemplo: auth.services.ts


import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(
    private af: AngularFireAuth
  ) { }

  createUser(email: string, password: string) {
    return this.af.auth.createUserWithEmailAndPassword(email, password);
  }

  login(email: string, password: string) {
    return this.af.auth.signInWithEmailAndPassword(email, password);
  }

  logout() {
    return this.af.auth.signOut();
  }

archivo login.component.ts funcion login recuerda que debes declarar el service en el constructor como privado e importarlo :

login(event: Event) {
    event.preventDefault();
    if (this.form.valid) {
      const value = this.form.value;
      this.authService.login(value.email, value.password)
      .then(() =&gt; {
        this.router.navigate(['/admin']);
      })
      .catch(() =&gt; {
        alert('no es válido');
      });
    }
  }

Luis Angel Frias Herrera

student•

Así resolví la parte de login authentication.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(
    private angularFireAuth: AngularFireAuth
  ) { }

  loginSocial() {
    return this.angularFireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }

  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }

  getStatus() {
    return this.angularFireAuth.authState;
  }

  logOut() {
    return this.angularFireAuth.auth.signOut();
  }
}

login.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  public operation: string;
  public email: string = null;
  public password: string = null;

  constructor(
    private authenticationService: AuthenticationService
  ) {
      this.operation = 'login';
  }

  ngOnInit() {
  }
  loginSocial() {
    this.authenticationService.loginSocial().then(
      (data) => {
        alert('Social Login Correcto');
        console.log(data);
      }
    ).catch(
      (error) => {
        alert('Login Social Falló');
        console.log(error);
      }
    );
  }

  login() {
    this.authenticationService.loginWithEmail(this.email, this.password).then(
      (data) => {
        alert('Loggeado correctamente');
        console.log(data);
      }
    ).catch(
      (error) => {
        alert('Ocurrió un error');
        console.log(error);
      }
    );
  }
  register() {
    this.authenticationService.registerWithEmail(this.email, this.password)
    .then(
      (data) => {
        alert('Registrado correctamente');
        console.log(data);
      }).catch(
        (error) => {
        alert('Ocurrió un error en el registro');
        console.log(error);
      });
  }
}

Jose Aladino Ospina Lopez

student•

Los imports de la versión que acabo de bajar no van con ‘angularfire2’ sino con ‘@angular/fire’ así:

import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database'

moises mannarino

student•

en que documentacion revisaste para descubrir que los importanos iban asi?

moises mannarino

student•

en que documentacion revisaste para descubrir que los imports iban asi

Diego Mauricio Mejía Ospina

student•

El código funciona con:

import { AngularFireAuthModule } from '@angular/fire/auth';

Charlie Galdamez Madrid

student•

Tengo todas las instrucciones como los dio el instructor, pero al presionar iniciar sesion, este siempre me dirije al home.

Marival Access

student•

a mi me pasa lo mismo, entontraste la solución?

Marival Access

student•

Mi solución fue cambiar las etiquetas <a> por botones, así...

<div class="center marto15"> <button (click)="login()" *ngIf="operation == 'login'" class="btn btn-primary" href="">Iniciar Sesión</button> <button (click)="register()" *ngIf="operation == 'register'" class="btn btn-primary" href="">Registrarme</button> </div>

veronica oviedo

student•

Este es mi reto, autenticacion por medio de Facebook y Google.

 loginWithEmail(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }
  loginWithFacebook() {
    const provider = new firebase.auth.FacebookAuthProvider();
    return this.afAuth.auth.signInWithPopup(provider);
  }
  loginWithGoogle() {
    const provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');
    return this.afAuth.auth.signInWithPopup(provider);
  }

Diego Felipe García Cortés

student•

Con la nueva versión de Angular 9 y AungularFire 6, el llamado a los métodos se auth se hacen de la siguiente manera:

loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.createUserWithEmailAndPassword(email, password);
  }

  getStatus() {
    return this.angularFireAuth.authState;
  }

  logout() {
    return this.angularFireAuth.signOut();
  }```

Maricruz Pizaña Solano

student•

Excelente, gracias :)

Samuel Gonzalez

student•

Al intentar abrir la página de login sólo me carga el navbar, todo corre bien pero esa sitio en especial no funciona

import { Injectable } from '@angular/core';
import {AngularFireAuth} from 'angularfire2/auth'

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(private angularFireAuth: AngularFireAuth) { }
  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }

  getStatus () {
    return this.angularFireAuth.authState;
  }

  logOut() {
    return this.angularFireAuth.auth.signOut();
  }
}```

Alfonso Adame Rueda

student•

![](

Alfonso Adame Rueda

student•

hola buenas tardes, me sale este error:compiler.js:1021 Uncaught Error: Unexpected value 'AngularFireAuth' imported by the module 'AppModule'. Please add a @NgModule annotation, quien me ayuda por favor?

Diego Forero

Team Platzi•

Por lo que veo en las capturas que compartiste AngularFireAuth no esta agregado en el array de declarations en el NgModules, prueba agregarlo y esto debe solucionar el problema.

Alfonso Adame Rueda

student•

![](

Alfonso Adame Rueda

student•

Jenny Katherine Aguilera Morales

student•

Importalo así:

import { AngularFireAuthModule } from '@angular/fire/auth';

https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

Ricardo Portillo

student•

Mi forma de Solucionarlo
authentication.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(private angularFireAuth:AngularFireAuth) { }
  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }
  loginWithFacebook(){
    return this.angularFireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }
  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }
  getStatus() {
    return this.angularFireAuth.authState;
  }
  logout(){
    return this.angularFireAuth.auth.signOut();
  }
}

 loginWithFacebook(){
    this.authenticationService.loginWithFacebook()
     .then((data) => {
        alert('Logeado correctamente');
      }).catch((err) => console.log(err));

  }```
login.component.html (agregar este código)

 <button *ngIf="operation=='login'"  type="buton" class="btn btn-primary btn-block" (click)="loginWithFacebook()">
          <i class="fab fa-facebook" aria-hidden="true"></i>
          Login with Facebook
        </button>```

Jorge Alexander López Molina

student•

Tengo el siguiente error al momento de importar desde Firebase y no he logrado solucionarlo, alguien que me ayude, hice exactamente los pasos del vídeo.

Luis Rodriguez

student•

a mi me funcionó quitando el "onfulfilled" y el "onrejected",

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
operation: string = 'login';
email: string = null;
password: string = null;
  constructor(private authenticateService: AuthenticationService) { }

  ngOnInit() {
  }
  
  login() {
    this.authenticateService.loginWithEmail(this.email, this.password).then( 
      (data) => {
        alert('Loggeado correctamente');
      }).catch( (error) => {
        alert('Ocurrio un error');
        console.log(error);
      });
  }

  register() {
    this.authenticateService.registerWithEmail(this.email, this.password).then( 
      (data) => {
        alert('Registrado correctamente');
      }).catch( (error) => {
        alert('Ocurrio un error');
        console.log(error);
      });
  }

}

loginWithFacebook() {
    this.autheticationService.loginWithFacebook()
      .then( data => {
        alert('Logeado con Facebook correctamente')
        console.log(data)
      })
      .catch( error => {
        alert('Ocurrió un error')
        console.log(error)
      })
  }

import { Injectable } from '@angular/core';
import * as firebase  from 'firebase/app'
import { AngularFireAuth } from 'angularfire2/auth'

@Injectable({
  providedIn: 'root'
})
export class AuthService {
	constructor(private angularFireAuth: AngularFireAuth) { }
  	loginWithFacebook() {
    		const provider = new firebase.auth.FacebookAuthProvider()
    		provider.setCustomParameters({
      		'display': 'popup'
    		})

    		return this.angularFireAuth.auth.signInWithPopup(provider)
  	}	
}

async loginWithFacebook () {
    try {
      const data = await this.authService.loginWithFacebook()
      alert('Logged with facebook successful!')
    } catch (err) {
      this.authService.handleFatalError(err)
    }
  }

import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(
    private af: AngularFireAuth
  ) { }

  createUser(email: string, password: string) {
    return this.af.auth.createUserWithEmailAndPassword(email, password);
  }

  login(email: string, password: string) {
    return this.af.auth.signInWithEmailAndPassword(email, password);
  }

  logout() {
    return this.af.auth.signOut();
  }

login(event: Event) {
    event.preventDefault();
    if (this.form.valid) {
      const value = this.form.value;
      this.authService.login(value.email, value.password)
      .then(() =&gt; {
        this.router.navigate(['/admin']);
      })
      .catch(() =&gt; {
        alert('no es válido');
      });
    }
  }

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(
    private angularFireAuth: AngularFireAuth
  ) { }

  loginSocial() {
    return this.angularFireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }

  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }

  getStatus() {
    return this.angularFireAuth.authState;
  }

  logOut() {
    return this.angularFireAuth.auth.signOut();
  }
}

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  public operation: string;
  public email: string = null;
  public password: string = null;

  constructor(
    private authenticationService: AuthenticationService
  ) {
      this.operation = 'login';
  }

  ngOnInit() {
  }
  loginSocial() {
    this.authenticationService.loginSocial().then(
      (data) => {
        alert('Social Login Correcto');
        console.log(data);
      }
    ).catch(
      (error) => {
        alert('Login Social Falló');
        console.log(error);
      }
    );
  }

  login() {
    this.authenticationService.loginWithEmail(this.email, this.password).then(
      (data) => {
        alert('Loggeado correctamente');
        console.log(data);
      }
    ).catch(
      (error) => {
        alert('Ocurrió un error');
        console.log(error);
      }
    );
  }
  register() {
    this.authenticationService.registerWithEmail(this.email, this.password)
    .then(
      (data) => {
        alert('Registrado correctamente');
        console.log(data);
      }).catch(
        (error) => {
        alert('Ocurrió un error en el registro');
        console.log(error);
      });
  }
}

import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database'

 loginWithEmail(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }
  loginWithFacebook() {
    const provider = new firebase.auth.FacebookAuthProvider();
    return this.afAuth.auth.signInWithPopup(provider);
  }
  loginWithGoogle() {
    const provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');
    return this.afAuth.auth.signInWithPopup(provider);
  }

loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.createUserWithEmailAndPassword(email, password);
  }

  getStatus() {
    return this.angularFireAuth.authState;
  }

  logout() {
    return this.angularFireAuth.signOut();
  }```

import { Injectable } from '@angular/core';
import {AngularFireAuth} from 'angularfire2/auth'

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(private angularFireAuth: AngularFireAuth) { }
  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }

  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }

  getStatus () {
    return this.angularFireAuth.authState;
  }

  logOut() {
    return this.angularFireAuth.auth.signOut();
  }
}```

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(private angularFireAuth:AngularFireAuth) { }
  loginWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.signInWithEmailAndPassword(email, password);
  }
  loginWithFacebook(){
    return this.angularFireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }
  registerWithEmail(email: string, password: string) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(email, password);
  }
  getStatus() {
    return this.angularFireAuth.authState;
  }
  logout(){
    return this.angularFireAuth.auth.signOut();
  }
}

 loginWithFacebook(){
    this.authenticationService.loginWithFacebook()
     .then((data) => {
        alert('Logeado correctamente');
      }).catch((err) => console.log(err));

  }```
login.component.html (agregar este código)

 <button *ngIf="operation=='login'"  type="buton" class="btn btn-primary btn-block" (click)="loginWithFacebook()">
          <i class="fab fa-facebook" aria-hidden="true"></i>
          Login with Facebook
        </button>```

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
operation: string = 'login';
email: string = null;
password: string = null;
  constructor(private authenticateService: AuthenticationService) { }

  ngOnInit() {
  }
  
  login() {
    this.authenticateService.loginWithEmail(this.email, this.password).then( 
      (data) => {
        alert('Loggeado correctamente');
      }).catch( (error) => {
        alert('Ocurrio un error');
        console.log(error);
      });
  }

  register() {
    this.authenticateService.registerWithEmail(this.email, this.password).then( 
      (data) => {
        alert('Registrado correctamente');
      }).catch( (error) => {
        alert('Ocurrio un error');
        console.log(error);
      });
  }

}

Login/Registro de usuarios con email y password

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