Aplicación «To-Do» con Yeoman, Bower, Grunt y Angular.js

1
19282

Aplicación «To-Do» con Yeoman, Bower, Grunt y Angular.js

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.8 GHz Intel Core Duo, 8GB DDR3 SDRAM)
  • Sistema Operativo: Mac OS X Lion 10.7.5
  • IntelliJ Idea 12

2. Introducción

El mundo de Javascript crece a un ritmo desenfrenado, el otro día mostré a través de un tutorial las posibilidades que te ofrecen herramientas como Grunt, en este tutorial voy a mostrar como usar Grunt y otras herramientas para crear una pequeña aplicación de lista de tareas (To-Do List) con Angular.js.

3. ¿ Que herramientas vamos a utilizar ?

Las herramientas que vamos a utilizar van a ser las siguientes:

  1. Node.js, esta es la base de todo, la que ha posibilitado la creación del resto de herramientas.
  2. Bower, es un gestor de dependencias para aplicaciones web ( frontend ) creado por la gente de Twitter.
  3. Grunt, un taskrunner, nos permitirá automatizar tareas que se repiten.
  4. Yeoman, el director de orquesta, nos permitirá crear un proyecto de 0 usando el resto de las herramientas, nos servirá como punto de partida.
  5. SCSS, un pre-procesador de CSS, nos permitirá sacarle mayor partido a nuestro CSS.
  6. Bootstrap, un framework CSS que nos permitirá conseguir una apariencia más profesional sin apenas esfuerzo.
  7. Angular.js, vamos a considerarlo herramienta, aunque es un framework, nos ayudará a conseguir construir una aplicación web con mayor velocidad.

4. Preparando el entorno

Debido a que vamos a usar bastantes herramientas diferentes esta es una parte delicada del tutorial, el proceso de instalación está preparado para que no nos lleve mucho tiempo, es aconsejable un manejo intermedio con la linea de comandos y estar en algún Sistema Operativo basado en Linux/Unix.

Si seguiste el tutorial de Grunt ( o has desarollado en Javascript anteriormente ) seguramente tengas Node.js instalado en tu sistema, sino solo tienes que ir a la web y descargarte el binario correspondiente a tu sistema operativo.

El siguiente paso es instalar bower en nuestro sistema operativo, para ello usaremos npm, el gestor de dependencias de node, para instalarlo tan solo tenemos que ejecutar el comando

npm install -g bower

el «flag» -g es para instarlo de manera global en nuestro sistema, ademas añadirá un enlace a nuestra carpeta /bin de manera que lo podremos usar desde nuestra linea de comandos sin problemas. A continuación instalaremos yeoman y el generador de Angular para Yeoman.

npm install -g yeoman
npm install -g generator-angular
yo angular

Esto nos instalará todas las dependencias en nuestro proyecto ( tras hacernos unas breves preguntas, a las que responderemos afirmativamente ), ademas de un pequeño proyecto de bienvenida que nos servirá de punto de partida.

Antes de lanzar la build instalaremos la versión 3 de bootstrap con el siguiente comando:

bower install --save sass-bootstrap

Por ultimo iniciamos la tarea por defecto de grunt para que nos preparé una «Build» ejecutando y lanzamos el servidor de pruebas:

grunt

grunt server

Si todo ha ido bien deberíamos de ver la siguiente pantalla:

yeoman bienvenida

4.1. Analizando los archivos que nos ha descargado

Como podremos ver en nuestro directorio, se nos habrán descargado bastantes archivos y directorios, nuestro directorio debería tener un aspecto como este:

yeoman directorio

En los archivos package.json y bower.json tenemos declaradas nuestras dependencias, el primero tiene declaradas las dependencias de node.js y el segundo tiene declaradas las dependencias de nuestra aplicación:

bower.json

En el fichero Gruntfile.js tenemos declaradas todas las tareas automáticas, como pueden ser la tarea «test», «jsHint» y «build», esto nos ayudará a automatizar algunas tareas de manera muy sencilla.

