Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Criando um Web App do Zero usando AngularJS e Firebase: Parte 3

by
Difficulty:IntermediateLength: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
Creating a Web App From Scratch Using AngularJS and Firebase: Part 4

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

Nos capítulos anteriores desta série, criamos uma página de registro, definimos suas rotas e também fizemos algumas validações usando AngularJS. Neste tutorial, implementaremos a funcionalidade de registro ligando AngularJS e o último lançamento do Firebase. Também vamos modificar o código de entrada, como visto na nova API do Firebase.

Iniciando

Vamos iniciar, clonando a segunda parte do tutorial a partir do GitHub.

Depois de clonar o código fonte, navegue até o diretório do projeto e instale as dependências requisitadas.

Assim que as dependências estiverem instaladas, inicie o servidor.

Aponte seu navegador para http://localhost:8000/app/ e você deverá ver o aplicativo em execução.

Referências de Script do Firebase

O Firebase recentemente lançou uma nova versão, e o cliente FirebaseSimpleLogin que usamos em nosso primeiro tutorial para autenticar o usuário foi depreciado e incluído na biblioteca principal do Firebase. Então, abra o arquivo app/index.html e remova as referências ao Firebase existentes e inclua as seguintes referências de script: 

Modificando a implementação de Autenticação

Navegue até app/home e abra o arquivo home.js. Remova o código injetado $simplefirebaselogin do controller e injete $firebaseAuth. Use-o para criar o loginObj, como mostrado.

O novo Firebase dispõe de um método de API chamado $authWithPassword, para autenticação utilizando endereço de e-mail e senha. Substitua o método de login com $authWithPassword na função SignIn, como exibido:

Salve as alterações, reinicie o servidor e tente entrar usando um endereço de e-mail e uma senha válidos. Você deve ver uma mensagem de sucesso no console do navegador.

Implementando a funcionalidade de Registro

Vamos usar o método createUser do Firebase para criar um novo usuário usando um endereço de e-mail e senha. Como já validamos dados em nosso tutorial anterior, iremos vincular uma chamada à função de registro quando o botão Register receber um clique. Adicione a diretiva ngClick ao botão de registro como mostrado:

Abra o arquivo register.js e dentro do controller RegisterCtrl, crie uma nova função chamada signUp.

Na função signUp, iremos verificar se nosso formulário é válido:

Adicione a diretiva ngController à tag body no arquivo register.html.

Reinicie o servidor e tente navegar até à página de registro. Pressione o botão Register após digitar o endereço de e-mail e a senha. Agora, se você verificar o navegador do console, deverá ver a mensagem Valid form submission.

Assim, antes de chamar a API do Firebase para criar um novo usuário, iremos injetar firebase em nosso aplicativo. Abra o arquivo register.js e adicione o módulo firebase.

A seguir, nós também precisaremos injetar $firebaseAuth em nosso controller de registro.

Utilizando nossa URL do Firebase, iremos criar uma instância do Firebase e utilizando esta instância, criaremos o objeto $firebaseAuth. Usaremos o objeto $firebaseAuth para realizar nossas chamadas à API. Adicione o seguinte código no arquivo register.js, dentro do controller de registro.

Agora, iremos obter o endereço de e-mail e a senha de $scope e chamar o método createUser do Firebase. Aqui está o método signUp modificado.

Como você pode ver na função signUp acima, nós chamamos o método $createUser para criar um novo usuário. Ao obter sucesso na criação de um usuário, vamos registrar a mensagem de sucesso no callback da função createUser.

Reinicie o servidor e aponte seu navegador para http://localhost:8000/app/#/register e tente registrar uma nova conta de usuário usando um endereço de e-mail e senha. Verifique o console de seu navegador após clicar no botão de registro de usuário. Se bem sucedido, você verá a mensagem de criação de usuário com sucesso no console do navegador.

A seguir, aponte seu navegador para http://localhost:8000/app/#/home e tente entrar usando as credenciais do novo usuário.

Manipulando Callbacks de registro de usuários

Criando um callback de usuário bem sucedido

Quando obtemos sucesso no registro de um usuário, precisamos redirecioná-lo para a página de entrada. Para redirecionar o usuário, precisaremos injetar o serviço $location, do AngularJS em nosso controller. Então, injete $location como exibido:

Adicione o seguinte código para o callback de sucesso da função auth.$createUser. para redirecionar o usuário para a página de entrada em caso de registro de usuário feito com sucesso.

Salve as alterações, reinicie o servidor e tente registrar outra conta de usuário. Ao ser bem sucedido em registrar um usuário, você deverá ser redirecionado para a página de entrada.

Criando um callback de falha de registro de usuário

