Retour d’expérience sur Kawagoo

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.


29 Commentaires

44553
lostemirage, 03-12-2014 12:25:45 - Répondre

nice, mer30. thanks ...
http://flashkhor.com/shop/shape-wear-form-easy-casmara/

9316e244ac77c334fd2b2bccd88dd20e?s=200&r=pg&d=mm
mlk_5, 11-11-2014 03:06:00 - Répondre

Quelle horreur..

D2afde4a7ef86545ef3795bbf6c61d4d?s=200&r=pg&d=mm
yassou200121, 10-11-2014 17:48:52 - Répondre

<p>test de la faille XSS</p><a href="http://yassou.esy.es"> ICI</a>

De176d557cea872bee419e8fc9a9c780?s=200&r=pg&d=mm
Elitedz, 01-11-2014 16:31:13 - Répondre

c'est un peux lourd sur les rechargements mais beau projet et bon courage pour la suite

85d1d5f98c848c433276fea8505477d8?s=200&r=pg&d=mm
Olivier, 01-10-2014 05:25:21 - Répondre

Beau projet, mais malheureusement illégal selon la loi française. En effet, tous sites Web doivent garder toutes données (messages inclus bien sûr) transmises par ses utilisateurs pendant une durée de minimum un an.

49636878625eebf1d735b208a7eefa88?s=200&r=pg&d=mm
AcriX, 29-10-2014 00:19:54 - Répondre

Il est en .com donc normalement c'est bon, non ? S'il aurait était en .fr sa aurait était une autre histoire.

255ca8480fe0c3336bc1418626202fb7?s=200&r=pg&d=mm
florian63, 30-09-2014 10:02:46 - Répondre

Super design, avec un développent parfit =)

726166e9ba11d42051e3a3ee20d70a2b?s=200&r=pg&d=mm
noozlab, 26-09-2014 22:15:06 - Répondre

Merci pour le retour. Cependant j'aimerais savoir avec quel technologie avez creer l'application mobile. Cordova?

B2b30e85fb43fa62e9f939ec0d680002?s=200&r=pg&d=mm
esteban, 01-09-2014 21:16:40 - Répondre

sympa

03b5e2458bd6d66e6cf036eec5b4e8b0?s=200&r=pg&d=mm
Guigui, 18-07-2014 00:52:30 - Répondre

Top ce retour, merci :) On pourrait avoir une fourchette de prix pour un tel développement ?

3855f074a6b958523f60df838726317f?s=200&r=pg&d=mm
BakerSky, 16-07-2014 15:16:21 - Répondre

Super, pour la gestion du projet, c'est un excellent exemple pour les chefs de projets...

B12f5a336d4d2e9cd8b958899ee06666?s=200&r=pg&d=mm
Agent A, 27-06-2014 17:38:41 - Répondre

Super article ! En revanche je trouve que c'est dommage qu'on entende pas parler de la solution qui a été utilisée au niveau du stockage des données.

C384e880f1b339bd1004aca251e71040?s=200&r=pg&d=mm
Fayçal, 26-06-2014 13:18:37 - Répondre

Merci pour l'article, je me demande combien ils ont payé...

79e9cb08f5c49b55799aebf37025bc98?s=200&r=pg&d=mm
olchanp, 26-06-2014 12:06:29 - Répondre

Beau projet.
Juste une petite question, ils utilisent Redis pour communiquer entre ruby et node.js ?

6dd7362391031004c8eac1373a44752a?s=200&r=pg&d=mm
Dylo88, 25-06-2014 13:59:06 - Répondre

C'est un excellent site !!

491a4cc5fc29da84f506af4d280e6159?s=200&r=pg&d=mm
Bastien, 25-06-2014 00:01:06 - Répondre

Vraiment sympa de faire un article sur la gestion de projet :) et très beau site

35b92514619acf831dcc262d4d120d2c?s=200&r=pg&d=mm
Damogen, 21-06-2014 14:15:37 - Répondre

Salut ^^, très bon article j'aime beaucoup le design du site :)
a par sa tu as fais une faute dans le troisième titre dans "L’organisation du projet" > "Comment AVE vous organiser la réalisation du projet ? " ;)

Merci pour l'article ^^

Ecce7f829990717cbe93718dc3a74002?s=200&r=pg&d=mm
Manonlescaut, 20-06-2014 18:47:53 - Répondre

Très bon article et interview! Kawagoo sort du lot, le droit à l'oubli c'est super. Bonne route à Kawagoo!

A7acac617c41910f7ee4c6fa97161687?s=200&r=pg&d=mm
galyb, 20-06-2014 15:26:17 - Répondre

