Retour d’expérience sur le développement du réseau social Kawagoo

Concentré du Web | 24 Commentaires | Thursday 19 June 2014

Un article un peu inhabituel aujourd’hui, on va parler du retour sur expérience de l’agence Idéematic avec laquelle je collabore régulièrement et qui vient de terminer le développement du réseau social Kawagoo pour la société du même nom.

À travers cette expérience, cet article a trois principaux objectifs :

  • parler de la gestion de projet (l’équipe, le planning,…)
  • parler des technologies utilisées pour un réseau social (les choix et pourquoi)
  • parler du web design

Le principe de Kawagoo

Pour démarrer, expliquons brièvement ce qu’est Kawagoo.
Tout d’abord Kawagoo c’est le premier réseau social 100% droit à l’oubli et dont les données sont supprimées au fur et à mesure des semaines et cela, pour tous les types de contenus : photos, vidéos, textes, liens, etc

Par ailleurs, à la fois application mobile et application web, Kawagoo se démarque des autres réseaux sociaux en mêlant virtualité et réalité. Il se base en effet côté réalité, sur des Pancartes (appelées « Kawapancartes ») situées chez les commerçants partenaires, tous autant variés les uns que les autres. Sur chaque « KawaPancarte » se trouve un QRCode unique que l’on peut flasher avec l’application mobile Kawagoo et qui permet alors de se connecter au Live associé à cette pancarte. A partir de là, on voit toutes les autres personnes ayant flashé la même KawaPancarte que soi et avec qui on peut communiquer sur le Live par un tchat public et une messagerie instantanée.

Mais bien sûr, ce live ainsi que d’autres sont également accessibles depuis l’application web, ça c’est pour le côté virtualité.

Kawapancarte positionnée chez chaque commerçant.

L’organisation du projet

Combien de personnes ont travaillé sur ce projet ?
Gregory: L’équipe a été composée de 6 personnes : un directeur artistique, un directeur technique, 3 développeurs, un administrateur serveur et un directeur de projet.

Comment c’est passé la mise en place du projet ?
Gregory: Le projet Kawagoo s’est étalé sur pratiquement 1 année.

Comme tout projet, gros et petits, la première phase est capitale : l’expression des besoins. Le client arrive avec ses idées, un premier cahier des charges mais il faut l’accompagner pour approfondir ses besoins dans les moindres détails. Et c’est sur cette somme de détails que l’on va faire ensuite des choix déterminants.

L’expression des besoins permet de savoir non seulement où on va mais de définir ensuite comment on y va, avec qui, pendant combien de temps et pour quel budget. Donc l’expression des besoins, nous l’avons faite main dans la main avec le client et nous avons rédigé ensemble un cahier des charges très précis. On l’aide à s’exprimer et on organise soigneusement tous les éléments constitutifs du projet.

Comment ave vous organiser la réalisation du projet ?
Grégory: Dans un premier temps nous avons travaillé sur les maquettes pour avoir une vision claire sur l’ergonomie et la mise en place des fonctionnalités. Ensuite en collaboration avec Michael et Paul, nous avons définit quelles technologies nous allions utiliser et nous avons découpé l’ensemble du projet de développement en tâches. Chaque tâche correspond à un cas d’utilisation spécifique. Chaque tâche résolue est donc une fonctionnalité développée. Nous avons suivi le même type d’organisation pour la création du web design d’ailleurs. La création du web design s’est déroulée en amont mais beaucoup d’ajustement se sont faits en parallèle.

Quels outils as-tu utilisé pour la gestion et surtout le suivi ?
Grégory: Il est primordial de se munir d’un outil efficace pour organiser et suivre le projet. C’est important pour le chef de projet mais aussi pour les développeurs et évidemment le client. Il existe sur le marché de nombreux outils et nous en avions étudié un certain nombre.
Dans notre cas nous utilisons Redmine. C’est une application web Open source développée avec Ruby on Rails.

