FireBase - Tutorial de Apresentação

.Net - Apresentando e usando o FireBase

Neste artigo vou mostrar como criar uma aplicação web usando o Firebase em um tutorial bem básico.
Nota: Esse tutorial é uma tradução livre do original encontrado em : https://www.firebase.com/tutorial/#gettingstarted

O Firebase é uma poderosa API que pode ser usada para armazenar dados (como banco de dados backend) em tempo real, ideal para aplicações web. Ele permite criar aplicativos sem termos que ter o trabalho de gerenciar servidores ou escrever código do lado do servidor.

Combinando os recursos do Firebase com o AngularJS, e usando o recurso do two-way databinding, podemos criar aplicações web bem interessantes.

Dessa forma, usando o Firebase podemos construir aplicativos móveis multiplataforma nativos e aplicações web, usando um SDK Android, iOS ou JavaScript; podemos também conectar o Firebase com nosso backend usando nossas bibliotecas do lado do servidor ou a nossa API REST.

Como esse artigo é nosso primeiro contato com o Firebase vamos começar com um tutorial bem simples que mostrar como usar o Firebase.

Vamos então ao trabalho...

Os recursos usados :

Firebase JS library
JavaScript

Instalando o Firebase JS Library

Para poder usar os recursos do Firebase temos que incluir a sua biblioteca em nossas aplicações.

Esta biblioteca lhe da acesso a recursos de autenticação e fornece estrutura de dados que são sincronizados automaticamente entre todos os seus clientes e com os servidores do Firebase. Se um usuário alterar alguma informação, todos os outros usuários, verão a alteração imediatamente.

Vamos então iniciar um editor de textos e criar uma estrutura básica para um arquivo HTML conforme mostrada abaixo:

<html>
  <head>
    
  </head>
  <body>
  </body>
</html>

Vamos incluir uma referência à biblioteca Firebase JavaScript adicionando a linha abaixo na seção <head> :

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
  </head>
  <body>
  </body>
</html>

Aqui estamos usando a distribuição CDN da Firebase JavaScript.

Agora já podemos usar os recursos de autenticação e de banco de dados do Firebase.

Este tutorial se concentra na base de dados em tempo real do Firebase. O Firebase também possui um poderoso recurso de autenticação e serviços de hospedagem.

Para acessar seu banco de dados Firebase, você precisa primeiro criar uma referência. As referências são criadas usando uma URL que especifica os dados que você deseja acessar.

Vamos criar então um banco de dados Firebase nesta URL: https://b35se3ldir1.firebaseio-demo.com/

Para concluir esta etapa, crie uma referência para a raiz do seu banco de dados Firebase como mostrado abaixo:

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
  </head>
  <body>
    <script>
      var myDataRef = new Firebase('https://b35se3ldir1.firebaseio-demo.com/');
    </script>
  </body>
</html>

A referência myDataRef agora referente ao seu banco de dados Firebase em :

https://b35se3ldir1.firebaseio-demo.com/

Um conceito central do banco de dados Firebase é que cada pedaço de dados tem sua própria URL. Você pode usar esta URL para acessar seus dados de várias maneiras:

- A partir de qualquer biblioteca cliente Firebase
- De nossa API REST
- Introduzindo-o em qualquer navegador(experimente clicar no link acima)

Escrevendo dados

Vamos enviar uma mensagem de bate-papo.

Você pode usar a referência que você acabou de criar para gravar dados em seu banco de dados Firebase utilizando a função set().

Para facilitar as coisas, nós já adicionou caixas de texto de entrada para o nome e a mensagem do chat, bem como um manipulador de pressionamento de tecla que dispara sempre que alguém tenta enviar uma mensagem.

Para esta etapa, escreva uma mensagem para seu banco de dados Firebase usando a função set(), conforme mostrado abaixo:

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://b35se3ldir1.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.set('Usuário ' + name + ' diz ' + text);
          $('#messageInput').val('');
        }
      });
    </script>
  </body>
</html>

A gravação de dados em seu banco de dados Firebase é tão fácil como chamar set() em uma referência Firebase. Neste exemplo usamos set() para escrever uma string: myDataRef.set('Usuário ' + name + ' diz ' + text);

O banco de dados Firebase pode suportar números, booleanos e dados da cadeia de tipos - o mesmo que um objeto normal de JavaScript.

Se você abrir este documento em um navegador como FireFox irá obter o seguinte resultado:

Após digitar o nome e a mensagem abra o link : https://b35se3ldir1.firebaseio-demo.com/

E você verá os dados persistidos conforme abaixo:

Podemos usar a função set() para escrever objetos também. Abaixo temos um exemplo que podemos usar para substituir a linha de código onde escrevemos uma string:

