Creación de una aplicación web desde cero usando AngularJS y Firebase: parte 3

() translation by (you can also view the original English article)

En la parte anterior de esta serie, creamos la página de registro, configuramos las rutas y también hicimos algunas validaciones de formularios usando AngularJS. En este tutorial implementaremos la funcionalidad de registro conectando AngularJS y la versión más reciente de Firebase. También modificaremos el código de inicio de sesión en base a la API de Firebase más reciente.

Los primeros pasos

Comencemos clonando la segunda parte del tutorial de GitHub.

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

Después de clonar el código fuente, navega al directorio del proyecto e instala las dependencias necesarias.

1	cd AngularJS_Firebase_Part2
2	npm install

Una vez que las dependencias estén instaladas, arranca el servidor.

npm start

Dirige tu navegador a http://localhost:8000/app/ y la aplicación debería ejecutarse.

Referencias script de Firebase

Firebase lanzó recientemente una versión más nueva, y el cliente FirebaseSimpleLogin que usamos en nuestro primer tutorial para que el usuario iniciara sesión ha quedado obsoleto y se incluyó en la biblioteca principal de Firebase. Así que abre app/index.html, elimina las referencias a Firebase existentes e incluye las siguientes referencias 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>

Modificación de la implementación del inicio de sesión

Navega a app/home y abre home.js. Elimina el $simplefirebaselogin inyectado del controlador e inyecta $firebaseAuth. Úsalo para crear la variable loginObj, como se muestra a continuación.

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	}));

El nuevo Firebase proporciona un método API llamado $authWithPassword para autenticar usando una dirección de correo electrónico y una contraseña. Reemplaza el método de inicio de sesión con $authWithPassword en la función SignIn como se muestra a continuación:

$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');
        });
}

Guarda los cambios, reinicia el servidor e intenta iniciar sesión usando una dirección de correo electrónico y contraseña válidas. Deberías ver un mensaje de éxito en la consola del navegador.

Implementación de la funcionalidad de registro

Usaremos el método createUser de Firebase para crear un nuevo usuario con una dirección de correo electrónico y una contraseña. Dado que ya hemos validado los datos en nuestro tutorial anterior, enlazaremos una llamada a la función de registro con el clic del botón de registro. Agrega la directiva ngClick al botón de registro como se muestra a continuación:

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

Abre register.js, y dentro del controlador RegisterCtrl, crea una nueva función llamada signUp.

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

En la función signUp solamente revisaremos si nuestro formulario es válido:

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

Agrega la directiva ngController a la etiqueta body en register.html.

1	<body ng-controller="RegisterCtrl">

Reinicia el servidor e intenta navegar a la página de registro. Presiona el botón Register (Registrar) después de escribir la dirección de correo electrónico y la contraseña. Ahora, si revisas la consola del navegador deberías ver el mensaje Valid form submission (Envío de formulario válido).

Entonces, antes de llamar a la API de Firebase para crear un nuevo usuario, necesitaremos inyectar firebase en nuestra aplicación. Abre register.js y agrega el módulo firebase.

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

A continuación, también necesitaremos inyectar $firebaseAuth en nuestro controlador de registro.

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

Crearemos una instancia de Firebase usando nuestra URL de Firebase y, usando dicha instancia, crearemos un objeto $firebaseAuth. Vamos a usar este objeto $firebaseAuth para hacer nuestra llamada a la API. Agrega el siguiente código en register.js, dentro del controlador de registro.

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

Ahora obtendremos la dirección de correo electrónico y la contraseña de $scope y llamaremos al método createUser de Firebase. Este es el mé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 puedes ver en la función signUp anterior, hemos llamado al método $createUser para crear un usuario nuevo. Si la creación del usuario se lleva a cabo correctamente, registraremos el mensaje de éxito en la devolución de llamada de éxito de la función createUser.

Reinicia el servidor, dirige tu navegador a http://localhost:8000/app/#/register e intenta registrar una nueva cuenta de usuario usando una dirección de correo electrónico y una contraseña. Revisa la consola de tu navegador después de hacer clic al botón de registro de usuario. Si el procedimiento fue exitoso, deberías ver el mensaje de éxito de creación de usuario en la consola del navegador.

A continuación, dirige tu navegador a http://localhost:8000/app/#/home e intenta iniciar sesión usando las nuevas credenciales de usuario.

Gestión de las devoluciones de llamada de registro de usuario

Devolución de llamada de creación exitosa de un usuario

Cuando el registro de un usuario se lleva a cabo correctamente, debemos redirigir al usuario a la página de inicio de sesión. Para redirigir al usuario, necesitaremos inyectar el servicio $location de AngularJS en nuestro controlador. Por lo tanto, inyecta $location como se muestra a continuación:

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

Agrega el siguiente código a la devolución de llamada de éxito de la función auth.$createUser para redirigir al usuario a la página de inicio de sesión si el registro es exitoso.

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

Guarda los cambios, reinicia el servidor e intenta registrar otra cuenta de usuario. Si el registro de usuario se lleva a cabo correctamente, deberías ser redirigido a la página de inicio de sesión.

