Como usar consultas complexas do Firebase em Angular

Um dos recursos do Firebase é que você pode criar um banco de dados NoSQL armazenado na nuvem. Você também pode integrar esse banco de dados em aplicativos que desenvolve e pode armazenar, atualizar e excluir dados dentro do banco de dados.

Você também pode consultar o banco de dados do Firebase em seu aplicativo Angular. O Firebase exige que você indexe combinações de campos para uma consulta que usa vários campos. Isso permite que o Firebase os procure facilmente quando você chamar a consulta em outro momento.

Configure seu aplicativo Angular e o banco de dados do Firebase

Antes de escrever suas consultas do Firebase, você precisará criar uma aplicação angular e um banco de dados Firebase. Você também precisará configurar seu aplicativo Angular para se conectar ao seu banco de dados.

1. Se você não tiver um aplicativo Angular existente, poderá usar o ng novo comando para criar um novo projeto com todos os arquivos Angular necessários.

   ng novonovo-aplicativo angular

2. Crie um novo Firebase Database para o aplicativo Angular fazendo login no Firebase e seguindo as instruções para criar um novo projeto do Firebase.
3. Em seu novo banco de dados do Cloud Firestore, crie duas coleções (também conhecidas como tabelas) para um "Produto" e um "Fornecedor". Um fornecedor pode fornecer vários produtos. Cada produto também é conectado ao fornecedor usando o campo "supplierId".
4. Insira os seguintes dados na tabela "Produto". Insira os campos name, productId e SupplierId como strings. Insira os campos de preço e inStock como números.

   ID do documento	Campos
   produto1	nome: "Fitas" preço: 12,99 em Estoque: 10 ID do produto: "P1" ID do fornecedor: "S1"
   produto2	nome: "Balões" preço: 1,5 em Estoque: 2 ID do produto: "P2" ID do fornecedor: "S1"
   produto3	nome: "Papel" preço: 2,99 em Estoque: 20 ID do produto: "P3" ID do fornecedor: "S1"
   produto4	nome: "Tabela" preço: 199 em Estoque: 1 ID do produto: "P4" ID do fornecedor: "S2"

   Aqui está um exemplo mostrando como isso deve ficar:
5. Insira os seguintes dados na tabela "Fornecedor". Insira todos os campos como strings.

   ID do documento	Campos
   fornecedor1	nome: "Fornecedor de Artes e Ofícios" local: "Califórnia, EUA" ID do fornecedor: "S1"
   fornecedor2	nome: "Mesas Incríveis" local: "Sydney, Austrália" ID do fornecedor: "S2"

   Veja como deve ser a entrada do fornecedor1:
6. Instalar angular/fogo em seu aplicativo.

   npm eu @angular/fire

7. No Firebase, abra o Configurações do projeto. Clique no logotipo dos colchetes angulares para adicionar o Firebase ao seu aplicativo Angular.
8. O Firebase fornecerá detalhes de configuração que você pode usar para conectar seu aplicativo Angular ao Firebase Database.
9. Substitua o conteúdo em ambientes/ambiente.ts com o seguinte código. Você precisará alterar os valores dentro firebaseConfig. Altere-os para corresponder à configuração fornecida pelo Firebase na etapa anterior.

   exportarconst ambiente = {
    Produção: falso,
    firebaseConfig: {
    apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
    authDomain: "muo-firebase-queries.firebaseapp.com",
    projectId: "muo-firebase-queries",
    storageBucket: "muo-firebase-queries.appspot.com",
    mensagemSenderId: "569911365044",
    appId: "1:569911365044:rede:9557bfef800caa5cdaf6e1"
    }
   };

10. Importe o ambiente de cima, junto com os módulos Angular Firebase para src/app/app.module.ts.

    importar { meio Ambiente } a partir de "../ambientes/ambiente";
    importar {AngularFireModule} a partir de '@angular/fire/compat';
    importar { AngularFirestoreModule } a partir de "@angular/fire/compat/firestore";

11. Adicione os módulos do Firebase à matriz de importações:

    Módulo AngularFirestore,
    Módulo AngularFire.initializeApp(meio Ambiente.firebaseConfig)

Como escrever uma consulta complexa do Firebase em um arquivo de serviços

Você pode consultar tabelas no banco de dados do Firebase usando um arquivo de serviços.

1. Crie uma nova pasta chamada "serviços". Dentro da pasta, crie um novo arquivo chamado "service.ts".
2. Adicione a importação, o construtor e a classe do AngularFirestore ao arquivo.

   importar { Injetável } a partir de '@angular/core';
   importar { Angular Firestore } a partir de '@angular/fire/compat/firestore';
   @Injetável({
    Fornecido em: 'raiz'
   })
   exportarclasseServiço{
   construtor(banco de dados privado: AngularFirestore) { }
   }

