Archivo de la etiqueta: ionic 3 firebase

Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube.

12 agosto, 2017Android, App, ionic, iOS, phonegapAlertController Android, App, base de datos firebase, cordova, crear app multiplataforma, curso gratis ionic 2 español, database.ref(), Firebase, firebase database, firebase list, firebase remove, firebase set, geolocalización, google maps google maps, guardar datos firebase, ionic, ionic 2 español, ionic 2 firebase, ionic 2 firebase database, ionic 3, ionic 3 español, ionic 3 firebase, ionic base de datos firebase, ionic castellano, ionic firebase, ionic firebase database, ionic geolocation, libro ionic, libro ionic 3 en español, libro ionic español, phonegap, tutorial gratis ionic 2, tutorial gratis ionic 3, tutorial gratuito ionic 3 en español, tutorial gratuito ionicen españolEduardo Revilla

Hola a todos:

El el post anterior vimos como autenticar un usuario en firebase con email y contraseña, hoy vamos ha ver como utilizar Firebase Database para guardar nuestros sitios en la nube.

Para ello vamos a crear un provider para gestionar nuestros sitios en firebase Database, por lo tanto desde consola nos situamos dentro de la carpeta de nuestro proyecto y creamos en nuevo provider:

ionic g provider firebaseDb

Ahora editamos el archivo firebase-db.ts que se acaba de generar dentro de la carpeta providers/firebase-db, eliminamos el import Http y rxjs/add/operator/map e importamos AngularFireDatabase, FirebaseListObservable y nuestro provider AuthProvider quedando de la siguiente manera:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AuthProvider } from '..auth/auth';
/*
  Generated class for the FirebaseDbProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class FirebaseDbProvider {

  constructor(public afDB: AngularFireDatabase, public auth: AuthProvider) {
    console.log('Hello FirebaseDbProvider Provider');
  }
}

Como necesitamos el id del usuario lo primero que vamos ha hacer es añadir la función getUser al provider auth que creamos en el post anterior, por lo tanto editamos auth.ts y añadimos esta función:

// Obtenemos el id de usuario.
 getUser(){
    return this.afAuth.auth.currentUser.uid;
 }

Bien, ahora que ya podemos obtener el id de usuario vamos a añadir en el archivo firebase-db.ts un método para guardar nuestros sitios en Firebase database:

guardaSitio(sitio){
     sitio.id  = Date.now();
     return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio) 
  }

Como vemos la función recibe como parámetros sitio que será un objeto con los datos de nuestro sitio.

Al objeto sitio le añadimos un campo id para identificarlo y así poder luego modificarlo. Como necesitamos que el id sea diferente cada vez vamos a utilizar Date.now() que nos devuelve los milisegundos transcurridos desde el 1 de enero de 1970, con esto nos aseguramos que no se repita el id, a no ser que seas capaz de guardar dos sitios en menos de un milisegundo ;-P.

En firebase se guarda la información con estructura de árbol en formato JSON. Para acceder a ella tenemos que hacer referencia a la “ruta” a la que queremos acceder.

En este caso le estamos diciendo que guarde nuestro sitio con esta estructura ‘sitio/_id_usuari_/_id_sitio_/_sitio_’.

El id de usuario lo obtenemos con la función que acabamos de definir en AuthProvide this.auth.getUser().

Dentro de sitio colgarán los diferentes id de usuarios de los cuales a su vez colgarán los diferentes sitios de cada usuarios.

Para verlo mas claro en el modal nuevo-sitio vamos a modificar el método guardarSitio para que en lugar de guardar el sitio en la base de datos local SQlite lo guarde en firebase y podamos ver la estructura de como se guarda la información en firebase.

Editamos modal-nuevo-sitio.ts y hacemos los siguientes cambios:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController  } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ModalNuevoSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-nuevo-sitio',
  templateUrl: 'modal-nuevo-sitio.html',
})
export class ModalNuevoSitioPage {

  coords : any = { lat: 0, lng: 0 }
  address: string;
  description: string = '';
  foto: any = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,  
    private viewCtrl : ViewController, 
    private camera: Camera,
    // private db: DbProvider
    private dbFirebase :FirebaseDbProvider,
  ) {
  
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
      this.coords.lat = this.navParams.get('lat');
      this.coords.lng = this.navParams.get('lng');
       this.getAddress(this.coords).then(results=> {
        this.address = results[0]['formatted_address'];
      }, errStatus => {
          // Aquí iría el código para manejar el error
      });
  }

  cerrarModal(){ 
    this.viewCtrl.dismiss();
  }

  getAddress(coords):any {
    var geocoder = new google.maps.Geocoder();

    return new Promise(function(resolve, reject) {
        geocoder.geocode({'location': coords} , function (results, status) { // llamado asincronamente
            if (status == google.maps.GeocoderStatus.OK) {
                resolve(results);
            } else {
                reject(status);
            }
        });
    });
  }

  sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG, 
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarSitio(){
    let sitio = {
      lat: this.coords.lat,
      lng: this.coords.lng , 
      address: this.address, 
      description: this.description, 
      foto: this.foto
    }
  
this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio guardado en firebase:');
        this.cerrarModal();
    })
   }
}

Como ahora vamos a guardar nuestros sitios en firebase he comentado el import de DbProvider ya que ahora no lo vamos a utilizar, y en la función guardarSitio hemos sustituido la linea this.db.addSitio… por this.dbFirebase.guardaSitio…

Como vemos llamamos a la función guardaSitio del provider FirebaseDbProvider que hemos creado más arriba y le pasamos como parámetro el objeto sitio con los datos de nuestro sitio.

Ahora ejecutamos nuestra aplicación y vamos a la consola de firebase, antes de guardar ningún sitio si seleccionamos Database en el menú de la izquierda de la consola de firebase veremos algo como esto:

Ahora vamos a guardar un nuevo sitio desde nuestra app, rellenamos los campos del formulario del modal nuevo sitio y le damos a guardar, si todo ha ido bien ahora en la consola de firebase veremos algo como esto (pulsa en el icono ‘+’ para desplegar los campos):

Como vemos los datos de guardan en una estructura de árbol, en el primer nivel esta sitio, de sitio ‘cuelga’ los id de usuario, en este caso solo tenemos el nuestro pero si distribuís la aplicación por cada usuario habrá un nodo, de cada usuario ‘cuelgan’ los ids de cada sitio, y de cada id a su vez cuelgan los campos del sitio.

Ahora que ya podemos guardar nuestros sitios en firebase vamos a ver como podemos obtener todos los sitios que tenemos guardados para mostrarlos en el listado:

Lo primero que vamos ha hacer es crear una función en firebase-db.ts para obtener el listado de sitios guardados en firebase database:

getSitios(){
    return this.afDB.list('sitios/'+this.auth.getUser());
  }

Para obtener el listado de sitios guardados utilizamos el método list de AngularFireDatabase pasando como parámetro la ruta a partir de la cual queremos obtener los datos, en este caso queremos obtener todo lo que cuelgue de sitios/id_usuario, es decir todos los sitios de nuestro usuario, el id de usuario una vez más lo obtenemos con this.auth.getUser() que hemos creado en nuestro provider AuthProvider.

Bien, llegados a este punto vamos a modificar el controlador de la página listado para que en lugar de obtener los datos de la base de datos local los obtenga directamente de firebase.

Editamos listado.ts e importamos FirebaseDbProvider:

import { Component } from '@angular/core';
import { AlertController, IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ListadoPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-listado',
  templateUrl: 'listado.html',
})
export class ListadoPage {

  sitios: any;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public db : DbProvider,
    public modalCtrl : ModalController,
    public alertCtrl : AlertController,
    public dbFirebase :FirebaseDbProvider,

  ) {

  }

Ahora en la función ionViewDidEnter() vamos a sustituir this.db.getSitios().then((res)=>{…}) por lo siguiente:

ionViewDidEnter(){
   
    this.dbFirebase.getSitios().subscribe(sitios=>{
      this.sitios = sitios;
    })

}

La función getSitios() que como hemos visto a su vez llama al método list de AngularFireDatabase nos devuelve un observable, por lo que nos suscribimos al resultado. Aquí podemos ver claramente la diferencia entre un observable y una promesa.

Guardamos en this.sitios la lista de sitios que obtenemos lo que hará que se refresque automáticamente en la vista del listado.

Como ya sabemos una promesa ejecuta lo que tengamos definido en then(res=>{ …}) una vez tenga listo el resultado, pero esto se ejecuta una única vez, sin embargo un observable va a ejecutar lo que tengamos definido en .subscribe(res=>{…}) cada vez que haya un cambio en el resultado. Por ejemplo si desde la consola de firebase cambiamos a mano el campo description de nuestro sitio, este se verá automáticamente reflejado en nuestra aplicación, es interesante hacer la prueba.

En este momento ya podemos guardar sitios en firebase y mostrarlos en el listado:

Lo siguiente que vamos ha hacer es la modificación de los sitios guardados.

Para ello primero vamos ha hacer una pequeña modificación a la función guardaSitio() de nuestro provider firebase-db.ts:

guardaSitio(sitio){
   if(!sitio.id){
      sitio.id  = Date.now();
    }
    return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio) 
  }

Hemos añadido un if para comprobar si el sitio que recibimos en la función tiene el campo id definido.

Como utilizamos el id del sitio para establecer la ruta del registro, si el sitio que recibimos para guardar no tiene id significa que es un sitio nuevo y entonces le damos un id, si ya tiene un id significa que es un sitio que ya existe y hay que modificar.

Modificar un registro en firebase se hace exactamente igual que crear uno nuevo, si la ruta a la que hacemos referencia no existe crea el registro, si ya existe entonces modifica el registro existente en firebase.

Ahora vamos a modificar el archivo modal-detalle-sitio.ts para hacer que al guardar los cambios al editar un sitio existente se guarden los cambios en firebase, para ello vamos a importar FirebaseDbProvider para poder llamar a la función guardaSitio que acabamos de modificar, y vamos también a modificar la función guardarCambios para que guarde los cambios en firebase en lugar de en la base de datos local:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';

/**
 * Generated class for the ModalDetalleSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private launchNavigator : LaunchNavigator,
    private camera: Camera, 
  //  private db: DbProvider,
    private dbFirebase :FirebaseDbProvider

  ) {
     this.sitio = this.navParams.data;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalDetalleSitioPage');
  }

  cerrarModal(){ 
    this.viewCtrl.dismiss();
  }

  comoLlegar(){
    let destino = this.sitio.lat+', '+this.sitio.lng;
    this.launchNavigator.navigate(destino)
    .then(
      success => console.log('Launched navigator'),
      error => console.log('Error launching navigator', error)
    );  
 }

 editar(){
   this.edit = true;
 }

 sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG, 
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarCambios(){ 

     let sitio = {
      id : this.sitio.id,
      lat: this.sitio.lat,
      lng: this.sitio.lng , 
      address: this.sitio.address, 
      description: this.sitio.description, 
      foto: this.sitio.foto
    }

    this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio modificado en firebase');
        this.cerrarModal();
    })
   }

}

Hemos comentado el import de DbProvider porque ya no lo estamos utilizando.

Ahora si pruebas la aplicación con el panel de firebase abierto podrás ver que si modificas un sitio que tengas guardado automáticamente se verá reflejado este cambio en el registro de firebase.

Para concluir solo nos queda eliminar sitios.

Vamos a añadir a FirebaseDbProvider en el archivo firebase-db.ts una función para eliminar un sitio de la base de datos de firebase:

public borrarSitio(id){
        this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+id).remove();

}

Como puedes ver es muy sencillo, solo necesitamos recibir el id del sitio que queremos eliminar y haciendo referencia a la ruta de nuestro sitio (que una vez más es sitios/_id_usuario_/id_sitio) utilizamos la función remove() para eliminar el sitio.

Ahora en el listado solo tenemos que sustituir la llamada a borrarSitio() de la base de datos local de DbProvider por la función que acabamos de crear en FirebaseDbProvider, por lo tanto editamos el archivo listado.ts y dejamos la función borrarSitio() de la siguiente manera:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '¿Estás seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Ha respondido que no así que no hacemos nada
          }
        },
        {
          text: 'Si',
          handler: () => {
               // AquÍ borramos el sitio en firebase
              this.dbFirebase.borrarSitio(id); 
           }
        }
      ]
    });
    
    alert.present();

 }

Como podemos observar ya no necesitamos obtener de nuevo los sitios una vez borrado para que se refresque el listado ya que al ser firebase una base de datos en tiempo real el listado se actualiza automáticamente.

Podéis probar a borrar un sitio y veréis como el sitio se elimina automáticamente en el panel de firebase y el listado se actualiza.

Eso es todo por hoy, con esto ya podemos hacer muchas cosas interesantes utilizando firebase, seguro que se os ocurren grandes ideas para realizar apps utilizando firebase como backend. Podéis dejarme en los comentarios esas grandes ideas, no se lo contaré a nadie ;-P

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts 🙂, también puedes seguirme en Twitter en ‎@revigames y me ayudas si compartes este post en las redes sociales.

Anuncios

Tutorial de Ionic – Firebase – parte 1: Autenticación con correo y contraseña

5 agosto, 2017Android, App, ionic, iOS, phonegap, Windows PhoneAlertController Android, App, cordova, crear app multiplataforma, curso gratis ionic 2 español, Firebase, firebase Authentication, firebase authentication ionic, geolocalización, google maps google maps, ionic, ionic 2 español, ionic 2 firebase, ionic 3, ionic 3 español, ionic 3 firebase, ionic castellano, ionic firebase, ionic geolocation, libro ionic, libro ionic 3 en español, libro ionic español, login firebase, phonegap, tutorial gratis ionic 2, tutorial gratis ionic 3, tutorial gratuito ionic 3 en español, tutorial gratuito ionicen españolEduardo Revilla

Hola a todos, en el último post vimos como comunicarnos con el backend a través de peticiones http, Hoy vamos a aprender a utilizar Firebase como backend.

Firebase es una plataforma de Google que nos ofrece un BaaS (Backend as a Service), lo que nos permite librarnos de la tarea de tener nuestro propio servidor y programar toda la lógica del backend, autenticación de usuarios, etc, ahorrando tiempo e infraestructura.

Firebase nos permite tener una base de datos en la nube y ver los cambios que se produzcan en tiempo real, entre otros servicios también ofrece almacenamiento de archivos en la nube, mensajería, hosting y autenticación de usuarios.

Para aprender a integrar firebase con Ionic vamos a retomar nuestra App de guardar sitios y vamos ha hacer que nuestros sitios se guarden en la base de datos de firebase para tenerlos almacenados en la nube en lugar de localmente.

Para ello tenemos también que crear un usuario y autenticarnos para que en la base de datos cada usuarios tenga sus sitios guardados.

Vamos a empezar por la autenticación de usuarios, pero antes de nada debemos crear una aplicación en firebase.

Para crear una aplicación en firebase debemos acceder a la consola de firebase desde la siguiente url:

https://firebase.google.com/

Debemos estar logeados con nuestra cuenta de google, si no tienes cuanta de google tendrás que crearte una.

Para acceder a la consola seleccionamos la opción “IR A LA CONSOLA” que se encuentra en la parte superior derecha como se muestra en la siguiente imagen.

Una vez en la consola debemos añadir un nuevo proyecto, por lo tanto seleccionamos añadir proyecto y nos saldrá una ventana para introducir el nombre del proyecto y la región:

En este caso he puesto como nombre Mis Sitios y como región España.

Pulsamos el botón CREAR PROYECTO y accederemos al panel de nuestra aplicación donde tememos varias opciones.

Dejamos abierta la pestaña del navegador con el panel de firebase ya que mas tarde tenemos que volver para obtener los datos de configuración, pero ahora vamos a volver a nuestra aplicación Mis Sitios y vamos a instalar firebase y angularfire2.

Abrimos una consola y nos situamos dentro del directorio de nuestra aplicación y escribimos el siguiente comando:

npm install angularfire2 firebase --save

Ahora editamos el archivo app.module.ts e importamos los y declaramos los módulos AngularFireModule, AngularFireDatabaseModule y AngularFireAuthModule, también declaramos la constante firebaseConfig que utilizamos en la declaración AngularFireModule.initializeApp(firebaseConfig) :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { Geolocation } from '@ionic-native/geolocation';
import { Camera } from '@ionic-native/camera';
import { DbProvider } from '../providers/db/db';
import { SQLite } from '@ionic-native/sqlite';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { AuthProvider } from '../providers/auth/auth';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Geolocation,
    Camera,
    DbProvider,
    SQLite,
    LaunchNavigator,
    AuthProvider
  ]
})
export class AppModule {}

Los valores que hemos puesto en el objeto firebaseConfig son provisionales, ahora debemos sustituirlos por los que nos de la consola de Firebase por lo tanto regresamos a la web de Firebase.

Aunque nuestra aplicación es una aplicación para móviles estamos utilizando tecnologías web para su desarrollo ya que no es una app nativa sino híbrida (revisar el primer post de este tutorial para saber más sobre tipo de aplicaciones), por lo tanto vamos a seleccionar Añade Firebase a tu aplicación web para ver las variables de configuración que luego vamos a necesitar:

Al seleccionar añade Firebase a tu aplicación web mostrará algo como esto:

Por lo tanto en nuestro archivo app.module.ts sustituimos los valores de apiKey, authDomain, databaseURL, projectId, storageBucket y messagingSenderId del objeto firebaseConfig por los que nos ha generado.

Una vez copiado los valores cerramos la ventana.

Firebase nos da diferentes métodos para registrar usuarios:

Correo electrónico/contraseña
Teléfono
Google
Facebook
Twitter
GitHub
Anónimo

Para este ejemplo vamos a utilizar el método Correo electrónico/contraseña.

El panel de la izquierda de nuestro proyecto en firebase seleccionamos “Authentication” y “METODO DE INICIO DE SESIÓN“, y hacemos click en Correo electrónico/contraseña como muestro en la siguiente imagen:

El la ventana que nos muestra habilitamos y le damos a Guardar:

Bien, ya tenemos configurado el método de registro de usuarios en firebase.

Ahora lo primero que necesitamos es un provider que utilizaremos para autenticar usuarios.

Por lo tanto abrimos una consola escribimos el siguiente comando que ya conocemos para crear un provider:

ionic g provider auth

En el provider que acabamos de crear eliminamos los imports de Http y rxjs/add/operator/map ya que no los vamos a necesitar, e importamos AngularFireAuth y firebase:

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


/*
  Generated class for the AuthProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class AuthProvider {

  constructor(private afAuth :  AngularFireAuth) {
    console.log('Hello AuthProvider Provider');
  }

}

Ahora vamos a crear una nueva página de login para que el usuario pueda darse de alta y autenticarse, para ello desde la consola escribimos el siguiente comando:

ionic g page login

Esto nos habrá generado una nueva página llamada login, vamos a editar el archivo login.html para crear un formulario para autenticar y/o dar de alta a un usuario:

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

<ion-list>
    <form>
      <ion-item>
        <ion-label floating>Email</ion-label>
        <ion-input 
          [(ngModel)]="user.email" 
          name="email" 
          type="text" 
          autocapitalize="off" 
          required
        >
        </ion-input>
      </ion-item>
     
      <ion-item>
        <ion-label floating>Contraseña</ion-label>
        <ion-input 
          [(ngModel)]="user.password" 
          name="password" 
          type="password" 
          required
        >
        </ion-input>
      </ion-item>
      <div padding>
        <button 
            ion-button 
            (click)="login()" 
            type="submit" 
            color="primary" 
            block
        >
          Login
        </button> 
    
        <button 
          ion-button 
          (click)="signin()" 
          type="submit" 
          color="secondary" 
          block
        >
          Dar de alta
        </button>
      </div>
    </form>
  </ion-list>
</ion-content>

Para simplificar vamos a utilizar el mismo formulario tanto para dar de alta a un usuario como para autenticarnos.

Como podemos ver tenemos un formulario con dos inputs, uno para el email y otro para la contraseña.

Al label de los inputs le decimos que sea de tipo floating, esto produce un efecto de desplazamiento del label al situarnos en el campo. Para saber más sobre el elemento ion-input y sus posibilidades podéis consultar el componente ion-input en la documentación oficial de ionic.

Tendremos una variable miembro llamada user que es un objeto que va a contener el email y la contraseña del usuario, si os fijáis en el campo email hacemos un data binding con [(ngModel)]= “user.email”, lo mismo en el campo password con [(ngModel)]=”user.password”.

Por lo tanto los cambios que hagamos en estos campos serán reflejados automáticamente en user.email y user.password.

Lo primero que haremos va a ser definir la variable user en el controlador. Abrimos el archivo login.ts y añadimos lo siguiente:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the LoginPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  user= { email : '', password : ''};

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

}

En el formulario tenemos dos botones, uno para dar hacer login y otro para darnos de alta.

Como todavía no tenemos ningún usuario creado lo primero que vamos ha hacer es el alta de usuario.

Lo primero que necesitamos hacer es crear en el provider authProvider una función para dar de alta a usuarios. Editamos el archivo auth.ts y añadimos la función registerUser:


    // Registro de usuario
  registerUser(email:string, password:string){
    return this.afAuth.auth.createUserWithEmailAndPassword( email, password)
    .then((res)=>{
     // El usuario se ha creado correctamente. 
    })
    .catch(err=>Promise.reject(err))
 }

Como podemos observar mediante el método createUserWithEmailAndPassword pasándole como parámetros el email y password creamos un nuevo usuario.

Si nos fijamos el botón “Dar de alta” de nuestra página de login tiene asignado al evento click la función signin().

Por lo tanto vamos a definir la función signin en el controlador, para ello debemos importar también el provider AuthProvider que hemos creado anteriormente, también vamos a importar AlertController para mostrar los mensajes de error:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { AuthProvider } from '../../providers/auth/auth';

/**
 * Generated class for the LoginPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  user = { email : '', password : ''};

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public auth : AuthProvider,
    public alertCtrl : AlertController
  ) {
  
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  signin(){
    this.auth.registerUser(this.user.email,this.user.password)
    .then((user) => {
      // El usuario se ha creado correctamente
    })
    .catch(err=>{
      let alert = this.alertCtrl.create({
        title: 'Error',
        subTitle: err.message,
        buttons: ['Aceptar']
      });
      alert.present();
    })

  }

}

Como vemos en la función signin() llamamos al método registerUser que hemos creado anteriormente en el provider authProvider pasándole como parametros el email y la contraseña que las tenemos en this.user.email y this.user.password respectivamente.

Si se ha producido un error mostramos un alert con el mensaje de error que hayamos recibido.

Bien para que salga la página de login al iniciar la aplicación tenemos que cambiar el root de nuestra aplicación tal y como vimos en este post. Para ello vamos editamos el archivo app.components.ts y sustituimos:

rootPage:any = 'MisTabsPage';

Por:

rootPage:any = 'LoginPage';

En este momento ya podemos probar la creación de un usuario.

Ejecutamos la aplicación en el terminal, si al ejecutar os muestra un error como este:

Error: ./node_modules/firebase/utils/promise.js
Module not found: Error: Can't resolve 'promise-polyfill'

Lo resolvemos instalando lo siguiente:

npm install promise-polyfill --save-exact

Una vez funcionando nuestra app aparecerá la página de login que hemos creado con el formulario para introducir usuario y contraseña. Si vamos al panel de firebase y seleccionamos Authentication y la pestaña USUARIOS veremos algo como esto:

Como podemos ver aún no hay ningún usuario creado, podríamos crear uno desde el propio panel de firebase pulsando el botón añadir usuario, pero lo que nos interesa es crearlos directamente desde nuestra aplicación.

Al ejecutar nuestra aplicación ahora mostrará la pagina de login que hemos creado con el formulario para introducir el email y la contraseña:

Si introducimos una dirección de correo y una contraseña y pulsamos el botón “Dar de alta” al refrescar la pantalla de firebase ahora veréis el usuario que acabáis de crear en el panel.

Ahora que ya podemos crear usuarios tenemos que autenticarlos y una vez autenticados tenemos que cambiar la página activa por la página misTabsPage.

Vayamos por partes.

Lo primero que necesitamos es crear en authProvider un método para autenticarnos con Correo electrónico / Contraseña, por lo tanto editamos auth.ts y añadimos el siguiente método:

 // Login de usuario
 loginUser(email:string, password:string){
   return this.afAuth.auth.signInWithEmailAndPassword(email, password)
     .then(user=>Promise.resolve(user))
     .catch(err=>Promise.reject(err))
 }

Con el método signInWithEmailAndPassword(email, password) nos autenticamos en firebase, si todo va bien nos devolverá el usuario, si ha habido algo incorrecto nos devolverá un error.

Ahora en login.ts vamos a crear el método login() que se llama al pulsar el botón Login:

login() 
{
    this.auth.loginUser(this.user.email,this.user.password ).then((user) => {
      }
    )
     .catch(err=>{
      let alert = this.alertCtrl.create({
        title: 'Error',
        subTitle: err.message,
        buttons: ['Aceptar']
      });
      alert.present();
    })
  }

Como vemos lo que hace login es llamar a la función loginUser de authProvider pasandole el email y la contraseña.

Ahora vamos a necesitar un método que nos devuelva la sesión, editamos auth.ts y añadimos la siguiente función:

// Devuelve la session
 get Session(){
  return this.afAuth.authState;
 }

Si no estas familiarizado con TypeScript puede que pienses que hay un error ya que entre get y Session() hay un espacio. Esta es una peculiaridad de TypeScript que nos permite hacer getters y setters de esta manera. Para obtener la sesión en lugar de llamar a la función simplemente llamamos a Session como si fuese un atributo de la clase, es decir sin el get y sin paréntesis de esta manera: this.auth.Session.subscribe(…), en este caso usamos subscribe porque Session devuelve this.afAuth.authState que a su vez devuelve un observable.

Ahora vamos a comprobar la sesión en el evento platform.ready de app.components.ts que se ejecuta cuando la app está cardada y lista y si estamos autenticados haremos que la página activa sea misTabsPage, pero si la sesión no está activa la página que se muestre se la de login.

Editamos app.components.ts y añadimos lo siguiente:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DbProvider } from '../providers/db/db';
import { AuthProvider } from '../providers/auth/auth';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  
  rootPage:any = 'LoginPage';
 


  constructor(
    platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen,
    public db: DbProvider,
    private auth: AuthProvider
    
  ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.auth.Session.subscribe(session=>{
        if(session){
            this.rootPage = 'MisTabsPage';
        }
          else{
            this.rootPage = 'LoginPage';
          }
      });
      statusBar.styleDefault();
      splashScreen.hide();
       this.db.openDb()
       .then(() => this.db.createTableSitios())
    });
  }

}

Tenemos que importar e inyectar en el constructor nuestro provider AuthProvider.

Después en patform.ready nos suscribimos a Session que como he explicado es un getter que nos devuelve un observable, si hay un cambio en la sesión automáticamente cambiara rootPage para mostrar la página de login o las pestañas en función de si tenemos la sesión activa o no.

También vamos a necesitar un método para cerrar sesión (logout), por lo tanto editamos auth.ts y añadimos el método logout:

 // Logout de usuario
 logout(){
   this.afAuth.auth.signOut().then(()=>{
     // hemos salido
   })
 }

Por simplificar vamos a colocar un botón de cerrar sesión en la página info que no la estamos utilizando para nada, abrimos info.html y añadimos el siguiente código:

<!--
  Generated template for the InfoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Info</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <button ion-button block (click)="cerrarSesion()">Cerrar Sesión</button>
</ion-content>

Simplemente hemos añadido un botón que al hacer click llamara a la función cerrarSession().

Vamos ahora a definir la función cerrarSesion en el controlador, abrimos info.ts y añadimos el siguiente código:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AuthProvider } from '../../providers/auth/auth';

/**
 * Generated class for the InfoPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-info',
  templateUrl: 'info.html',
})
export class InfoPage {

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public auth : AuthProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad InfoPage');
  }

  cerrarSesion(){
      this.auth.logout();
  }

}

Simplemente importamos el provider AuthProvider, lo inyectamos en el constructor y en la función cerrarSesion llamamos al método logout del provider que acabamos de crear.

Si probamos ahora nuestra aplicación y accedemos a la pestaña info, al pulsar sobre el botón cerrar sesión nos mostrará de nuevo la página de login. Esto ocurre como ya he explicado porque en app.components.ts estamos “escuchando” a la variable Session que es un observable, al cerrar la sesión automáticamente cambia rootPage por ‘LoginPage’.

Para que no queden dudas de como debe quedar el provider AuthProvider muestro a continuación como debe de quedar el código completo del archivo auth.ts:

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


/*
  Generated class for the AuthProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class AuthProvider {

  constructor(private afAuth :  AngularFireAuth) {
    console.log('Hello AuthProvider Provider');
  }

    // Registro de usuario
  registerUser(email:string, password:string){
    return this.afAuth.auth.createUserWithEmailAndPassword( email, password)
      .then((res)=>{
      this.afAuth.auth.signInWithEmailAndPassword(email, password)
    })
    .then(user=>Promise.resolve(user))
    .catch(err=>Promise.reject(err))
 }

 // Login de usuario
 loginUser(email:string, password:string){
   return this.afAuth.auth.signInWithEmailAndPassword(email, password)
     .then(user=>Promise.resolve(user))
     .catch(err=>Promise.reject(err))
 }

 // Logout de usuario
 logout(){
   this.afAuth.auth.signOut().then(()=>{
     // hemos salido
   })
 }

// Devuelve la session
 get Session(){
  return this.afAuth.authState;
 }

}

Eso es todo por hoy.

Hoy hemos aprendido a crear usuario y autenticarnos mediante correo electronico y contraseña en firebase. El el próximo post aprenderemos a guardar nuestros sitios en la base de datos de firebase.

Reviblog

Blog sobre programación móvil, web… y lo que surja

Archivo de la etiqueta: ionic 3 firebase

Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube.

Compártelo:

Compártelo: