Nesse artigo, iremos falar sobre o Firebase, o que é etc… E também iremos ver os componentes que vamos instalar para o Angular se comunicar com as APIs do Firebase.

Mas então, o que é Firebase, onde mora, do que se alimenta?

O Firebase é uma ferramenta do Google e ao mesmo tempo uma infraestrutura para você desenvolver aplicativos com maior rapidez e flexibilidade. É o que podemos chamar de um BAAS – Backend as a Service, você não baixa, nem tem uma ferramenta específica de administração, todo o gerenciamento é feito pela web, ou cloud – como você desejar. A ideia é desenvolver aplicativos de forma simples e sem preocupação com a escalabilidade! E quanto custa? Nada? Digamos que sim, vamos usar o plano spark para o nosso aplicativo, e como o próprio firebase diz, ‘limites generosos para amadores’. Eu sei que não somos amadoras, mas se é de graça, então, tudo bem.

Vamos dar uma olhada no console do Firebase:

https://console.firebase.google.com

Então vamos criar um projeto e ver tudo que podemos fazer. Clique em adicionar projeto:

Clique em criar projeto e é só amor!

No menu ao lado, podemos ver muito do que o Firebase disponibiliza. Nesse primeiro momento, iremos utilizar apenas Database, mas podemos ver outros itens muito interessantes. Vamos dar uma pequena passada nos que fazem parte do nosso contexto.

Authentication

O Firebase Authentication fornece serviços de backend, SDKs fáceis de usar e bibliotecas de IU prontas para o uso para autenticar os usuários em seu aplicativo. Ele oferece suporte a autenticação usando senhas, provedores populares de identidades de identidades federadas, como o Google, Facebook e Twitter, e muito mais.

Realtime Database

O Firebase Realtime Database é um banco de dados hospedado na nuvem. Os dados são armazenados como JSON e sincronizados em tempo real com todos os clientes conectados. Quando você cria aplicativos multiplataforma com nossos SDKs para iOS, Android e JavaScript, todos os seus clientes compartilham uma instância de Realtime Database e automaticamente recebem atualizações com os dados mais recentes.

Storage

O Firebase Storage proporciona uploads e downloads de arquivos seguros para seus aplicativos do Firebase, independentemente da qualidade da sua rede. Você pode usá-lo para armazenar imagens, áudio, vídeo ou outro conteúdo gerado por usuários. O Firebase Storage é respaldado pelo Google Cloud Storage, um serviço de armazenamento de objetos que é simples e econômico.

Hosting

O Firebase Hosting é uma hospedagem de conteúdo da web de nível de produção para desenvolvedores. Com o Hosting, você pode implementar facilmente e com rapidez aplicativos da web e conteúdo estático em uma rede global de fornecimento de conteúdo (CDN) com um único comando. Também oferece suporte a configuração do seu próprio domínio e algo que acho mega produtivo, o versionamento das publicações.

Functions

Firebase Cloud Functions permite que você execute automaticamente o código do backend em resposta a eventos disparados por recursos do Firebase e solicitações HTTPS. Seu código é armazenado na nuvem do Google e é executado em um ambiente gerenciado. Não há necessidade de gerenciar e dimensionar seus próprios servidores.

E agora você pergunta, ok Mana, o que faço com tudo isso?

Ahhh, agora temos algumas instalações e configurações importantes para fazer no nosso aplicativo, vamos instalar do npm dois pacotes, o do firebase e o angularfire2. Vamos lá! Vá ao terminal e vamos instalar o firebase. Para isso digite:

npm install firebase --save

Agora iremos instalar o angularfire2. Ele irá nos prover uma série de facilidades para trabalharmos com o firebase. Digite no terminal:

npm install angularfire2 --save

Irão aparecer alguns erros, mas é porque o npm é meio burrinho, se você notar o que ele está reclamando, já existe nos modulos do npm.

Se você olhar para o arquivo PACKAGE.JSON, irá notar que tudo que baixamos fica declarado nesse arquivo, pois usamos o parâmetro – -Save

Agora vamos codar! Vamos colocar a referência de configurações do nosso projeto criado no firebase na nossa aplicação. Para isso, volte ao console do firebase e em overview. Clique em Adicionar o Firebase ao seu aplicativo da Web e copie o código que irá aparecer, mas somente a parte que começa em ‘var config={‘

Volte aos fontes do nosso aplicativo e ache a pasta enviroments dentro de src. Nela, iremos criar o arquivo firebase.config.ts e colar o código que foi copiado. Após copiado, vamos fazer uma pequena mudança, troque:

var config = {

Por

export const FirebaseConfig = {

Ficará idêntico a imagem abaixo:

Não terminou ainda. Temos algumas outras coisas para fazer. Vamos importar e declarar o módulo angularfire2 e do FirebaseConfig que criamos no nosso projeto. Encontre o arquivo app.module.ts dentro da pasta app. Nele iremos inserir 3 linhas de código.

import { FirebaseConfig } from ‘./../environments/firebase.config’;<br /<
import { AngularFireModule } from ‘angularfire2/index’;

e

AngularFireModule.initializeApp(FirebaseConfig)

Vamos rodar a aplicação para ver está tudo funcionando. Ainda no terminal, dentro da pasta do projeto, digite:

ng serve

Caso vc se depare com esse erro:

Vá ao terminal e instale do npm a atualização do pacote promise-polyfill

npm install promise-polyfill --save -exact

Tudo ok, então, devemos ver nossa aplicação funcionando ainda?

Por enquanto é isso!

Na próxima parte, integraremos nossa aplicação ao banco de dados real time do firebase e veremos a mágica acontecer. Obrigada pela paciência, e lembrem-se, esse artigo tem que ser de fácil entendimento a todos. Se acharem que faltou alguma explicação, me avisem e vamos melhorando.