Como armazenar, atualizar, excluir e recuperar dados de um banco de dados Firebase usando Angular

O Firebase é uma plataforma que oferece diversos serviços para ajudar na criação e dimensionamento de um aplicativo. Alguns desses recursos incluem serviços de hospedagem, armazenamento de dados e a capacidade de rastrear análises de dados.

Este tutorial se concentra principalmente em como criar e adicionar dados a um banco de dados do Firebase e como executar operações de criação, leitura, gravação e exclusão no banco de dados a partir de um aplicativo Angular local.

Como criar e adicionar dados a um banco de dados Firebase

Supondo que você já tenha um aplicativo Angular configurado e em execução localmente, ele precisará estar conectado a um banco de dados do Firebase para armazenar e acessar dados. Se você não estiver familiarizado com o Angular, você pode ler mais sobre Conceitos Angular, componentes e a estrutura geral de um projeto Angular.

Se você ainda não tem um Firebase Database, pode usar as credenciais da sua conta do Google para fazer login no Firebase e seguir as instruções. Depois de configurado, crie um projeto:

1. A partir de Página inicial do Firebase, selecione Ir para o console no canto superior direito do site.
2. Em "Seus projetos do Firebase", selecione Adicionar projeto.
3. Siga as instruções para criar um novo projeto.
4. Uma vez concluído, o projeto será aberto. No lado esquerdo da tela, há um painel que lista os recursos que o Firebase oferece. Passe o mouse sobre os ícones até ver Banco de dados do Firestoree selecione-o.
5. Selecionar Criar banco de dados, e siga as instruções para criar um banco de dados.
6. Ao selecionar as regras de segurança, selecione Iniciar no modo de teste. Isso pode ser alterado posteriormente para garantir que os dados sejam mais seguros. Você pode ler mais sobre as regras de segurança do Firestore seguindo o Documentação do Firebase.
7. Depois de concluído, o banco de dados será aberto. A estrutura do banco de dados usa Coleções, que é essencialmente o mesmo conceito das tabelas de banco de dados. Por exemplo, se você precisasse de duas tabelas, uma para armazenar as informações da conta e outra para armazenar as informações do usuário, você criaria duas coleções denominadas Conta e Usuário.
8. Selecionar Iniciar coleção e adicione um ID de coleção chamado "Usuário".
9. Adicione o primeiro registro, com informações sobre um usuário. Clique em Adicionar campo para adicionar três novos campos: firstName (string), lastName (string) e vipMember (boolean). A ID do documento pode ser gerada automaticamente.
10. Clique Salvar.
11. Para adicionar mais registros à coleção "Usuário", clique em Adicionar documento (add document é equivalente a adicionar um novo registro ou usuário). Adicione mais quatro usuários com os mesmos três campos.

O banco de dados agora está configurado com alguns dados de teste.

Como integrar o Firebase em seu aplicativo Angular

Para acessar esses dados em seu aplicativo Angular local, primeiro defina algumas configurações do aplicativo para se conectar ao banco de dados do Firebase:

1. No Firebase, vá para o painel esquerdo e clique em Visão Geral do Projeto.
2. Selecione os Rede botão (indicado por colchetes).
3. Registre seu aplicativo local adicionando o nome do aplicativo.
4. Instale o Firebase em seu aplicativo Angular local.

   npm e firebase
   

5. O Firebase exibirá alguns detalhes de configuração. Salve esses detalhes e clique em Continuar para o console.
6. Com base nos detalhes fornecidos na etapa anterior, copie o código a seguir em environment.prod.ts e environment.ts no aplicativo Angular.

   export const ambiente = {
    produção: verdade,
    firebaseConfig: {
    apiKey: "sua-chave-api",
    authDomain: "seu-domínio-auth",
    projectId: "id-seu-projeto",
    storageBucket: "seu-buckey de armazenamento",
    messagingSenderId: "id-seu-remetente-mensagem",
    appId: "seu-api-id",
    MeasureId: "your-medição-id"
    }
   };
   

7. Angular Firestore de @angular/fire/firestore será usado para configurar o Firebase em Angular. Observe que o AngularFirestore não é compatível com o Angular Versão 9 e superior. No aplicativo Angular local, execute:

   npm i @angular/fire
   

8. Adicione os módulos do Firestore e do ambiente à seção de importações em app.module.ts.

   importe { AngularFireModule } de "@angular/fire";
   importe { AngularFirestoreModule } de "@angular/fire/firestore";
   import {ambiente} de "../environments/environment";
   

9. Os módulos do Firestore também precisam ser incluídos na matriz de importações em app.module.ts.

   AngularFireModule.initializeApp (environment.firebaseConfig),
   Módulo AngularFirestore,

Como recuperar dados do Firebase usando um serviço

Geralmente é uma boa prática ter um ou vários services.ts arquivos que você usa para interagir especificamente com o banco de dados. As funções que você adiciona ao arquivo de serviços podem ser chamadas em outros arquivos, páginas ou outros componentes do TypeScript em todo o aplicativo.

1. Crie um arquivo chamado service.ts no src/aplicativo/serviços pasta.
2. Adicione o módulo AngularFirestore à seção de importações e inclua-o no construtor.

   import { Injetável } de '@angular/core';
   importe { AngularFirestore } de '@angular/fire/firestore';
   @Injetável({
    fornecidoIn: 'root'
   })
   classe de exportação Serviço {
    construtor (db privado: AngularFirestore) { }
   }
   

