Atualizações em tempo real com Firebase Database

Uma das plataformas que mais gostei de trabalhar aqui na Aurum foi o Firebase. Criada com o intuito de facilitar o desenvolvimento de aplicações web e mobile, a plataforma que hoje é gerenciada pela Google, cresce em número de usuários e novas funcionalidades são adicionadas frequentemente. Neste post vou falar do Realtime Database, que é uma funcionalidade que permite armazenar dados e sincronizar com diversos dispositivos em tempo real.

Mas o que é o Firebase?

Como eu disse anteriormente o Firebase é uma plataforma repleta de ferramentas que tem o objetivo de facilitar o desenvolvimento de funcionalidades complexas (como por exemplo: notificações, sincronização, controle de acesso, etc.) em aplicações web e mobile.

A plataforma foi criada por James Tamplin e Andrew Lee, e, no princípio, fornecia apenas uma api para a criação de chats. Em 2014 o Firebase foi adquirido pela Google, que, desde então, não para de investir e adicionar novas funcionalidades, além de adicionar integrações com outras ferramentas como Analytics e Fabric. Hoje todas as funcionalidades estão disponíveis de forma gratuita (em um plano limitado), além de existirem planos para médias e grandes aplicações.

Porque utilizar o Firebase?

A principal vantagem de utilizar plataformas como o Firebase é que elas ajudam a vencer desafios complexos no desenvolvimento de uma aplicação, economizando tempo para que os desenvolvedores consigam focar em evoluir seu negócio. Implementações complexas como atualização em tempo real entre dispositivos, notificações do tipo push, cadastro e gerenciamento de usuários, entre tantas outras, são implementadas rapidamente e com poucas configurações quando usamos o Firebase.

Realtime Database

De acordo com a documentação do Firebase:

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.

Como eu contei no meu post anterior, nosso sistema é hospedado pelo Google App Engine, e, apesar de ser uma ótima ferramenta, possui algumas limitações. Uma delas é a impossibilidade de utilizar web sockets nos nossos projetos, e um dos requisitos do nosso sistema é notificar os clientes quando algo ocorre no nosso back-end. No princípio a própria plataforma fornecia uma solução chamada Channel API que foi descontinuada e a própria Google sugeriu como uma opção para substituir esta ferramenta o Realtime Database do Firebase.

Tendo apresentado todos os termos, vou mostrar como configurar e utilizar o Realtime Database em aplicações web.

Criando o projeto

Para utilizar qualquer funcionalidade do Firebase precisamos primeiramente criar um projeto. Basta acessar o console da plataforma, fazer o login com uma conta Google e selecionar a opção “Add project”:

Imagem da página do console do Firebase

Formulário de criação do projeto no Firebase

Então você deve digitar o nome do projeto, selecionar a região e concordar com os termos. Pronto, com o projeto criado você passa a ter acesso a todas as ferramentas mostradas no menu a esquerda:

Página inicial do projeto criado no Firebase

Configurando o projeto

Vamos configurar o front-end para se conectar ao nosso banco de dados e conseguir ler os seus dados. Existem duas formas de utilizar o Firebase, importando a biblioteca Javascript através das tags:

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>

Ou também é possível instalar a dependência utilizando o NPM:

npm install firebase --save

Além de importar a biblioteca é necessário inicializar o Firebase na aplicação. Para isso a plataforma fornece os dados de autenticação através de um objeto Json, que deve ser copiado e utilizado na nossa aplicação:

Tela de configurações do projeto no Firebase

Dados de autenticação do projeto

Conforme mostra a imagem, na tela onde constam as informações de autenticação, a plataforma já disponibiliza o código necessário para a inicialização da biblioteca no nosso projeto, através da seguinte linha de código:

firebase.initializeApp(config);

Pronto, neste momento o projeto já está configurado e pronto para se conectar com todas as ferramentas do Firebase.

Gravando dados no banco

Há várias formas de gravar dados no Realtime Database, vou mostrar duas delas.

Utilizando a biblioteca do Firebase, precisamos criar uma instância do banco de dados através do código:

