Web agency Octave & Octave

Application de "questionnaire live" multi device- Socket.io / NodeJS / HTML5 / CSS3

Publié par Victor Coulon
 
 

Une décision à prendre, lors d’un meeting de 20 personnes, ça parait compliqué, c’est vite le brouhaha, on ne s’entend plus. Comment, avec un système de vote simple et ludique, permettre facilement de recueillir l’avis, de plusieurs personnes simultanément?

Nous avons conçu un prototype de “webapp” qui permet de répondre à une série de questions depuis un iPad, et d'afficher les statistiques des réponses données sur un écran tierce (écran d’ordinateur video-projeté par exemple). Ce prototype utilise exclusiement des technologies web : JavaScript / HTML5 / CSS3 / websocket (via socket.IO) / SVG (via raphaëlJS) / NodeJS

Réalisation:

Notre application se compose de 3 modules distincts

  • le serveur, en charge de la syncronisation des données
  • un client "retransmission" (les statistiques)
  • une webapp “iPad” (pouvant être lancer sur plusieurs tablette en même temps)

Le coté serveur, est fait avec NodeJS, qui, pour rappel est un serveur basé sur le moteur javascript V8 et qui permet de développer des applications web en Javascript.

Les 2 modules “client iPad” sont réalisés en HTML5/CSS3 et communiquent avec le serveur via la technologie websocket. Pour implémenter ces websockets nous avons utilisé la library socket.io aussi bien coté client que coté serveur.

L’affichage des statisques est réalisé en SVG grâce au framework RaphaëlJS.

Ainsi, les différents choix de réponse sont proposés à l’utilisateur sur son iPad, et lors de la validation d'une réponses, la webapp mobile envoi un message au serveur qui se chargera de la transmettre au “client de retransmission”.

Ils nous ai donc permis de valider, sur un nombre indéfini de tablettes, une réponse à une question et de voir les résultats s'animer en temps réel sur l'écran de retransmission.