Cómo usar consultas complejas de Firebase en Angular

Una de las características de Firebase es que puedes crear una base de datos NoSQL almacenada en la nube. También puede integrar esta base de datos en las aplicaciones que desarrolle y puede almacenar, actualizar y eliminar datos dentro de la base de datos.

También puede consultar la base de datos de Firebase desde su aplicación Angular. Firebase requiere que indexes combinaciones de campos para una consulta que usa varios campos. Esto permite que Firebase los busque fácilmente cuando llama a la consulta en otro momento.

Configure su aplicación Angular y la base de datos de Firebase

Antes de escribir sus consultas de Firebase, deberá crear una aplicación angular y una base de datos de Firebase. También deberá configurar su aplicación Angular para conectarse a su base de datos.

1. Si no tiene una aplicación Angular existente, puede usar el nuevo Comando para crear un nuevo proyecto con todos los archivos angulares necesarios.

   ng nuevonuevo-angular-aplicación

2. Crear un nueva base de datos Firebase para la aplicación Angular iniciando sesión en Firebase y siguiendo las indicaciones para crear un nuevo proyecto de Firebase.
3. En su nueva base de datos de Cloud Firestore, cree dos colecciones (también conocidas como tablas) para un "Producto" y un "Proveedor". Un proveedor puede suministrar varios productos. Cada producto también está conectado al proveedor mediante el campo "supplierId".
4. Introduzca los siguientes datos en la tabla "Producto". Ingrese los campos de nombre, ID de producto y ID de proveedor como cadenas. Ingrese los campos precio e inStock como números.

   Identificación del documento	Campos
   producto1	nombre: "Cintas" precio: 12,99 en stock: 10 ID de producto: "P1" proveedorId: "S1"
   producto2	nombre: "Globos" precio: 1,5 en stock: 2 ID de producto: "P2" proveedorId: "S1"
   producto3	nombre: "Papel" precio: 2,99 en stock: 20 ID de producto: "P3" proveedorId: "S1"
   producto4	nombre: "Mesa" precio: 199 en stock: 1 ID de producto: "P4" proveedorId: "S2"

   Aquí hay un ejemplo que muestra cómo debería verse esto:
5. Introduzca los siguientes datos en la tabla "Proveedor". Introduzca todos los campos como cadenas.

   Identificación del documento	Campos
   proveedor1	nombre: "Proveedor de artes y oficios" ubicación: "California, Estados Unidos" proveedorId: "S1"
   proveedor2	nombre: "Mesas asombrosas" ubicación: "Sídney, Australia" proveedorId: "S2"

   Así es como debería verse la entrada del proveedor1:
6. Instalar angular/fuego en su aplicación.

   npm yo @angular/fire

7. En Firebase, abra el Configuración del proyecto. Haga clic en el logotipo de corchetes angulares para agregar Firebase a su aplicación Angular.
8. Firebase le proporcionará detalles de configuración que puede usar para conectar su aplicación Angular a la base de datos de Firebase.
9. Reemplace el contenido en entornos/environment.ts con el siguiente código. Deberá cambiar los valores dentro de FirebaseConfig. Cámbielos para que coincidan con la configuración que Firebase le proporcionó en el paso anterior.

   exportarconstante entorno = {
    producción: falso,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-consultas",
    depósito de almacenamiento: "muo-firebase-queries.appspot.com",
    mensajeSenderId: "569911365044",
    ID de aplicación: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
   };

10. Importe el entorno desde arriba, junto con los módulos de Angular Firebase en src/app/app.module.ts.

    importar { ambiente } de "../entornos/medio ambiente";
    importar {Módulo de fuego angular} de '@angular/fuego/compatible';
    importar {AngularFirestoreModule} de "@angular/fire/compat/firestore";

11. Agregue los módulos de Firebase a la matriz de importaciones:

    Módulo AngularFirestore,
    AngularFireModule.inicializarAplicación(ambiente.firebaseConfig)

Cómo escribir una consulta compleja de Firebase en un archivo de servicios

Puede consultar tablas en su base de datos de Firebase usando un archivo de servicios.

1. Cree una nueva carpeta llamada "servicios". Dentro de la carpeta, cree un nuevo archivo llamado "service.ts".
2. Agregue la importación, el constructor y la clase de AngularFirestore al archivo.

   importar { Inyectable } de '@angular/núcleo';
   importar {AngularFirestore} de '@angular/fire/compat/firestore';
   @Inyectable({
    proporcionada en: 'raíz'
   })
   exportarclaseServicio{
   constructor(base de datos privada: AngularFirestore) { }
   }

