Zeste de Savoir, après une année de développement

Zeste de Savoir, après une année de développement

Voilà un peu plus d'un an que je travaille sur le projet "Zeste de Savoir", un site communautaire visant à partager les connaissances via des tutoriels, des articles ou encore les classiques forums. Ce projet est bâti autour d'une association du même nom qui vise à financer les moyens techniques mis en place pour faire fonctionner ce projet : un nom de domaine et un serveur dédié.

Naissance

Le projet est né d'une volonté commune d'ex-membres du staff bénévole du "Site du Zéro" alors devenu "OpenClassrooms". Leurs créateurs ayant pour ambition de changer de cible en allant vers le secteur des MOOCs plutôt que celui des tutoriels écrits qui les avaient fait connaître depuis une bonne dizaine d'années. Nous étions donc une trentaine à avoir démissionné de notre poste bénévole de modérateur, validateur ou encore rédacteur de nouvelles (newsers) pour nous concentrer sur notre nouveau bébé afin de faire renaître ailleurs sur la toile un nid douillet afin de retrouver ce qui nous plaisait sur le Site du Zéro avant ce changement d'optique.

Les débuts du projet ont été difficiles, il aura fallu plusieurs semaines avant de se décider sur les technologies et outils employés. Le côté serveur devait d'ailleurs initialement être réalisé sur la plateforme Java EE, mais nous nous sommes finalement réorienter vers le framework Django utilisant le langage Python. Le nom a été validé assez vite. Le projet a été développé en sous-marin pour éviter de faire trop de bruit tant que nous n'avions rien à présenter afin d'éviter de grosses déceptions en cas d'échec du projet. Il a été présenté en bêta fermée à deux reprises en juin 2014 : une première avec le design temporaire développé par firm1 (celui que je qualifierais de "l'autre développeur principale du projet" qui a grandement porté le back-end) sur la base de foundation qui a permis de se concentrer sur les bugs du back-end, puis une seconde beta avec la réelle intégration où l'idée était de se concentrer sur le front-end. Le site fût ouvert au public le 7 juillet 2014.

Dans une volonté de partage, tout le code source du site est disponible sur Github sous licence GNU GPL v3.

Premières maquettes

Pendant ces discussions j'avais commencé à réaliser quelques maquettes pour réfléchir à l'apparence du site, sans que l'on en ait défini les spécifications. Les premiers jets n'étaient pas très jolis, mais après quelques dizaines d'échanges avec la trentaine de personne alors impliqués, nous sommes arrivés à nous entendre sur une première version du design.

L'idée d'utiliser la tendance flat design était présente dès le départ. Il n'y avait pas encore de logo, ce sera plus tard MaxRoyo qui le réalisera. On peut voir sur cette première maquette un carrousel qui ne verra jamais le jour : n'ayant pas de spécifications j'ai fait beaucoup d'hypothèses, toutes n'étaient pas bonnes.

Première tentative de design du site

Nous avons tâtonné pour arriver finalement aux couleurs bleu foncé et orange/jaune, ainsi qu'une restructuration du contenu avec l'apparition d'une barre latérale.

Restructuration de la page d'accueil

Puis une dernière passe que j'ai alors commencé à coder une première maquette réelle avec le plus connu des trios : HTML/CSS/JS. J'ai d'ailleurs fait le choix d'utiliser la bibliothèque jQuery afin de ne pas perdre de temps sur des incompatibilités entre les navigateurs. J'ai d'ailleurs passé beaucoup de temps sur le menu latéral pour les mobiles par curiosité, n'ayant jamais manipulé les événements liés aux écrans tactiles.

S'en suivra une maquette image d'une page importante des forums : le sujet de discussion. Ceux qui sont déjà allés sur le site verront que tout cela a bien évolué depuis.

Premier jet pour un sujet du forum

Intégration

Après avoir passé pas mal d'heure à faire ma popote dans mon coin sur Photoshop d'une part, puis sur des fichiers statiques, il a fallu mettre tout cela en application sur le côté serveur qu'un autre membre nommé firm1 avait bien avancé. Le soucis était que ne n'avais pas toutes les vues et que nous nous sommes vite retrouvé bloqués. Nous avons fait le choix de maintenir deux branches de développement en parallèle afin de laisser aux développeurs back-end la possibilité de développer sans gêne lié à un manque d'avancement du front-end.

Twig, le moteur de template utilisé par Symfony 2 étant basé sur le moteur de template utilisé par Django, j'ai réussi à très vite maîtriser l'outil. J'ai alors entamé une grosse réfactorisation des templates du site (j'ai retravaillé tous les temapltes) rendant tout merge entre la branche de développement et la branche d'intégration interminable. J'ai parfois passé jusqu'à 10h pour faire un merge tellement les branches étaient différentes et donc pleines de conflits un peu partout.

