Creando una aplicación web desde cero usando AngularJS y Firebase

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

En esta serie, usaremos AngularJS y Firebase para crear una aplicación web, desde cero. Será una aplicación web sencilla de blogging, en la que el usuario puede iniciar sesión o registrarse, y publicar posts en el blog.

Este tutorial, asume que tienes un conocimiento básico de AngularJS, aunque tampoco debería ser muy difícil comprender los conceptos sobre la marcha.

Introducción a AngularJS

AngularJS es una de los frameworks JavaScript MVC mejor valoradas. Es un framework estructural para crear aplicaciones web dinámicas, a base de extender las capacidades de HTML.

De la documentación de AngularJS:

HTML es estupendo para declarar documentos estáticos, pero flaquea cuando tratamos de usarlo para declarar vistas dinámicas en aplicaciones web. AngularJS te permite extender el vocabulario de HTML para tu aplicación. El entorno resultante es extraordinariamente expresivo, legible y rápido de desarrollar.

Introducción a Firebase

Imagínate crear una aplicación web sin tener que preocuparte del back-end. Firebase posibilita la sincronización de información en tiempo real con nuestra aplicación, sin molestarte con los detalles del back-end. Todo lo que necesitamos hacer son algunas llamadas API.

Firebase en un API poderosa para almacenar y sincronizar información en tiempo real. La combinación del potente enlace de datos de dos direcciones de AngularJS con Firebase, da como resultado una impresionante sincronización en tres direcciones.

Comenzando con AngularJS

El proyecto angular-seed es una plantilla para comenzar la creación de aplicaciones web que usan AngularJS. Descarga o clona el proyecto angular-seed desde el repositorio.

1	$ git clone https://github.com/angular/angular-seed.git

Ve hasta el directorio del proyecto e instala las dependencias obligatorias.

1	$ cd angular-seed
2	$ npm install ## Install the dependencies

Arranca el servidor node:

1	$ npm start ## Start the server

Si diriges tu navegador a la dirección: https://localhost:8000/app/index.html deberías ver la aplicación por defecto funcionando.

Ahora ve hasta el directorio app dentro de la carpeta angular-seed. Aquí es donde reside el código de la aplicación. Dentro de la carpeta app encontrarás el fichero app.js que es el corazón de nuestra aplicación. Dentro de este fichero declararemos los módulos y rutas de nuestra aplicación. El proyecto angular-seed tiene dos vistas por defecto, view1 y view2. Borra las carpetas view1 y view2 de la carpeta de la aplicación.

Comencemos desde el cero. Abre app.js y borra todo el código que hay. En app.js definiremos las rutas de nuestra aplicación para, por ejemplo, definir como manejar peticiones del tipo: /home. Pero para definir rutas, necesitaremos un módulo de AngularJs llamado ngRoute. Y para poder usar ngRoute, primero tenemos que "inyectarlo" o añadirlo a nuestra aplicación. Para ello usaremos angular.module que nos permite añadir el módulo ngRoute a nuestra aplicación, tal y como se muestra abajo:

1	angular.module('myApp', [
2	'ngRoute'
3	])

El módulo ngRoute tiene un componente llamado $routeProvider que es muy útil para configurar rutas. Inyectaremos $routeProvider dentro del método config de angular.module y definiremos nuestras rutas en su función de callback, tal y como puedes ver a continuación:

'use strict';

angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
 // Routes will be here
}]);

A continuación, abre index.html y borra las referencias de script a view1 y view2. Elimina todo dentro del tag body de index.html a excepción de las referencias de script y el div que mostramos a continuación con la directiva ngView .

1	<div ng-view></div>

ngView es una directiva, que nos ayuda a renderizar la vista asociada a una ruta en particular, dentro del diseño principal de index.html. De manera, que cada vez que la ruta cambia, el contenido del div que mostramos arriba, cambia.

Ahora creemos una nueva vista para que el usuario pueda iniciar sesión. Dentro del directorio app crea una nueva carpeta llamada home. Y dentro de home, crea dos archivos llamados respectivamente home.html y home.js. Abre home.html e incluye el siguiente código HTML:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<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="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div>

  

</body></html>

Tal y como vemos en el código anterior, usaremos Bootstrap para crear las vistas de nuestra aplicación.

Dentro de home.js, declararemos las rutas para acceder a la vista home. $routeProvider tiene un método llamado when, que es el que usaremos para crear una ruta para nuestra vista. Cuando definimos una nueva ruta, tenemos que configurar un templateUrl que será renderizado en index.html. Al mismo tiempo también hemos de configurar un controller(controlador) para el recién creado $scope de la vista home. Un controlador es la lógica que controla una vista en particular. Así es como debería quedar:

'use strict';

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

// Declared route 
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
}])

// Home controller
.controller('HomeCtrl', [function() {

}]);