3. En este ejemplo de consulta, enumere los productos según el nombre de un proveedor. Además, filtre la lista para mostrar solo el artículo con el stock más bajo. Debido a que Firebase no es una base de datos racional, necesitaremos consultar las dos tablas separadas usando más de una consulta.
4. Para hacer esto, crea una nueva función llamada obtenerProveedor(), para manejar la primera consulta. La función devolverá la fila en la tabla "Proveedor" que coincida con el nombre.

   getSupplier (nombre: cadena) {
   devolvernuevoPromesa((resolver)=> {
    esta.db.colección('Proveedor', referencia => ref.donde('nombre', '==', nombre)).valueChanges().subscribe (proveedor => resolver (proveedor))
    })
    }

5. Crea otra función llamada obtenerProductosDeProveedor(). Esta consulta consulta la base de datos de Productos asociados con un proveedor en particular. Además, la consulta también ordena los resultados por el campo "inStock" y solo muestra el primer registro de la lista. En otras palabras, devolverá el producto a un proveedor en particular, con el recuento más bajo de "inStock".

   getProductsFromSupplier (identificador de proveedor: cadena) {
   devolvernuevoPromesa((resolver)=> {
    esta.db.colección('Producto', referencia => ref.donde('Identificación del proveedor', '==', proveedorId).orderBy('en stock').startAt (0).límite (1)).valueChanges().subscribe (producto => resolver (producto))
    })
    }

6. En el src/app/app.component.ts archivo, importe el servicio.

   importar { Servicio } de 'src/aplicación/servicios/servicio';

7. Agregue un constructor dentro de la clase AppComponent y agregue el servicio al constructor.

   constructor(servicio privado: Servicio) { }

8. Crear una nueva función llamada getProductStock(). Esta función imprimirá el producto con el stock más bajo que proporciona un proveedor en particular. Asegúrese de llamar a la nueva función en el ngOnInit() y declarar una variable para almacenar el resultado.

   productos: cualquiera;
   ngOnInit(): vacío {
   este.getProductStock();
   }
   asíncrono obtenerStockProducto() {
   }

9. Dentro de getProductStock() función, use las dos consultas del archivo de servicios. Utilice la primera consulta para obtener el registro de un proveedor en función del nombre. Luego, use el ID de proveedor como argumento para la segunda consulta, que encontrará el producto de ese proveedor, con el stock más bajo.

   dejar proveedor = esperareste.service.getSupplier('Proveedor de Artes y Oficios'); 
   este.productos = esperareste.service.getProductsFromSupplier (proveedor[0].Identificación del proveedor);

10. Retire el contenido de la src/app/app.component.html y reemplácelo con lo siguiente:

    <h2> Productos con menor stock de "Proveedor de artes y oficios"</h2>
    <div *ngFor="dejar artículo de productos">
    <pags> Nombre: {{elemento.nombre}} </pags>
    <pags> Número en stock: {{item.inStock}} </pags>
    <pags> Precio: ${{artículo.precio}} </pags>
    </div>

11. Ejecute la aplicación en un navegador web usando el ng servir dominio.

    ng servir

12. Abre tu sitio web usando cualquier navegador web. De forma predeterminada, Angular aloja la aplicación en servidor local: 4200.
13. Sus datos no se mostrarán en la pantalla correctamente. Haga clic derecho en la página web y haga clic en Inspeccionar para abrir las herramientas de desarrollo de su navegador.
14. Navegar a la Consola pestaña. Aparecerá un error para informarle que la consulta requerirá un índice.

Cómo crear un índice compuesto para su consulta

Firebase crea índices para consultas que pueden contener varios campos. De acuerdo con la Documentación de base de fuego, esto actúa como un mapa, para que Firebase pueda buscar la ubicación de los campos contenidos en la consulta.

1. En la consola, haga clic en el enlace que muestra el error.
2. Inicie sesión en su cuenta de Firebase.
3. Aparecerá un mensaje pidiéndole que cree un índice para la consulta de Firebase. Haga clic en Crear índice.
4. Firebase indexará los campos que usa su consulta. Espere unos minutos hasta que el estado cambie de "Edificio" a "Habilitado".
5. Actualice su navegador web. La consulta se ejecutará y devolverá el resultado correcto en la página de inicio. Si abre el depurador de la consola con las herramientas de desarrollo de su navegador, el error ya no debería aparecer.

Consultar su base de datos de Firebase

Firebase le permite crear una base de datos NoSQL en la nube. Luego puede integrar esa base de datos en las aplicaciones Angular que está desarrollando. Puede crear diferentes tipos de consultas para almacenar, actualizar o eliminar datos. También puede crear una consulta que utilice varios campos a la vez.

Cuando crea una consulta que usa múltiples campos, intentar ejecutarla producirá un error. Deberá indexar la combinación de campos utilizada en la consulta, para que Firebase pueda buscarla fácilmente cada vez que ejecute la consulta.

También puede obtener información sobre otras formas de configurar una base de datos NoSQL, por ejemplo, cómo configurar una base de datos utilizando MongoDB.