13-voting.md.erb

---
title: Votos
slug: voting
date: 0013/01/01
number: 13
points: 10
photoUrl: http://www.flickr.com/photos/ikewinski/8561920811/
photoAuthor: Mike Lewinski
contents: Construiremos un sistema que permita a los usuarios votar los posts.|Crearemos una nueva página con los más votados.|Aprenderemos cómo escribir un ayudante Spacebars más general.|Aprenderemos un poco más sobre la seguridad de los datos en Meteor.|Cubriremos algunas consideraciones importantes acerca del rendimiento de MongoDB.
paragraphs: 49
---

Ahora que nuestro sitio es cada vez más popular, empieza a ser complicado buscar los mejores posts. Lo que necesitamos es algún tipo de sistema de clasificación para ordenarlos.

Podríamos construir un sistema de clasificación complejo con karma, basado en tiempo, y muchas otras cosas (la mayoría de las cuales se implementan en [Telescope](http://telesc.pe/), el hermano mayor de Microscope). Nosotros vamos a mantener las cosas sencillas y ordenaremos los posts por el número de votos que reciban.

Vamos a empezar proporcionado a los usuarios una manera de votar los posts.

### El modelo de datos

Vamos a guardar una lista de upvoters en cada post para que sepamos dónde mostrar el botón upvote a los usuarios, así como para evitar que la gente vote varias veces el mismo post.

<% note do %>

### Privacidad de datos y publicaciones

Vamos a publicar las listas de upvoters a todos los usuarios, por lo que automáticamente tendrán a su disposición los datos a través de la consola de navegador.

Este es el tipo de problema de privacidad que puede surgir por la forma en la que trabajan las colecciones. Por ejemplo, ¿queremos que la gente pueda averiguar quién ha votado sus posts? En nuestro caso, no tendría ninguna consecuencia, pero es importante por lo menos reconocer el problema.

<% end %>

También vamos a desnormalizar el número total de upvoters de un post para que sea más fácil recuperar esa cifra. Así que vamos a añadir dos atributos a nuestros posts, `upvoters` y `votes`. Vamos a empezar añadiéndolos a nuestros datos de prueba:

~~~js
// Fixture data
if (Posts.find().count() === 0) {
  var now = new Date().getTime();

  // create two users
  var tomId = Meteor.users.insert({
    profile: { name: 'Tom Coleman' }
  });
  var tom = Meteor.users.findOne(tomId);
  var sachaId = Meteor.users.insert({
    profile: { name: 'Sacha Greif' }
  });
  var sacha = Meteor.users.findOne(sachaId);

  var telescopeId = Posts.insert({
    title: 'Introducing Telescope',
    userId: sacha._id,
    author: sacha.profile.name,
    url: 'http://sachagreif.com/introducing-telescope/',
    submitted: new Date(now - 7 * 3600 * 1000),
    commentsCount: 2,
    upvoters: [],
    votes: 0
  });

  Comments.insert({
    postId: telescopeId,
    userId: tom._id,
    author: tom.profile.name,
    submitted: new Date(now - 5 * 3600 * 1000),
    body: 'Interesting project Sacha, can I get involved?'
  });

  Comments.insert({
    postId: telescopeId,
    userId: sacha._id,
    author: sacha.profile.name,
    submitted: new Date(now - 3 * 3600 * 1000),
    body: 'You sure can Tom!'
  });

  Posts.insert({
    title: 'Meteor',
    userId: tom._id,
    author: tom.profile.name,
    url: 'http://meteor.com',
    submitted: new Date(now - 10 * 3600 * 1000),
    commentsCount: 0,
    upvoters: [],
    votes: 0
  });

  Posts.insert({
    title: 'The Meteor Book',
    userId: tom._id,
    author: tom.profile.name,
    url: 'http://themeteorbook.com',
    submitted: new Date(now - 12 * 3600 * 1000),
    commentsCount: 0,
    upvoters: [],
    votes: 0
  });

  for (var i = 0; i < 10; i++) {
    Posts.insert({
      title: 'Test post #' + i,
      author: sacha.profile.name,
      userId: sacha._id,
      url: 'http://google.com/?q=test-' + i,
      submitted: new Date(now - i * 3600 * 1000 + 1),
      commentsCount: 0,
      upvoters: [],
      votes: 0
    });
  }
}
~~~
<%= caption "server/fixtures.js" %>
<%= highlight "21~23,48~50,59~61,71~73" %>

Como de costumbre, ejecutamos `meteor reset` y creamos una nueva cuenta de usuario. Ahora nos aseguraremos que inicializamos las dos nuevas propiedades cuando se crean los posts:

~~~js
//...

var postWithSameLink = Posts.findOne({url: postAttributes.url});
if (postWithSameLink) {
  return {
    postExists: true,
    _id: postWithSameLink._id
  }
}

var user = Meteor.user();
var post = _.extend(postAttributes, {
  userId: user._id,
  author: user.username,
  submitted: new Date(),
  commentsCount: 0,
  upvoters: [],
  votes: 0
});

var postId = Posts.insert(post);

return {
  _id: postId
};

//...
~~~
<%= caption "collections/posts.js" %>
<%= highlight "16~18" %>

### Plantillas de voto

Lo primero es añadir un botón upvote a nuestros posts y mostrar el contador de votos en los metadatos del post:

~~~html
<template name="postItem">
  <div class="post">
    <a href="#" class="upvote btn btn-default">⬆</a>
    <div class="post-content">
      <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
      <p>
        {{votes}} Votes,
        submitted by {{author}},
        <a href="{{pathFor 'postPage'}}">{{commentsCount}} comments</a>
        {{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
      </p>
    </div>
    <a href="{{pathFor 'postPage'}}" class="discuss btn btn-default">Discuss</a>
  </div>
</template>
~~~
<%= caption "client/templates/posts/post_item.html" %>
<%= highlight "3,7" %>

<%= screenshot "13-1", "El botón upvote" %>

Después, llamaremos a un método en el servidor cuando el usuario haga clic en el botón:

~~~js
//...

Template.postItem.events({
  'click .upvote': function(e) {
    e.preventDefault();
    Meteor.call('upvote', this._id);
  }
});
~~~
<%= caption "client/templates/posts/post_item.js" %>
<%= highlight "3~8" %>

Finalmente, volvemos a `lib/collections/posts.js` para añadir el método de servidor que actualizará los votos:

~~~js
//...

Meteor.methods({
  post: function(postAttributes) {
    //...
  },

  upvote: function(postId) {
    check(this.userId, String);
    check(postId, String);

    var post = Posts.findOne(postId);
    if (!post)
      throw new Meteor.Error('invalid', 'Post not found');

    if (_.include(post.upvoters, this.userId))
      throw new Meteor.Error('invalid', 'Already upvoted this post');

    Posts.update(post._id, {
      $addToSet: {upvoters: this.userId},
      $inc: {votes: 1}
    });
  }
});

//...
~~~
<%= caption "lib/collections/posts.js" %>
<%= highlight "6,8~25" %>

<%= commit "13-1", "Algoritmo básico de voto." %>

El método es bastante sencillo. Hacemos algunas comprobaciones para garantizar que el usuario ha iniciado sesión y que el post realmente existe. Después de corroborar que el usuario no ha votado ya este post, incrementamos el total de votos y añadimos al usuario a la lista de upvoters.

Este último paso es muy interesante. Hemos utilizado un par de operadores de Mongo que son muy útiles: `$addToSet` agrega un elemento a una lista siempre y cuando este no exista ya en ella, y `$inc` simplemente incrementa un entero.

### Mejoras en la interfaz de usuario

Si el usuario no está conectado, o ya ha votado uno de los posts, no podrá votar el post. Para reflejar esto en nuestra interfaz de usuario, usaremos un ayudante para añadir condicionalmente una clase CSS para que deshabilite el botón upvote.

~~~html
<template name="postItem">
  <div class="post">
    <a href="#" class="upvote btn btn-default {{upvotedClass}}">⬆</a>
    <div class="post-content">
      //...
  </div>
</template>
~~~
<%= caption "client/templates/posts/post_item.html" %>
<%= highlight "3" %>

~~~js
Template.postItem.helpers({
  ownPost: function() {
    //...
  },
  domain: function() {
    //...
  },
  upvotedClass: function() {
    var userId = Meteor.userId();
    if (userId && !_.include(this.upvoters, userId)) {
      return 'btn-primary upvotable';
    } else {
      return 'disabled';
    }
  }
});

Template.postItem.events({
  'click .upvotable': function(e) {
    e.preventDefault();
    Meteor.call('upvote', this._id);
  }
});
~~~
<%= caption "client/templates/posts/post_item.js" %>
<%= highlight "7~14, 19" %>

Creamos el ayudante `upvotedClass` para cambiar la clase `.upvote` por `.upvotable`, así que no podemos olvidar hacerlo también en el controlador de eventos. `client/views/posts/post_item.js`:

<%= screenshot "13-2", "Deshabilitando el botón upvote." %>

<%= commit "13-2", "Deshabilitado el botón upvote si el usuario no ha accedido o ya ha votado el post." %>

Ahora nos damos cuenta que los posts con un solo voto están etiquetados como "1 votes", por lo que vamos a pararnos a pluralizar las etiquetas correctamente. La pluralización puede ser un proceso complicado, pero por ahora vamos a hacerlo de una manera bastante simple. Crearemos un nuevo ayudante Spacebars que podemos utilizar desde cualquier lugar:

~~~js
Template.registerHelper('pluralize', function(n, thing) {
  // fairly stupid pluralizer
  if (n === 1) {
    return '1 ' + thing;
  } else {
    return n + ' ' + thing + 's';
  }
});
~~~
<%= caption "client/helpers/spacebars.js" %>

Los ayudantes que hemos creado con anterioridad siempre han estado relacionados con la plantilla a la que se aplican. Pero usando `Template.registerHelper`, hemos creado un ayudante *global* que se puede utilizar dentro de cualquier plantilla:

~~~html
<template name="postItem">

//...

<p>
  {{pluralize votes "Vote"}},
  submitted by {{author}},
  <a href="{{pathFor 'postPage'}}">{{pluralize commentsCount "comment"}}</a>
  {{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
</p>

//...

</template>
~~~
<%= caption "client/templates/posts/post_item.html" %>
<%= highlight "6, 8" %>

<%= screenshot "13-3", "Pluralizando" %>

<%= commit "13-3", "Añadida una función para pluralizar textos." %>

Ahora ya deberíamos ver "1 Vote".

### Un algoritmo de voto más inteligente

Nuestro código para el método `upvote` en `collections/posts.js` parece bueno, pero todavía podemos hacerlo mejor. En él, hacemos dos llamadas a Mongo: una para obtener el post y otra para actualizarlo.

Veamos como con esta aproximación, tenemos dos problemas. En primer lugar, es ineficaz consultar la base de datos dos veces. Pero lo más importante es que se introduce una condición de carrera. Estamos siguiendo el siguiente algoritmo:

1. Coger el post desde la base de datos.
2. Comprobar si el usuario lo ha votado.
3. Si no, añadir un voto.

¿Qué pasa si el mismo usuario vota el mismo post entre los pasos 1 y 3? Nuestro código abre la puerta al usuario a votar dos veces el mismo post. Afortunadamente, Mongo nos permite ser más inteligentes y combinar las consultas 1 y 3 en una sola:

~~~js
//...

Meteor.methods({
  post: function(postAttributes) {
    //...
  },

  upvote: function(postId) {
    check(this.userId, String);
    check(postId, String);

    var affected = Posts.update({
      _id: postId,
      upvoters: {$ne: this.userId}
    }, {
      $addToSet: {upvoters: this.userId},
      $inc: {votes: 1}
    });

    if (! affected)
      throw new Meteor.Error('invalid', "You weren't able to upvote that post");
  }
});

//...
~~~
<%= caption "collections/posts.js" %>
<%= highlight "12~21" %>

<%= commit "13-4", "Mejorado el algoritmo de voto." %>

Lo que estamos diciendo es "encuentra todos los posts con este `id` que todavía no hayan sido votados por este usuario, y actualízalos". Si el usuario aún no ha votado el post con esta `id`, lo encontrará, pero si ya lo ha hecho, la consulta no coincidirá con ningún documento, y por lo tanto no ocurrirá nada.

<% note do %>

### Compensación de la latencia

Digamos que tratas de engañarnos y pones uno de tus posts el primero de la lista ajustando su número de votos desde la consola del navegador:

~~~js
> Posts.update(postId, {$set: {votes: 10000}});
~~~
<%= caption "Consola del navegador" %>

(Donde `postId` es el id de uno de tus posts))

Este descarado intento de jugar con el sistema sería capturado por nuestro callback `deny()` (en `collections/posts.js`, ¿recuerdas?) e inmediatamente denegada.

Pero si miras detenidamente, podrás ver la compensación de latencia en acción. Puede ser rápido, pero el post saltará brevemente al principio de la lista antes de volver de nuevo a su posición.

¿Qué está pasando? En su colección de `Posts` locales, la actualización se ha aplicado sin incidentes. Esto sucede al instante, por lo que el mensaje se va al principio de la lista. Mientras tanto, en el servidor, se deniega la actualización, de forma que un poco más tarde (milisegundos si estás ejecutando Meteor en tu propia máquina), el servidor devuelve un error, obligando a la colección local a revertirse.

El resultado final: mientras esperamos a que el servidor responda, la interfaz de usuario no puede dejar de confiar en la colección local. Tan pronto como el servidor deniega la modificación, las interfaces de usuario se adaptan para reflejarlo.

<% end %>

### Posicionando los posts en la página principal

Ahora que disponemos de una puntuación para cada post en función del número de votos, vamos a mostrar una lista de los mejores. Para ello, vamos a ver cómo gestionamos dos suscripciones separadas contra la colección de posts, y, de paso hacer nuestra plantilla `postsList` un poco más general.

Para empezar, queremos tener _dos_ suscripciones, una para cada tipo de ordenación. El truco aquí es suscribirse a la misma publicación, ¡solo que con diferentes argumentos!.

También crearemos dos nuevas rutas denominadas `newPosts` y `bestPosts`, accesibles desde las direcciones `/new` y `/best` respectivamente (junto con `/new/5` y `/best/5` para la paginación, por supuesto).

Para ello, vamos a extender nuestro `PostsListController` en dos controladores distintos: `NewPostsListController` y `BestPostsListController`. Esto nos permitirá reutilizar las mismas opciones de ruta, tanto para las rutas `home` y `newPosts`, quedándonos un solo `NewPostsListController` del que heredar. Y, además, todo esto es una buena ilustración de lo flexible que puede ser Iron Router.

Vamos a reemplazar la propiedad de ordenación `{submitted: -1}` en `PostsListController` por `this.sort`, que será proporcionado por `NewPostsListController` y `BestPostsListController`:

~~~js
//...

PostsListController = RouteController.extend({
  template: 'postsList',
  increment: 5,
  postsLimit: function() {
    return parseInt(this.params.postsLimit) || this.increment;
  },
  findOptions: function() {
    return {sort: this.sort, limit: this.postsLimit()};
  },
  subscriptions: function() {
    this.postsSub = Meteor.subscribe('posts', this.findOptions());
  },
  posts: function() {
    return Posts.find({}, this.findOptions());
  },
  data: function() {
    var hasMore = this.posts().count() === this.postsLimit();
    return {
      posts: this.posts(),
      ready: this.postsSub.ready,
      nextPath: hasMore ? this.nextPath() : null
    };
  }
});

NewPostsController = PostsListController.extend({
  sort: {submitted: -1, _id: -1},
  nextPath: function() {
    return Router.routes.newPosts.path({postsLimit: this.postsLimit() + this.increment})
  }
});

BestPostsController = PostsListController.extend({
  sort: {votes: -1, submitted: -1, _id: -1},
  nextPath: function() {
    return Router.routes.bestPosts.path({postsLimit: this.postsLimit() + this.increment})
  }
});

Router.route('/', {
  name: 'home',
  controller: NewPostsController
});

Router.route('/new/:postsLimit?', {name: 'newPosts'});

Router.route('/best/:postsLimit?', {name: 'bestPosts'});
~~~
<%= caption "lib/router.js" %>
<%= highlight "10,23,27~55" %>

Ten en cuenta que ahora que tenemos más de una ruta, sacamos la lógica para `nextPath` de `PostsListController` y la ponemos en `NewPostsController` y `BestPostsController`, ya que el path será diferente en uno y otro caso.

Además, cuando ordenamos por votos, establecemos un segundo orden por fecha y por `_id` para garantizar que el orden está completamente especificado.

Una vez listos los nuevos controladores podemos deshacernos de la ruta anterior a `postsList`. Simplemente eliminamos el siguiente código:

```
 Router.route('/:postsLimit?', {
  name: 'postsList'
 })
```
<%= caption "lib/router.js" %>

Vamos a añadir los enlaces en la cabecera:

~~~html
<template name="header">
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="{{pathFor 'newPosts'}}">New</a>
        </li>
        <li>
          <a href="{{pathFor 'bestPosts'}}">Best</a>
        </li>
        {{#if currentUser}}
          <li>
            <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
          </li>
          <li class="dropdown">
            {{> notifications}}
          </li>
        {{/if}}
      </ul>
      <ul class="nav navbar-nav navbar-right">
        {{> loginButtons}}
      </ul>
    </div>
  </nav>
</template>
~~~
<%= caption "client/templates/includes/header.html" %>
<%= highlight "11, 15~20" %>

Finalmente, también necesitamos actualizar el controlador de eventos para borrar posts:

~~~html
  'click .delete': function(e) {
    e.preventDefault();

    if (confirm("Delete this post?")) {
      var currentPostId = this._id;
      Posts.remove(currentPostId);
      Router.go('home');
    }
  }
~~~
<%= caption "client/templates/posts/posts_edit.js" %>
<%= highlight "7" %>

Con todo listo, ahora obtenemos lista de posts mejorada:

<%= screenshot "13-4", "Posts ordenados" %>

<%= commit "13-5", "Añadidas rutas para las listas de posts y páginas para mostrarlas." %>

### Mejorando la cabecera

Ahora que tenemos dos listas, puede resultar difícil saber cuál de ellas estamos viendo. Así que vamos a revisar nuestra cabecera para que sea más evidente. Vamos a crear el gestor `header.js` y un ayudante auxiliar que use la ruta actual y una o más rutas con nombre para activar una clase en nuestros elementos de navegación:

La razón por la que queremos permitir varias rutas es que tanto la ruta `home` como la ruta `newPosts` (que se corresponden con las nuevas URLs `/` y `/new`) devuelven la misma plantilla, lo que significa que nuestro `activeRouteClass` debe ser lo suficientemente inteligente como para activar la etiqueta `<li>` en ambos casos.

~~~html
<template name="header">
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation">
      <ul class="nav navbar-nav">
        <li class="{{activeRouteClass 'home' 'newPosts'}}">
          <a href="{{pathFor 'newPosts'}}">New</a>
        </li>
        <li class="{{activeRouteClass  'bestPosts'}}">
          <a href="{{pathFor 'bestPosts'}}">Best</a>
        </li>
        {{#if currentUser}}
          <li class="{{activeRouteClass 'postSubmit'}}">
            <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
          </li>
          <li class="dropdown">
            {{> notifications}}
          </li>
        {{/if}}
      </ul>
      <ul class="nav navbar-nav navbar-right">
        {{> loginButtons}}
      </ul>
    </div>
  </nav>
</template>
~~~
<%= caption "client/templates/includes/header.html" %>
<%= highlight "14,17,21" %>

~~~js
Template.header.helpers({
  activeRouteClass: function(/* route names */) {
    var args = Array.prototype.slice.call(arguments, 0);
    args.pop();

    var active = _.any(args, function(name) {
      return Router.current() && Router.current().route.getName() === name
    });

    return active && 'active';
  }
});
~~~
<%= caption "client/templates/includes/header.js" %>

<%= screenshot "13-5", "Mostrando la página activa" %>

<% note do %>

### Argumentos de los ayudantes

Hasta ahora no hemos usado este modelo en concreto, pero al igual que para cualquier otro tag de Spacebars, los tags de los ayudantes de plantilla también pueden tomar argumentos.

Y aunque por supuesto, se pueden pasar argumentos específicos a la función, también se pueden pasar un número indeterminado de ellos y recuperarlos mediante una llamada al objeto `arguments` dentro de la función.

En este último caso, es probable que queramos convertir el objeto `arguments` a un array JavaScript y luego llamar a `pop()` sobre él para deshacernos del hash que añade Spacebars.

<% end %>

Para cada elemento, el ayudante `activeRouteClass` toma una lista de nombres de ruta, y luego utiliza el ayudante `any()` de Underscore para ver si las rutas pasan la prueba (es decir, que su correspondiente URL sea igual a la actual). Si cualquiera de las rutas se corresponde con la actual, `any()` devolverá `true`.

Por último, estamos aprovechando el patrón `boolean && myString` de JavaScript con el que `false && myString` devuelve `false`, pero los `true && myString` devuelve `myString`.

<%= commit "13-6", "Añadidas clases activas a la cabecera." %>

Ahora que los usuarios pueden votar en tiempo real, podemos ver cómo saltan los posts hacia arriba o abajo según cambia su clasificación. Pero ¿no sería más agradable si hubiera una manera de suavizar estos cambios con algunas animaciones?