Agregar servicio de acceso a datos

Clase 25 de 36 • Curso Básico de Ionic 2018

Eliana Marcela Díaz Jiménez

student•

como puedo obtener una lista introduciendo una query o consultando todo en la lista donde un nodo sea igual a algo en especifico?

Eliana Marcela Díaz Jiménez

student•

ya lo logre:

getdatosFiltro(filtro:string) {
return this.db.list(’/nodo/’, ref=> ref.orderByChild(‘nodoFiltro’).equalTo(filtro));
}

Matias Cabido

student•

como haces cuando tenes que traer solo un registro??

Ricardo Chavarria

student•

  public deleteLugar(lugar){
    return this.afDB.database.ref('/lugares/'+ lugar.id).remove();
  }

Christian Gonzalez

student•

Me da un error en “place” como que no es reconocido esa palabra.

public editLugar(lugar) {
    return this.afDB.database.ref('/lugares/' + lugar.id).set(place);
}

Christian Gonzalez

student•

especificamente:

[ts] no se encuentra el nombre place

Juan Antonio Baracat

student•

Esto fue un error del profesor, el parametro no es place es lugar, paso el código corregido

public editLugar(lugar) {
    return this.afDB.database.ref('/lugares/' + lugar.id).set(lugar);
}

Francisco Manuel Velásquez Escobar

student•

Cual es la diferencia entre un service y un provider?

Irving Sarmiento

student•

Es exactamente lo mismo, solo que en ionic son llamados providers y Angular por si solo, los llama services, pero si has usado Angular y sus servicios, te darás cuenta que los colocas en el app.module.ts y dentro de los providers para ser usados en todo el proyecto

Francisco Manuel Velásquez Escobar

student•

Super! Gracias Irving!

Jesus Sandrea

student•

Cual es la diferencia entre provider y services? Tenia entendido que es lo mismo.

Diego Forero

Team Platzi•

Como lo mencionas es lo mismo solo que Ionic y Angular los llaman diferentes para el primero son providers y para el segundo services.

Luis Fernando Niño Gonzalez

student•

Buena practica generar los servicios en archivos diferentes para poder hacer mantenimiento de codigo más facil

Víctor Manuel Sarmiento Cayuelas

student•

En los archivos de este video, hay una importación incorrecta en src/services/lugares.service.ts

import {AngularFireDatabase} from 'angularfire2/database/database';

lo correcto es:

import {AngularFireDatabase} from 'angularfire2/database';

Johan David Rodriguez

student•

para los que esten utilizando ionic 4

import { Injectable } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore'; import { Observable } from 'rxjs'; import {map} from 'rxjs/operators';

export interface Lugar { task: string; priority: number; createdAt: number; }

@Injectable({ providedIn: 'root' })

export class LugaresService{

private lugaresCollection: AngularFirestoreCollection<Lugar>

private lugares: Observable<Lugar[]>;

constructor(public afDB : AngularFirestore){
    this.lugaresCollection = afDB.collection<Lugar>('lugares');

    this.lugares = this.lugaresCollection.snapshotChanges().pipe(
        map(actions => {
            return actions.map(a => {
                const data = a.payload.doc.data();
                const id = a.payload.doc.id;
                return {id, ...data};
            });
        })
    );
}

getLugares(){
    return this.lugares;
}

getLugar(id){
    return this.lugaresCollection.doc<Lugar>(id).valueChanges();
}   

createLugar(lugar : Lugar){
    return this.lugaresCollection.
}

updateLugares(lugar : Lugar, id : string){
    return this.lugaresCollection.doc(id).update(lugar);
}

editLugar(lugar : Lugar){
    return this.lugaresCollection.add(lugar);
}

removeLugar(id){
    return this.lugaresCollection.doc(id).delete();
}

}

Matias Cabido

student•

Creo que hace falta una clase similar a esta pero con alguna base de datos que no este en la nube, como sql server, mysql, etc

Diego Forero

Team Platzi•

Lo tendremos en cuenta para siguientes cursos, gracias por la sugerencia.

David Luna

student•

Para usar otras BD debes crear en el backend un API-Rest que puedas consumir como servicios desde IONIC.

juan david jaramillo zuñiga

student•

public deleteLugar(lugar){
    return this.afDB.database.ref('/lugares/' + lugar.id).delete(lugar);
  }```

Daniel Altamar

student•

Gracias por tu aporte!!!

Uziel Trujillo Colón

student•

Veo que en el video de la clase no cran la variable place y e ahí donde me marca error, pero en los archivos si aparece, espero no estarme perdiendo mucho, alguien me puede aclarar la duda?

Pedro Roberto Capriles Morales

student•

<ion-fab bottom right>
          <button ion-fab (click) = "irAVistaDetalle()" >
            <ion-icon name="add" color="white"></ion-icon>
          </button>
        
        </ion-fab>

Pedro Roberto Capriles Morales

student•

Escribiendo el reto.

    public deleteLugar(lugar:any){
        //reto 
        return this.afDB.database.ref('/lugares/'+lugar.id).remove();
    }```

Jorge Hernandez Rozo

student•

para el metodo de editLugar no seria un .update(place) ?

Luis Rodolfo Lara Espinoza

student•

public deleteLugar(lugar) {
return this.afDB.database.ref(/lugares/${ lugar.id }).remove();
}

Luis Rodolfo Lara Espinoza

student•

public deleteLugar(lugar) {
return this.afDB.database.ref(/lugares/${ lugar.id }).remove();
}

Carlos Uriel de Jesus Sánchez González

student•

public deleteLugar(lugar){
    return this.afDB.database.ref('/lugares/'+ lugar.id).remove();
  }

david.nieto

student•

Mi solución al reto::

import { Injectable } from "@angular/core";
import { Firestore, collectionData, docData, addDoc, updateDoc, deleteDoc } from "@angular/fire/firestore";
import { collection, doc } from "firebase/firestore";

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

    constructor(
        public afDB: Firestore
    ) { }

    public getLugares() {
        const lugaresRef = collection(this.afDB, 'lugares');
        return collectionData(lugaresRef);
    }

    public getLugar(id) {
        const lugaresRef = doc(this.afDB, `lugares/${id}`);
        return docData(lugaresRef);
    }

    public createLugar(lugar) {
        const lugaresRef = collection(this.afDB, 'lugares');
        return addDoc(lugaresRef, lugar);
    }

    public editLugar(lugar) {
        const lugaresRef = doc(this.afDB, `lugares/${lugar.id}`);
        return updateDoc(lugaresRef, lugar);
    }

    public deleteLugar(id) {
        const lugaresRef = doc(this.afDB, `lugares/${id}`);
        return deleteDoc(lugaresRef);
    }

}

Juan Roa

student•

public deleteLugar(id) {
        return this.afDB.database.ref('/lugares/' + id).remove();
    }

Mario Alejandro Cortez Salinas

student•

Cheque en los aportes y han comentado que es lo mismo un provider que un service, y que lo que los diferencia es la manera en como se llaman en angular y en ionic por lo que me surge la duda.

Sería una buena practica usar el cli de ionic ¿de esta manera?

ionic generate provider lugar

Esto para el minuto 1:39 del video

Agregar servicio de acceso a datos

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso