Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Utilizando o Firebase junto o AngularJS

by
Length:ShortLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

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.

O que há de tão interessente na utilização do Firebase com o AngularJS? Bom, se voce 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 poussi 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 preenchando 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:

Note que incluimos 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 autênticaçã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:

Note que a unica 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.

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:

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:

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

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

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:

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:

Agora precisamos atualizar o controller. Crie a variável obj variable that will hold the object returned from Firebase:

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):

Colocamos a variável $scope como primeiro parametro, e uma propriedade como segundo parametro. O objeto processado no binding vai apacere 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:

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 incluimos o $event como parâmetro, pois precisamos confirmar se o usuário pressionou a tecla Enter.

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

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

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

Também precisamos inicializar o objeto $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!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.