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

Criando um Web App do Zero usando AngularJS e Firebase

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase: Part 2

Portuguese (Português) translation by Henrique P. Machado (you can also view the original English article)

Nesta série, usaremos AngularJS e Firebase para criar um simples aplicativo web a partir do zero. Será um simples aplicativo de blog onde o usuário pode se cadastrar ou logar e publicar um post.

Este tutorial presume que você tenha conhecimento básico de AngularJS, mas não deverá ser difícil acompanhar os tópicos que se seguem.

Introdução ao AngularJS

O AngularJS é um dos frameworks MVC mais procurados. É um framework estrutural para a criação de aplicativos web dinâmicos, ao estender as capacidades do HTML. Características como data binding e dependency injection o tornam fácil para desenvolver apps com menos código.

Da Documentação do AngularJS:

O HTML é ótimo para criar documentos estáticos, mas é fraco quando queremos usá-lo para criar visões dinâmicas em aplicativos web. O AngularJS permite que você amplie o vocabulário HTML para seu aplicativo. O ambiente resultante é extraordinariamente expressivo, legível e rápido para desenvolver.

Introdução ao Firebase

Imagine criar um aplicativo web sem se preocupar com o lado do back-end. O Firebase torna isto possível ao sincronizar dados em tempo real com nosso aplicativo sem ficar nos incomodando com o back-end. Tudo o que precisamos é somente fazer algumas chamadas de API.

O Firebase é uma poderosa API para armazenar e sincronizar dados em tempo real. Combina o poder do data binding de duas vias do AngularJS com os resultados do Firebase em uma sincronização em três vias que é fantástica.

Iniciando com AngularJS

O projeto angular-seed é um código padrão para se iniciar na criação de aplicativos web usando AngularJS. Baixe ou clone o projeto angular-seed a partir de seu repositório.

Navegue até o diretório do projeto e instale as dependências necessárias.

Inicie o servidor node:

Aponte seu navegador para http://localhost:8000/app/index.html e você deverá ver o app padrão rodando.

Navegue até o diretório app, dentro do angular-seed. É onde o código do aplicativo se encontra. Dentro da pasta app você irá encontrar o arquivo app.js que é o núcleo do app. Iremos declarar todos os módulos app-level e routes, dentro deste arquivo. Por padrão, o projeto angular-seed tem duas visões: view1 e view2. Exclua as pastas view1 e view2 da pasta app.

Vamos começar do zero. Abra o arquivo app.js e remova o código existente. No arquivo app.js iremos definir as rotas para nosso aplicativo. Por exemplo: como manipular uma requisição para /home. Para definir rotas, precisaremos de um módulo do AngularJS chamado ngRoute. Para usar ngRoute, primeiro nós precisamos injetá-lo, ou adicioná-lo ao nosso aplicativo. Iremos usar angular.module para adicionar o módulo ngRoute ao nosso aplicativo, como mostrado abaixo:

O módulo ngRoute tem um componente chamado $routeProvider que é útil para configurar rotas. Iremos injetar $routeProvider no método config de angular.module e definir nossas rotas em sua função de callback, como mostrado abaixo:

A seguir, abra o arquivo index.html e remova as referências aos scripts view1 e view2. Remova tudo, do corpo de index.html, exceto as referências a scripts e a div mostrada abaixo, com a diretiva ngView.

ngView é uma diretiva que ajuda a renderizar a visão anexada com uma rota particular no layout principal, index.html. Então, a cada vez que a rota é modificada, o conteúdo da div acima exibida também é alterada.

Agora vamos criar uma nova visão para o usuário se conectar. Dentro do diretório app, crie uma nova pasta chamada home. Dentro de home, crie dois arquivos: um chamado home.html e outro, home.js. Abra o arquivo home.html e inclua o código HTML a seguir: 

Como visto no código acima, nós usaremos Bootstrap para criar nossas visões do aplicativo.

Dentro do arquivo home.js, iremos declarar as rotas para que o aplicativo acesse a visão home. $routeProvider tem um método chamado when, que usaremos para criar a rota para nossa visão home. Ao definir uma nova rota, iremos definir uma templateUrl que poderia ser renderizada no arquivo index.html. Juntamente com isso, vamos também definir um controller para o recém criado $scope, da visão home. Um controller é uma lógica que controla uma visão particular. Aqui está como ele deveria se parecer:

Agora abra o arquivo app.js e inclua o módulo home myApp.home no app. Declare também a rota padrão para seu aplicativo usando o método $routeProvider.otherwise na visão home.

A seguir, para mostrar a homepage, precisamos incluir home.js dentro do arquivo de modelo principal do app. Abra o arquivo index.html e inclua o seguinte:

Reinicie o servidor e aponte seu navegador para http://localhost:8000/app/index.html e você deve ver a tela de login.

AngularJS Firebase

Iniciando com o Firebase

Para iniciar, precisamos registrar uma conta grátis no Firebase. Ao concluir o registro com sucesso, iremos obter uma tela como a seguinte:

Firebase Dashboard

Anote a URL do app criado e clique no botão Manage App. Usaremos esta URL do Firebase para interagir com o banco de dados Firebase.

Usaremos o Firebase para autenticar nosso aplicativo usando um e-mail e senha. Para fazer tudo funcionar, precisamos habilitá-lo no Firebase. A partir do painel de controle, clique na aba Login & Auth, no menu lateral à esquerda. Nesta tela, sob a aba Email & Password, marque Enable Email & Password Authentication, como exibido:

Enable Email Password Authentication

Adicione um novo usuário com um e-mail e senha, com o qual iremos efetuar a autenticação depois de implementar a funcionalidade de entrar.

Add a new user with an Email and Password

Implementando a funcionalidade de Autenticação

Para iniciar o uso do Firebase, inclua os seguintes scripts em app/index.html:

A seguir, precisamos injetar o módulo firebase no arquivo home.js. Adicione o módulo firebase no arquivo home.js como mostrado acima:

Agora estamos prontos para interagir com o Firebase. Abra o arquivo home.js e dentro de HomeCtrl, crie uma nova função chamada SignIn para autenticar o usuário. Usaremos $scope para criar a nova função. $scope é um objeto que faz referência ao modelo do aplicativo e também age como uma "cola" entre o controlador e a visão do aplicativo. Por isso injetaremos o objeto $scope na função SignIn, para que o modelo do objeto da visão seja acessível dentro da função SignIn.

A seguir, dentro de HomeCtrl, crie uma instância do Firebase usando a URL para o Firebase, como mostrada:

O módulo $firebaseSimpleLogin é usado para autenticação no Firebase usando um e-mail como ID e senha. Para usá-lo, precisamos injetar o módulo $firebaseSimpleLogin em HomeCtrl, como mostrado:

Usando firebaseObj crie uma instância de $firebaseSimpleLogin, como mostrado:

Agora, usando a API $login, iremos autenticar o ID do e-maill e a senha no Firebase. loginObj.$login carrega o e-mail e a senha como parâmetros. Em uma autenticação bem sucedida, obtemos um callback de sucesso e em uma autenticação mal sucedida, obtemos um callback de erro.

Para que todo o código do controle acima funcione, precisamos anexar o controlador à visão. O AngularJS dispõe de uma diretiva chamada ngController para anexar um controlador à uma visão. Abra o arquivo home.html e adicione a diretiva ngController ao elemento body, para anexá-la em HomeCtrl.

Nós precisamos que os valores do e-mail e da senha estejam acessíveis dentro da função controladora SignIn. AngularJS disponibiliza uma diretiva chamada ngModel para vincular seu valor a $scope, para que seja acessível dentro da função SignIn. Inclua a diretiva ngModel aos elementos input para e-mail e senha, como mostrado abaixo:

Finalmente, adicione a diretiva ngClick ao botão de entrada, para chamar a função SignIn:

Salve todas as alterações e reinicie o servidor. Aponte seu navegador para http://localhost:8000/app/index.html#/home e tente entrar usando o e-mail jay3dec@gmail.com como ID e jay como senha. Se o usuário for autenticado com sucesso, você deverá ver a mensagem Authentication successful no console do navegador.

Conclusão

Neste tutorial, nós revisamos como iniciar a criação de um aplicativo web em AngularJS. Implementamos a funcionalidade de autenticação de usuário e o autenticamos com sucesso em um banco de dados Firebase.

Na segunda parte deste tutorial, pularemos para o próximo nível ao implementar validações, funcionalidade de autenticação e outros recursos. O código para o tutorial acima está disponível no GitHub.

Deixe suas considerações nos comentários abaixo.

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.