Los archivos .jshintrc y karma.conf.js sirven para configurar jsHint y Karma respectivamente, ambas herramientas están fuera del objetivo del tutorial y no las usaremos.

El siguiente paso será el de entrar al directorio app, donde se encuentra nuestra aplicación, nuestra aplicación se inicia en app.js que es llamado a través de index.html, el controloador main.js es el encargado de atender a todas las acciones que se realicen en la ruta principal «/» y la vista views/main.html será la que se muestre en la ruta principal.

5. Empezamos a desarrollar nuestra aplicación de tareas.

La aplicación que vamos a desarrollar será una herramienta que nos permitirá agregar nuevas tareas a una lista y marcarlas como hechas, además nos permitirá borrarlas si lo deseásemos.

El primer paso es abrir nuestra vista principal, que se encuentra en el archivo views/main.html, inicialmente tendrá el mensaje de bienvenida de Yeoman, lo eliminamos y dejamos el siguiente código:

<div class="main">
    <div class="titleBox">
        <h1> Lista de cosas que hacer: </h1>
    </div>
    <div class="newTasksBox">
        <form ng-submit="addTodo()">
            <input type="text" id="toDoBox" ng-model="newTaskText" placeholder="¿ Que tienes que hacer hoy ?"/>

        </form>
    </div>
</div>

Como podemos ver la funcionalidad relativa a angular se muestra con el prefijo ng, en este caso tenemos dos directivas de angular, ng-submit y ng-model, ng-submit permitirá a Angular interceptar todas las peticiones del formulario y llamar a la función que deseemos, por ultimo ng-model nos permitirá «bindear» o enlazar cualquier campo o texto con un valor en el modelo, esta es una de las características mas interesantes de Angular.

A continuación vamos a ver como quedaría el controlador principal que se encuentra en scripts/controllers/main.js

'use strict';

angular.module('webToolsApp').controller('MainCtrl', function ($scope) {

    $scope.addTodo = function () {
        alert('añadiendo una nueva tarea: '+$scope.newTaskText);
    };

});

El aspecto más importante de este controlador es la variable $scope, hay muchos artículos que describen como funciona la variable $scope, de momento nos sirve con saber que la variable $scope es el pegamento entre nuestra vista y nuestro controlador, todo lo que se encuentre en el espacio de nombre de la variable $scope estará disponible tanto para la vista como para el controlador, y también se puede modificar en ambas.

Una vez hecho esto, podemos escribir algo en la caja de texto y pulsar el botón, nos debería aparecer un mensaje como este:

bower.json

Como hemos podido ver, Angular ha cogido el valor de la caja de texto sin que nosotros hayamos tenido que acceder al DOM y obtener el valor, esto es otro de los puntos fuertes de Angular, ya que toda la información se encuentra en nuestro modelo, convirtiendo a la vista en una mera representación actualizada de nuestro modelo.

5.1 Representando una lista con Angular

Ahora que ya hemos conseguido capturar el valor de la caja de texto vamos a guardarlo en un array y vamos a hacer que se muestre automáticamente en nuestra vista, el siguiente paso será el de agregar una lista de tareas a nuestro objeto $scope.

$scope.tasks = [];

Y en la función que se ejecuta al pulsar el botón:

$scope.addTodo = function () {
    var task = {
        text: $scope.newTaskText,
        date: Date.now(),
        done: false
    };

    $scope.tasks.push(task);

    $scope.newTaskText = '';

};

Como se puede observar, hemos añadido un par de valores que usaremos más tarde, ahora cada vez que añadamos una nueva tarea estas se insertarán en el array y vaciará la caja de texto. El enlace entre nuestra variable de Javascript y nuestra caja de texto es bidireccional, de manera que podemos modificarla tanto en la vista como en el controlador ( programaticamente ) y esta se actualizará en el otro lado.

