Come utilizzare query Firebase complesse in Angular

Una delle funzionalità di Firebase è che puoi creare un database NoSQL archiviato nel cloud. È inoltre possibile integrare questo database nelle applicazioni sviluppate e archiviare, aggiornare ed eliminare i dati all'interno del database.

Puoi anche interrogare il database Firebase dalla tua applicazione Angular. Firebase richiede di indicizzare le combinazioni di campi per una query che utilizza più campi. Ciò consente a Firebase di cercarli facilmente quando chiami la query in un altro momento.

Configura la tua app Angular e il database Firebase

Prima di scrivere le tue query Firebase, dovrai creare un'applicazione angolare e un database Firebase. Dovrai anche configurare la tua app Angular per connetterti al tuo database.

1. Se non disponi di un'applicazione Angular esistente, puoi utilizzare il
   instagram viewer
   ng nuovo comando per creare un nuovo progetto con tutti i file Angular necessari.

   ng nuovonuovo-app angolare

2. Creare un nuovo database Firebase per l'app Angular accedendo a Firebase e seguendo le istruzioni per creare un nuovo progetto Firebase.
3. Nel tuo nuovo database Cloud Firestore, crea due raccolte (note anche come tabelle) per un "Prodotto" e un "Fornitore". Un fornitore può fornire più prodotti. Ogni prodotto è inoltre collegato al fornitore tramite il campo "supplierId".
4. Inserisci i seguenti dati nella tabella "Prodotto". Immettere i campi nome, ID prodotto e ID fornitore come stringhe. Inserisci i campi prezzo e inStock come numeri.

   Documento d'identità	Campi
   prodotto1	nome: "Nastri" prezzo: 12,99 in Stock: 10 ID prodotto: "P1" ID fornitore: "S1"
   prodotto2	nome: "Palloncini" prezzo: 1,5 in Stock: 2 ID prodotto: "P2" ID fornitore: "S1"
   prodotto3	nome: "Carta" prezzo: 2,99 in Stock: 20 ID prodotto: "P3" ID fornitore: "S1"
   prodotto4	nome: "Tavolo" prezzo: 199 in Stock: 1 ID prodotto: "P4" ID fornitore: "S2"

   Ecco un esempio che mostra come dovrebbe apparire:
5. Inserisci i seguenti dati nella tabella "Fornitore". Inserisci tutti i campi come stringhe.

   Documento d'identità	Campi
   fornitore1	nome: "Fornitore Arti e Mestieri" luogo: "California, USA" ID fornitore: "S1"
   fornitore2	nome: "Tabelle incredibili" luogo: "Sydney, Australia" ID fornitore: "S2"

   Ecco come dovrebbe apparire la voce supplier1:
6. Installare angolare/fuoco nella tua app.

   npm i @angolare/fire

7. In Firebase, apri il file Impostazioni del progetto. Fai clic sul logo delle parentesi angolari per aggiungere Firebase alla tua applicazione Angular.
8. Firebase ti fornirà i dettagli di configurazione che puoi utilizzare per connettere la tua app Angular al database Firebase.
9. Sostituisci il contenuto in ambienti/ambiente.ts con il seguente codice. Sarà necessario modificare i valori all'interno firebaseConfig. Modificali in modo che corrispondano alla configurazione fornita da Firebase nel passaggio precedente.

   esportarecost ambiente = {
    produzione: falso,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    messagingSenderId: "569911365044",
    appId: "1:569911365044:ragnatela:9557bfef800caa5cdaf6e1"
    }
   };

10. Importa l'ambiente dall'alto, insieme ai moduli Angular Firebase in src/app/app.module.ts.

    importare { ambiente } da "../ambienti/ambiente";
    importare { Modulo AngularFire } da '@angular/fire/compat';
    importare { Modulo Angular Firestore } da "@angular/fire/compat/firestore";

11. Aggiungi i moduli Firebase all'array di importazione:

    Modulo Angular Firestore,
    AngularFireModule.inizializzaApp(ambiente.firebaseConfig)

Come scrivere una query Firebase complessa in un file di servizi

Puoi eseguire query sulle tabelle nel tuo database Firebase utilizzando un file di servizi.

1. Crea una nuova cartella chiamata "servizi". All'interno della cartella, crea un nuovo file chiamato "service.ts".
2. Aggiungi l'importazione, il costruttore e la classe AngularFirestore nel file.

   importare {Iniettabile} da '@angular/core';
   importare { Angular Firestore } da '@angular/fire/compat/firestore';
   @Iniettabile({
    fornitoIn: 'radice'
   })
   esportareclasseServizio{
   costruttore(db privato: AngularFirestore) { }
   }