Ahora abre app.js e incluye el módulo home myApp.home en la aplicación. También debes declarar la ruta por defecto de nuestra aplicación usando para ello, el método $routeProvider.otherwise de la vista home.

'use strict';

angular.module('myApp', [
'ngRoute',
    'myApp.home'           // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home
    
    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

A continuación, para poder mostrar la página de inicio, necesitamos incluir home.js dentro del principal archivo de plantilla HTML de la aplicación. Para ello, abre index.html e incluye lo siguiente:

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

Reinicia el servidor y apunta tu navegador a http://localhost:8000/app/index.html y deberías ver la pantalla de inicio de sesión:

Comenzando con Firebase

Para poder comenzar, necesitamos registrarnos y obtener una cuenta gratuita en Firebase. Una vez terminado el registro, veremos una pantalla como la siguiente:

Anota la URL de la aplicación creada y haz click en el botón Manage App. Usaremos esta URL de Firebase para interactuar con la base de datos.

Para autentificar nuestra aplicación con Firebase, usaremos una dirección de correo y una clave. Para que esto funcione, necesitamos habilitarlo desde Firebase. En el dashboard, haz click en la pestaña Login & Auth en el menú de la izquierda. En esa pantalla, bajo la pestaña Email & Password, marca Enable Email & Password Authentication tal y como se muestra en la siguiente imagen:

Añade un nuevo usuario con un Email y Password con los que nos autentificaremos una vez que implementemos la funcionalidad de inicio de sesión.

Add a new user with an Email and Password

Implementando la funcionalidad de Inicio de Sesión

Para poder comenzar a usar Firebase, incluye las siguientes scripts en app/index.html:

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>

Después, tenemos que inyectar el módulo firebase en home.js. Añade el módulo firebase en home.js como se muestra a continuación:

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

Ya estamos listos para interactuar con Firebase. Abre home.js y dentro de HomeCtrl, crea una nueva función llamada SignIn para autentificar al usuario. Usaremos $scope para crear la nueva función. $scope es un objeto que apunta al modelo de la aplicación, y que también actúa como pegamento entre el controlador de la aplicación y la vista. Por lo tanto inyectaremos el objeto $scope dentro de SignIn de manera que el objecto modelo de la vista sea accesible dentro de la función SignIn.

$scope.SignIn = function($scope) {
var username = $scope.user.email;
    var password = $scope.user.password;
    
    // Auth Logic will be here
}

A continuación, dentro de HomeCtrl, crea una instancia de Firebase usando la URL que anotamos anteriormente tal y como se muestra:

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

El módulo $firebaseSimpleLogin, se utiliza para autentificar contra Firebase usando una dirección de correo y una clave. Para usarlo, necesitaremos inyectar el módulo $firebaseSimpleLogin dentro de HomeCtrl de la siguiente forma:

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

Usando firebaseObj crea una instancia de $firebaseSimpleLogin:

1	var loginObj = $firebaseSimpleLogin(firebaseObj);

Ahora, usando el API $login Autentificaremos la dirección de correos y la clave contra Firebase. loginObj.$login recibe como parámetros la dirección de correos y la clave. En el caso de una autentificación con éxito, obtenemos un "success callback" y en caso de que la autentificación sea infructuosa, obtenemos un "error callback".

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

Para que el código del controlador funcione, necesitamos enlazar el controlador y la vista. AngularJS nos provee con una directiva llamada ngController que permite enlazar un controlador a una vista. Abre home.html y añade la directiva ngController al elemento body para enlazarlo con HomeCtrl.

Necesitamos que los valores de la dirección de email y la clave sean accesibles dentro de la función SignIn del controlador. AngularJS nos suministra una directiva llamada ngModel para enlazar su valor a $scope de manera que sea accesible dentro de la función SignIn. Incluye la directiva ngModel en los elementos input de email y password tal como se muestra:

<body ng-controller="HomeCtrl">

<div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">SignIn</button>
      </form>

    </div>

  

</body>

Finalmente, añade la directiva ngClick al botón sign-in para llamar a la función SignIn:

1	<button type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>

Guarda todos los cambios y reinicia el servidor. Dirige tu navegador a http://localhost:8000/app/index.html#/home e intenta iniciar sesión usando la dirección de correos jay3dec@gmail.com y la clave jay. En caso de que el usario se autentifique con éxito, deberías ver el mensaje Authentication successful en la consola del navegador.

Conclusión

En este tutorial, hemos repasado como iniciar la creación de una aplicación web con AngularJS. Hemos implementado la funcionalidad de inicio de sesión y hemos autentificado con éxito al usuario con la base de datos Firebase.

En la segunda parte de este tutorial, llevaremos todo ello al siguiente nivel implementando validaciones, funcionalidades de registro, y algunas otras características. El código de este tutorial está disponible en GitHub.

Nos gustaría oír vuestras impresiones en los comentarios.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!