Internationalisation - i18n
Vue d'ensemble
Tranoo supporte 3 langues : français (défaut), anglais, et arabe, alignées sur toutes les applications de l'écosystème.
Langues supportées
| Langue | Code | Statut |
|---|---|---|
| Français | fr | Langue par défaut |
| Anglais | en | Support complet |
| Arabe | ar | Support complet |
Architecture par composant
Web (tranoo_landing - Next.js)
Bibliothèque
- next-intl - Framework internationalisation Next.js
- Version : ^4.13.1
Fichiers de traduction
messages/
├── fr.json # Français
├── en.json # Anglais
└── ar.json # Arabe
Configuration
i18n/routing.ts- Configuration routingi18n/request.ts- Configuration requêtesmiddleware.ts- Middleware Next.js
Sélecteur de langue
- Composant :
components/LocaleSwitcher.tsx - Emplacement : Login + sidebar
- Cookie :
NEXT_LOCALE(pas de préfixe/fr/dans l'URL)
Pages migrées (phase 1)
/login- Section demandes de vérification transitaire
- Page détail vérification transitaire
- Erreurs API mappées via
lib/i18n-helpers.ts
Utilisation
import { useTranslations } from 'next-intl';
const t = useTranslations("verification");
t("maCle")
Backend (Express - Node.js)
Codes d'erreur stables
- Fichier :
src/utils/errorCodes.js - Codes constants indépendants de la langue
Messages localisés
- Fichier :
src/utils/apiResponse.js - Objet :
LOCALIZED_MESSAGES - Mapping codes → messages par langue
Locale
- Header :
Accept-Language - Envoyé par le web via axios
- Détection automatique de la langue
Contrôleurs migrés
transitaireVerificationController.js- Middleware CAPTCHA
Réponse type
{
"success": false,
"code": "TRANSITAIRE_VERIF_PENDING",
"message": "Une demande est déjà en cours d'examen..."
}
Mobile (Flutter - tranoo + tranoo_pro)
Fichiers de traduction
lib/l10n/
├── app_fr.arb # Français
├── app_en.arb # Anglais
└── app_ar.arb # Arabe
Configuration
lib/l10n/- Configuration internationalisationpubspec.yaml- Dépendances flutter_localizations
Mapping API
- Fichier :
lib/utils/api_error_message.dart - Mapping codes API →
AppLocalizations
Régénération
flutter gen-l10n
Nouveaux codes API (exemples)
| Code | Usage |
|---|---|
CAPTCHA_INVALID | Turnstile échoué |
TRANSITAIRE_VERIF_PENDING | Demande déjà en cours |
TRANSITAIRE_VERIF_SUBMIT_SUCCESS | Envoi dossier OK |
Workflow d'ajout de traduction
Web (Next.js)
-
Ajouter la clé dans tous les fichiers JSON :
messages/fr.jsonmessages/en.jsonmessages/ar.json
-
Utiliser dans un composant :
const t = useTranslations("verification");
t("maCle")
Backend (Node.js)
-
Ajouter le code dans
src/utils/errorCodes.js -
Ajouter le message dans
src/utils/apiResponse.js:
LOCALIZED_MESSAGES: {
MON_CODE: {
fr: "Message en français",
en: "Message in English",
ar: "رسالة بالعربية"
}
}
- Utiliser dans le contrôleur :
return res.status(400).json({
success: false,
code: "MON_CODE",
message: getLocalizedMessage("MON_CODE", locale)
});
Mobile (Flutter)
-
Ajouter la clé dans tous les fichiers ARB :
lib/l10n/app_fr.arblib/l10n/app_en.arblib/l10n/app_ar.arb
-
Régénérer :
flutter gen-l10n
- Utiliser :
AppLocalizations.of(context)!.maCle
Codes d'erreur API existants
| Code | Description |
|---|---|
CAPTCHA_INVALID | CAPTCHA Turnstile invalide |
TRANSITAIRE_VERIF_PENDING | Demande vérification déjà en cours |
TRANSITAIRE_VERIF_SUBMIT_SUCCESS | Envoi dossier vérification réussi |
AUTH_INVALID_TOKEN | Token d'authentification invalide |
AUTH_TOKEN_EXPIRED | Token expiré |
USER_NOT_FOUND | Utilisateur non trouvé |
INVALID_CREDENTIALS | Identifiants invalides |
État de migration i18n
| Composant | État | Reste à faire |
|---|---|---|
| Web | Partiel | Dashboard (notifications, inscription-agent-com), labels sidebar, PDF transitaire |
| Backend | Partiel | Étendre LOCALIZED_MESSAGES aux autres contrôleurs |
| Mobile | Complet (base) | Vérifier cohérence codes API, compléter traductions manquantes |
Les pages migrées côté web sont listées dans la section Web ci-dessus.
Bonnes pratiques
- Toujours ajouter les traductions dans les 3 langues
- Utiliser des codes stables pour les erreurs API
- Ne pas hardcoder les messages dans le code
- Régénérer les fichiers Flutter après modification ARB
- Tester les 3 langues avant déploiement
Voir aussi
- Architecture Backend — documentation backend complète
- Architecture Mobile — documentation Flutter
- Architecture Web — documentation Next.js
- Authentification — système d'authentification Firebase
- Transit international — codes erreur transitaire