Práctica: Comma Separated Values. CSV usando Ajax

Ejemplo usando Ajax con jQuery y Express.js

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat app.js
var express = require('express');
var app = express();
var path = require('path');

app.use(express.static('public'));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
  res.render('index', { title: 'Express' });
})

app.get('/chuchu', function (req, res) {
  var isAjaxRequest = req.xhr;
  console.log(isAjaxRequest);
  if (isAjaxRequest) {
    console.log(req.query);
    res.send('{"answer": "Server responds: hello world!"}')
  }
  else {
    res.send('not an ajax request');
  }
});

var server = app.listen(3000, function () {

  var host = server.address().address
  var port = server.address().port

  console.log('Example app listening at http://%s:%s', host, port)

});

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ) load data from the server using a HTTP GET request.
url
Type: String
A string containing the URL to which the request is sent.
data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.
success(data, textStatus, jqXHR)
Type: Function()
A callback function that is executed if the request succeeds.
dataType
Type: String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

To use callbacks, it is important to know how to pass them into their parent function.

En el directorio views hemos puesto el template:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat views/index.ejs 
<!doctype html>
<html>
  <head>
    <title><%- title %></title>
  </head>
  <body>
    <h1><%- title  %></h1>
    <ul>
      <li><a href="http://jquery.com/" id="jq">jQuery</a>
      <li><a href="/chuchu">Visit chuchu!</a>
    </ul>
    <div class="result"></div>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script>
      $( document ).ready(function() {
          $( "#jq" ).click(function( event ) {
              event.preventDefault();
              $.get( "/chuchu", {nombres: ["juan", "pedro"]}, function( data ) {
                $( ".result" ).html( data["answer"]);
                console.log(data);
              }, 'json');
          });
      });
    </script>
  </body>
</html>

req.query

An object containing a property for each query string parameter in the route. If there is no query string, it is the empty object, {}.

// GET /search?q=tobi+ferret
req.query.q
// => "tobi ferret"

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order
// => "desc"

req.query.shoe.color
// => "blue"

req.query.shoe.type
// => "converse"

Estas son las dependencias:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat package.json 
{
  "name": "ajaxjquery",
  "version": "0.0.0",
  "description": "",
  "main": "hello.js",
  "dependencies": {
    "express": "*",
    "ejs": "*",
    "gulp-shell": "*",
    "body-parser": "~1.12.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "node hello.js"
  },
  "author": "",
  "license": "ISC"
}

Además hemos instalado a nivel global gulp y node-supervisor.

Podemos arrancar el servidor usando este gulpfile:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat gulpfile.js 
var gulp    = require('gulp');
var shell = require('gulp-shell');

gulp.task('default', ['server']);

// npm install supervisor -g
gulp.task('server', function () {
  return gulp.src('').pipe(shell([ 'node-supervisor app.js' ]));
});

gulp.task('open', function() {
  return gulp.src('').
           pipe(shell("open https://github.com/crguezl/how-jquery-works-tutorial/tree/getallparams"));
});

Ejemplo de como Desplegar una Aplicación Express sobre Node.JS en Heroku

Véase:

La rama heroku del repo how-jquery-works-tutorial
El tutorial de Heroku Getting Started with Node.js on Heroku
El capítulo sobre Heroku en los apuntes de LPP

GitHub Issues

Mastering Issues

Requisitos de la Práctica

A los requisitos de la práctica Comma Separated Values. CSV 1.4 anterior:

Los templates deben hacerse usando underscore y el truco del elemento script en el HTML
Se debe usar locaStorage para almacenar las últimas entradas
Añada pruebas usando Mocha y Chai
Use Karma para la ejecución de las tareas
Use Gulp para la gestión de las tareas
Haga un análisis de cubrimiento usando Blanket
Despliegue las pruebas en Travis
Despliegue la aplicación en Heroku usando Express.JS
Asegúrese de que el README.md figuran enlaces a Heroku, badge de Travis, enlaces a las páginas GitHub de los autores, enlaces a las pruebas con Mocha, Chai y Blanket.

Le añadimos

El requisito de usar AJAX con jQuery:
El navegador/cliente lee la cadena con los datos de entrada y se los envía usando AJAX al servidor, el cual calcula y devuelve en JSON la tabla (el array de arrays) que finalmente es insertada en la página por el cliente/navegador.
Use los Issues de GitHub como herramienta colaborativa , indicando que bugs han detectado, que funcionalidades hay que añadir, etc. Usen etiquetas y milestones y asigne tareas a los programadores del grupo. Aprenda a referenciar commits dentro de un issue, a referenciar colaboradores, etc.
Para ello vale la pena que lean este tutorial: Mastering Issues

Casiano Rodríguez León
2016-03-27