Captura de pantalla 2019 02 08 a las 13.42.55 c1de7

Captura de pantalla 2019 02 08 a las 13.43.09 230d6

Captura de pantalla 2019 02 08 a las 13.45.11 b837c

Haz clic en el botón </> para obtener la información necesaria para configurar el servicio en una aplicación web o Ionic.

Captura de pantalla 2019 02 08 a las 13.51.44 e04fb

Captura de pantalla 2019 02 08 a las 13.54.28 09a7a 

ionic start ejemplo-firestore blank
cd ejemplo-firestore 
npm install firebase angularfire2
ionic generate service firebase

environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "????????????",
    authDomain: "????????????",
    databaseURL: "????????????",
    projectId: "????????????",
    storageBucket: "????????????",
    messagingSenderId: "????????????"
  }
};

 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

 firebase.service.ts

import { Injectable } from '@angular/core';

import { AngularFirestore } from 'angularfire2/firestore';

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

  constructor(public afs: AngularFirestore) { }

  crearTarea(tarea) {
    return new Promise<any>((resolve, reject) => {
      this.afs.collection('tareas').add({
        titulo: tarea.titulo,
        descripcion: tarea.descripcion
      })
      .then(
        res => resolve(res),
        err => reject(err)
      )
    })
  }
}

 home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ejemplo Firebase
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>Título</ion-label>
    <ion-input [(ngModel)]="tarea.titulo"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Descripción</ion-label>
    <ion-input [(ngModel)]="tarea.descripcion"></ion-input>
  </ion-item>
  <ion-button (click)="clicBoton()">Añadir registro</ion-button>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { FirebaseService } from '../firebase.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  tarea = {
    titulo: '',
    descripcion: ''
  }  

  constructor(private firebaseService: FirebaseService) {
  }
  
  clicBoton() {
    this.firebaseService.crearTarea(this.tarea)
    .then(
      res => {
        console.log("Se ha guardado el registro");
        this.tarea.titulo = '';
        this.tarea.descripcion = '';
      }
    )
  }

}

 

Captura de pantalla 2019 02 15 a las 12.53.55 57b80

 

Captura de pantalla 2019 02 15 a las 12.56.14 29d92

Obtener lista de registros

firebase.service.ts

  obtenerTareas() {
    return new Promise((resolve, reject) => {
      this.afs.collection('tareas').snapshotChanges()
      .subscribe(datosObtenidos => {
        console.log("Se ha completado la descarga de los datos");
        // Retornar los datos obtenidos
        resolve(datosObtenidos);
      })
    });
  }

home.page.ts

export class HomePage {

  tareas = [];
  
  constructor(private firebaseService: FirebaseService) {
  }
  
  ionViewWillEnter(){
    this.obtenerListaTareas();
  }

  obtenerListaTareas(){
    this.firebaseService.obtenerTareas()
    .then(tareasObtenidas => {
      this.tareas = [];
      tareasObtenidas.forEach((tarea: any) => {
        this.tareas.push({
          id: tarea.payload.doc.id,
          data: tarea.payload.doc.data()
        });
      })
    })
  }

  clicBoton() {
    // ...
  }

} 

home.page.html

<h1>LISTA DE TAREAS</h1>
  <ion-list>
    <ion-item *ngFor="let tarea of tareas">
      <ion-grid>
        <ion-row>
          <h2>{{tarea.data.titulo}}</h2>
        </ion-row>
        <ion-row>
          <p>{{tarea.data.descripcion}}</p>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>

Borrado de datos

firebase.service.ts

  borrarTarea(idTarea: string) {
    return new Promise<any>((resolve, reject) => {
      this.afs.collection('tareas').doc(idTarea).delete()
      .then(res => resolve(res))
      .catch(res => reject(res))
    })
  }

home.page.ts

  idTareaSelec: string;

  selecTarea(tarea) {
    console.log("Tarea seleccionada: ");
    console.log(tarea);
    this.idTareaSelec = tarea.id;
    this.tarea.titulo = tarea.data.titulo;
    this.tarea.descripcion = tarea.data.descripcion;
  }

  clicBotonBorrar() {
    this.firebaseService.borrarTarea(this.idTareaSelec)
    .then((res) => {
      console.log("Se ha borrado el registro", res);
      // Actualizar la lista completa
      this.obtenerListaTareas();
      // Limpiar datos de pantalla
      this.tarea.titulo = '';
      this.tarea.descripcion = '';
    }).catch((res) => {
      console.log("Se ha producido un error al borrar el registro", res);
    })
  }

home.page.html

Añadir a cada item de la lista la llamada al método selecTarea cuando se seleccione un determinado item.

  <ion-list>
    <ion-item *ngFor="let tarea of tareas" (click)="selecTarea(tarea)">
      ...
    </ion-item>
  </ion-list>

En este ejemplo se ha añadido un botón para eliminar el item que se encuentre seleccionado: 

  <ion-button (click)="clicBotonBorrar()">Borrar tarea</ion-button>

Modificación de datos

firebase.service.ts

  modificarTarea(idTarea: string, tarea: any) {
    return new Promise((resolve, reject) => {
      this.afs.collection('tareas').doc(idTarea).set(tarea)
      .then(res => resolve(res))
      .catch(err => reject(err))
    });
  }

home.page.ts

  clicBotonModificar() {
    this.firebaseService.modificarTarea(this.idTareaSelec, this.tarea)
    .then((res) => {
      console.log("Se ha modificado la tarea", res);
      // Actualizar la lista completa
      this.obtenerListaTareas();
      // Limpiar datos de pantalla
      this.tarea.titulo = '';
      this.tarea.descripcion = '';
    }).catch((res) => {
      console.log("Se ha producido un error al modificar la tarea", res);
    })
  }

home.page.html

El código de este botón debe incluirse junto con la llamada al método selecTarea() que ya se ha mostrado anteriormente al seleccionar un item de la lista.

<ion-button (click)="clicBotonModificar()">Modificar tarea</ion-button>