A l'agence, il arrive souvent que l'on fasse des votes à mains levées pour savoir :

  • Quel pôle a présenté le meilleur lien de la semaine ?
  • Où est-ce qu'on mange à midi ?
  • Qui est le meilleur à Counter Strike ?

Mais voter à mains levées, ce n'est pas simple... surtout lorsqu'il y a du monde (et c'est souvent le cas), sans compter ceux qui votent plusieurs fois, d'où l'idée de pollday.

Pollday est une application web, open source, permettant de créer rapidement un sondage à question unique et d'y participer via un ordinateur, tablette ou téléphone.

Nous voulions que cette application soit la plus simple d'utilisation possible, c'est pourquoi elle ne nécéssite ni inscription ni authentification.

Tout le monde peut créer et participer. Et bien sûr, il n'est (presque) pas possible de voter plusieurs fois sur un même sondage.

Temps réel

L'application doit faire face à plusieurs problématiques :

  • Si plusieurs personnes sont en même temps sur l'application, qui a le droit de créer un sondage ? C'est celui qui crée le premier. Les utilisateurs présents sur l'application (nous allons les appeler "utilisateurs connectés") doivent donc en être informés en temps réel et ne doivent plus pouvoir créer un autre sondage.
  • Une fois qu'un sondage est lancé, les utilisateurs connectés doivent pouvoir participer au sondage sans avoir à recharger la page.
  • Une fois le sondage terminé, les utilisateurs connectés voient le resultat sans avoir à recharger la page.
  • A la fin du processus, tout le monde doit pouvoir créer de nouveau un sondage.

En Images

Imgur Imgur Imgur Imgur

Structure de l'application

L'application est composée d'une partie serveur et d'une partie client.

Le serveur

Nous avons utilisé nodeJS combiné avec socketIO pour la gestion du temps réél. Pour automatiser les tâches courantes (par exemple lancer les tests) nous utilisons GruntJs.

Tests

Pour le moment nous avons écrit une trentaine de tests unitaires assurant ainsi une bonne converture du coté serveur.

Nous avons utilisé :

  • mocha pour écrire nos tests.
  • sinon.js pour espionner et simuler les appels.
  • chaijs pour écrire nos assertions.
  • travis-ci pour lancer nos tests à chaque commit.

Travis permet d'afficher le statut de nos tests sous forme d'un png, comme ceci : Build Status

Installer tout cela dans votre projet :

npm install sinon mocha chai grunt-mocha-test --save-dev

Puis configurer mocha dans votre Gruntfile :

mochaTest: {
  test: {
    options: {
      reporter: 'spec'
    },
    src: ['test/**/*.js']
  }
}

Mocha nous génere ensuite un joli rapport de tests :

Poll
  #answer
  ✓ should save user answer
  ✓ should accept only one vote by user
  ✓ should reject author vote
  ✓ should reject user answer if answerIndex is invalid
  ✓ should reject user vote is the poll is not active

Un exemple de test écrit en mocha :

describe('#onNewPoll', function () {

  it('should update current poll', function () {
    server.onNewPoll(user1, pollDatas);
    assert.equal(server.currentPoll.title, pollDatas.title);
    assert.equal(server.currentPoll.choices, pollDatas.choices);
  });

  it('should broadcast new poll and update status', function () {
    server.onNewPoll(user1, pollDatas);

    assert.isTrue(server.io.sockets.emit.calledWith('status', server.STATUS_POLL_IN_PROGRESS), 'new status is broadcasted');
    assert.isTrue(user1.socket.broadcast.emit.calledWith('newPoll'), 'new poll is broadcasted');

  });

});

Pour avoir plus de détails sur l'application serveur, vous pouvez y accéder en allant sur notre dépôt github https://github.com/LaNetscouade/pollday/tree/master

Le client

Coté client nous utilisons :

  • AngularJs
  • socketIO pour la communication en temps réel avec le serveur
  • coffeescript.
  • Bootstrap 3 en version SASS
  • Yeoman + Grunt
  • Karma + Mocha + Chai + Sinon pour les tests
  • fingerprintJS pour rendre unique chaque utilisateur

Dépôt github

Réfs :