Devolución de llamada de creación fallida de un usuario

El registro de usuarios puede fallar debido a algunos problemas, por ejemplo, si la dirección de correo electrónico del usuario ya existe. Entonces, cuando ocurre un error durante el registro, debemos mostrárselo al usuario. Agregaremos otro mensaje de error debajo del campo de contraseña y configuraremos la manera en la que se despliega para que sea mostrado cuando ocurra un error. Este es el mensaje de error:

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

Como puedes ver en el código anterior, hemos usado la directiva ngShow para mostrar el mensaje de error anterior cuando regError tenga el valor true. El mensaje se muestra usando la variable $scope llamada regErrorMessage. En la devolución de llamada createUser para errores, agrega el siguiente código para mostrar el mensaje de error.

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

Aquí puedes ver la función 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;
                });
        }
    }
};

Guarda los cambios, reinicia el servidor e intenta realizar un registro empleando una dirección de correo electrónico y contraseña que ya hayas usado. Al hacer esto, debería aparecer un mensaje de error en la pantalla, como se muestra a continuación:

Creación de la pantalla de inicio

Cuando un usuario inicie sesión con éxito en la aplicación, lo redireccionaremos a la página de inicio. La página de inicio mostrará las entradas creadas por el usuario y también tendrá una opción para crear nuevas entradas. Entonces creemos la página de inicio.

Navega a la carpeta de la aplicación en el directorio de esta última y crea una nueva carpeta llamada welcome. Esta carpeta contendrá plantillas y archivos relacionados con la página de inicio. Dentro de la carpeta welcome, crea dos páginas llamadas welcome.html y welcome.js. Agrega el siguiente código a 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 definiremos las rutas a la página de inicio para la aplicación. Usaremos $routeProvider para crear una ruta para la vista welcome. Al definir una nueva ruta, configuraremos una templateUrl que se mostrará en index.html. Junto con eso, también configuraremos un controller (que es una lógica que controla una vista en particular) para el recién creado $scope de la vista de inicio. Así es como se ve welcome.js al final:

'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) {

}]);

Ahora, abre app/app.js e incluye el módulo recién agregado.

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

Además, abre app/index.html e incluye el recién agregado script register.js.

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

Cuando un usuario inicie sesión correctamente, lo redireccionaremos a la página de inicio. Abre app/home/home.js e inyecta $location en HomeCtrl.

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

Usaremos $location para redirigir al usuario a la página de inicio. En home.js, dentro de la función SignIn, agrega el siguiente código para el caso de una devolución de llamada exitosa:

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

Guarda los cambios, reinicia el servidor e intenta iniciar sesión en la aplicación. Al iniciar sesión exitosamente, deberías poder ver una pantalla como la que se muestra a continuación:

Acceso a $scope entre controladores

Ahora mostremos la dirección de correo electrónico del usuario autenticado en la página de inicio. Pero existe un problema. Durante el inicio de sesión tenemos los detalles del usuario en HomeCtrl, pero cuando lo redirigimos a la vista de inicio, no es posible acceder a la variable $scope de HomeCtrl dentro de WelcomeCtrl. Entonces, para lograr esto haremos uso de los servicios de AngularJS.

Los servicios de Angular son objetos sustituibles conectados entre sí mediante el uso de la inyección de dependencias (ID, del inglés dependency injection). Puedes usar servicios para organizar y compartir código a través de tu aplicación.

Mediante el uso de servicios podemos compartir datos a través de diferentes controladores. Entonces, en home.js crearemos nuestro servicio llamado CommonProp.

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

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

En el servicio CommonProp hemos creado una variable llamada user, en la que almacenaremos la dirección de correo electrónico del usuario autenticado. Dado que es posible acceder al servicio desde todos los controladores, es posible compartir datos entre controladores usando el servicio CommonProp.

Inyecta el servicio CommonProp en HomeCtrl, como se muestra aquí:

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

Si la autenticación del usuario es exitosa, configura la variable user en el servicio CommonProp como se muestra a continuación.

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

Además, inyecta el servicio CommonProp en WelcomeCtrl dentro de welcome.js.

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

En welcome.html, modifica el mensaje de bienvenida para incluir una variable $scope, como puedes ver a continuación.

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

Ahora, en WelcomeCtrl configura el valor de $scope.username del método getUser de los servicios CommonProp.

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

Guarda todos los cambios, reinicia tu navegador e intenta iniciar sesión usando cualquier dirección de correo electrónico y contraseña. Al iniciar sesión correctamente, deberías ver tu dirección de correo electrónico en la página de inicio.

Conclusión

En este tutorial, llevamos nuestro tutorial de desarrollo de aplicaciones de blog usando AngularJS y Firebase al siguiente nivel. Implementamos la funcionalidad de registro y también vimos cómo compartir datos entre dos controladores.

En la siguiente parte de esta serie, veremos cómo comenzar a implementar la página "Crear entrada de blog".

El código fuente de este tutorial se encuentra disponible en GitHub.

¡Danos tu opinión en los comentarios a continuación!