Registros de usuário podem falhar devido a alguns problemas, por exemplo: o endereço de e-mail do usuário já existe. Então, quando um erro ocorre durante o registro do usuário, precisamos mostrá-lo. Iremos adicionar outra mensagem de erro abaixo do campo de senha e configurá-lo para ser exibido quando ocorrer um erro. Aqui está a mensagem de erro:

Como visto no código acima, utilizamos a diretiva ngShow para exibir a mensagem de erro, quando regError for verdadeiro. A mensagem é exibida usando-se a variável regErrorMessage, do $scope. No callback de falha createUser, adicione o seguinte código para mostrar a mensagem de erro.

Aqui está a função signUp modificada:

Salve as alterações, reinicie o servidor e tente registrar um usuário utilizando um endereço de e-mail e senha que já tenha usado. Ao fazer isso, você deve obter uma mensagem de erro exibida na tela, como a seguinte:

User Registration Error Message

Criando a tela de Início

Quando um usuário se autenticar com sucesso no aplicativo, iremos redirecioná-lo para a página de início. A página inicial exibirá os posts criados pelo usuário e também terá uma opção para criar novos posts. Sendo assim, vamos criar a página inicial.

Navegue até a pasta app, no diretório do aplicativo e crie uma nova pasta chamada welcome. Esta página conterá modelos e arquivos relacionados à página inicial. Dentro da pasta welcome, crie os arquivos chamados welcome.html e welcome.js. Adicione o seguinte código ao arquivo welcome.html:

Dentro de welcome.js iremos definir as rotas para a página de boas vindas do aplicativo. Iremos usar $routeProvider para criar uma rota para a visão welcome. Ao definir uma nova rota, iremos configurar uma templateUrl que será renderizada no index.html. Juntamente com isso, também iremos definir um controller (um controller é uma lógica que controla uma visão particular) para o recém-criado $scope da visão de boas vindas. Aqui está como o arquivo welcome.js finalmente deve se parecer:

Agora, abra a o arquivo app/app.js e inclua o módulo adicionado há pouco.

Abra também, o arquivo app/index.html e inclua o recém-adicionado script register.js.

Quando um usuário for bem sucedido ao entrar, iremos redirecioná-lo para a página de boas vindas. Abra o arquivo app/home/home.js e injete $location no HomeCtrl.

Iremos usar $location para redirecionar o usuário para a página de boas vindas. No arquivo home.js, dentro da função SignIn, no callback de sucesso, adicione o seguinte código:

Salve as alterações, reinicie o servidor e tente entrar no aplicativo. Em uma autenticação bem sucedida, você deverá ser capaz de ver uma tela como a mostrada abaixo:

AngularJS Firebase App User Home

Acessando $scope entre Controllers

Agora vamos mostrar o e-mail do usuário logado na página de boas vindas. Mas há um problema. Durante a autenticação, temos os detalhes do usuário no HomeCtrl, mas quando redirecionamos para a visão de boas vindas, o $scope de HomeCtrl não é acessível dentro de WelcomeCtrl. Então para tornar isso possível, faremos uso dos AngularJS services.

Os AngularJS services são objetos substituíveis que são amarrados usando "dependency injection (DI)", em português, "injeção de dependência". Você pode usar services para organizar e compartilhar código através de seu aplicativo.

Ao utilizar services, podemos compartilhar dados através de diferentes controllers. Então, no arquivo home.js nós criamos nosso service chamado CommonProp.

No service CommonProp nós criamos uma variável chamada user, onde iremos definir o e-mail do usuário logado. Uma vez que o service pode ser acessado por todos os controllers, ele deve poder acessar dados entre controllers usando o service CommonProp.

Injete o service CommonProp no HomeCtrl como mostrado:

Ao autenticar um usuário com sucesso, defina a variável user no service CommonProp como exibido:

Da mesma forma, injete o service CommonProp no WelcomeCtrl, no arquivo welcome.js.

No arquivo welcome.html, modifique a mensagem de boas vindas para incluir a variável $scope, como exibido.

Agora, no WelcomeCtrl, defina o valor de $scope.username a partir do método getUser do service CommonProp.

Salve todas as alterações, reinicie seu navegador e tente efetuar o login usando qualquer endereço de e-mail e senha. Em um login bem sucedido, você deverá ver seu endereço de e-mail na página de boas vindas.

AngularJS Firebase App User Home

Concluindo

Neste tutorial, levamos o desenvolvimento de nosso tutorial de criação de um blog usando AngularJS e Firebase para o próximo nível. Implementamos a funcionalidade de registro e também vimos como compartilhar dados entre dois controllers.

Na próxima parte desta série, iremos ver como iniciar com a implementação de uma página chamada "Criar um post no blog".

O código fonte deste tutorial 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.