Développement accéléré par l’IA

Installer un module de traduction

L’ajout de la traduction sur le site est un bon exemple de fonctionnalité qui semble simple côté utilisateur, mais qui demande une vraie structure côté développement.

Le besoin était clair : permettre au site de proposer plusieurs versions de contenu sans dupliquer toutes les pages, sans casser la navigation et sans rendre les composants difficiles à maintenir.

Les technologies utilisées

Le module repose sur l’architecture Angular déjà en place :

Angular en composants standalone

TypeScript

un service partagé de langue

des signaux Angular pour l’état courant

des objets de traduction centralisés

des templates qui lisent les contenus via une fonction text()

une garde côté navigateur pour éviter les problèmes avec le SSR

L’objectif n’était pas d’installer une grosse librairie externe, mais de mettre en place un système léger, lisible et adapté au contenu réel du site.

Le principe technique

Le cœur du système est un LanguageService.

Ce service garde la langue active, expose les textes traduits et permet aux composants de récupérer le bon contenu selon la langue choisie. Les pages n’écrivent donc plus directement leurs libellés dans les templates : elles appellent les clés de traduction.

Cela donne une structure plus propre :

le contenu est centralisé

les composants restent concentrés sur l’affichage

les changements de texte se font au même endroit

la version française et la version anglaise restent alignées

L’installation

La mise en place a surtout consisté à :

créer ou compléter le service de langue

ajouter les dictionnaires français et anglais

remplacer les textes fixes par des clés traduites

brancher le bouton de changement de langue

conserver le choix utilisateur dans le navigateur

vérifier que le rendu fonctionne aussi avec le pré-rendu serveur

Le point important est que la traduction ne doit pas être ajoutée seulement à la surface. Si certaines pages, cartes, bulles, boutons ou articles gardent du texte codé en dur, l’expérience devient vite incohérente.

Les contraintes

La première contrainte est le volume de contenu.

Plus le site accueille d’articles, de tuiles, de libellés et de variantes, plus il faut rester rigoureux dans les clés de traduction. Une clé oubliée peut casser le build ou laisser une partie du site dans la mauvaise langue.

La deuxième contrainte vient du SSR. Le code ne peut pas supposer que window ou localStorage existent toujours, car certaines parties peuvent être exécutées côté serveur. Il faut donc vérifier l’environnement avant d’utiliser les API du navigateur.

La troisième contrainte est éditoriale : traduire un site ne consiste pas seulement à convertir des mots. Il faut garder le ton, la clarté et l’intention de chaque section.

Ce que l’IA a apporté

L’IA a surtout aidé à avancer méthodiquement :

repérer les textes encore codés en dur

proposer une structure de clés cohérente

ajouter les traductions dans les bons objets

adapter les templates sans changer leur logique

vérifier le build après modification

Ce type de tâche est répétitif, mais sensible. L’IA est utile parce qu’elle peut garder une vue d’ensemble sur les fichiers concernés, à condition de lui demander des changements progressifs.

Bilan

Le module de traduction rend le site plus solide et plus évolutif.

Techniquement, il force à mieux séparer le contenu de l’interface. Côté usage, il prépare le site à parler à plusieurs publics sans multiplier les versions manuelles.

C’est une fonctionnalité discrète, mais structurante : elle transforme un site local en support capable d’évoluer vers une audience plus large.