Chrono-Sport : Pour vos entraînements cardio

Pratiquant de musculation depuis plusieurs années, je me suis récemment intéressé au monde des kettlebells, un univers fascinant qui fera sûrement l'objet de mon prochain projet.

Au fil de mes recherches, j’ai découvert l’excellent livre du chercheur Martin Gibala, The One Minute Workout. Dans ce dernier, le professeur nous explique son parcours et comment lui et son équipe en sont venus à la conclusion qu'un activité physique courte mais intense avait plus d'effets bénéfiques qu'une activité longue à faible intensité.

Dans son livre, l'auteur propose plusieurs exemples d'entraînements et incite les lecteurs à concevoir leurs propres séances. C'est dans cette optique-là que m'est venue l'idée de créer une application pour faciliter cette opération, Chrono-Sport.

Un peu de théorie

Avant de commencer le développement, il m’a fallu réfléchir à une manière de généraliser un entraînement dit "à haute intensité".

Dans la majorité des cas, ce type d’entraînement se structure autour de trois phases :

1. L’échauffement : il permet d’augmenter la température corporelle et de lubrifier les articulations.
2. La phase de travail : elle se compose de cycles comprenant un ou plusieurs exercices réalisés à différentes intensités, pendant un temps donné.
3. Le retour au calme : il vise à faire redescendre le rythme cardiaque et retrouver une respiration normale.

Un cycle de la phase de travail peut être vu comme un round dans lequel un ou plusieurs chronomètres se succèdent.

Cette observation m’a permis de modéliser un entraînement de manière abstraite, comme une succession de blocs chronométrés.

Voici un schéma illustrant le déroulé théorique d’une séance de cardio :

Schéma théorique du déroulé d'une séance de cardio

Si on applique ce modèle au format Tabata, on obtient la structure suivante :

Schéma déroulé d'une séance de tabata

Grâce à sa simplicité et à sa flexibilité, ce modèle m’a semblé suffisamment robuste pour servir de base à l’application.

Un peu de technique

Jusqu’à présent, j’ai toujours développé mes projets web avec le framework VueJS. Pour cette nouvelle expérience, j’ai voulu explorer une alternative moins courante. Plutôt que de se tourner vers les géants comme React ou Angular, j'ai choisi SolidJS. Sa simplicité d’apprentissage et ses excellentes performances m’ont rapidement convaincu.

J'ai également décidé de le combiner avec la puissance de TypeSript pour le typage, ainsi qu'avec Sass pour mieux organiser et isoler le style de mes composants.

Côté qualité de code, j’ai intégré Prettier, qui formate automatiquement le code à chaque sauvegarde. Toutefois, je n'ai pas mis en place de linter comme ESlint ou ni d'outils de pré-commit tels que Husky. Étant donné qu’il s’agit d’un projet personnel, j’ai jugé leur valeur ajoutée trop faible par rapport à leur mise en place.

Pour écrire le code, j'ai utilisé Cursor, une première pour moi. Et je dois dire que j’ai été agréablement surpris. Bien que les suggestions ne soient pas toujours parfaites, l’éditeur m’a permis de gagner un temps considérable sur certaines tâches.

Enfin, côté CI/CD, je n’ai pas voulu mettre en place une pipeline complexe avec Github Actions. Par souci de simplicité, je me suis tourné vers Vercel , qui me permet de déployer gratuitement deux environnements :

• la branche dev pour l’environnement de développement
• la branche main pour la production

Grâce à une redirection, l’application est accessible via mon nom de domaine personnalisé : chrono-sport.charly-ginevra.fr

Voici un schéma qui résume cette architecture :

Un peu de pratique

Maintenant, il est temps de mettre les mains dans le cambouis et d'utiliser l'application.

Vous pouvez y accéder via ce lien : https://chrono-sport.charly-ginevra.fr

Menu principal

Voici une capture d’écran du menu principal de l’application. On y trouve trois sections distinctes :

• Classic : contient une horloge ainsi qu’un chronomètre simple.
• Workouts : propose des entraînements inspirés du livre The One Minute Workout.
• Customs : permet (pour l’instant) d’accéder à un entraînement vierge, idéal pour créer un programme sur-mesure à partir de zéro.

Paramétrer son entra​nement

Pour illustrer les fonctionnalités, prenons l’exemple de l’entraînement Tabata.

Après avoir sélectionné l’entraînement, vous arrivez sur la page de démarrage.
Un chronomètre peut se trouver dans trois états : initial, en cours, ou en pause.
Ces états peuvent être modifiés grâce aux boutons start, stop et reset.

Voici un automate illustrant ce comportement :

En faisant défiler la page, vous accédez aux paramètres de l’entraînement (voir capture ci-dessous).

C’est ici que vous pouvez modifier la structure de la séance. Voici un récapitulatif des actions associées aux boutons de cette interface :

Et maintenant ?

À l’heure actuelle, le résultat me satisfait dans la mesure où l’application répond aux besoins fonctionnels que je m’étais fixés. Cela dit, il reste encore beaucoup de travail avant d’arriver à un produit vraiment abouti. On pourrait qualifier l’état actuel de proof of concept : une base fonctionnelle, mais encore loin d’être polie.

Sur le plan fonctionnel

Soyons honnêtes : l’interface est encore assez brute (mention spéciale à la page About 😭).
Plusieurs pistes d’amélioration pourraient grandement enrichir l’expérience utilisateur, comme :

• La possibilité de sauvegarder ses entraînements personnalisés
• Un outil pour générer des séances en temps réel
• Un système de statistiques pour suivre et comparer ses performances

Sur le plan technique

Comme mentionné dans la section précédente, certains outils de développement manquent encore à l’appel.
Intégrer un linter, des hooks de commit ou une configuration CI plus robuste permettrait :

• d’améliorer la qualité du code
• de mieux structurer les futurs développements

En conclusion

Ce projet m’a déjà beaucoup apporté, tant sur le plan technique que pratique. Et au vu du travail qu’il reste à faire, je suis convaincu qu’il a encore beaucoup à m’apprendre. 😁💪