En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Indice Tutorial Ionic >>

• Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
• Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
• Tutorial de Ionic - Hola Mundo en Ionic
• Tutorial de Ionic - Estructura de un proyecto Ionic
• Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
• Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
• Tutorial de Ionic - Peticiones http - API REST
• Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
• Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
• Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
• Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
• Firmar el apk para subirlo a Google Play
• Mostrar un mapa offline en Ionic con Leaflet
• Directiva para mostrar y ocultar menú al hacer scroll en Ionic
• Como crear una app multi idioma con Ionic
• Como crear componentes personalizados con Ionic

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');
  }

}

ionic g page login

<!--
  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>

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');
  }

}

    // 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))
 }

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();
    })

  }

}

rootPage:any = 'MisTabsPage';

rootPage:any = 'LoginPage';

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.

 // 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))
 }

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();
    })
  }

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

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())
    });
  }

}

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

<!--
  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>

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();
  }

}

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;
 }

}

Si necesitas desarrollar una aplicación móvil no dudes en solicitarme un presupuesto sin compromiso:

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.