Fût un moment où ça n'était plus soutenable, l'intégration a donc été mergé dans la branche de développement, créant alors quelque soucis, relativement rapidement corrigés. Certaines pages n'étaient toujours pas faites et étaient complètement cassées et ce durant plusieurs semaines voire mois.

Cette partie de l'intégration a pris plus de 4 mois, ayant été bloqué pendant plusieurs mois à cause de mes cours et étant le seul à connaître mon code car je ne souhaite pas utilisé de framework CSS, le projet était alors coincé à cause de moi. Dès que j'ai pu me libérer du temps je me suis remis de façon très intense sur l'intégration (de 5 à 15h par jour pendant deux semaines) amenant le projet à une version que nous avions pu lancer en bêta. À partir de là, il s'agissait de corriger un maximum de bugs signalés par les membres tout en continuant d'intégrer les pages manquantes.

Choix techniques

Pour réaliser les maquettes, j'ai utilisé Photoshop. Pour l'intégration, ce sont les outils que j'ai déjà mentionné dans mon article "Front-end : les outils à conaître" : Sublime Text 2, Sass et Compass compilé via Prepros, et bien sûr LiveReload.

Par la suite Sandhose, un nouveau contributeur, est arrivé et m'a aidé sur le front-end en proposant d'utiliser des outils plus performants basés sur node.js. Nous avons donc mis en place (enfin, surtout lui au début) gulp et tout un tas de tâches qui ont permis de supprimer complètement Compass et toutes ses mixins, notamment grâce à autoprefixer, une extension qui rajoute les préfixes à partir de la version officielle des propriétés.

Et maintenant ?

Je dois avouer que le projet était plus conséquent que je ne l'avais imaginé au début, puis au fur et à mesure on s'y habitue et on ne se rend plus vraiment compte à quel point le projet est imposant. Pourtant, le projet à l'heure actuelle est équivalent à WordPress en terme d'activité et de quantité de code.

Nous en sommes désormais à la version 1.1 et très prochainement la 1.2  (en cours de test sur notre serveur de pré-production) tandis que la 1.3 est déjà en cours de développement avec son lot de nouveautés. Le développement avance vite grâce à quelques développeurs dévoués qui donnent de leur temps pour la bonne cause : le partage et la (re)formation d'une communauté plaisante.

En effet, de l'autre côté du mur de code, on trouve une communauté chaleureuse et grandissante, l'esprit d’antan que nous cherchions à faire revivre est bien là, j'estime que sur ce point le projet est une réussite. Pour autant, nous ne nous arrêterons pas là puisque le projet appartient à la communauté, ce sera à elle de le faire avancer durant les années à venir.

Après un an de travail acharné sur le site, je compte ralentir très sérieusement mon activité sur le projet qui peut désormais vivre sa vie paisiblement. Néanmoins je ferais une dernière grosse contribution : une nouvelle page d'accueil qui est en cours de développement et dont voici la dernière maquette en date.

Nouvelle page d'accueil en cours de développement

À vous de jouer !

Peut-être avez-vous l'âme d'un aventurier et seriez-vous prêt à vous faire les dents sur un projet mené par un groupe de personnes sympathiques et motivées. Du fait de mon éloignement, il serait souhaitable pour le projet d'avoir une ou plusieurs personnes qui prennent le relais pour continuer de faire évoluer le front-end du site, notamment pour les nouvelles fonctionnalités qui arriveront dans les mois à venir. Si cela vous tente, rien de plus simple : rendez-vous sur le dépôt Github du projet pour y lire les diverses documentations et guides de contribution ainsi que la consultation régulière du forum "Dev Zone" sur le site.

N'hésitez pas à contribuer au projet que ce soit en front-end, en back-end ou en proposant des articles, des tutoriels ou bien encore en participant sur les forums !

À bientôt sur Zeste de Savoir :)

Votre gravatar
Gravatar de BoydayBok BoydayBok
http://forumnews.ovh/index.php?topic=28
Répondre
Gravatar de BoydayBok BoydayBok
http://forum24online.men/index.php?topic=30
Répondre
Gravatar de Malnux Starck Malnux Starck
Vous etes trop fort Mr Alex. je vous apprecie. j'aimerai etre comme vous en tant que developpeur. :)
Répondre
Gravatar de Amine Amine
Bravo !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Répondre
Gravatar de abouross abouross
Bravo et du courage pour la suite !
Répondre
Gravatar de Jean-Pierre Calypso Jean-Pierre Calypso
Belle initiative.

Mathias Nebreu n'est pas très beau
Répondre
Gravatar de Richou D. Degenne Richou D. Degenne
Bravo pour ton super boulot et longue vie au ZdS ! :D
Répondre