Criando aplicações web com o Firebase e o AngularJS

Neste artigo vamos analisar como utilizar o Firebase junto o AngularJS para criar sistemas modernos e simples, sem necessidade de um servidor back end.

Firebase é uma tecnologia bem interessante que nos permite criar páginas para web sem precisar de linguagens server-side, ou linguagens de servidor (back-end próprio), o que acaba tornando o desenvolvimento simples e rápido. Neste artigo vamos analisar como utilizar o Firebase junto o AngularJS para criar sistemas modernos e simples.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+. Todos os direitos reservados para Envato.

Link para artigo original: Using Firebase With AngularJS
Autor do artigo original: Maciej Sopyl
Link da Envato para o artigo traduzido: Utilizando o Firebase junto o AngularJS

O que há de tão interessante na utilização do Firebase com o AngularJS? Bom, se você der uma olhada em como cada uma das tecnologias foram criadas, você vai entender. A função de data binding bidirecional do AngularJS funciona perfeitamente com a filosofia do Firebase de “não salvar informações e sim sincronizar”.

O desenvolvimento é rápido, e a experiência do usuário é ótima – tudo que é digitado pelo usuário é salvo e disponibilizado em tempo real para outros usuário conectados.

Primeiro passo: configurando a base de dados

Vamos começar criando uma base de dados. Se você ainda não possui uma conta no Firebase, crie uma (eles aceitam o login do GitHub para criar a conta!). Depois logue na sua conta e cria um app preenchendo a forma e clicando no botão.

Como vamos utilizar um login do Facebook no tutorial, você vai precisar fornecer os detalhes do seu Facebook App (basicamente é um ID para utilizar o serviço). Clique no botão “Manage” abaixo do nome do seu app e depois clique em “Simple Login”. Agora entre com a informação solicitada e marque a opção “Enabled”.

Você também vai precisar configurar o seu Facebook App para que ele opere corretamente. O processo é bem rápido e simples, tem uma documentação disponível no website do Firebase.

Segundo passo: Criando um App com Angular

Vamos começar criando uma base HTML/JavaScript para o nosso app. Nós vamos criar um chat que vai permitir ao usuário logar com o Facebook.

Crie um arquivo HTML e cole o bloco de código abaixo:

    <html ng-app="simpleChat">
    <head>
            <script src="https://cdn.firebase.com/v0/firebase.js"></script>
            <script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
            <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
            <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
            <script src="angular.app.js"></script>
        </head>
        <body>
        </body>
    </html>

Note que incluímos algumas bibliotecas que vamos precisar para o nosso exemplo. Isso inclui os arquivos firebase.js e angular.js, também vamos precisar do firebase-simple-login.js para complementar a autenticação via Facebook. O angularfire.min.js é o arquivo de integração do Firebase com o AngularJS, que simplifica e muito trabalhar com o Firebase.

Agora crie o arquivo angular.app.js, que é o arquivo que vamos utilizar para programar o app. Vamos começar declarando o modulo principal, simpleChat:

var app = angular.module('simpleChat', [ 'firebase' ]);

Note que a única dependência, é o módulo do firebase presente no AngularFire.

Passo três: Simple Login/Social Login

Agora vamos criar o código que vai permitir aos usuários logar na ferramenta com a conta do Facebook. Como nosso app é pequeno, vamos ter apenas um controller: MessagesCtrl.

app.controller('MessagesCtrl', function ($scope, $firebase, $firebaseSimpleLogin) {

A função $firebase vai nos permitir conectar a base de dados do Firebase, e a função $firebaseSimpleLogin vai permitir a configurção do login.

Vamos precisar de uma instância no Firebase, então vamos criar uma:

var ref = new Firebase('https://your-unique-url.firebaseio.com/');

Antes de tudo, substitua o bloco 'your-unique-url' pela URL da sua base de dados no Firebase. Agora prepare o objeto do login utilizando a função $firebaseSimpleLogin e a ref que criamos:

$scope.loginObj = $firebaseSimpleLogin(ref);

Isso é o suficiente para garantir o login. Se os usuário estiver logado, a variável $scope.loginObj.user vai retornar um objeto com as informações do usuário; caso contrário, o objeto retorna null.

Agora adicione uma DIV com o nosso controller e um botão para permitir que o usuário se logue na página:

<div ng-controller="MessagesCtrl">
      <button ng-click="login()" ng-hide="loginObj.user">Log In</button>
    </div>

Nós utilizamos a diretiva ngHide para esconder o botão quando o usuário está conectado. Agora o método $scope.login() vai requisitar um método com o mesmo valor da $scope.loginObj:

$scope.login = function login() { $scope.loginObj.$login('facebook'); };

O único parâmetro que utilizamos é o nome do provedor (no caso o Facebook) utilizado para logar o usuário. Você pode testar o login agora, e se efetuado com sucesso, o botão deve desaparecer.

Passo quatro: mostrando as mensagens

Como você deve imaginar, essa parte também é super simples utilizando o AngularJS com o Firebase. Primeiro vamos preparar o HTML. Também vamos utilizar o loop ngRepeat para processar e apresentar as mensagens:

<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>

Agora precisamos atualizar o controller. Crie a variável obj para receber o objeto retornado pelo Firebase:

var obj = $firebase(ref).$asObject();

O método $asObject() converte toda referência em um objeto JavaScript com alguns métodos úteis. Um que vamos utilizar é o .$bindTo() que nos permite criar um three-way binding (Firebase-AngularJS-DOM):

obj.$bindTo($scope, 'data');

Colocamos a variável $scope como primeiro parâmetro, e uma propriedade como segundo parâmetro. O objeto processado no binding vai aparece na variável $scope com o nome ($scope.data).

E isso é tudo que precisamos para apresentar as mensagens! Mas é claro que por enquanto você só vai conseguir testar se incluir manualmente alguma informação na array messages na base de dados.

Passo cinco: enviando mensagens

Esse passo vai ser mais rápido ainda. Vamos adicionar um input ao nosso controller presente na div, para que os usuários possam digitar mensagens:

<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">

A propriedade value do input vai utilizar os dados da variável $scope.newMessage.text, e o evento keyup vai disparar o callback $scope.handleKeyup(). Note que incluímos o $event como parâmetro, pois precisamos confirmar se o usuário pressionou a tecla Enter.

Vamos definir a função $scope.handleKeyup():

$scope.handleKeyup = function handleKeyup(e) {

Primeiro, nós checamos se a tecla Enter foi pressionada:

if (e.keyCode == 13) {

Se foi, adicionamos o nome do usuário ao objeto $scope.newMessage, atualizamos a array $scope.data.messages, e resetamos o objeto $scope.newMessage:

$scope.newMessage = $scope.loginObj.user.displayName; $scope.data.push($scope.newMessage);
$scope.newMessage = {}; } };

Também precisamos inicializar o objeto $scope.newMessage:

$scope.newMessage = {};

É isso galera – abra seu app em dois navegadores diferentes (assim você consegue logar com duas contas do Facebook diferente) e teste! Como de costume, qualquer duvida, comentário, elogio ou sugestão são sempre bem vindos!