Firebase – banco de dados em tempo real

Firebase é uma suíte de desenvolvimento mobile/web com infinitas possibilidades. Crie apps sem necessidade de servidor, ou ainda, envie push notifications no smartphone de seus usuários de maneira simples, segura e escalável.

Dentre todas as possibilidades do Firebase, demonstrarei aqui um pouquinho do que é possível fazer com apenas uma de suas funcionalidades, o Realtime Database.

Definição

O Realtime Database do Firebase é um banco de dados não relacional (NoSQL ) que permite a distribuição de conteúdos cross-platform e com a possibilidade de trabalho offline. Com o Realtime Database não se faz necessária a criação e configuração de servidores ou APIs. É ótimo para validar ideias de apps e soluções web pois não requer manutenção de infra-estrutura.

Preço

Para testar e até mesmo criar pequenas aplicações não se gasta nada. Isso é o mais legal do Firebase, uma infinidade de aplicações a custo zero. Se sua aplicação crescer e extrapolar os limites do plano mais básico, os demais iniciam em U$25,00 (preço de 2018).

Aplicações

O exemplo mais claro que vem à mente é um chat, no entanto as aplicações são infinitas, veja a lista e com toda certeza você pensará em coisas além do que apresento.

[UPDATE 29/01/2018]

Em um cliente utilizei o recurso do paste para passar, durante a apresentação, os links de referência para o novo site. Como todos os participantes estavam com seus notebooks, puderam acompanhar meu raciocínio, uma vez que não tínhamos o recurso de multimídia.

[/UPDATE]

  • Notificar um visitante de um blog sobre um artigo que acabou de ser postado ou atualizado (coisa que implementarei ao longo deste ano aqui neste blog);
  • Ferramentas colaborativas em tempo real como o Trello ;
  • Brincadeiras que podem se tornar facilmente soluções comerciais como o Whiteboard (abra em duas abas e interaja entre elas, você vai gostar!) e o Inetech Executive Mover 5000 ;
  • Palestras interativas (que destaco abaixo);
  • Soluções para campanhas de marketing;
  • E tantas outras.

Palestra interativa

Em 2014 eu fui na PHP Conference e assisti uma palestra interativa do Gabriel Couto . Na época ele fez a apresentação com o Ratchet e foi simplesmente sensacional, deu o que falar. Todos interagiram com a apresentação. Em um dado momento ele abriu uma enquete e o auditório todo respondeu, foi incrível ver os avatares dos participantes pulando na tela ao lado das opiniões dadas para a enquete. O que ele fez com PHP, usando sockets, tendo que controlar totalmente sua infra-estrutura na época, é possível fazer com o Firebase, cuidando apenas da camada de apresentação, todo o backend e disponibilidade é problema deles (do Firebase). Ele fez a apresentação com um Macbook Pro e 2 roteadores que chegando ao meio da palestra, quase travaram devido à quantidade de tráfego. Ao final, mais do que merecido, ele foi aplaudido em pé por uma plateia de mais de 200 pessoas.

Após ter esse insight do Gabriel e passar por muita dificuldade e atrasos em Workshops de programação que ministro em eventos, em 2015 eu fiz uma ferramenta para me auxiliar. Neste caso utilizei o Firebase e conforme eram necessários os comandos iam sendo inseridos e os participantes podiam em tempo real copiar os mesmos daqui: https://palestras.andrebian.com/?palestra=composer . Os comandos mais recentes sempre aparecem ao topo da página. Em feedback colhido com os participantes, esta forma de disponibilizar os comandos foi muito eficaz, segue um comentário anônimo que recebi: “O mais legal é que conforme o workshop ia se desenrolando os comandos iam surgindo no exato momento da explicação, não precisávamos parar pra copiar código ilegível de um projetor ou aguardar uma pessoa que não estava conseguindo acompanhar o ritmo.”.

Minha experiência com o Firebase

Trabalhei entre 2015 e 2017 em uma startup que estava colocando no mercado uma solução de pós-vendas para concessionárias e na dashboard criada tínhamos muitos detalhes em tempo real.

Normalmente as concessionárias trabalham com vários operadores de contact center. No App, quando o cliente demostrava a intenção de agendar um serviço, qualquer destes operadores podia o atender e o realtime resolveu o problema de concorrência. Sempre que um operador assumia um chamado, este era bloqueado para os demais, que eram informados qual operador assumiu o mesmo, evitando assim validações ao entrar na tela de edição, no momento de salvar e principalmente evitando sobrescrita de informações.

Outro ponto que tínhamos era o chat, totalmente desenvolvido com o Firebase onde os clientes interagiam através de iOS ou Android e os operadores através do navegador.

Ainda existia a possibilidade de o gestor da equipe ver em tempo real quantos operadores estão interagindo e online na plataforma, evitando assim ociosidade e aumentando a produtividade. O gestor podia inclusive acompanhar toda e qualquer conversa de modo sigiloso e intervir caso necessário.

Tudo que usávamos era o Realtime Database e push notifications com o antigo GCM (Google Cloud Messaging ), depois da aquisição pelo Google o serviço mudou de nome: FCM (Firebase Cloud Messaging ). Na época, muitas das ferramentas disponíveis hoje ainda não existiam.

 

Ok, mas vamos ao mãos na massa?

O que será apresentado

Mostrarei somente o básico da utilização do Realtime Database, sem aplicações mais complexas como autenticação, permissões e outros. Para este exemplo, vou recriar uma ferramenta muito bacana que meu amigo Thyago criou, o paste.

Paste (que no momento desta escrita estava fora do ar) é uma ferramenta daquelas que utilizamos todos os dias, ainda mais quando se trabalha em equipe. Ele consiste em um input para que você digite ou cole textos…