Elle est vraiment très simple d’utilisation et s’articule parfaitement à une méthodologie Agile. Elle permet aussi une visualisation du projet sous la forme d’un diagramme de Gantt, même si à ce niveau là ce n’est pas son point fort. La cerise sur le gâteau c’est que comme c’est bien développé puisqu’avec Rails, il est relativement simple de lui développer ses propres fonctionnalités.

Quelles ont été les difficultés rencontrées dans la gestion du projet ?
Grégory: Si l’expression des besoins et bien réalisée et que le projet est rigoureusement découpé, la gestion s’en retrouve simplifiée car on sait où on va, comment on y va et avec qui. Donc le principale écueil reste la gestions de l’humain. Que se soit l’équipe qui rencontre des difficultés ou le client qui a identifié de nouveaux besoins dont on doit tenir compte et auxquels on doit s’adapter. L’humain est bien souvent « imprévisible » et c’est en partie ce qui en fait sa richesse. Cela implique par contre de bien cadrer les actions de chacun.

Comment s’est organisée la collaboration de plusieurs développeurs sur un même projet ?

Grégory : L’ensemble du code est géré par le gestionnaire de code source Git. Cela permet à chaque développeur de travailler en local et en parallèle des autres. Dans notre méthodologie de développement, le processus de déploiement suit 3 environnements : « Staging » (pour les tests en interne), « Recipe » (pour les test avec le client) et production.

De quelle manière est gérée la qualité du code ?
Grégory : En fait, toute la chaine de production prévoit des test unitaires. Nous utilisons Rspec pour cela. Il est capital de vérifier tous les scénarios de l’application. Avant la mise à disposition de son code sur le dépôt Git, le développeur doit lancer le suite de tests unitaires. C’est là qu’il se rend compte s’il y a un soucis ou non.
Une fois que chaque développeur a poussé son code, on déploie sur l’environnement de « recipe » avec l‘outil Capistrano.

Les tests se font donc uniquement de manière unitaire ?
Grégory : Malheureusement non, nous passons énormément de temps à tester manuellement l’ensemble des fonctionnalités correspondant à tous les cas d’utilisations possibles. Cela permet de débusquer des bugs parfois un peu tordus…

Mais quand le site est en production, que se passe-t-il s’il y a un bug ?
Grégory : Tout d’abord des bugs il peut potentiellement toujours y en avoir. L’important est d’en être informé pour pouvoir très rapidement y répondre.
Donc en cas de bug bloquant ou invisible pour l’utilisateur, nous en sommes immédiatement et automatiquement notifiés par email. Un ticket est ouvert dans Redmine et nous traitons l’anomalie. Quand la correction de l’anomalie est déployée en production, le ticket est automatiquement refermé.

Les fonctionnalités et les technologies utilisées

Quelles sont les technologies utilisées ?
Grégory : D’un point de vue technique, Kawagoo est un pur concentré de nouvelles technologies. Le socle général est une application utilisant Ruby On Rails. Ce framework écrit en Ruby donc, est très utilisé dans les développements de cet ordre car il offre une simplicité de manipulation permettant à l’équipe de développement de se concentrer sur les fonctionnalités à mettre en place et non plus sur la manière de faire. De plus, Ruby On Rails embarque des scénarios de tests garantissant la non-régression du code et assure une bonne qualité de service. Les tests sont lancés uniquement sur les parties modèle et contrôleurs.
Les échanges sur les lives ou sur les messageries instantanées se basent sur un service node.js qui assure la livraison du bon message à la bonne personne.

Vue du live Strasbourg sur le site web

Mais Kawagoo c’est une application web et une application mobile, comment fais tu communiquer ces 2 applications ?
Gregory : Kawagoo, c’est une version mobile et une version web qui se complètent tout en offrant des services différents. Le principe est d’articuler l’ensemble des contenus autour des lives et donc des tchats. L’application Ruby On
Rails sert d’API REST pour l’interface web et pour les applications mobiles. Tous les échanges de données se font par JSON.

L’originalité de l’interface web, est qu’elle repose sur une application MVC, cette fois-ci côté client, supportée par Backbone.JS. L’intérêt d’utiliser cette technologie est de retrouver tous les fondamentaux des architectures utilisant le design pattern MVC. Backbone.JS s’interface parfaitement à une API REST issue de Ruby On Rails.