El siguiente paso es mostrar la lista en la vista, para ello usaremos la directiva ng-repeat la cual nos permitirá mostrar todos los elementos de un array dinamicamente.

<div class="taskListBox">
    <ul id="taskList">
        <li class="task"  ng-repeat="task in tasks" >
            <span class="taskText>{{ task.text }}</span>
        </li>
    </ul>
</div>

Esto mostrará el atributo text de todas las tareas que haya en el array «tasks», podemos ver como se actualiza automáticamente la lista cada vez que añadimos una nueva tarea.

5.2 Borrando un elemento de la lista.

Otra de las tareas comunes a realizar sobre un modelo es el de borrarlo, en este caso solo necesitamos borrarlo del array que es nuestro modelo, pero si necesitásemos mandar una petición de borrado a nuestro servidor, necesitaríamos algún valor más como pudiese ser el id de la tarea, como este no es el caso, solo haría falta una sencilla operación:

$scope.delete = function (task) {
    var index = $scope.tasks.indexOf(task);
    $scope.tasks.splice(index, 1);
};

y añadir un botón dentro de la lista

<div class="taskListBox">
    <ul id="taskList">
        <li class="task"  ng-repeat="task in tasks" >
            <span class="taskText>{{ task.text }}</span>
            <button type="button" class="btn btn-danger" ng-click="delete(task)">Borrar</button>
        </li>
    </ul>
</div>

Lo más interesante de estos fragmentos de código es ver como le podemos pasar el task al que pertenece el botón de manera que sabemos en cual de los botones se ha pulsado, esto facilita bastante la tarea, sin Angular tendríamos que haber añadido algún tipo de ID al botón y luego haber accedido al DOM en busca de ese ID, complicando una operación tan sencilla.

5.3 Marcar una tarea como hecha.

El penúltimo paso de nuestra sencilla aplicación sería el de poder marcar una tarea como hecha o desmarcarla, para ello vamos a usar un checkbox de HTML al que asociaremos con el atributo «done» de nuestras tareas.

<input type="checkbox" class="doneCheck" ng-model="task.done">

<span class="taskText done-{{ task.done }}">{{ task.text }}</span>

Ademas agregaremos una clase condicional para cambiar los estilos en caso de que la tarea haya sido hecha ( la clase cambiará de done-false a done-true ), tan solo tendremos que agregarle un estilo a la clase done-true como puede ser poner las letras de color rojo o una linea que lo tache.

Con esto no hace falta ni que modifiquemos el controlador, Angular se encargará del resto.

5.4 Mostrando la fecha de nuestra tareas.

Por ultimo, vamos a ver otra función interesante de Angular, los filtros, muchas veces tenemos la información en nuestro modelo de una manera pero queremos mostrarla de otra manera distinta, puede ser una fecha o una moneda, por ejemplo, guardar la fecha en milisegundos y mostrarla en DD MM YYYY.

<span class="taskDate">({{ task.date | date:'short' }})</span>

Las distintas maneras de mostrar una fecha se pueden encontrar aquí

Tras retocar un poco los estilos podemos ver el resultado final:

imagen

6. Conclusiones

Javascript es un lenguaje que tiene muchas deficiencias ( muchas de ellas impuestas por el entorno en el que se ejecuta ) por ello a veces puede ser complicado hacer aplicaciones robustas, es por eso que se torna de vital importancia el usar todas las herramientas posibles con el fin de mejorar la robustez y la calidad de nuestras aplicaciones.

El automatizar cosas como la ejecución de test o el «linting» ( control de calidad ) del código asegura que no se pierdan esos procesos a lo largo del desarrollo, a la vez que frameworks como Angular.js nos permiten mejorar la estructuración de nuestro código y además nos ahorran mucho tiempo que normalmente invertiríamos en hacer el código «pegamento» que uniría las diferentes partes de nuestro sistema.

El código del tutorial puede encontrarse en GitHub

1 COMENTARIO

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad