Como criar um aplicativo com Firebase Realtime database e Angular

Nesse artigo você vai aprender como criar seu primeiro aplicativo com
o armazenamento de banco de dados com Firebase e Angular.
Para saber mais sobre o Firebase acesse o site clicando aqui.

 

O que é o Firebase Realtime Database?

O Firebase Realtime Database é um banco de dados online. Os dados são armazenados em formato JSON e sincronizados em tempo real com todos os clientes conectados independente da plataforma (Android, iOS, Web).

 

arvore do banco de dados - angular 2 e firebase

 

Realtime Database fornece uma linguagem de regras declarativas que permite que você defina como os dados devem ser estruturados, como devem ser indexados e quando podem ser lidos e gravados. Por padrão, o acesso de leitura e gravação ao seu banco de dados é restrito, exceto para usuários autenticados, portanto, você deve configurar as regras antes de começar

O Firebase Realtime Database permite você a criar um conjunto de regras para definir quando os dados podem ser lidos e gravados e também como indexar os dados para facilitar nas consultas.

Por padrão, as regras permitem que qualquer usuário identificado pode ler e gravar dados. Para saber mais sobre como criar regras e indexar os dados você pode clicar aqui. Na aplicação que será construída de exemplo vamos utilizar as regras e o index abaixo:

 

regras do banco de dados - angular 2 e firebase

 

Criando uma aplicação de exemplo

Seguindo os passos abaixo você vai conseguir criar seu primeiro aplicativo com o Firebase Realtime Database. Como exemplo será criado um aplicativo de cadastro de tarefas.

 

demo - angular 2 e firebase

 

O que você vai aprender?

  • Criar uma aplicação com Angular 2 do zero.
  • Configurar a apliação para integrar com o Firebase.
  • Incluir, alterar, excluir e consultar dados no Firebase Realtime Database

 

Pré-requisitos:

 

1 – Criando um projeto no Firebase

Criar um projeto no Firebase é muito simples. Seguindo os passos abaixo você irá criar um projeto em poucos minutos.

 

1 – Na pagina principal do Firebase, apos efetuar o login com sua conta do Google, clique em “Ir para o console“.

 

2 – Agora clique no botão “Criar novo projeto”

 

3 – No modal que se abrir, informe o “nome do projeto”, a “região” e clique em “criar projeto”.

 

criando projeto no firebase - angular 2 e firebase

 

4 – Quando o processo terminar, clique no nome do projeto para ser redirecionado para o console do projeto.

 

2 – Criando um projeto com Angular

Criar um projeto do zero com Angular é muito simples basta seguir o passo a passo abaixo:

 

1 – Baixe o Angular 2 QuickStart direto do repositório do Angular no GitHub clicando aqui. Ou use os comandos abaixo:

 

2 – Delete os arquivos que não são necessários (opcional):

 

3 – Para ver o projeto em funcionamento no navegador utilize o comando abaixo:

 

3 – Adicionando Firebase ao projeto

Para manipular o Firebase vamos utilizar a biblioteca oficial do Angular que é a AngularFire2.

Vamos também utilizar o npm para instalar as dependências com o Firebase e o AngularFire2.

Na publicação desse artigo as versões estáveis das bibliotecas do Firebase e AngularFire2 são “3.4.0” e “2.0.0-beta.8” respectivamente.

 

1 – Abra o aquivo package.json e adicione as linhas abaixo em “dependencies”.

 

2 – Abra o arquivo src/systemjs.config.js

Em map adicione as linhas abaixo:

Em packages adicione as linhas abaixo:

 

3 – Navegue até a pasta do projeto e execute o comando abaixo para instalar as dependências na versões especificadas:

 

4 – Abra o arquivo src/app/app.module.ts e adicione o provider e as configurações do Firebase:

Você pode pegar suas configurações do Firebase na pagina inicial do projeto clicando no botão “Adicionar o Firebase ao seu aplicativo da Web”.

 

onde pegar as configuracoes do firebase - angular 2 e firebase

Arquivo src/app/app.module.ts

 

4 – Criando o componente para criar tarefas

1 – Criar uma classe de nome task.model.ts no caminho src/app/todo/ para colocar quais serão as propriedades de uma tarefa. Para uma tarefa precisamos de um titulo, descrição, uma flag para informar se está ou não concluída e a propriedade $key que será o identificador do registro no Firebase.

Arquivo src/app/todo/task.model.ts

 

2 – Agora vamos criar o serviço que vai fazer as operações de incluir, alterar, excluir e consultar os registros no Firebase.

Para isso vamos criar um arquivo de nome task.service.ts no caminho src/app/todo/

 

3 – Agora vamos criar o componente que ira exibir o formulário para inclusão/alteração e os itens na tela. Para isso vamos criar o arquivo task.component.ts no caminho src/app/todo/

 

4 – E agora o arquivo HTML que será o template do componente. Para isso vamos criar o arquivo task.component.html no caminho src/app/todo/

Atenção para listar os itens é necessário usar o Pipe async do angular para garantir que sempre vamos listar os valores mais atuais do Firebase.

 

5 – Agora é necessário modificar o arquivo src/app/app.component.ts e adicionar o serviço TaskService, que foi criado acima, como um provider.

 

6 – E por fim precisamos editar o arquivo src/app/app.module.ts novamente e incluir as referencias para o FormsModule do angular e o componente TaskComponent criado acima.

 

Conclusão

É muito simples fazer uma integração entre o Angular e o Firebase e apesar o AngularFire2 ser uma biblioteca ainda em fase beta, ela fornesse bastante recurso para que você consiga trabalhar com o Firebase.

 

Referencias:

 

Eu espero que esse tutorial tenha sido útil para você. Qualquer dúvida
deixe seu comentário abaixo.