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

() translation by (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.

1	git clone https://github.com/jay3dec/AngularJS_Firebase_Part2.git

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

1	cd AngularJS_Firebase_Part2
2	npm install

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

npm start

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:

1	<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
2	<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></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.

1	.controller('HomeCtrl', ['$scope', '$firebaseAuth', function($scope, $firebaseAuth) {
2	var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");
3	var loginObj = $firebaseAuth(firebaseObj);
4	}));

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:

$scope.SignIn = function(e) {
    e.preventDefault();
    var username = $scope.user.email;
    var password = $scope.user.password;
    loginObj.$authWithPassword({
            email: username,
            password: password
        })
        .then(function(user) {
            //Success callback
            console.log('Authentication successful');
        }, function(error) {
            //Failure callback
            console.log('Authentication failure');
        });
}

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:

1	<button type="button" ng-click="signUp();" ng-disabled="!user.email \|\| !user.password" class="btn btn-lg btn-primary btn-block">Register</button>

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

.controller('RegisterCtrl', ['$scope', function($scope) {
    $scope.signUp = function() {
      
        // Sign up implementation would be here !!
      
    };
}]);

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

$scope.signUp = function() {
    if (!$scope.regForm.$invalid) {
      console.log('Valid form submission');
    }
};

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

1	<body ng-controller="RegisterCtrl">

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.

1	angular.module('myApp.register', ['ngRoute','firebase'])

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

1	.controller('RegisterCtrl', ['$scope','$firebaseAuth', function($scope,$firebaseAuth) {

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.

1	var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");
2	var auth = $firebaseAuth(firebaseObj);

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.

$scope.signUp = function() {
        if (!$scope.regForm.$invalid) {
            var email = $scope.user.email;
            var password = $scope.user.password;
            if (email && password) {
                auth.$createUser(email, password)
                    .then(function() {
                        // do things if success
                        console.log('User creation success');
                    }, function(error) {
                        // do things if failure
                        console.log(error);
                    });
            }
        }
    };

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:

1	.controller('RegisterCtrl', ['$scope','$location','$firebaseAuth', function($scope,$location,$firebaseAuth) {

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.

1	$location.path('/home');

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:

1	<p style="color:red;" ng-show="regError">{{regErrorMessage}}</p>

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.

1	$scope.regError = true;
2	$scope.regErrorMessage = error.message;

Aqui está a função signUp modificada:

$scope.signUp = function() {
    if (!$scope.regForm.$invalid) {
        var email = $scope.user.email;
        var password = $scope.user.password;
        if (email && password) {
            auth.$createUser(email, password)
                .then(function() {
                    // do things if success
                    console.log('User creation success');
                    $location.path('/home');
                }, function(error) {
                    // do things if failure
                    console.log(error);
                    $scope.regError = true;
                    $scope.regErrorMessage = error.message;
                });
        }
    }
};

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:

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:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="blog.css" rel="stylesheet">

</head>

<body ng-controller="WelcomeCtrl">

    <div class="blog-masthead">
        <div class="container">
            <nav class="blog-nav">
                <a class="blog-nav-item active" href="#">Home</a>
                <a class="blog-nav-item " href="addPost.html">Add Post</a>

            </nav>
        </div>
    </div>
    <div class="container">
        <div class="page-header">
            <h1>AngularJS & Firebase App</h1>
        </div>
        <p class="lead">Welcome home !!</p>

    </div>

    <footer class="footer">
        <div class="container">
            <p class="text-muted"></p>
        </div>
    </footer>

</body>

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

'use strict';

angular.module('myApp.welcome', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/welcome', {
        templateUrl: 'welcome/welcome.html',
        controller: 'WelcomeCtrl'
    });
}])

.controller('WelcomeCtrl', ['$scope', function($scope) {

}]);

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

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register',
    'myApp.welcome'   // Newly added module
])

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

1	<script src="welcome/welcome.js"></script>

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.

1	.controller('HomeCtrl', ['$scope','$location','$firebaseAuth',function($scope,$location,$firebaseAuth) {

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:

1	$location.path('/welcome');

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:

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.

.service('CommonProp', function() {
    var user = '';

    return {
        getUser: function() {
            return user;
        },
        setUser: function(value) {
            user = value;
        }
    };
});

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:

1	.controller('HomeCtrl', ['$scope','$location','CommonProp','$firebaseAuth',function($scope,$location,CommonProp,$firebaseAuth) {

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

1	CommonProp.setUser(user.password.email);

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

1	.controller('WelcomeCtrl', ['$scope','CommonProp', function($scope,CommonProp) {

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

1	<p class="lead">Welcome home <b>{{username}}</b> !!</p>

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

1	$scope.username = CommonProp.getUser();

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.

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!