3. Adicione uma função que retorne uma promessa contendo uma lista de todos os usuários. "this.db.collection('Usuário')" está se referindo à coleção "Usuário" no banco de dados.

   getAllUsers() {
    retornar nova promessa((resolver)=> {
    this.db.collection('User').valueChanges({ idField: 'id' }).subscribe (users => resolver (users));
    })
   }
   

4. Para usar essa função em outro arquivo TypeScript, importe o novo serviço e adicione-o ao construtor.

   import { Service } de 'src/app/services/service
   construtor (serviço privado: serviço) {}
   

5. Obtenha a lista de todos os usuários usando a função criada no arquivo services.

   assíncrono getUsers() {
    this.allUsers = aguarde this.service.getAllUsers();
    console.log (this.allUsers);
   }
   

Como adicionar um novo registro ao banco de dados Firebase

Adicione um novo registro para um usuário no Firebase Database.

1. Em services.ts, adicione uma nova função para criar um novo registro. Esta função recebe o ID de um novo usuário e todos os seus detalhes. Ele usa a função set do Firestore para enviar essas informações ao Firebase e criar um novo registro.

   addNewUser (_newId: qualquer, _fName: string, _lName: string, _vip: boolean) {
    this.db.collection("Usuário").doc (_newId).set({firstName: _fName, lastName: _lName, vipMember: _vip});
   }

2. Chame a função addNewUser() em outro arquivo TypeScript. Não se esqueça de importar o serviço e incluí-lo no construtor, conforme mostrado anteriormente. Sinta-se à vontade para usar um gerador de ID aleatório para criar o novo ID para o usuário.

   this.service.addNewUser("62289836", "Jane", "Doe", true);
   

Como atualizar dados no banco de dados Firebase

O Firebase tem muitas funções que torná-lo uma das melhores ferramentas disponíveis. Para atualizar determinados campos em um registro específico, use a função de atualização do Firestore.

1. No arquivo service.ts, crie uma função chamada updateUserFirstName(). Esta função atualizará o primeiro nome de um registro de usuário escolhido. A função recebe o ID do registro que precisa ser atualizado e o novo valor para o nome do usuário.

   updateUserFirstName (_id: qualquer, _firstName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName});
   }

2. Para atualizar vários campos para o mesmo registro, basta expandir os campos inseridos na função de atualização do Firestore. Em vez de apenas firstName, adicione lastName para atualizá-lo com um novo valor também.

   updateUserFullName (_id: qualquer, _firstName: string, _lastName: string) {
    this.db.doc(`User/${_id}`).update({firstName: _firstName, lastName: _lastName});
   }

3. Qualquer uma das funções acima pode ser usada em outros arquivos TypeScript.

   this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
   this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");

Como excluir um registro do banco de dados Firebase

Para excluir um registro, use a função de exclusão do Firestore.

1. No arquivo service.ts, crie uma função chamada deleteUser(). Esta função recebe o ID do registro que precisa ser excluído.

   deleteUser (_id: qualquer) {
    this.db.doc(`Usuário/${_id}`).delete();
    }
   

2. A função acima pode ser usada em outros arquivos TypeScript.

   this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");

Recuperar dados do Firebase usando consultas e filtros

O filtro "onde" pode filtrar os resultados retornados com base em uma condição específica.

1. Em services.ts, crie uma função que obtenha todos os usuários VIP (isto é, se o campo vipMember estiver definido como true). Isso é indicado pela parte "ref.where('vipMember', '==', true)" da chamada do Firebase abaixo.

   getAllVipMembers() {
    retornar nova promessa((resolver)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe (users => resolver (users))
    })
    }

2. Use esta função em outro arquivo TypseScript.

   assíncrono getAllVipMembers() {
    this.vipUsers = aguarde this.service.getAllVipMembers();
    console.log (this.vipUsers);
    }

3. A consulta pode ser modificada para adicionar outras operações, como Ordenar por, Iniciar em ou Limitar. Modifique a função getAllVipMembers() em services.ts para ordenar pelo sobrenome. A operação Order By pode exigir a criação de um índice no Firebase. Se este for o caso, clique no link fornecido na mensagem de erro no console.

   getAllVipMembers() {
    retornar nova promessa((resolver)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe (users => resolver (users) )
    })
    }

4. Modifique a consulta para retornar apenas os três primeiros registros. As operações Iniciar em e Limite podem ser usadas para isso. Isso é útil se você precisar implementar a paginação, que é quando um determinado número de registros é mostrado por página.

   getAllVipMembers() {
    retornar nova promessa((resolver)=> {
    this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt (0).limit (3)).valueChanges() .subscribe (usuários => resolver (usuários))
    })
    }

Adicionar mais dados ao Firebase e mais solicitações no aplicativo Angular

Há muitas outras combinações de consulta que você pode explorar ao tentar recuperar dados de um banco de dados do Firebase. Espero que agora você entenda como configurar um banco de dados Firebase simples, como conectá-lo a um aplicativo Angular local e como ler e gravar no banco de dados.

Você também pode saber mais sobre os outros serviços que o Firebase oferece. O Firebase é uma das muitas plataformas que você pode integrar ao Angular e, independentemente de você estar em um nível iniciante ou avançado, sempre há muito mais para aprender.

Os 8 principais cursos de Angular para iniciantes e usuários avançados

Leia a seguir

Sobre o autor