Paso 1: Creación del proyecto en Firebase.

Debes ir a la nueva consola de firebase aquí y crear un proyecto nuevo:

Paso 2: Copiar las variables de configuración.

Ahora debemos ir a la sección de Auth y copiar las variables de configuración que nos provee firebase, oprime el botón WEB SETUP:

Paso 3: Reglas de seguridad

Por último vamos a la sección de Database y configuraremos las reglas de seguridad para que nos permita conectarnos a la base de datos sin ninguna autentificación:

Paso 4: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo104 blank

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd demo104

El proyecto inicia con el template blank y por esto tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar será src:

Paso 5: Agregar Firebase y AngularFire

Ahora para integrar Firebase y AngularFire debemos instalar dos dependencias en el proyecto, así:

npm install firebase angularfire2 --save

Paso 6: Creando variable de configuración

Debemos crear una variable que tenga las llaves otorgadas por Firebase en app.module.ts.

const firebaseConfig = {
  apiKey: "AIzaSyAvYzM1bqFjoVi-VGMHeDbN0XwFsYDtLQ0",
  authDomain: "demo104-60efc.firebaseapp.com",
  databaseURL: "https://demo104-60efc.firebaseio.com",
  projectId: "demo104-60efc",
  storageBucket: "demo104-60efc.appspot.com",
  messagingSenderId: "903778168776"
};

Paso 7: Conectado Ionic con Firebase

Para conectarnos a Firebase debemos importar a AngularFireModule y AngularFireDatabaseModule, agregar estos módulos a los imports de la aplicación, así:

...

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

export const firebaseConfig = {
  apiKey: "AIzaSyAvYzM1bqFjoVi-VGMHeDbN0XwFsYDtLQ0",
  authDomain: "demo104-60efc.firebaseapp.com",
  databaseURL: "https://demo104-60efc.firebaseio.com",
  projectId: "demo104-60efc",
  storageBucket: "demo104-60efc.appspot.com",
  messagingSenderId: "903778168776"
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig,'demo104'),
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [...]
})
export class AppModule {}

Paso 8: Creando HomePage.

Ahora haremos uso del archivo pages/home/home.ts para mostrar las tareas, modificándolo de esta manera:

Primero debemos importar FirebaseListObservable y AngularFireDatabase y declarar la variable tasksque será de tipo FirebaseListObservable, la cual va a tener el control de la lista, luego inyectamos a AngularFireDatabase como dependencia y por último vamos a definir tasks como una colección de datos hacia /tasks.

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';
import { FirebaseListObservable, AngularFireDatabase  } from 'angularfire2/database';

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

  tasks: FirebaseListObservable<any>;

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    public fireDatabase: AngularFireDatabase
  ) {
    this.tasks = this.fireDatabase.list('/tasks');
  }
}

Teniendo la lista de tareas con referencia a Firebase Database podemos crear una tarea en la base de datos, solo es necesario hacer uso del método push a la lista, así:

this.tasks.push({
  title: "Nueva tarea",
  done: false
});

Para actualizar una tarea necesitamos la llave de la tarea que crea Firebase y luego enviamos los datos que vamos a modificar al método update, así:

this.tasks.update(key,{
  title: 'Nuevo titulo',
  done: true
});

Y para eliminar una tarea tambien necesitamos la llave de la tarea y la enviamos como parametro a remove, así:

this.tasks.remove( key );

Vamos a hacer uso de AlertController para crear una interfaz para crear tareas.

Ahora declaramos el método createTask el cual agrega un tarea a la base de datos haciendo, mediante un alert donde con un campo de texto capturamos la tarea y luego con uso del método push agregamos la tarea.

createTask(){
  let newTaskModal = this.alertCtrl.create({
    title: 'New Task',
    message: "Enter a title for your new task",
    inputs: [
      {
        name: 'title',
        placeholder: 'Title'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Save',
        handler: data => {
          this.tasks.push({
            title: data.title,
            done: false
          });
        }
      }
    ]
  });
  newTaskModal.present( newTaskModal );
}

Con declaramos el método updateTask el cual actualiza una tarea con el método update, pero a este debemos enviarle el id de la tarea con task.$key y los datos a actualizar.

updateTask( task ){
  this.tasks.update( task.$key,{
    title: task.title,
    done: !task.done
  });
}

Finalmente declaramos el método removeTask que elimina una tarea con el método remove al cual tenemos que enviarle el id de la tarea con task.$key.

removeTask( task ){
  this.tasks.remove( task.$key );
}

La clase completa quedará así:

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';
import { FirebaseListObservable, AngularFireDatabase  } from 'angularfire2/database';

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

  tasks: FirebaseListObservable<any>;

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController,
    public database: AngularFireDatabase
  ) {
    this.tasks = this.database.list('/tasks');
  }

  createTask(){
    let newTaskModal = this.alertCtrl.create({
      title: 'New Task',
      message: "Enter a title for your new task",
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            this.tasks.push({
              title: data.title,
              done: false
            });
          }
        }
      ]
    });
    newTaskModal.present( newTaskModal );
  }

  updateTask( task ){
    this.tasks.update( task.$key,{
      title: task.title,
      done: !task.done
    });
  }

  removeTask( task ){
    this.tasks.remove( task.$key );
  }
}

Paso 9: El template.

Ahora solo nos queda trabajar en el template pages/home/home.html que modificaremos de esta manera:

En el header tendremos un botón que ejecuta la función createTask, la cual nos muestra el Alert para agregar una nueva tarea.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Tasks
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="createTask()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Ahora iteramos el array de tareas, pero usaremos el pipe de async (let task of tasks | async) lo cual nos permite recorrer una lista asíncrona, tendremos el método de updateTask y cada vez que oprimimos check en una tarea se actualizará y finalmente tendremos el botón que ejecuta a removeTaskpara eliminar una tarea.


<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor='let task of tasks | async'>
      <ion-item>
        <ion-label>{{ task.title }}</ion-label>
        <ion-checkbox (ionChange)="updateTask( task )" [checked]="task.done"></ion-checkbox>
      </ion-item>
       <ion-item-options>
        <button ion-button danger (click)="removeTask( task )">
          Delete
        </button>
       </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

El template completo es así:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Tasks
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="createTask()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor='let task of tasks | async'>
      <ion-item>
        <ion-label></ion-label>
        <ion-checkbox (ionChange)="updateTask( task )" [checked]="task.done"></ion-checkbox>
      </ion-item>
       <ion-item-options>
        <button ion-button color="danger" (click)="removeTask( task )">
          Delete
        </button>
       </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Resultado:

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

este articulo se a copiado desde ver enlace

Mundo Mobile

domingo, 3 de septiembre de 2017

Firebase Database + Ionic