Hola!, he estado intentando usar mi propia api en este proyecto pero no me ha sido posible, esta es la api que yo genere, <a href="https:...

kevin david pantoja vergara

kevin david pantoja vergara

Pregunta
studenthace 5 años

Hola!, he estado intentando usar mi propia api en este proyecto pero no me ha sido posible, esta es la api que yo genere, https://productostn-1d3e2.firebaseio.com/ pero al seguir los pasos de esta clase no me funciona, por favor ayuda, muchas gracias!!

5 respuestas
para escribir tu comentario
    Benjamín Alejandro González Torres

    Benjamín Alejandro González Torres

    studenthace 5 años

    Puedes notar que tras hacer el map en el objeto e, tenemos un campo e.payload.doc.data(), del que podemos obtener todos los campos (e.payload.doc.data().id, e.payload.doc.data().title, etc.) y podemos también consultar el campo .payload.doc.id, siendo este último el campo id del documento en firebase (el que necesitas para hacer el update, el delete y el get de un sólo producto, que yo no he puesto esa función, porque yo lo obtuve de otra forma menos elegante). Teniendo eso en cuenta modifiqué el product.model.ts y agregué una nueva interfaz que también incluyera el campo FirebaseID, y en el products-list.component.ts hago que en vez de tipo Product sea ProductFirebase (la interfaz que cree), en el fetch coloco este campo y así hago que en el botón de delete se envíe el FIrebaseID.

    Espero quede claro, seguramente deberan clavarse un poco más en la documentación de Firebase para entender un poco mejor y corregir algún error o bug que les aparezca al momento de usar el cloud firestore, pero básicamente asi es como se hace.

    ¡Se debe manejar asi, como base de datos, no igual que las apis HTTP, por lo que no valdrán las funciones como están en clase y solo cambiando el url por el de tu base de datos!

    Como dato adicional: Es mejor hacerlo asi que con una api que use métodos http porque como hemos visto en clase, con la pestaña de network monitor vemos la petición a la url y como has visto, cualquiera puede hacerle peticiones y ver tus productos, modificarlos, agregar nuevos, etc. Para evitar esto, deberias configurar tu sitio para que valide que las peticiones entrantes sean autenticas y vengan sólo de tu sitio (Es el error que ves en la página de Firebase, para resolverlo deberias configurar adecuadamente los accesos y mandar manualmente en tus peticiones el CORS, configurando que permita el acceso en tu dominio y que permita los protocolos a usar:

    Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: PUT, POST, DELETE

    ) En vista que de todos ya incorporaste firebase para el control de usuarios y probablemente también el host, de una vez es más fácil jalar todo de una base de datos que configurar un servidor http externo. Me hubiera gustado que se manejaran esos temas en el curso, porque si bien hay otro curso de Firebase en la plataforma, esta está pensada para trabajar con HTML, CSS y JS puros, sin Angular y sí cambian algunas cosas. Saludos

    Benjamín Alejandro González Torres

    Benjamín Alejandro González Torres

    studenthace 5 años

    Hola buen día. Yo utilicé Cloud Firestore. Necesitarás crear la colección con los productos. En tu product.service.ts importa: import { AngularFirestore } from '@angular/fire/firestore'; De este modo ya podrás hacer el CRUD con la base de datos

    getAllProducts() { return this.firestore.collection('products').snapshotChanges(); } createProduct(product: Product) { return this.firestore.collection('products').add(product); } updateProduct(id: string, changes: Product) { // Yo he quitado el partial y en el form hice los campos opcionales y que se rellenaran por defecto con los campos ya guardados en la base de datos return this.firestore.collection('products').doc(id).update(changes); //El id dentro del doc es el de Firestore, no el campo id } deleteProduct(id: string) { return this.firestore.collection('products').doc(id).delete(); //El id dentro del doc es el de Firestore, no el campo id }

    De esta forma al hacer el fetch en el products.components.ts queda asi

    fetchProducts(): void { this.productsService.getAllProducts() .subscribe(products => { this.products = products.map ((e: any) => { const p: Product = e.payload.doc.data() as unknown as Product; return p; }) ; }); }
    Danny Rivadeneira

    Danny Rivadeneira

    studenthace 5 años

    Ok no entiendo muy bien RealTime Database de hecho nunca la he usado, pero he usado firestore mmmm intente consumir el servicio desde insomnia pero parece ser error de la api, puedes probar utilizando firestore y hacer los consumos con Angular Fire

    kevin david pantoja vergara

    kevin david pantoja vergara

    studenthace 5 años

    Sin títulod.png

    este es el error que me aparece, y no entiendo bien por que sera,

    Danny Rivadeneira

    Danny Rivadeneira

    studenthace 5 años

    Cual es tu error ???

Curso de Angular [Empieza Gratis]

Curso de Angular [Empieza Gratis]

Entiende los conceptos fundamentales de Angular 8. Conoce la arquitectura de este Framework para que programes aplicaciones web con sus mejores prácticas. Conecta tus aplicaciones con una API para obtener datos de un sistema de Backend. Crea una tienda en línea y publícala en Internet con Firebase.

Curso de Angular [Empieza Gratis]
Curso de Angular [Empieza Gratis]

Curso de Angular [Empieza Gratis]

Entiende los conceptos fundamentales de Angular 8. Conoce la arquitectura de este Framework para que programes aplicaciones web con sus mejores prácticas. Conecta tus aplicaciones con una API para obtener datos de un sistema de Backend. Crea una tienda en línea y publícala en Internet con Firebase.