Creando un servicio de conexión a Firebase

Clase 18 de 31 • Curso de PWA con Angular 2018

Resumen

Ya que configuramos nuestro proyecto, vamos a crear un servicio de conexión. Para esto vamos a hacer un archivo de TS con varios métodos que serán los encargados de acceder a los datos.

Cristian Martinez

student•

Como nota: Angular en el CLI tiene una herramienta de fujo de trabajo llamada Schematics

Para crear servicios puede hacer uso de esta herramienta solo necesitas ejecutar:

$ ng generate service services/[name]

o en su forma abreviada:

$ ng g s services/[name]

[name] refiere a el nombre de tu servicio, services/ es el directorio donde se instalara el service.

Julio J Yépez

student•

Interesante. Gracias por compartir.

Julio J Yépez

student•

Este es el link oficial de la documentación de Firebase necesaria para resolver el reto.

Julio J Yépez

student•

Mi respuesta al reto:

return this.afDB.database.ref('/notes/'+note.id).remove();

Por cierto, los tipos (p.ej. pathOrRef, ref, path, etc.) que van antes de las referencias a ‘/notes/’ … TODOS me han dado errores desde el inicio del curso, pero al quitarlos del parámetro, funciona OK.

Jose Paredes

student•

Si los “pathOrRef” y “path” que se ven son parte de la ayuda que le da el editor que él usa, no son parte del código sino va a mostrar error.

Jose Giovanni Vargas Rueda

student•

Para el reto

deleteNote(note) {
    return this.afDb.database.ref('notes').child(note.id).remove()
  }

Mario Alejandro Cortez Salinas

student•

Espero que este bien mi código para el reto jeje
public deleteNote(note){ return this.afDB.database.ref('/notes/'+note.id).remove(note); }

Santiago Yunda Rivera

student•

les comparto los métodos de hacerlo con la opción de Cloud Firestore

lo ideal sería crear la interfaz ‘notas’ y declarar que nuestros objetos van a ser de ese tipo

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

  private itemsCollection: AngularFirestoreCollection<any>;
  private itemsDocument: AngularFirestoreDocument;
  public notas: Observable<any[]>;

  constructor( private afs: AngularFirestore) { }

  getNotes() {
    // accedemos a la coleccion 'notas'
    this.itemsCollection = this.afs.collection<any>('notas');
    this.notas = this.itemsCollection.valueChanges();
  }

getNote( id ) {
    // accedemos al documento que desea el usuario
    this.itemsDocument =  this.afs.collection<any>('notas').doc( id );
    // regresamos el documento obtenido
    return this.itemsDocument.get();
  }

  addNote( nota ) {
    // accedemos a la colección
    this.itemsCollection =  this.afs.collection<any>('notas');
    // si la nota tiene un id la guardamos
    if ( nota.id ) {
      this.itemsCollection.doc( nota.id ).set( nota );
    }

  }

  deleteNote( id ) {
    this.afs.collection<any>('notas').doc( id ).delete().then(function() {
            console.log('Documento borrado exitosamente');
        }).catch(function(error) {
            console.error('Error al borrar el documento: ', error);
          });

  }

Documentación oficial: https://firebase.google.com/docs/firestore/manage-data/delete-data?authuser=0

Gonzalo Ariel Rama

student•

Genial, Muchas gracias!, Agrego el editNote:

  public editNote(note:Note){
    this.itemsDocument = this.afs.collection<Client>('notes').doc(note.id);
    return this.itemsDocument.update(note);
  }```

José Coronel

student•

  public deleteNote(note) {
    return this.afDB.database.ref('/notes/'+note.id).remove();
  }

Jhoysner Corona

student•

Creo que es asi corrijanme si estoy equivocado 😄

  public deleteNote(note){
    return this.afDB.database.ref('/notes/'+ note.id).remove();
  }

Jesús Leonardo Perea Alarcón

student•

sinceramente en principio lo habia escrito asi: return this.afDB.database.ref('/notes/'+note.id).remove(note);

pero al parecer es: return this.afDB.database.ref('/notes/'+note.id).remove();

William Bastidas

student•

  public deleteNote(note) {
    return this.afDB.database.ref('notes').child(note.id).remove();
  }

José Coronel

student•

en el archivo app.component.ts a si se manda llamar el método para eliminar una nota.

  eliminarNota(nota) {
    this.notesService.deleteNote(nota).then(() => { 
      // mensaje de que la operación fue satisfactoria.
    }).catch((err) => { console.log(err); });
  }

Carlos Enrique Ramírez Flores

student•

mi código junto con la solución al reto.

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

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

  constructor(public db: AngularFireDatabase) { }
  public getNotes() {
    return this.db.list('/notes');
  }
  public getNote(id) {
    return this.db.object('/notes/' + id);
  }
  public createNote(note) {
    return this.db.object('/notes/' + note.id + '/').set(note);
  }
  public editNote(note) {
    return this.db.object('/notes/' + note.id + '/').set(note);
  }
  public deleteNote(id) {
    return this.db.object('/notes/' + id).remove();
  }
}```

Carlos Uriel de Jesus Sánchez González

student•

ng generate service <Nombre de Servicio>

Alex Eugenio Gavidia Donayre

student•

Crea un servicio

Yenny Garavito

student•

deleteNote(note) { return this.afDB.database.ref('/notes/' + note.id).remove(); }

Alex Eugenio Gavidia Donayre

student•

Thanks

Erick Martinez

student•

public deleteNote(note) { return this.afDB.database.ref(/notes/${note.id}).remove(); }

Juan Guillermo Perez Cardozo

student•

:) easy peacy : return this.afDB.database.ref('notas' + nota.id).remove();

Wilson Alejandro Gonzalez Gaitan

student•

Comando para crear un servicios en angular

ng generate service <directorio>/<nombre del servicio>

IA Interactive

student•

public deleteNote(note){ return this.afDB.database.ref('/notes/' + note.id).remove(); }

Wilson Fabian Pérez Sucuzhañay

student•

Creo que algo así sería el reto

public deleteNote(note){
    return this.afDB.database.ref('/notes/' + note.id).remove();
  }```

German Zaldívar

student•

return this.afDB.database.ref(’/notes/’+note.id).remove();

Creando un servicio de conexión a Firebase

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?