Apprenez-en plus sur le cancer, et de façon ludique, avec « Hygée » !

En 2013, le centre régional Hygée dédié à l’information, la prévention et l’éducation sur le cancer, a ouvert sur le site du centre hospitalier de Saint-Étienne (au sud-ouest de Lyon).

Afin de sensibiliser le jeune public à la maladie du cancer, le centre Hygée a demandé à Dowino de créer un jeu de quiz jouable sur tablettes. Suite à des projets réussis avec nous (le jeu audio 3D A blind legend, le jeu mobile Mission eau, le quiz Effia Synergies, …), Dowino a décidé de faire à nouveau appel à nous pour la partie développement du projet. Nous avons choisi d’utiliser Adobe Integrated Runtime (AIR) pour créer l’application.

Votre mission, si vous l’acceptez, est d’aider Hygée, la fille d’Asclépios, à parfaire ses connaissances en médecine (sur le cancer en fait) et ainsi accéder véritablement au rang de déesse !

Hygée, fille du dieu de la médecine dans la mythologie grecque

Le jeu

Comme je le disais, cette application mobile est un jeu de quiz mais avec un « aspect communautaire ». En effet, le jeu est conçu pour être joué par plusieurs personnes en même temps. Chaque bonne réponse ajoute des points à un score partagé par toutes les personnes jouant dans la même session. Il n’y a plus de compétition mais de l’entraide entre joueurs !

Une session de jeu dure environ une heure au sein de l’espace d’exposition, divisée en plusieurs thématiques. Pour répondre aux questions, les joueurs peuvent s’informer grâce à des médias (panneaux, vidéos, …). Les joueurs doivent porter une attention particulière à ces médias car les bonnes réponses rapportent moins de points après plusieurs erreurs.

Vous devinez sans doute que les questions portent sur le cancer : histoire de la maladie, dépistage du cancer, recherche, … L’hygiène de vie est un facteur déterminant dans le risque de cancer, alors mettez de côté la viande rouge, mangez vos légumes, allez courir un marathon et revenez lire la suite de cet article !

…

Vous avez fini vos légumes ? … Parfait !

Serveur web classique vs serveur web temps réel

Pour intégrer la dimension « communautaire » dans l’application, un serveur web est utilisé. Les tablettes utilisées par les joueurs communiquent avec le serveur via une simple communication client-serveur. Le serveur web héberge une base de données MySQL qui rassemble les informations sur les questions et réponses, la session de jeu en cours, la progression de chaque joueur (sous la forme d’un fichier texte JSON *), …

Nous avons rencontré une grande difficulté avec ce serveur web : devait-il être classique ou temps réel ? La principale différence entre les deux types est la suivante : un serveur web temps réel est informé de la survenue des événements qu’il écoute. Ainsi, il n’a pas besoin de vérifier périodiquement les modifications.

Avec un serveur temps réel, il est facile de prévenir les joueurs qu’une session a commencé / s’est terminée ou de mettre à jour le score global sur chaque tablette. Mais cela demande beaucoup plus de travail (et de temps) pour construire un tel serveur. En revanche, l’architecture est plus propre et plus maintenable et vous n’avez pas à faire de requêtes inutiles toutes les 2 secondes.

Finalement, nous avons décidé de conserver un serveur web simple basé sur des technologies traditionnelles : Apache, PHP, MySQL, … et AmfPHP, un logiciel libre et open source qui offre un moyen vraiment simple de connecter un client à un serveur, particulièrement utile en Flash pour récupérer des données depuis la base de données.

* Pourquoi diable utiliser un fichier JSON pour stocker des données plutôt que la base de données ? Eh bien, je n’étais pas non plus fan de cette solution, mais comme le client n’était pas sûr de ses besoins concernant le suivi de la progression des joueurs, nous devions rester flexibles, et le fichier JSON était la solution la plus rapide comparée à la modification de la base de données.

BackOffice

Utiliser le serveur web uniquement pour laisser les joueurs communiquer indirectement entre eux n’aurait pas été très malin. En effet, une grande partie des informations stockées dans la base de données peut être exploitée depuis un site web accessible aux utilisateurs autorisés.

Cette interface web permet à l’animateur de démarrer et arrêter une session, et aux administrateurs d’obtenir des statistiques sur les sessions passées : score individuel et global, nombre de tentatives par question, « stations » complétées (ensemble de questions sur un même sujet), … Il est également possible de modifier les questions et d’éditer un lexique, accessible aux joueurs à tout moment pour obtenir la définition de mots compliqués qu’ils pourraient rencontrer.

Pour créer le back office avec une architecture propre et éviter de tout faire à partir de zéro, j’ai utilisé CRUD Admin Generator, un outil open source permettant de générer un backend complet à partir d’une base de données MySQL, réalisé par Jon Segador. Le site généré grâce à cet outil utilise le micro-framework PHP SILEX. Il repose sur les épaules de Symfony2 et de Pimple, et s’inspire également de sinatra. Fabien Potencier, le créateur du framework Symfony, et Igor Wiedler sont derrière ce framework (Cocorico !). Pour l’aspect visuel du site, Twitter Bootstrap a été utilisé ainsi que la police d’icônes FontAwesome ♥.

Le framework est assez simple à utiliser avec le design pattern MVC (Twig ♥), mais le CRUD Admin Generator manque cruellement de documentation et de commentaires dans le code ! Heureusement, il me restait quelques souvenirs de Symfony et j’ai réussi à adapter le site généré aux besoins du client.

L’un des outils que j’ai le plus utilisé est Datatables, un plugin pour la bibliothèque Javascript jQuery. Gratuit et open source, il ajoute des contrôles d’interaction avancés à n’importe quel tableau HTML : tri, pagination, recherche, … Vous pouvez facilement récupérer des données via une requête AJAX (Asynchronous JavaScript and XML), filtrer et/ou modifier les données récupérées, ajouter des callbacks lorsqu’une ligne / cellule / en-tête / pied de page est dessiné, …

Déploiement

Une partie délicate du projet fut le déploiement. Le serveur qui héberge le serveur web ne doit avoir aucun accès à internet. Pour cela, il suffit de changer l’adresse IP du serveur pour une adresse non routée. Après avoir copié les fichiers sur leur serveur et effectué quelques réglages, j’ai dû aider le directeur informatique à configurer les derniers points.

Le directeur informatique et moi avons buté sur un problème de connexion à la base de données. Le serveur du client utilisait pour « émuler » le serveur (le temps pressait !). Nous pensions que XAMPP essayait d’utiliser la configuration internet définie lors de son installation (donc l’adresse IP routée) et, puisque l’adresse IP avait été changée, MySQL ne pouvait plus accéder à la base de données.

Finalement, le problème se résumait à une simple ligne à changer dans les paramètres de connexion :

'db' => array(
   'driver'   => 'pdo_mysql',
   'dbname'   => '<database_name>',
   'host'     => '<ip_address>', // replaced from 127.0.0.1 to local ip address on the network
   'user'     => '<user_name>',
   'password' => '<password>',
   'charset'  => 'utf8',
 ),

Retrouvez plus d’informations sur notre site : https://davikingcode.com/fr/projets/hygee