Como criar CRUD com Angular e Firebase Realtime Database – Em alguns simples passos

Nessa vídeo aula eu mostro como criar um CRUD (CRUD significa, em inglês, Create, Read, Update e Delete e em português é Incluir, Alterar, Excluir e Consultar) com Angular e Firebase Realtime Database.

O que é o Firebase Realtime Database

O Firebase Realtime Database é um banco de dados NoSQL hospedado na nuvem. Com ele, você armazena e sincroniza dados entre os seus usuários em tempo real.

Para saber mais você pode acessar diretamente a página do Firebase clicando aqui.

Pré requisitos

Ter um projeto já criado no console do Firebase e com as permissões de leitura e escrita habilitadas. (Isso é mostrado no vídeo)

Esse tutorial está utilizando as seguintes versões das dependências:

  • Angular: 7.0
  • Firebase: 5.5.5
  • AngularFire2: 5.1.0

Passo a passo para o CRUD

  1. Instalar o Firebase no projeto
  2. Criar os componentes, services e classes
  3. Criar a classe que vai ter os dados do contato
  4. Criar o service que vai compartilhar o contato entre os dois componentes
  5. Criar o service que fará o CRUD
  6. Criar o formulário de cadastro
  7. Criar a lista de contatos

1 – Instalar o Firebase no projeto

Para fazer a integração do Firebase com o Angular é necessário usar uma biblioteca desenvolvida pelo próprio time do Angular que se chama AngularFire2.

Para instalar, basta rodar o comando abaixo que vai instalar a exata versão do Firebase e AngularFire2 usada nesse tutorial

Próximo passo é adicionar as configurações do Firebase no arquivo environment.ts. Essas configurações podem ser obtidas na página do projeto.

Feito isso, agora é necessário importar no app.module os módulos do AngularFire2 que serão usados. Nesse tutorial será usado apenas o modulo do Firebase Realtime Database.

app.module.ts

2 – Criar os componentes, services e classes

O projeto será um CRUD de contatos com nome e telefone, para isso é necessário criar um componente para o formulário e outro para a lista de contatos. Alem disso será criado o service que fará o crud no Firebase.
Basta rodar os comandos abaixo para a criação dos componentes, services e classes.

3 – Classe com os dados do contato

O arquivo contato.ts deve ficar com o conteúdo abaixo.

4 – Service para compartilhar o contato entre os componentes

Durante a alteração de um contato, é necessário enviar o contato que está sendo editado para o componente de formulário.
Para isso o o arquivo contato-data.service.ts deve ficar com o conteúdo abaixo.
Como o foco do tutorial é mostrar o CRUD, esse arquivo não será explicado aqui mas ele é explicado no vídeo.

5 – Service responsável pelo CRUD.

O service tem 4 métodos: Inclusão, alteração, consulta e exclusão.

Para incluir um dado no Firebase é necessário acessar o nó onde os dados serão salvos e executar o método push passando como parâmetro o dado que deve ser incluído, conforme abaixo.

Método para incluir um registro

Para alterar um dado no Firebase, é necessário acessar o nó onde os dados serão salvos e executar o método update passando como parâmetro a key do objeto e o dados que deve ser alterado, conforme abaixo.

Para buscar uma lista de dados no Firebase, é necessário acessar o nó onde os dados estão e mapear da maneira que você quer acessar as propriedades desse objeto para mostrar na tela, conforme abaixo.

E por fim, para excluir, basta acessar o nó do objeto e executar o método remove, conforme abaixo.

O arquivo contato.service.ts com todos os métodos explicados acima deve ficar conforme abaixo.

6 – Formulário de cadastro

Para salvar os contatos no Firebase o formulário criado nesse tutorial fica conforme abaixo

edit.component.ts

edit.component.html

7 – Listagem de contato

Para exibir os contatos cadastrados na tela, o componente criado nesse tutorial fica conforme abaixo.
list.component.ts

list.component.html

 

Referencias