
kevin david pantoja vergara
PreguntaHola!, 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!!
Benjamín Alejandro González Torres
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
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
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
este es el error que me aparece, y no entiendo bien por que sera,

Danny Rivadeneira
Cual es tu error ???