3. Neste exemplo de consulta, liste os produtos com base no nome de um fornecedor. Além disso, filtre a lista para exibir apenas o item com o estoque mais baixo. Como o Firebase não é um banco de dados racional, precisaremos consultar as duas tabelas separadas usando mais de uma consulta.
4. Para fazer isso, crie uma nova função chamada getFornecedor(), para lidar com a primeira consulta. A função retornará a linha na tabela "Fornecedor" que corresponde ao nome.

   getSupplier (nome: string) {
   RetornanovoPromessa((resolver)=> {
    this.db.collection('Fornecedor', ref => ref.onde('nome', '==', nome)).valueChanges().subscribe (fornecedor => resolver (fornecedor))
    })
    }

5. Crie outra função chamada getProductsFromSupplier(). Essa consulta consulta o banco de dados em busca de produtos associados a um determinado fornecedor. Além disso, a consulta também ordena os resultados pelo campo "inStock" e exibe apenas o primeiro registro da lista. Em outras palavras, ele devolverá o produto para um determinado fornecedor, com a menor contagem de "inStock".

   getProductsFromSupplier (supplierId: string) {
   RetornanovoPromessa((resolver)=> {
    this.db.collection('produtos', ref => ref.onde('Identificação do Fornecedor', '==', fornecedorId).orderBy('em estoque').startAt (0).limit (1)).valueChanges().subscribe (product => resolver (produto))
    })
    }

6. No src/app/app.component.ts arquivo, importe o serviço.

   importar { Serviço } a partir de 'src/app/services/service';

7. Adicione um construtor dentro da classe AppComponent e adicione o serviço ao construtor.

   construtor(serviço privado: Serviço) { }

8. Crie uma nova função chamada getProductStock(). Esta função imprimirá o produto com o menor estoque que um determinado fornecedor fornece. Certifique-se de chamar a nova função no ngOnInit() e declare uma variável para armazenar o resultado.

   produtos: qualquer;
   ngOnInit(): vazio {
   isto.getProductStock();
   }
   assíncrono getProdutoEstoque() {
   }

9. Dentro de getProductStock() função, use as duas consultas do arquivo services. Use a primeira consulta para obter o registro de um fornecedor com base no nome. Em seguida, use o SupplierId como argumento para a segunda consulta, que encontrará o produto desse fornecedor, com o menor estoque.

   deixar fornecedor = aguardamisto.service.getSupplier('Fornecedor de Artes e Ofícios'); 
   isto.produtos = aguardamisto.service.getProductsFromSupplier (fornecedor[0].Identificação do Fornecedor);

10. Remova o conteúdo da src/app/app.component.html arquivo e substitua-o pelo seguinte:

    <h2> Produtos com estoque mais baixo de "Fornecedor de artes e ofícios"</h2>
    <div *ngFor="deixe item de produtos">
    <p> Nome: {{item.name}} </p>
    <p> Número em estoque: {{item.inStock}} </p>
    <p> Preço: ${{item.price}} </p>
    </div>

11. Execute o aplicativo em um navegador da Web usando o ng servir comando.

    ng servir

12. Abra seu site usando qualquer navegador da web. Por padrão, o Angular hospeda o aplicativo em localhost: 4200.
13. Seus dados não serão exibidos na tela corretamente. Clique com o botão direito do mouse na página da Web e clique em Inspecionar para abrir as ferramentas de desenvolvedor do seu navegador.
14. Navegue até o Console aba. Um erro será exibido para informar que a consulta exigirá um índice.

Como criar um índice composto para sua consulta

O Firebase cria índices para consultas que podem conter vários campos. De acordo com Documentação do Firebase, isso funciona como um mapa para que o Firebase possa pesquisar a localização dos campos contidos na consulta.

1. No console, clique no link que o erro exibe.
2. Faça login na sua conta do Firebase.
3. Um prompt será exibido solicitando que você crie um índice para a consulta do Firebase. Clique em Criar índice.
4. O Firebase indexará os campos que sua consulta usa. Aguarde alguns minutos até que o status mude de "Construindo" para "Ativado".
5. Atualize seu navegador da web. A consulta será executada e retornará o resultado correto na página inicial. Se você abrir o depurador do console usando as ferramentas de desenvolvedor do seu navegador, o erro não deverá mais existir.

Como consultar seu banco de dados do Firebase

O Firebase permite criar um banco de dados NoSQL na nuvem. Você pode então integrar esse banco de dados em aplicativos Angular que está desenvolvendo. Você pode criar diferentes tipos de consultas para armazenar, atualizar ou excluir dados. Você também pode criar uma consulta que usa vários campos ao mesmo tempo.

Quando você cria uma consulta que usa vários campos, tentar executá-la produzirá um erro. Você precisará indexar a combinação de campos usada na consulta para que o Firebase possa pesquisá-la facilmente sempre que você executar a consulta.

Você também pode aprender sobre outras maneiras de configurar um banco de dados NoSQL, como configurar um banco de dados usando o MongoDB.