Coding Dojo #2 de Bordeaux

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


Vous avez trouvé cette publication utile? Cliquer sur
Ippon
Ippon est un cabinet de conseil en technologies, créé en 2002 par un sportif de Haut Niveau et un polytechnicien, avec pour ambition de devenir leader sur les solutions Digitales, Cloud et BigData.

Ippon accompagne les entreprises dans le développement et la transformation de leur système d’information avec des applications performantes et des solutions robustes.

Ippon propose une offre de services à 360° pour répondre à l’ensemble des besoins en innovation technologique : Conseil, Design, Développement, Hébergement et Formation.

Nous avons réalisé, en 2016, un chiffre d’affaires de 24 M€ en croissance organique de 20%. Nous sommes aujourd’hui un groupe international riche de plus de 300 consultants répartis en France, aux USA, en Australie et au Maroc.
FRANCE Website LinkedIn