Quand l’IA prend la barre : créer un dashboard de suivi des flottes navales avec Claude Code
Tout est parti d’une idée simple, formulée en une phrase dans un terminal :
« Tu peux me fabriquer un dashboard web complet permettant de suivre sur une carte les mouvements des flottes de guerre internationales sur la base des sites internet de suivi et de toutes les différentes sources possibles. Avec également un résumé des dernières news et des faits d’actualités de marine militaires ? »
Pas de cahier des charges. Pas de wireframes. Pas de spécifications techniques. Juste une intention, jetée en langage naturel à Claude Code, pour voir jusqu’où l’exercice pouvait mener.
Ce qui a émergé
En quelques minutes, Claude Code a conçu, architecturé et écrit l’intégralité d’une application web opérationnelle. Le résultat est un poste de commandement numérique en miniature :
Une carte mondiale interactive affiche la position de 54 bâtiments de guerre issus de 19 marines, des porte-avions nucléaires américains aux corvettes iraniennes, en passant par les sous-marins d’attaque britanniques et les nouveaux carriers chinois. Chaque navire porte un marqueur coloré selon son type — rouge pour les porte-avions, bleu pour les destroyers, violet pour les sous-marins — et une fiche détaillée livre sa classe, son groupe opérationnel, sa vitesse et son cap.
Un panneau d’actualités en temps réel agrège les flux de huit sources spécialisées — USNI News, Naval News, Defense News, UK Defence Journal, The Diplomat, Maritime Executive — et ne retient, par filtrage automatique, que les articles à résonance navale.
Des zones de tension géopolitiques peuvent être superposées à la carte d’un clic : mer de Chine méridionale, détroit de Taiwan, Ormuz, Bab el-Mandeb, mer Noire, Arctique. Autant de points chauds où se croisent, en ce moment même, les sillages des grandes marines du monde.
La démo est accessible ici : https://naval-tracker.jcloud.ik-server.com/
La fabrication, étape par étape
L’ossature. Claude Code a d’abord posé l’architecture : un serveur Node.js/Express, une arborescence de fichiers propre, les dépendances npm installées. Pas de framework front-end superflu — du HTML, du CSS et du JavaScript vanilla, ce qui rend l’ensemble léger et immédiatement déployable.
La cartographie du monde naval. Il a ensuite constitué une base de données de 54 navires militaires majeurs à partir des sources OSINT publiques. Chaque entrée contient une vingtaine de champs : identifiant, nom, classe, pays, drapeau, coordonnées, région, statut opérationnel, groupe tactique, détails de mission, vitesse et cap. Un travail de documentation qui, à la main, aurait pris des heures.
L’interface. Le dashboard adopte un thème sombre — le genre d’écran qu’on imaginerait dans une salle de situation — avec une mise en page trois colonnes : filtres et statistiques à gauche, carte au centre, fil d’actualités à droite. Le design est responsive : sur tablette, la sidebar disparaît ; sur mobile, seule la carte subsiste.
Le fil d’information. Huit flux RSS sont collectés, parsés, filtrés par pertinence navale et triés chronologiquement. L’utilisateur peut basculer entre les sources d’un clic.
Le scraper, ou l’art de pister des fantômes. C’est ici que les choses deviennent intéressantes — et que Claude Code a dû s’adapter.
Les écueils : quand la mer se fait opaque
Le silence radio des marines. La première difficulté est structurelle, et aucun code ne peut la résoudre entièrement. Contrairement aux navires civils qui diffusent en permanence leur position via l’AIS, les navires militaires coupent systématiquement ce transpondeur en opération — c’est même tout l’intérêt d’un bâtiment de guerre que de ne pas être localisé. Il n’existe donc aucune API temps réel pour suivre les flottes du monde. Les positions reposent sur ce que le renseignement de sources ouvertes appelle l’OSINT : les communiqués officiels des marines, les reportages de la presse spécialisée, le USNI Fleet Tracker qui publie chaque lundi la carte des groupes aéronavals américains, et parfois l’imagerie satellite commerciale.
La protection Cloudflare. La première version du scraper tentait de récupérer directement les pages web du USNI Fleet Tracker pour en extraire les positions. Elle s’est heurtée à une page blanche : « Just a moment… » — le bouclier anti-bots de Cloudflare. Impossible de parser du HTML qui n’arrive jamais. Claude Code a pivoté : plutôt que de s’acharner sur les pages web protégées, il s’est rabattu sur les flux RSS de ces mêmes sites, qui sont des points d’accès publics, conçus pour être lus par des machines, et exempts de protection. Un contournement élégant.
Le parsing sémantique. Extraire une position géographique d’un article de presse n’est pas trivial. Le scraper utilise un dictionnaire de 40 régions maritimes avec leurs coordonnées GPS associées, et des expressions régulières pour détecter les mentions de statuts opérationnels (deployed, in port, underway, training, patrol, refit…). Ce n’est pas parfait, mais cela permet des mises à jour automatiques crédibles.
Le code
L’ensemble du projet est disponible en open source sur GitHub : https://github.com/smarsys/naval-fleet-tracker
Environ 2 500 lignes de code réparties sur 7 fichiers. Le serveur se lance avec un npm install && node server/index.js, le scraper démarre automatiquement et s’exécute toutes les six heures. Libre à vous de le déployer, de le modifier, ou simplement de regarder comment Claude Code structure un projet quand on lui laisse la barre.
Ce que ça nous apprend…
L’exercice n’avait rien d’un test académique. C’était une question sincère : peut-on, en partant d’une idée formulée en langage courant, obtenir une application web fonctionnelle, architecturée et déployable ? La réponse est oui — avec des nuances. Claude Code ne se contente pas de générer du code : il fait des choix d’architecture, sélectionne des bibliothèques, anticipe les problèmes de CORS et de protection anti-bots, et quand un chemin se ferme, il en trouve un autre. Ce n’est pas un développeur. Mais c’est un outil qui, dans les mains de quelqu’un qui sait où il veut aller, raccourcit considérablement la distance entre l’idée et le prototype
En combien de temps ?
Le tout a pris une heure, la rédaction de cet article compris et plus de la moitié pour réussir à déployer le service sur Jelastic d’Infomaniak… Allez voir le résultat!