via GIPHY

Mas não é só isso! Por ser uma área de texto em tempo real, todos que acessam no exato momento conseguem ver o conteúdo e mesmo o editar. O utilizamos nas mais diversas situações como passar trechos de código, links, consultas SQL e até mesmo pra falar besteiras. Como eu sabia que a ferramenta que o Thyago colocou no ar era bastante acessada, sempre deixava umas mensagens bem-humoradas por lá 🙂 link: thyago.com/paste (não garanto que estará no ar).

 

Na prática

Agora vamos ao que interessa, show me the code! Para iniciar, certifique-se de que tem tudo o que precisamos:

  • Conta criada e já logado(a) no Firebase – https://firebase.google.com
  • Um editor de código ou IDE de sua preferência
  • Um navegador… ah, e no computador, no celular já fica mais difícil 😉

 

Criando nosso projeto no Firebase

Após estar devidamente logado(a), clique em “Go To Console”.

Imagem com a tela inicial do firebase

Em seguida em “Add Project”.

Imagem com a opção de adicionar um novo projeto no firebase

Defina o nome do projeto e a região do mesmo. Em seguida clique em “Create Project”. No meu caso criei com o mesmo nome do projeto que o Thyago fez anos atrás, paste.

Detalhes de um projeto Firebase sendo criado

Após criado, você será redirecionado(a) ao painel do projeto. Não vamos o explorar, fica aí uma dica para você, explore e conheça tudo que é possível fazer com o Firebase. Na tela inicial de meu projeto, vou clicar em “Add Firebase to your web app” pois o exemplo aqui será feito com JavaScript. Na modal que se abre, copie o trecho de código e cole no seu editor. Para o exemplo, eu criei um arquivo chamado index.html.

Snippet que o Firebase nos fornece

Por padrão o Firebase cria um banco de dados com a necessidade de estar autenticado para realizar operações, tanto leitura, quanto escrita. Para este exemplo, não abordarei a autenticação, quem sabe em um novo artigo no futuro eu contemple a parte de autenticação e permissões. Para saber mais sobre a autenticação, pode seguir a documentação oficial do firebase: https://firebase.google.com/docs/auth

Vá no menu de desenvolvimento (Develop) e clique em “Database” e em seguida na aba “Rules”. Neste exemplo, deixaremos com acesso público, pois o foco é mostrar o funcionamento do realtime.

Detalhes do banco de dados

Deixe como mostra a imagem, .read e .write ambos com o valor true. Ao alterar vai aparecer um botão para publicar, clique no mesmo e pronto.

 

O código do Paste

Não sei como meu amigo criou a primeira versão e até melhor que seja assim, com isso darei a minha solução a fim de exemplificar o uso do tempo real que com certeza lhe encantará pela simplicidade. Todos os comentários eu farei em português pra facilitar mesmo, isso porque em inglês já existem ótimos conteúdos.

JavaScript

<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
    // Inicializando o Firebase
    var config = {
        apiKey: "SUA_API_KEY_AQUI",
        authDomain: "projeto-hash.firebaseapp.com",
        databaseURL: "https://projeto-hash.firebaseio.com",
        projectId: "projeto-hash",
        storageBucket: "projeto-hash.appspot.com",
        messagingSenderId: "SENDER_ID_AQUI"
    };
    firebase.initializeApp(config);

    // Definindo a referência com a qual trabalharemos: "text"
    var textRef = firebase.database().ref('text');

    // "Escutando" toda e qualquer alteração da chave "text"
    textRef.on('value', function(snapshot) {
        // Escrevendo o que foi recebido em tempo real no nosso campo de texto
        document.getElementById('text').value = snapshot.val();
    });

    // Também criando uma função para que o que digitarmos seja enviado ao Firebase
    function writeText(text) {
        var content = {};
        content['/text/'] = text;
        return firebase.database().ref().update(content);
    }
</script>

HTML

<body>
    <label>Digite ou cole um texto</label>
    <br />
    <!-- 
       Adicionando o evento keyup à área de texto, assim a cada caracter digitado 
       todo o conteúdo do campo é enviado para o firebase
    -->
    <textarea id="text" onkeyup="writeText(this.value)" rows="10"></textarea>
    <br />
    <br />
    Agora passe o link desta página para alguma pessoa. Pronto, podem interagir em tempo real!
</body>

 

O resultado

Abra o endereço https://paste.andrebian.com em duas abas ou navegadores e os coloque lado a lado (como mostra no gif abaixo). Se tiver alguém próximo, pode passar o link para ele(a). Agora pode começar a digitar e o que  você está digitando será apresentado em tempo real na outra aba, navegador ou para seu colega.

Animação com a demonstração do realtime database

Próximos passos

Mostrei aqui somente o básico, um start guide para o Firebase. Não passei nada sobre segurança, permissões e utilização das demais ferramentas. O que sugiro agora que conhece uma das possibilidades (realtime) do Firebase é estudar mais sobre o mesmo. A documentação é bem extensa mas ao mesmo tempo muito fácil de entender.

 

Conclusão

Espero ter despertado em você a vontade de criar algo em tempo real, tanto com as sugestões de aplicação, quanto com o código de exemplo (que diga-se de passagem, é simples demais!). Como mencionei na seção de aplicações, podemos criar muitas coisas com o Firebase Realtime Database, desde abolir server e criação de APIs para apps até criar uma palestra inovadora. O limite é a criatividade.

Se já fez algo legal com o Firebase, deixa seu comentário, se possível com link. Assim inspira mais devs a criarem coisas incríveis.

 

Menu