bugnplay explorer est une application web permettant d'explorer la bibliothèque de projets de bugnplay en appliquant différents filtres et en dressant des graphiques.

Problématique

bugnplay.ch donne accès à l'historique des projets de toutes les années depuis la première édition, mais d'une manière très sommaire. On ne peut parcourir les projets que par année et ordre alphabétique, en n'affichant éventuellement que les projets gagnants.

Solution

Une nouvelle librairie de projets bugnplay offrant davantage d'outils de filtrage et d'options d'affichage.

Étapes

La première étape était d'extraire les données utiles depuis le site bugnplay.ch. Cette opération est effectuée via un script PHP qui génère un condensé de tous les projets au format JSON.

Ces données sont ensuite augmentées de 2 manières:

• À l'aide de GeoNames la position géographique de chaque ville est relevée ce qui permet ensuite de facilement construire une carte
• La page des technologies de chaque projet est scannée à la recherche de noms de programmes courants afin d'offrire un filtrage par technologie

Cette première étape donne naissance à un premier programme: bugnplay-parser. Le code source est disponible sur GitHub.

La 2e étape était de créer une application permettant d'exploiter ces données. Étant spécialisé dans les techniques web je me suis donc tourné naturellement version une application HTML5 accessible en ligne.

Afin de faciliter le développement et de rendre possible la gestion de nombreuses options de filtrage, j'ai utilisé la librairie React créée par Facebook que j'utilise désormais dans la quasi-totalité de mes applications web.

Cette partie est nommée bugnplay-explorer et est également disponible sur mon profil GitHub.

Défis

La récupération des données des projets a causé quelques soucis. Tout d'abord le changement de gestion de minisite en 2014 impliquait que je doivent écrire deux scripts d'analyse différents.

Cette différence de miniside implique également une différence au niveau des informations disponibles: dès 2014 le lieux d'habitation des participants est disponible ce qui est pratique pour afficher les projets sur une carte. Mais malheureusement tous les projets de 2007 à 2013 n'ont pas cette information. L'application ne permet donc pas d'utiliser le mode "carte" avec ceux-ci.

J'ai eu un peu de mal à trouver les coordonnées goégraphiques des villes de Suisse. Je pensais que l'office des statistiques fournissait cette information mais ce n'est pas le cas. Ils recommandent sur le site le service GeoNames, c'est donc là-dessus que je me suis tourné.

Le projet est découpé en 2 composants: bugnplay-parser et bugnplay-explorer.

bugnplay-parser

bugnplay-parser est une application PHP utilisant le framework Laravel.

Les pages web sont récupérées avec la librairie Guzzle et anaysées avec le composant DomCrawler du framework Symfony.

bugnplay-explorer

bugnplay-explorer est une application HTML5 utilisant principalement la librairie React de Facebook.

Environnement

Les 2 composants ont été réalisés avec l'IDE NetBeans et les outils de développement Firefox sur un PC Ubuntu 14.04.

J'ai travaillé seul.

Tout le code source de mon projet a été écrit par moi-même.

Pour fonctionner, l'application utilise différentes sources de données (via le composant bugnplay-parser):

• La gallerie des projets 2007-2015 de bugnplay.ch
• La liste des NPA et des coordonnées géographique des localités de GeoNames

Le tracé vectoriel de la Suisse est basé sur les contributions d'OpenStreetMap.

Comme chaque année, j'avais beaucoup d'idées de projets pour bugnplay. Mais n'ayant quasiment aucun moment de libre à cause de la maturité professionnelle, j'ai dû abandonner mes grandes idées qui devenaient totalement irréalisables.

Mais comme je voulais tout de même participer cette année (qui est la dernière pour moi), je suis parti sur ce petit projet que je réaliserais en quelques jours durant la petite période de vacances qui précède la date de remise.

Le projet a été réalisé sur 3 jours, du 29 au 31 mars 2016:

• 29 mars: Création du script PHP pour récupérer les données sur le site bugnplay
• 30 mars: Perfectionnement du script PHP et début du programme Javascript pour traiter les données recueillies
• 31 mars: Fin de la logique Javascript et création de l'interface graphique, remise du projet

À coup de approximativement 12 heures par jour (ou plutôt nuit) cela fait un total de 36 heures de travail.