🏃🏻‍➡️ Running Map

Il y a quelques semaines, et plus précisément quand j’ai écrit mon dernier article de blog sur mon changement de régime, j’ai décidé de mettre au point le site web dont je rêvais grâce à Codex.

L’idée de départ est assez simple : je voulais un site qui montre une carte géographique sur laquelle s’afficheraient en même temps toutes les traces GPX de mes marches ADEPS du dimanche. Le but est de pouvoir en sélectionner une ou l’autre et de voir où elles se croisent, d’identifier également les chemins que j’ai empruntés plusieurs fois. Et, comme bonus, avoir mes photos sous forme d’épingles cliquables sur cette carte interactive. En effet, lors des marches, il est devenu très courant que je repasse au même endroit et que je me dise : « Ah, mais je suis déjà venu ici il y a quelques mois, et c’était l’automne ; il y avait un tracteur devant cette ferme, et un cheval que j’ai pris en photo… »

La version payante de Strava à laquelle je suis abonné propose quelque chose de semblable. Mais on ne peut pas sélectionner spécifiquement les seules marches ADEPS du dimanche. De plus, j’aurais aimé visualiser toutes les photos que je prends chaque semaine sur cette même carte. Là aussi, Strava propose un affichage de photos depuis peu de temps, mais il se limite aux photos qui ont été uploadées sur Strava, évidemment. Enfin, Strava ne permet pas de partager la carte facilement à mes amis qui courent aussi avec moi, ou dans la région de leur côté.

Aujourd’hui, grâce à l’intelligence artificielle, tout devient possible ! Je peux donc simplement décrire mon rêve et (faire) construire mon site itérativement. La difficulté est plus de construire quelque chose de maîtrisable, simple et maintenable sur le long terme que d’avoir un résultat impressionnant le jour même.

En me lançant là-dedans, je voulais aussi apprendre de nouvelles choses. Mais pas trop, pour ne pas être submergé par les nouveautés et subir un débordement de cerveau !

Je me suis donc limité à un site statique : pas de base de données, pas de possibilité d’ajouter de nouvelles courses via l’interface web. Juste du HTML et des données préconstruites localement sur mon PC, avec un peu de JavaScript pour faire moderne.

J’ai été très vite confronté à beaucoup de problèmes que je ne soupçonnais pas au démarrage :

• Les traces GPX de mes parcours, que je télécharge après ma course depuis Strava, sont beaucoup trop lourdes. Il faut donc les simplifier avant de les afficher.
• J’ai énormément de photos. Je ne peux donc pas envisager de les envoyer telles quelles sur GitHub Pages, l’endroit que j’envisageais pour publier le site.
• Lorsque j’allais envoyer le lien de mon site à mes amis, ils allaient évidemment le recevoir sur leur téléphone. Le site devait donc être joli sur GSM !

Après un long brainstorming avec ChatGPT (c’est la manière dont je débute chaque projet de vibe coding avant même d’ouvrir Codex), je suis arrivé à une architecture très simple :

• Codex me fait des scripts Python qui vont aller rechercher dans ma Dropbox toutes les données dans leur format haute résolution.
• Ces données vont être simplifiées par les scripts : le nombre de points des traces va être réduit. La résolution des images sera également diminuée ; une version « miniature » sera générée.
• Dans un premier temps, toutes ces données sont stockées dans l’architecture du site en local. Avec le nombre de marches que j’ai effectuées juste depuis janvier 2025, ça fait tout de même près de 200 Mo, une taille qui est déjà jugée très limite pour GitHub Pages.

Une fois qu’il a été question de mettre le site en ligne, j’ai donc réfléchi à nouveau avec ChatGPT au sujet du stockage des données annexes. Il m’a conseillé de garder GitHub Pages pour le site, mais de stocker les images sur Cloudflare R2. N’ayant jamais essayé ce genre de service, je me suis lancé… Et pris au jeu, j’ai même acheté un nom de domaine pour personnaliser l’adresse du site (et apprendre une fois pour toutes comment tout ça fonctionne).

La mise au point du site à partir de rien m’aura pris environ une seule journée, interrompue plusieurs fois par des tâches ménagères et en comptant la grosse partie de l’après-midi qui a été réservée à la découverte de Cloudflare. J’ai eu des étoiles dans les yeux toute la journée.

Concernant le côté « responsive » du site, c’est-à-dire la manière dont il s’affiche sur différents terminaux, dont les téléphones, j’ai dû y consacrer une demi-journée supplémentaire, une fois le site en ligne. Ça aura pris pas mal d’itérations pour avoir quelque chose de bien joli.

Bien évidemment, lorsque j’ai envoyé le premier lien fonctionnel à mes connaissances, on m’a tout de suite demandé de nouvelles fonctionnalités : « On veut pouvoir télécharger les traces ! », « Ce serait bien de voir le profil altimétrique aussi ! ». Je me suis donc fait un plaisir de demander à Codex d’implémenter tout ça immédiatement (« Je vais faire ça avant ma réunion Teams dans une demi-heure ! »). C’est vraiment incroyable comme c’est efficace. D’une part, je deviens moi-même beaucoup plus efficace avec Codex, mais j’ai l’impression que l’évolution des modèles et des agents est fulgurante. Ça devient de plus en plus simple d’une semaine à la suivante. Quasiment aucune erreur. Très peu d’incompréhension. Alors que je me suis pourtant forcé à démarrer une conversation à chaque nouvelle « feature ».

Une telle application web, il y a quelques années, je n’aurais même pas rêvé pouvoir consacrer le temps nécessaire à son développement. Tout d’abord, je ne maîtrise pas très bien JavaScript (je sais seulement le lire et avancer par analogie avec le C++ que je connais bien mieux). Je sais aussi, par expérience, que jongler avec les CSS est un vrai casse-tête. Enfin, envisager de mettre des données dans le cloud derrière un nom de domaine qui m’appartient, ça m’aurait pris des heures et des heures de recherche sur Google pour simplement comprendre comment ça fonctionne… C’est juste incroyable. J’ai l’impression d’avoir gagné des dizaines d’années de vie devant moi pour réaliser tous mes projets !