Em algum momento, você como desenvolvedor já deve ter pensando em construir uma aplicação ou alguma rotina que fosse em Realtime. Bem, nessa sequência de artigos demonstrarei como fazer isso do zero, isso mesmo, do zero! Iremos configurar tudo.

Tendo isso em mente, os artigos serão divididos em:
Parte 1 – Introdução e configuração do Firebase
Parte 2 – Configuração do NodeJS
Parte 3 – Rotas NodeJS manipulando o Firebase
Parte 4 – Criando página HTML que escuta o Firebase em Realtime

Antes de iniciarmos, vamos entender um pouco o que é o Firebase. O Firebase é uma plataforma (gratuita até um determinado consumo mensal) criada e mantida pelo Google, dentro dela há várias funções, como por exemplo:

  1. Crashlytics – responsável por gerar relatórios de falhas em tempo real;
  2. Authentication – login em várias plataformas, como o Gmail e Facebook;
  3. Google Analytics – Coleta dados dos usuários
  4. Cloud Messaging – Envia mensagens e notificações aos usuários
  5. Realtime Database – Armazena e sincroniza dados em tempo real, esse que iremos usar!

Há outras ferramentas legais disponíveis, para ver mais, visite o site e role para baixo. Mas beleza, chega de papo e bora começar a configurar nosso projeto firebase!

1) Primeiro tempos que criar nosso banco, acesse o site oficial do firebase e clique em primeiros passos:

This image has an empty alt attribute; its file name is image.png

2) A tela abaixo é aonde são exibidos os bancos do Firebase que a sua conta Google é dono ou tem acesso a eles. Nós iremos criar um do zero, então clique em Adicionar Projeto:

This image has an empty alt attribute; its file name is image-1.png

3) Insira um nome para o banco:

This image has an empty alt attribute; its file name is image-2.png

4) Como este é um projeto simples e não iremos fazer uso do Google Analytics, desmarque a opção e clique em Criar Projeto:

This image has an empty alt attribute; its file name is image-3.png

5) Aguarde o seu projeto do Firebase ser configurado… Após ele ter sido configurado, você será redirecionado para dentro do seu banco. No menu lateral, clique em Database, e depois em Criar banco de dados:

This image has an empty alt attribute; its file name is image-4.png

6) Aguarde novamente, pois nessa etapa, o banco realtime está sendo criado. Ao terminar, a sua tela será parecida com a imagem abaixo:

This image has an empty alt attribute; its file name is image-5.png

7) Note, que a opção no canto superior esquerdo, ao lado do menu, está selecionado o Database Cloud Firebase, nós queremos o Realtime Database, então clique nele e altere a opção:

This image has an empty alt attribute; its file name is image-6.png

8) Está é a cara do nosso banco, ele esta totalmente vazio até o momento:

This image has an empty alt attribute; its file name is image-7.png

9) Agora, basta liberar o acesso dele para que terceiros (API e uma página HTML, por exemplo) possam acessar. Para isso:
i) clique em Regras;
ii) edite os valores para true;
iii) clique em publicar.

This image has an empty alt attribute; its file name is image-8.png

Pronto, o nosso banco de Firebase está configurado. Agora vamos para a Parte 2 aonde iremos criar nosso projeto em NodeJS!