Atualizando sua aplicação Web em tempo real com Firebase

Se você acompanha nossos textos aqui no Medium, já deve ter observado que já comentamos demais sobre o Firebase. Terceira vez que ele chama a atenção de algum Bawier… Já pode pedir uma música, né?

Já falamos sobre Firebase Cloud Messaging no Android e como é fácil criar uma Autenticação em um AppEngine com Firebase.

Dessa vez, o que nos chamou a atenção foi o quão simples é explorar as funcionalidades do Firebase na Web. Nesse texto vamos focar na atualização em tempo real de conteúdos na sua aplicação Web utilizando Firebase Realtime Database. E, depois de ler, eu aposto que você vai lembrar das vezes que você usou algum reload de 1 em 1 minuto para atualizar a tela ou até mesmo fez algum workaround, e vai agradecer por existir o Firebase.

Tá, mas o que é o Firebase?

É uma ferramenta/infraestrutura do Google que te permite desenvolver aplicativos de forma rápida e flexível. Com ele, você tem todo esse leque de possibilidades de serviços:

O Firebase tira qualquer preocupação sobre escalabilidade, te oferece uma base incrível para analisar os dados da sua aplicação para que você tome decisões inteligentes, além de ter integração com várias linguagens.

Ah, e ele tem um plano free para você começar a explorá-lo.

Hands on!

Antes de tudo, você vai precisar seguir alguns passos:

1. Instale o NodeJs no seu PC.
2. Instale o NPM.
3. Instale o Firebase através do NPM: sudo npm install -g firebase-tool
4. Faça log in no console do Firebase e crie um projeto.

Pronto! Assim, que você cria o projeto, na página inicial existirão essas opções:

No nosso caso, vamos precisar de clicar no “Adicionar o Firebase ao seu aplicativo da Web”. Ele te dará um snippet… Deixe ele aí na espera um pouquinho!

Bem, agora é a hora que a gente cria nossa aplicação Web. Vou te dar um boilerplate pra facilitar sua vida:

Ótimo, agora é só você criar no mesmo diretório do seu index.html, o firebase.js, que conterá o snippet que você pegou do Firebase :)

Ficará assim:

Cadê a atualização de dados em tempo real?

Agora vem a parte mais fácil (e a melhor)!

Para demonstração, vamos colocar no nosso index.html o seguinte elemento dentro do body:

<h1 id=”bigText”></h1>

E teremos que adicionar algumas coisas no firebase.js. Primeiramente, vamos pegar o elemento bigText criado:

const bigText = document.getElementById(‘bigText’);

Em seguida, é necessário criar uma referência ao banco de dados do Firebase:

const dbRef = firebase.database().ref().child(‘bigText’);

A função ref(), faz a referência ao root do banco de dados. Já a child(‘text’), cria um objeto, um child key no root. Agora é a parte que faz toda a ação de sincronizar os dados:

dbRef.on(‘value’, snap => bigText.innerText = snap.val());

O on(), faz justamente essa sincronização. O primeiro parâmetro passado é o tipo do evento. Usaremos ‘value’, pois queremos saber de qualquer alteração do dado. O snap, é basicamente um snapshot do banco de dados daquele child referenciado. Esse snap, sempre terá o dado que atualizaremos no nosso elemento :)

Calma, já tá acabando!

No seu console do Firebase, você irá clicar em Database e já poderá adicionar a chave que você colocou como referência no seu código e qualquer valor que você quiser.

Você perceberá que seu index irá atualizar instantaneamente :)

Pronto! Fácil demais, né?

Dá pra explorar muito o Firebase Realtime Database! Quer fazer uma aplicação mais legal ainda? Hmmm, que tal atualizar automagicamente valores de tabelas com Firebase? Só clicar AQUI! :D

Caso tenha alguma dúvida ou queira trocar ideia sobre o Firebase, comenta aqui! E, ah, dá um recommend aqui no texto! ;)