Code Story : la sélection finale

Si vous me suivez sur twitter, vous savez sans doute déjà que Jeudi dernier (21/02) avait lieu la finale de Code Story. Je vais tenter de vous raconter comment s'est passée cette soirée haute en stress

Le lieu

Cette soirée s'est passée chez google à Paris. En tant que fanboy Google, ça suffisait déjà à faire de cette soirée une super soirée :)

Pour ceux qui ne connaissent pas les bureaux de Google, je peux vous dire un truc, c'est que ça fait envie. Pour vous faire baver, voici simplement la photo du "coin" fumeurs :

Le déroulement

Tout est expliqué sur le blog de Code Story, voici cependant un petit résumé. On avait des données avec pour chaque participant à Code Story, sa ville, trois trucs qu'il aime et deux trucs qu'il n'aime pas. Avec ça on devait construire un site internet from scratch permettant aux participants de connaître ceux avec qui ils ont des atomes crochus.

Notre participation

Les participants étaient par binômes pour ce concours. J'étais pour ma part avec Alexandre Ardhuin (@a14n).

Nous sommes arrivés les mains dans les poches sans rien avoir préparé (ce qui nous a sans doute fait défaut). La première étape a donc été de monter une stack Web et de publier ça pour que ce soit accessible sur Internet. Cette étape nous a pris à peu près 1 heure, à la moitié du temps nous avions donc un magnifique site web accessible sur Internet qui affichait "coucou"...

Pour afficher autre chose que "coucou", nous avons utilisé le framework Angular.js ce qui nous a permis d'afficher rapidement la liste des participants, le tout codé à l'arrache dans un seul fichier index.html

Alexandre est ensuite parti sur une présentation géographique des participants via Google Map, mais il n'a pas pu aller au bout à cause des quotas sur le geo-codage, dommage...

Je suis pour ma part parti sur le refactoring du code pour séparer Javascript, templates HTML et index.html afin de pouvoir mettre en place les routes Angular.js. Tout cela afin d'obtenir un lien par participant affichant les détails de celui-ci. Toutefois, je suis resté bloqué sur de la syntaxe Javascript pendant au moins 10 minutes :

angular.module('CodeStory');

différent de :

angular.module('CodeStory', []);

Dans le premiers cas, rien ne s'affiche, et l'erreur dans le console est : "Error: No module: CodeStory", en bref, un compilateur c'est pas si mal!

Ce refactoring m'a pris beaucoup de temps du coup (environ 20 minutes), et par conséquent il nous restait 25 minutes à peine pour faire la page de détail d'un participant. Nous avons mis environ 15 minutes à mettre en place une page affichant les personnes de la même ville, puis 7 minutes pour afficher les personnes ayant un "Like" en commun. Le "git push" permettant de déployer la dernière fonctionnalité a été fait sur le gong (heureusement qu'on avait un déploiement simplifié!).

Le code final est dispo sur github.

Le résultat

Une fois l'épreuve terminée, chaque binôme a eu 3 minutes pour présenter l'application aux jury. Nous sommes passés en premier, ce qui a permis de faire rapidement retomber le stress...

Au final c'est Xavier Hanin (@Xavierhanin) et Christophe Labouisse (@XtlCnslt) qui ont gagné, et nous avons été second. Un grand bravo à eux, et je leur donne rendez-vous à Devoxx France pour les voir en action :)

Nos erreurs

Notre première erreur a été de venir les mains dans les poches, il était prévisible que le Jury allait nous demander de coder une appli Web, si nous étions venus avec une stack Web prête à déployer, nous aurions gagné une heure...

N'ayant pas de stack web prête à déployer nous aurions dû partir sur un site directement hébergé sur github, n'ayant jamais utilisé le backend, cela aurait fait l'affaire, et nous aurions encore une fois gagné une heure...

Pour finir, voici :

• Ce que nous avons sorti à la fin du concours : http://serveur.ybonnel.fr:8080
• Ce que nous aurions pu sortir avec l'heure de gagnée : http://ybonnel.github.com/CodeStoryFinale

Pour les plus curieux le diff est dispo sur github

Si vous avez eu le courage de lire jusque là, vous aurez peut-être le courage de regarder la vidéo!