Next Time — Etude de cas

Next Time est le résultat d’un projet réalisé intégralement en Javascript, visant à proposer des compteurs jusqu’au début des différentes saisons de l’année. Chaque compteur est accompagné d’un dessin vectoriel, animé avec la librairie AnimeJS.

Cet article est directement lié à la page concernant ce projet, disponible sur mon portfolio : https://bastienrobert.fr/next-time.

Problématiques

Durant le développement, j’ai été confronté à plusieurs problématiques :

  • Comment rendre de simples compteurs visuellement intéressants ?
  • Comment gérer un projet de manière agile ?

Fonctionnalités

Next Time étant une application relativement basique, elle ne comporte que très peu de fonctionnalités :

  • Animation : Après que l’équipe de design se soit chargée de vectoriser les dessins préalablement réalisés sur papier, j’ai choisi la librairie AnimeJS pour animer les différents éléments
  • Compteur : Chaque dessin s’accompagne d’un compteur à rebours, qui permet d’informer l’utilisateur de l’intervalle de temps entre le jour où il consulte le site et la prochaine date de l’événement
  • Traduction : Le site est internationalisé en utilisant vue-i18n

Au niveau des technos

Next Time est une application dite “single page”, c’est à dire qu’elle ne comporte qu’une seule page et que le contenu est chargé dynamiquement et de manière asynchrone sous forme de composants.

J’ai choisi la librairie Javascript VueJS que j’avais eu l’occasion d’essayer de manière relativement approfondie pour un autre projet : TradFood.

Les compteurs

Pour chaque saison, un compteur est directement intégré au composant. Afin d’éviter la redondance de code pour faciliter la maintenance, j’ai crée un composant tiers, appelé dans les différentes vue des saisons.

Différents paramètres peuvent être envoyés lors de l’appel du composant :

Tout d’abord la date, puis la clé (until) i18n renvoyant vers le texte à écrire. Le paramètre quote modifie le texte Français “Avant …”, il ajoute une apostrophe en fonction du texte (par exemple, Avant l’été aura le paramètre quote alors que Avant le printemps ne l’aura pas) et enfin la color du texte.

Le sourire que l’on retrouve de manière récurrente sur chacun des composants, afin d’assurer une continuité graphique au site, fonctionne de la même manière.

Animations

Chaque saison est accompagné de son dessin vectoriel, animé avec du code grâce à la librairie AnimeJS. Le code SVG est directement intégré dans le composant, pour pouvoir être manipulé après.

Nous incluons donc le composant qui nous permet d’afficher le compteur et le sourire, puis le code SVG. Tout le style du composant est directement stocké en bas de celui-ci et écrit en stylus.

Lors du mounted, nous lançons les animations AnimeJS, chacune stockée dans une méthode, tour à tour.

Traduction

La traduction du site est gérée avec Vue-i18n qui est relativement simple à mettre en place.

Les fichiers de locales sont situées dans un répertoire dédié puis enregistré séparément en fonction des langues. Pour Next Time il n’y a que la traduction Français et Anglais donc seulement les fichiers fr.yml et en.yml.

Puis il est possible d’appeler le contenu du message welcome, dans l’objet messages directement dans le DOM : {{ $t('messages.welcome') }}

Le fait que le message soit affiché en Français ou en Anglais, dépend ensuite de la valeur de lang, que l’on peut éditer via un simple lien :

Ici, on affiche le drapeau Français si le site est en Anglais et vice-versa.

Conclusion

Après un total d’une douzaine d’heure de travail et de sprints qui ont tous aboutis par rapport aux prévisions, le projet Next Time comprend aujourd’hui 3 saisons, accompagné de dessins vectoriels animés.

Grâce à ce projet, j’ai :

  • Approfondi mes compétences en VueJS et en AnimeJS
  • Appris à gérer une équipe et un projet avec des outils agiles (backlog et trello)
  • Approfondi mes compétences en développement d’interfaces/expériences