Nos posts anteriores comentei sobre Node com Socket.io e ASP.NET com SignalR, ambos muito simples e fáceis de utilizar. Se você ainda não viu, confira nos links abaixo:
Pois bem, hoje é dia de falar de um modelo conectado que abstrai seu backend por completo.
Abstração do Back-WHAT???
Soa um tanto quanto estranho, eu sei, mas calma! Durante esta chuva de novas tecnologias e conceitos que a Web nos trás, tivemos a chegada dos famosos NoSQL, banco de dados não relacionais, que armazenam os dados no formato JSON, que é justamente o que o seu frontend (Os moderno pelo menos) precisa de informações.
Trafega JSON pra cá, recebe JSON de lá, por que não expor meu banco de dados como uma API? Parece uma ótima ideia, já que os dados estão armazenados no formato JSON, criam-se simplesmente endpoints de acessos aos mesmos…. Ohhhhh :O
Existem várias plataformas e ferramentas que já oferecem este serviço por aí, então por que escolhi o Firebase para este exemplo?
Firebase
O Firebase faz tudo isso que eu disse acima. Você se cadastra no site, cria sua aplicação lá, salva os dados como JSON e pronto, já tem uma URL expondo suas informações na internet sendo controlada por um token de acesso você cria.
Porém o Firebase foi além neste conceito, e criou um esquema onde você fica conectado sempre ao banco, e melhor, você recebe notificações do banco! Igual no CouchDB. Então estou te dizendo, que quando um novo usuário se cadastrar em seu site por exemplo, todos os usuários online podem automaticamente receber uma notificação…
Isso ocorre por que o Firebase tem a capacidade de disparar uma trigger, chamando uma função JavaScript que está no seu frontend sempre que um registro entrar ou for alterado na base.
A propósito, vou fazer um Instagram em tempo real com Firebase e AngularJS na minha palestra do TDC SP no dia 24/07
http://www.thedevelopersconference.com.br/
Iniciando
Antes de tudo, você precisa de uma conta no Firebase, gratuita mesmo, então vá até o site e cadastre-se:
https://www.firebase.com/
O Firebase é um recurso PAGO, e você paga pelo tamanho em dados e quantidade de conexões ao simultâneas.
Feito seu cadastro, autentique-se e vá para sua Dashboard, nesta tela preencha as informações App Name e App URL e pronto, temos um endpoint.
Note que ele já nos dá a URL, que é composta pelo “APP URL” e o sufixo “firebaseio.com”.
Se você acessar a URL (No meu caso https://chat-balta-demo.firebaseio.com/) vai cair em uma página para gerenciar os dados, ou você pode fazer POST e GET para este endpoint e já estará tudo funcionando.
Vou realizar um post aqui apenas para demonstrar. Neste exemplo, eu uso o Postman, uma extensão para o Chrome/Firefox.
Note que no final da URL adicionei o sufixo “chat.json”, o que significa que vou criar uma “tabela” para armazenar este post. O próprio Firebase, baseado no JSON enviado já se encarrega desta criação.
Como resultado, na tela de gestão da aplicação, já temos a informação em tempo real sendo exibida.
Para cada item enviado, o Firebase cria um identificador único a ele, como mostrado na imagem acima em amarelo.
Frontend
Não vou repetir o HTML do frontend aqui, podemos utilizar o mesmo dos posts anteriores. Só vamos mudar a parte dos scripts.
Primeiramente, precisamos do “firebase.js” que pode ser referenciado utilizando o próprio CDN do Firebase, como mostrado na linha um.
Para trabalhar com o Firebase, precisamos de uma instância do seu repositório, que é realizada utilizando “new Firebase(…”, como mostrado na linha quatro. Note que no final da URL temos um “/chat” (Sem o .JSON), indicando que os dados serão salvos no repositório “chat” que criamos no exemplo do Postman.
Seguimos então com a ação de envio da mensagem, quando o usuário clica no botão “Enviar” (Linha cinco). Neste momento, a única coisa que precisamos fazer é realizar um “push” no no “db”, enviando um JSON como parâmetro. Sendo assim, temos na linha sete a realização do evento de envio de mensagem. Simples assim 🙂
Como comentei, um dos diferenciais do Firebase é que ele permite callbacks do banco para nossa aplicação, então dada determinada ação, o Firebase vai char uma função do nosso JavaScript.
Isto é feito através do “db.on(…” (Linha onze), e no nosso caso, seremos notificados apenas quando um novo objeto for adicionado (Evento “child_added”). Existem outros eventos como quando um objeto é atualizado ou excluído também, mas este que usamos nos atende aqui.
Toda vez que um objeto for adicionado, um snapshot (Uma foto, um espelho, o objeto mesmo) será enviado para esta função no parâmetro “snapshot” (Ainda na linha onze).
Como este objeto é composto de mais coisas do que precisamos, criei uma variável “data” (linha 12) onde recebo apenas a propriedade “val” deste objeto, ou seja, só as suas propriedades.
Feito isto fica simples, basta adicionar o valor “data.message” na lista de mensagens e pronto! Temos um chat com Firebase como nosso backend 🙂
Os fontes deste post você encontra no meu GitHub
https://github.com/andrebaltieri/firebase-chat
O que acharam?
Abraços,
@andrebaltieri 