@Nabil: regarde le dernier live de Grafikart, il en parle.
Les conventions, il y en pas vraiment, il y a surtout une gestion de contenu qui fait qu'on va plus ou moins utilisée des méthodes de travail mais c'est tout.
Pour les techno, je connais quasiment aucun site sur framework (a part des monstres du marcher e-commerce "1% du marché") et ça un coup beaucoup plus élevé pour les clients si tu le fais sur un framework (*10 parfois) et sans réelle bénéfice.
Le mode de payement c'est le client qui décide, pas au développeur, par se que ça implique des coups au client pas spécialement en dev mais par la suite.
La sécurité, heu comme n'importe qu'elle site après le système de payement est géré coté banque donc bon, pas grand chose a faire.

Pour l'article, vraiment cool. Même si le ruby en rails, je trouve que ça fait un peu (comme ça il y aura que nous qui aurons le projet vue que très peu de gens en font ^^) Mais sinon c'est toujours bien de montrer un process de travail avec les technos utilisé. Très peu d'agences le font et c'est bien dommage.

F0d8a3af2fc3699b06f0fcfa0a18342f?s=200&r=pg&d=mm
nabil, 22-06-2014 01:07:02 - Répondre

Merci @galyb :)

2df1efd46e9096474d2dc3ae3033b15c?s=200&r=pg&d=mm
un gars, 20-06-2014 12:44:45 - Répondre

Marche pas tres bien le responsive design pour la page d'accueil. Pourtant j'utilise chrome sur un nexus 4...

Eb20202d427682821b0080c578ef50b0?s=200&r=pg&d=mm
Perclure, 20-06-2014 12:23:28 - Répondre

Mmmhhh, intéressant...

94f8d37c5fd7fffbd03c9fd0ff8568e2?s=200&r=pg&d=mm
devict, 19-06-2014 22:09:09 - Répondre

Excellent article! Franchement très intéressant. Le genre de gestion de projet que l'on aimerait retrouver partout :)
On a beau savoir développer, mais si l'on est complètement à la ramasse sur le planning ou à côté de la plaque, tout le monde perds du temps, de l'argent et le plaisir de travailler sur un projet bien rodé

F0459e6bad1b77f1d46a4f72e02b6fd3?s=200&r=pg&d=mm
Aldric, 19-06-2014 19:52:31 - Répondre

Super, merci Jonathan !
Encore un excellent article. Excellent parce qu'il nous parle simplement des choses de la vie d'un développeur et d'un projet web. Tu nous offres un concentré des bonnes choses à retenir, sans fioritures inutiles.

Tu nous montres encore une fois ton talent de pédagogue :) Merci !

a.

15db9f9a459f826fdd122f646566282a?s=200&r=pg&d=mm
Unforgiven, 19-06-2014 19:41:51 - Répondre

Article très intéressant, qui gagnerait à être davantage détaillé.
Le concept également est d'actualité, j'espère qu'il percera.

Unique remarque, j'ai visité le site de Kawagoo, et il me semble qu'il bug légèrement (sous Chrome du moins) en zone4 à en croire le markup. Le fond vert déborde. C'est peut-être voulu, mais je trouve personnellement que ça fait tâche avec le reste.

Quoi qu'il en soit, merci pour le partage, c'était très instructif.

F0d8a3af2fc3699b06f0fcfa0a18342f?s=200&r=pg&d=mm
Nabil, 19-06-2014 19:13:52 - Répondre

Tout d'abord je te remercie pour cet excellent article.
D'ailleurs un article sur l'ecommerce ca sera parfait autour:
- La philosophie d'un site ecommerce par rapport aux autres sites dynamiques.
- Les conventions.
- Les technos à utiliser : Frameworks PHP(Laravel, CakePHP) ou CMS (Magento), techno js, ... (Au passage je prefere un Framework, parce que je reste libre dans mon code et mon project reste flexible) .
- Les modes de paiements.
- La sécurité.

Merci encore une fois,

8fafbf539079df8d8f37055e96c68657?s=200&r=pg&d=mm
Alexandre Chopin, 19-06-2014 19:06:56 - Répondre

Article très intéressant !
L'interview apporte beaucoup d'information sur la gestion et le déroulement d'un projet.

33725
Brandon-xprodeur, 19-06-2014 18:09:39 - Répondre

Vraiment sympa cette article :)

9e7f779311bdb57ac73d4f30398edbf5?s=200&r=pg&d=mm
Corentin, 19-06-2014 18:09:28 - Répondre

Beau travail ! Merci pour cet article, très utile de s'instruire du travail des autres ;)