3. In questo esempio di query, elenca i prodotti in base al nome di un fornitore. Inoltre, filtra l'elenco per visualizzare solo l'articolo con lo stock più basso. Poiché Firebase non è un database razionale, dovremo interrogare le due tabelle separate utilizzando più di una query.
4. Per fare ciò, crea una nuova funzione chiamata getFornitore(), per gestire la prima query. La funzione restituirà la riga nella tabella "Fornitore" che corrisponde al nome.

   getSupplier (nome: stringa) {
   RestituzionenuovoPromettere((risolvere) => {
    this.db.collection('Fornitore', rif => rif.dove('nome', '==', nome)).valueChanges().subscribe (fornitore => risolvere (fornitore))
    })
    }

5. Crea un'altra funzione chiamata getProductsFromSupplier(). Questa query interroga il database per i Prodotti associati a un particolare fornitore. Inoltre, la query ordina anche i risultati in base al campo "inStock" e visualizza solo il primo record dell'elenco. In altre parole, restituirà il prodotto per un particolare fornitore, con il conteggio "inStock" più basso.

   getProductsFromSupplier (supplierId: string) {
   RestituzionenuovoPromettere((risolvere) => {
    this.db.collection('Prodotto', rif => rif.dove('ID fornitore', '==', supplierId).orderBy('disponibile'.startAt (0).limit (1)).valueChanges().subscribe (prodotto => risolvere (prodotto))
    })
    }

6. Nel src/app/app.component.ts file, importare il servizio.

   importare { Servizio } da 'src/app/servizi/servizio';

7. Aggiungi un costruttore all'interno della classe AppComponent e aggiungi il servizio al costruttore.

   costruttore(servizio privato: servizio) { }

8. Crea una nuova funzione chiamata getProductStock(). Questa funzione stamperà il prodotto con lo stock più basso fornito da un determinato fornitore. Assicurati di chiamare la nuova funzione in ngOnInit() funzione e dichiarare una variabile per memorizzare il risultato.

   prodotti: qualsiasi;
   ngOnInit(): vuoto {
   questo.getProductStock();
   }
   asincrono getProductStock() {
   }

9. Dentro il getProductStock() funzione, utilizzare le due query dal file services. Utilizzare la prima query per ottenere il record di un fornitore in base al nome. Quindi, utilizza supplierId come argomento per la seconda query, che troverà il prodotto di quel fornitore con lo stock più basso.

   permettere fornitore = aspettarequesto.service.getSupplier('Fornitore di arti e mestieri'); 
   questo.prodotti = aspettarequesto.service.getProductsFromSupplier (fornitore[0].idfornitore);

10. Rimuovere il contenuto nel src/app/app.component.html file e sostituirlo con il seguente:

    <h2> Prodotti con stock più basso da "Fornitore di arti e mestieri"</h2>
    <div *ngFor="lasciare articolo di prodotti">
    <p> Nome: {{nome.oggetto}} </p>
    <p> Numero in stock: {{item.inStock}} </p>
    <p> Prezzo: ${{item.price}} </p>
    </div>

11. Eseguire l'applicazione in un browser Web utilizzando il ng servire comando.

    ng servire

12. Apri il tuo sito web utilizzando qualsiasi browser web. Per impostazione predefinita, Angular ospita l'applicazione su host locale: 4200.
13. I tuoi dati non verranno visualizzati correttamente sullo schermo. Fare clic con il pulsante destro del mouse sulla pagina Web e fare clic su Ispezionare per aprire gli strumenti di sviluppo del tuo browser.
14. Passa a Console scheda. Verrà visualizzato un errore per informarti che la query richiederà un indice.

Come creare un indice composito per la tua query

Firebase crea indici per le query che possono contenere più campi. Secondo il Documentazione Firebase, funge da mappa, in modo che Firebase possa cercare la posizione dei campi contenuti nella query.

1. Nella console, fare clic sul collegamento visualizzato dall'errore.
2. Accedi al tuo account Firebase.
3. Verrà visualizzato un messaggio che ti chiede di creare un indice per la query Firebase. Clicca su Crea indice.
4. Firebase indicizzerà i campi utilizzati dalla tua query. Attendi qualche minuto finché lo stato non cambia da "Edificio" ad "Abilitato".
5. Aggiorna il tuo browser web. La query verrà eseguita e restituirà il risultato corretto sulla home page. Se apri il debugger della console utilizzando gli strumenti di sviluppo del tuo browser, l'errore non dovrebbe più essere presente.

Interrogazione del database di Firebase

Firebase ti consente di creare un database NoSQL nel cloud. Puoi quindi integrare quel database nelle applicazioni Angular che stai sviluppando. È possibile creare diversi tipi di query per archiviare, aggiornare o eliminare i dati. Puoi anche creare una query che utilizza più campi contemporaneamente.

Quando crei una query che utilizza più campi, il tentativo di eseguirla produrrà un errore. Dovrai indicizzare la combinazione di campi utilizzata nella query, in modo che Firebase possa cercarla facilmente ogni volta che esegui la query.

Puoi anche conoscere altri modi per configurare un database NoSQL, ad esempio come configurare un database utilizzando MongoDB.