Login/Registro de usuarios con email y password

Clase 31 de 57 • Curso de Ionic Avanzado 2017

Antonio Jose Galisteo Cantero

student•

En mi caso, cuando hacía login correctamente y comenzaba a cargar la HomePage, me daba un error al recuperar los usuarios de la base de datos (TypeError: Object(…) is not a function). Resulta que me hacía falta instalar rxjs-compat:

npm i rxjs@6 rxjs-compat@6 promise-lyfill --save

Antonio Jose Galisteo Cantero

student•

Actualizo el comando de instalación:

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

Carlos Uriel de Jesus Sánchez González

student•

Hay que estar revisando la actualizaciones

Pedro Roberto Capriles Morales

student•

Respondiendo al reto

authentication.service.ts

    constructor(private angularFireAuth:AngularFireAuth, private angularFireDataBase:AngularFireDatabase){

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

`loginWithFacebook(){
    this.authenticationService.loginWithFacebook().then((response)=>{
      console.log(response.user.uid);
      this.model.newUser.id = response.user.uid.toString();
      this.model.newUser.email = response.user.email.toString();
      this.model.newUser.name  = response.user.displayName.toString();
      this.model.newUser.photo = response.user.photoURL.toString();
      this.model.newUser.lastName = " ";
      this.model.newUser.nick = " ";
      this.model.newUser.password = " ";
      this.model.newUser.status = Status.Online;
      Global.userAuth =  this.model.newUser;
      this.userService.createUser( this.model.newUser);
      this.navCtrl.push(HomePage,{'uid':this.model.newUser.id });
      this.viewCtrl.dismiss();
    });

Login/Registro de usuarios con email y password

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Amigos

Planeación previa para la característica / Cómo generaremos las solicitudes

Enviando una solicitud de amistad

Revisando solicitudes de amistad

Aceptando solicitudes de amistad

Mostrando sólo amigos

Componentes anidados (con paso de parámetros)

Deploy

Exportando app para iOS y complementando con Xcode

Exportando app para web, complementando con Firebase Hosting

Conclusiones del curso

Contenido Bonus

Publicando nuestra aplicación en Android y iOS stores

Cuéntanos