Hackathon : Gazauto, un outil de sensibilisation au GNV

Station service en pleine montagne

Dans le cadre du Hackathon “Armor Hack” de Saint-Brieuc, un petit site pratique sensibilisant à l’utilisation du Gaz Naturel pour Véhicules a été réalisé. L’événement s’est déroulé les 18 et 19 octobre 2018.

Le Gaz Naturel pour Véhicules, un carburant trop peu connu

Avec 11 participants, pour trois équipes, je me suis retrouvé en collaboration avec mes camarades de formation Sabrina Reynaud et Samuel Rypko. Les projets devaient tourner autour de l’énergie. Après un petit temps de réflexion, nous avons décidé de nous orienter vers le Gaz Naturel pour Véhicules (GNV), carburant automobile encore méconnu.
L’idée était de mettre en avant les avantages du GNV, principalement à l’aide d’un petit outil en ligne simple mais efficace : un comparateur. Moins cher, moins polluant, pas plus dangereux qu’un autre carburant, le GNV présente de sérieux atouts face aux carburants fossiles classiques.

Nous avons d’abord pensé à un outil permettant aux utilisateurs de faire un suivi régulier de leur consommation de carburant. Ils se seraient inscrits, et auraient eu à rentrer leurs dépenses et distances parcourues régulièrement afin d’affiner leur suivi. Ils auraient pu ainsi voir les économies réalisables en roulant au Gaz Naturel pour Véhicules.
Après réflexion et vu le temps imparti, nous avons opté pour une approche plus simple. Un outil permettant de faire directement et en toute simplicité un test sur un exemple de consommation.
Nous avons habilement nommé ce chef-d’œuvre du web Gazauto.

Le travail d’équipe, c’est la vie

Une photo de l'équipe (enfin une partie).
Concentrons-nous sur le premier plan. Au centre, en train de se bouffer les doigts, c’est moi. Le type de gauche avec un pull de compèt, c’est Samuel. Et à droite, non, ce n’est pas Sabrina.

Un développeur, Sabrina, et deux Web Designer, Samuel et moi.
Le premier jour, après avoir pensé le projet dans les grandes lignes, l’après-midi sonnait l’heure de l’action. Pendant que mes collègues réfléchissaient à toutes les possibilités, à coup de prototypes et de maquettes, je me suis remis au code. D’ailleurs, merci à eux pour la récolte d’infos, à Sabrina pour ses protos et à Sam pour son logo !

Javascript, ça commençait à faire longtemps, il a fallu réviser un poil… Donc c’est reparti : on ressort ses cours et OpenClassrooms de ses vieux marques-pages.
En fait, l’idée était de faire un petit code simple, puis d’éventuellement l’intégrer dans un bloc de code sur un WordPress. Et pourquoi pas mettre le tout en ligne si on est dans les temps ?

Une photo de l'équipe, au complet cette fois.
Ah voilà : Sabrina est de retour, et tout sourire bien sûr ! (Et moi je me bouffe toujours les doigts, et Sam se tient toujours la tête bien sûr. Chacun son pattern 😉 ).

Codage dans le gaz

Test de formulaire avant intégration.Après quelques révisions, j’ai codé un petit formulaire test. Un fichier html lié à un autre en JS… qui ne marchait pas. Après trois plombes à chercher l’erreur et à tout tourner dans tous les sens (je n’était pas sûr de mon code), il s’est avéré qu’il y avait juste une majuscule en trop. En fait tout était bon depuis le début.
Un classique.

En revanche, il s’agit d’un code très simple, utilisant des valeurs approximatives. Elles sont cependant assez précises pour donner une bonne idée des économies réalisables en roulant au GNV.

Code javascript du comparateur de carburant.
Un code simple : les valeurs saisies par l’utilisateur sont récupérées, les calculs sont faits, et les résultats s’affichent sur la même page.

Un peu de jQuery a été rajouté, pour l’affichage des résultats. D’ailleurs, en fonction du carburant sélectionné, des informations sur les réductions d’émissions de gaz à effet de serre sont affichées à la suite.
Ces chiffres devraient être affinés, et les valeurs moyennes des carburants automatisées. Mais ici, il s’agissait avant tout de présenter un outil basique simple et efficace.

La mise en ligne, le petit plus sympathique

Vendredi matin, deuxième round ! Après avoir trouvé l’erreur dans le code (merci à Benoît le bon samaritain), place à la mise en ligne !
Un sous domaine sur mon hébergement perso, un WordPress et Divi : tiercé gagnant en 10 minutes chrono. Quelques difficultés cependant pour le code : la façon de sélectionner les valeurs du formulaire ne plaisait pas à Divi. Il a suffit de rajouter une classe au formulaire et c’était réglé, mais j’ai mis un petit moment à trouver (le code fonctionnait très bien sur une simple page html).

Page d'accueil du site Gazauto.
On rentre quelques infos, et un clic plus tard on a un petit topo sur la conduite au GNV.

Merci à mes collègues, qui se sont chargés d’embellir le site, et pas que !
Sabrina a créé une page incluant une iframe des stations GNV en France.
Samuel a rajouté une page FAQ classe et efficace.
Bref, à nous trois on a fait un petit site sympa en quelques heures. Ce n’était pas essentiel de le mettre en ligne, mais ça nous a donné de l’énergie et de l’assurance pour la présentation !

L'équipe lors de sa présentation finale.
16h30, la Dream Team est dans la place 🙂

Gazauto est sur un sous domaine personnel, ce qui n’est pas forcément très classe. Mais il restera quand même en ligne encore un petit moment.

Merci également à Antony Auffret des petits débrouillards et Sébastien Drouin pour les photos.