var database = firebase.database();

Feito isso devemos criar uma referência para a coleção que desejamos utilizar. Caso a coleção não exista, ela será automaticamente criada. Para criar a referência da coleção basta utilizar o método ref do objeto instanciado anteriormente, passando o nome da coleção, e então utilizar o método set para cadastrar os dados, como no exemplo a seguir:

firebase.database().ref('user').set({
    name: 'Vinicius',
    email: 'vinicius@firebase.com'
});

Esse objeto que representa uma coleção também possui os métodos para atualizar e ler os dados, utilizaremos o mesmo objeto no próximo tópico. O mais interessante desta funcionalidade é que quando usada em apps, mesmo se o dispositivo não possuir conexão com internet, os dados ficarão armazenados em cache e serão sincronizados assim que a conexão voltar. Tudo isso sem precisar configurar ou implementar nada, o Firebase faz tudo por você.

Outra forma de escrever dados no banco é através de uma api rest, que nós utilizamos no nosso back-end. Para isso basta acessar o banco de dados no console do Firebase, navegar até a coleção para pegar a url, e adicionar a extensão .json para poder utilizar a api:

Imagem da tela do console do Firebase

Utilizando esta url podemos cadastrar os dados fazendo uma requisição POST, enviando o json com os dados para salvar. Para que o Firebase autentique a requisição e salve os dados, é necessário enviar no cabeçalho um parâmetro access_token cujo o valor pode ser obtido nas configurações do projeto.

Tela de configurações do projeto no Firebase

Ler dados do banco

Existem alguns métodos para leitura dos dados gravados no banco, vou explicar três deles: ler apenas uma vez, criar um listener para qualquer alteração no banco e criar listeners de eventos específicos (como criação ou exclusão).

Para ler o dado no banco apenas uma vez, utilizando a mesma referência da coleção, chamamos a função “once”, como no exemplo a baixo:

firebase.database().ref('user').once('value', function (snapshot) {
   console.log(snapshot.val())
})

Pronto, todos os dados salvos na coleção user, serão retornados na função “val” do objeto snapshot. É importante atentar que nesse método o dado é lido uma única vez, portanto se alguma alteração acontecer no banco, a aplicação não será notificada. Para conseguir esse comportamento e realmente utilizar as vantagens de atualização em tempo real, precisamos utilizar a função “on”, que registra uma função que é executada toda vez que qualquer coisa mude na coleção:

firebase.database().ref('user').on('value', function (snapshot) {
   console.log(snapshot.val())
})

Outra coisa interessante é poder registrar eventos específicos, como quando a coleção recebe algum novo dado, quando algo é alterado ou deletado, isso é feito através dos seguintes eventos de leitura:

firebase.database().ref('user').on('child_added', 
   function (snapshot) {
      console.log(snapshot.val())
   })
firebase.database().ref('user').on('child_changed', 
   function (snapshot) {
      console.log(snapshot.val())
   })
firebase.database().ref('user').on('child_removed', 
   function (snapshot) {
      console.log(snapshot.val())
   })

Todas essas opções de ler dados também podem ser utilizadas com Promises. Para isso basta remover a função de callback e utilizar a função “then” após definir o evento:

firebase.database().ref('user').on('value')
   .then(function (snapshot) {
      console.log(snapshot.val())
   })

Conclusão

Neste post vimos como obter atualização em tempo real de uma forma bem simples e com bem pouca configuração utilizando o Firebase. Através desta ferramenta conseguimos enviar dados em um fluxo contrário (do servidor para o cliente), sem o uso de tecnologias como websockets. Porém vimos que existem poucas opções de leitura, não é possível realizar filtros no banco, por exemplo, o que pode limitar um pouco o uso do Realtime Database. Portanto é extremamente importante definir quais dados serão salvos, e a recomendação que eu faço é utilizar este banco para pequenos conjuntos de dados.

Por enquanto é isso, deixem dúvidas ou sugestões nos comentários e aguardem os próximos posts sobre o Firebase.