Práctica: Comma Separated Values

Introducción

En esta práctica se introducen varias tecnologías:

• localStorage,
• jquery,
• underscore y ejs,
• express,
• sass,
• heroku

El repo del que parten en su asignación de GitHub Classroom tiene una aplicación que se ejecuta toda en el cliente/browser y que resuelve el problema de analizar una entrada de valores separados por comas generando como salida una tabla con el resultado del análisis.

Se les pide que modifiquen la solución inicial para obtener una aplicación cliente-servidor cuyo funcionamiento debería ser como sigue:

• El servidor tiene dos rutas principales a las que responde:
  • la raíz app.get('/', function(req, res) {...} y
  • la ruta app.post('/csv', function(req, res) {...}
• Cuando se visita con el navegador/browser la raíz http://localhost:5000/ el servidor responde con una vista que contiene un formulario (<form>) con un área de texto (<textarea>) en la que se escribe la entrada CSV

        <form action="/csv" method="post">
           .....
           <button type="submit">Submit</button>
        </form>

• Cuando el formulario es rellenado y se hace click en el botón de submit se envía un request post a la ruta /csv
• En la ruta /csv el servidor procede a hacer las siguientes tareas:
  1. Analiza el request mediante el middleware body-parser, que hace que el objeto req.body se extienda con nuevos atributos cuyos nombres se corresponden con los de los elementos del formulario. Por ejemplo si el formulario tiene este aspecto

          <form action="/" method="post">
             Enter your name:
             <input type="text" name="userName" placeholder="..." autofocus />
             <br/>
             <button type="submit">Submit</button>
          </form>
     

     podremos acceder dentro del manejador de la ruta /csv a los contenidos del campo input mediante req.body.userName

      app.post('/', function(req, res){
        var userName = req.body.userName;
        res.render('greet', {userName: userName, title: 'greet'});
      });
     

  2. Se hace el análisis de la entrada mediante la función calculate (que ahora se carga como código en el servidor y no en el cliente) la cual devuelve la estructura de datos, el array de arrays, con el resultado
  3. Se devuelve mediante una vista una página con los resultados
• Para hacer estas tareas puede imitar el ejemplo en el repositorio hello-express. ¡Estúdielo con detalle!

Recursos

• El repositorio hello-express
• Apuntes: Práctica: Comma Separated Values
• Véase el Despliegue en gh-pages de la aplicación inicial
• SASS
• jQuery (en los apuntes)
  • Repo de ejemplo de uso de jQuery y SASS
• Underscore
  • Underscore en los Apuntes
  • Templates en Underscore
• LocalStorage
• Express
• Heroku
• Para depurar paso a paso un programa Node.js puede usar el debugger de línea de comandos o bien usando la interfaz gráfica proveída por node-inspector y el comando node-debug

Requisitos

• Despliegue la aplicación en Heroku usando Express.JS
• Use SASS para generar el CSS
• Use Gulp para la gestión de las tareas
• Se debe usar locaStorage para almacenar las últimas entradas (ya hecho en la versión inicial)
• Se usa Underscore para los templates en el cliente y ejs para los templates en el servidor