myDataRef.set({name: name, text: text});

O banco de dados Firebase pode lidar com objetos de complexidade arbitrária. Se ele pode ser representado como JSON, pode caber no banco de dados.

Quando os objetos são gravados no banco de dados, a estrutura do objeto é mapeada para locais no banco de dados.

Neste exemplo, quando o objeto {name: name, text: text} for definido, locais para o nome e o texto são automaticamente criados como filhos do local referenciado pelo meu DataRef.

Firebase: O suporte a lista de dados (push)

Já vimos como escrever dados para locais nomeados específicos no banco de dados, mas a sua aplicação de chat irá requerer uma lista de mensagens. O banco de dados Firebase fornece uma função auxiliar chamada push() que faz com que a criação de listas seja muito fácil.

Altere o código abaixo para usar push() em vez de set() para que o seu chat possa suportar uma lista de mensagens (em vez de apenas uma):

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://b35se3ldir1.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.set({name: name, text: text});
          $('#messageInput').val('');
        }
      });
    </script>
  </body>
</html>

No banco de dados Firebase as listas usam IDs globais únicos ordenados cronologicamente como chaves para itens. Isto significa que muitos clientes podem adicionar a mesma lista sem conflito.

Firebase : Lendo dados

Vamos agora receber mensagens no chat.

Precisamos dizer o banco de dados para nos informar quando as mensagens de chat chegarem.

Fazemos isso adicionando um callback (chamada de retorno) para a lista de mensagens de bate-papo usando o método on(), como mostrado abaixo:

myDataRef.on('child_added', function(snapshot) {
  //a fazer
});

Este método usa dois argumentos:

1 - O tipo de evento
2- A função de retorno.

Nós vamos usar o evento "child_added", que é usado para retornar uma lista de itens de um banco de dados, de forma a sermos notificados da chegada de mensagens individuais.

Nota: Podemos também usar os seguintes eventos para ler dados a partir de um banco de dados Firebase:

Value - evento usado para ler um instantâneo estático dos conteúdos em um determinado caminho de banco de dados;
child_changed - evento é disparado sempre que um nó child é modificado;
child_removed - evento disparado quando um child imediato é removido;
child_moved - evento usado para trabalhar com dados solicitados;

Agora você está lidando com atualizações em tempo real!

Com o banco de dados Firebase , você sempre le dados usando callbacks (ou chamada de retorno). Isso nos permite garantir que as aplicações Firebase sempre sejam atualizadas em tempo real.

CallBack (ou chamada de retorno, em português) é um mecanismo de controle de fluxo que visa beneficiar processos assíncronos.

A ideia principal é liberar a aplicação para que outras ações sejam tomadas sem que ela fique aguardando o retorno de processos síncronos, esperando uma resposta remota, ou (caso a plataforma/framework em uso suporte threading) com alto consumo de processamento se você abriu uma thread separada para esperar pela resposta.

Note que quando o aplicativo é iniciado, o banco de dados Firebase irá chamar o callback para todas as mensagens de chat existentes e , em seguida, continuar a chamá-lo para quaisquer novas mensagens que chegam.

Não existe nenhuma distinção entre os dados "iniciais" e dados "novos" . Isso permite que você escreva sua lógica de manipulação da mensagem uma vez , em vez de ter que lidar com esses dois casos separadamente.

Firebase : Usando SnapShots

Agora precisamos exibir as mensagens de chat na página. Para isso devemos fazer as seguintes tarefas:

1- Para cada mensagem de bate-papo, o banco de dados irá chamar o seu callback com um instantâneo(snapshot) que contém os dados da mensagem.
2- Extrair os dados da mensagem a partir do instantâneo chamando a função val() e atribuí-la a uma variável.
3- Chamar a função displayChatMessage() para exibir a mensagem.

Abaixo temos o código para essa implementação:

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://b35se3ldir1.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.set({name: name, text: text});
          $('#messageInput').val('');
        }
      });

        myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });

      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };

    </script>
  </body>
</html>

Com isso concluímos esse breve tutorial mostrando como usar os recursos de banco de dados do FireBase.

Executando o código iremos obter o seguinte resultado:

Consultando os dados no FireBase neste link: https://a4yvf6lfow2.firebaseio-demo.com/ veremos: (no momento que fizemos o teste)

Com isso concluímos esse tutorial introdutório sobre o Firebase.

Aguarde mais artigos relacionados a esse recurso em breve.

Jesus lhes respondeu, e disse: A minha doutrina não é minha, mas daquele que me enviou.
Se alguém quiser fazer a vontade Dele, pela mesma doutrina conhecerá se ela é de Deus, ou se eu falo de mim mesmo.
João 7:16,17

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?