En utilisant CoffeeScript et le couple HAML/SASS, les temps de développements sont considérablement réduits et la maintenabilité du code est renforcée.

Les flux des échanges sont standardisés, ce qui fait que si une personne vous écrit depuis l’interface web, vous en serez notifiés par un push sur votre mobile !

Niveau Sécurité et vie privée ça se passe comment ?
Grégory : en effet, le réseau Kawagoo tient à cœur le respect de la vie privée et la protection des données personnelles. Tous les messages publiés sur les Lives sont automatiquement et définitivement supprimés au bout de quelques semaines.

Enfin, dans son respect du droit à l’oubli, Kawagoo propose une suppression progressive des contenus au fur et à mesure des semaines. Et si un membre souhaite se désabonner du réseau, alors toutes ses données sont totalement et définitivement supprimées.

Cela implique quoi précisément d’effacer des données qui peuvent avoir une relation entre elles ?
Grégory : eh bien tout d’abord quand on parle d’effacer, on parle bien de supprimer, et pas simplement de rendre inaccessibles les contenus. Du coup la difficulté est toute la gestion d’intégrité des contenus. Par exemple si TOTO supprime son compte, que devient le commentaire qu’il a laissé quelque part sur une photo de TITI ? ou que devient la photo de TATA posté dans une discussion privée avec TONTON et que celui-ci a archivé dans ses favoris ? Voilà quelques cas d’utilisations que nous avons dû résoudre « simplement » pour permettre à l’utilisateur de se désabonner vraiment s’il le souhaite.

Qu’en est-il de la confidentialité ?
Grégory : Un réseau social n’est rien si la confidentialité des échanges n’est pas sécurisée. Tous les échanges sont cryptés entre l’API REST et les interfaces utilisateurs.

L’identité visuelle et le web design

Comment avez vous travailler l’ergonomie
Grégory : il ne faut pas oublier que les choix se construisent en fonction de l’expression des besoins du client. En l’occurrence, Kawagoo voulait se démarquer de nombreux réseaux sociaux en proposant un univers très épuré et doux pour l’oeil. L’approche ergonomique a été très importante. Nous avons travaillé pendant plusieurs semaines rien que sur l’ergonomie (Zoning, Wireframes, etc…).

Quels sont les petites originalités du web design.
Grégory : outre son ergonomie, on peut parler également de ses couleurs. On a des fonds très sobres avec des contenus mis en reliefs par des contours de couleurs parfois vifs. Je considère que le web design est vraiment l’écrin de ses contenus.
Nous y pensons constamment dans notre réflexion.

A propos de contenus, il y a un aspect que j’ai trouvé très amusant, c’est concept de la photo de profil en fonction de son humeur
Grégory : oui c’est vrai :) la particularité est de pouvoir associer une photo pour chacune des 6 humeurs possibles.

exemple de vue des humeurs d’une membre

Conclusion

merci Grégory pour ton témoignage. Tout le monde peut s’inscrire Kawagoo à donc ? on peut à présent aller tester ce projet par nous même ?
Grégory : Grégory : oui le lancement s’est fait à Strasbourg ce mois-ci mais rien n’empêche d’accéder au site depuis n’importe quel endroit du monde !

Le réseau social Kawagoo : www.kawagoo.com

Annexe

Pour finir, je vous propose quelques petites captures écran

Un live en version web et mobile

vue de la map géolocalisant l’utilisateur et l’ensemble des commerçants autour de lui possédant une kawapancarte.

Quelques liens utiles

Pour en savoir plus sur les technologies utilisées :

Redmine : Outil de gestion de projets.
Git : Gestionnaire de source.
Ruby on Rails : Framework écrit en Ruby
Rspec : utilisé pour les tests unitaires
Capistrano : Outil de déploiement.
Node Js : utilisé pour exécuter du javasript côté serveur.
Backbone Js : Framework Javascript architecturé en MVC.
Outils de gestion de projets : étude de quelques outils de gestion de projets disponibles.