Lundi 20 Janvier, le deuxième Coding Dojo de Bordeaux a eu lieu. En voici le bilan.

Objectif de la journée

Le coding Dojo bordelais a pour but le développement d’une application web et mobile de consommation locale (circuits courts). Celui-ci s’intègre aux projets de développement durable initiés par le conseil général de Gironde et la CUB (Communauté Urbaine de Bordeaux) : http://www.datalocale.fr/drupal7/blog/concours-derniere-ligne-droite

A partir d’une carte, l’utilisateur pourra visualiser les producteurs effectuant de la vente directe, les marchés ou les magasins vendant des produits locaux, et ceci autour de sa position ou par une recherche localisée ou typée (fruits, légumes, viande, …).

Cette deuxième journée a été orientée sur le développement de chaque composant et leur intégration.

Déroulement du Coding Dojo

Après un petit déjeuner copieux, les binômes ont été formés autour de 5 ateliers :

• Boostrap
• AngularJS
• Node.js
• MongoDB
• OpenStreetMap

Responsive design

Le binôme avait pour but de créer les templates CSS Bootstrap pour coller à la charte graphique Ippon.

Au début, il a utilisé la page de customisation de Bootstrap. Cela prend pas mal de temps, car à chaque champ proposé, il faut regarder dans la doc à quoi cela correspond au niveau des items Bootstrap. Une fois le zip téléchargé, il s’avère que celui-ci ne contenait pas tous les devices (@media) mais seulement celui à partir duquel nous avions customisé les CSS… Etrange. Tous les javascripts normalement inclus dans Boostrap n’étaient pas non plus présents (JQuery, les plugins, …).

Le zip Bootstrap de base a donc été re-téléchargé et la charte a été modifiée dans les CSS à la main, au fur et à mesure de l’intégration des items. Fastidieux…

En conclusion, un temps considérable a été perdu sur Bootstrap pour le customiser à la charte voulue.

Framework MVC

Le binôme devait intégrer AngularJS, faisant le pont entre les pages HTML et le serveur Node.js.

Les différentes pages de l’application ont été créées, avec les tags AngularJS pour remplir des formulaires et gérer les onglets (les menus).

Des problèmes sont apparus dès le début de la journée, lorsque le binôme a voulu mettre à jour la version Angular utilisée, de 1.0.8 vers 1.2.9 : le module “route” a été déplacé en 1.2.9, et en le rajoutant ils n’avait pas fermé la balise javascript (balise autofermante au lieu d’une balise ouvrante et fermante). Ils ont passé pas mal de temps à trouver ce petit problème bien embêtant ! 🙂

Ensuite, dans la déclaration des controlleurs, il faut bien faire attention à mettre les paramètres dans le même ordre ! Encore pas mal de temps perdu sur ce bête problème.

producerControllers.controller(‘AddProducerController’, [‘$scope’, ‘$http’, ‘$routeParams’, ‘$location’,

function($scope,  $http, $routeParams, $location) {

Au final les pages fonctionnent mais n’ont pas eu le temps d’utiliser complètement les objets Bootstrap par manque de temps.

Base de données

Le binôme a installé MongoDB sur la VM et fait la conception du schéma. Le plus long a ensuite été d’importer les données depuis les différentes sources, qui ont des formats différents… Du JSON, du kml, du GPX…

Au début, ils ont voulu utiliser du Java pour transformer ces inputs en JSON et les insérer en base. Puis ils se sont dit que, quitte à faire un module de transformation, autant qu’il soit indépendant et réutilisable par la suite pour importer des fichiers de nouvelles données.

Ils ont donc fait cela en pur Javascript, intégré à Node.js

Les fichiers GPX et JSON ont été importés. Reste à faire le même travail pour le fichier KML.

Au final, la base est installée, le schéma est créé, et une partie des données est importée.

Serveur

Le binôme a été chargé d’installer Node.js et de créer les services vers MongoDB.

Il a tout d’abord étudié le projet “Mean” qui semblait être prometteur car utilisant toute notre Stack : Node.js, Angular, MongoDB. Mais finalement celui-ci contient trop de choses et ils sont partis sur du Node.js pur.

Tous les services de CRUD ont été développés, il reste à faire le service de recherche qui attendait les données dans MongoDB.

Cartographie

Le binôme a intégré OpenStreetMap à l’application. Il a repris ce qui avait été fait au premier coding dojo et l’a adapté pour AngularJS, et avec les jolis markers fait par notre graphiste préférée !

Il a aussi ajouté le partage de la localisation du navigateur pour centrer la carte.

Au final la carte fonctionne mais il lui manque les données venant de la base.

Conclusion

En conclusion, ce deuxième jour n’a pas permis de finaliser l’application. On s’est rendu compte un peu tard que toutes les parties étaient très dépendantes les unes des autres et que ce n’était pas si facile que ça de le gérer. Avec le recul, il aurait fallu une personne prenant le rôle de scrum master et gérant tous les conflits entre groupes (qui fait quoi, quelles interfaces, quels protocoles, …). Car même si un briefing avait été fait le matin, tout n’était pas assez clair et des rappels tout au long de la journée auraient été bénéfiques.

Le prochain Coding Dojo permettra de finaliser le site et de développer les applications mobiles s’y connectant.

POC du Coding Dojo : https://github.com/mleneveut/eat-local