Como criar um CRUD com Ionic e Firebase – 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 Ionic e Firebase Realtime Database usando a nova versão do AngularFire2 (5.0.0). 

Mostro também diferentes maneiras de salvar um objeto e de fazer algumas queries simples.

 

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

  • Ionic: 3.18.0
  • AngularFirebase2: 5.0.0-rc.3
  • Firebase: 4.6.2

 

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.

 

Criando uma aplicação de exemplo

Será criado uma aplicação para castro de contato com nome e telefone.

O passo a passo abaixo é o mesmo mostrado no vídeo.

  • Passo 1: Criar o aplicativo.
  • Passo 2: Instalar as dependências (AngularFire2 e Firebase).
  • Passo 3: Criar o provider para fazer o CRUD de contatos.
  • Passo 4: Ajustar a pagina home para exibir os contatos cadastrados.
  • Passo 5: Criar a pagina para inclusão/alteração de contatos.

 

Passo 1: Criar o aplicativo

Criar o provider e as páginas

 

Passo 2: Instalar as dependências (AngularFire2 e Firebase)

Arquivo no app.module.ts

 

Passo 3: Criar o provider para fazer o CRUD de contatos

Arquivo providers/contact/contact.ts

 

Salvando objetos

Abaixo vou explicar 2 maneiras diferente para salvar um objeto:

1 – Usando a lista: 

Observe que no exemplo acima, no método “update” é necessário passar a chave do objeto que será atualizado.

 

2 – Usando o objeto:

Observe que no exemplo acima, no método “update” eu não preciso da key do objeto pois ela é usada para compor o caminho até no objeto

 

3 – Diferença entre set e update

Nos dois exemplos acima é possível utilizar o método “set” no lugar do “update”, a grande diferença entre os dois é:

  • Set: Substitui o objeto inteiro no servidor pelo valor enviado.
  • Update: Substitui apenas os valores que estão sendo enviados.

 

Passo 4: Ajustar a pagina home para exibir os contatos cadastrados

Arquivo home.ts

 

Arquivo home.html

 

Passo 5: Criar a pagina para inclusão/alteração de contatos

Arquivo contact-edit.ts

 

Arquivo contact-edit.html

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

 

Código fonte gerado na aula

 

Quer aprender mais?

Clique no botão abaixo para aprender a criar uma aplicação de delivery com Ionic, Angular e Firebase.

Quer ver como ficou a aplicação? Clicando no botão abaixo, você vai poder ver um video onde eu mostro uma demonstração da aplicação criada e tudo o que você vai aprender no curso.

Quero saber mais

 

Referências

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!