Localisez vos pages Qodly : Un guide pratique

Lalocalisation des applications 4D est prise en charge depuis des décennies par l’architecture XLIFF, conçue principalement pour les applications de bureau.

Mais les navigateurs fonctionnent différemment.

C’est pourquoi 4D Qodly Pro introduit une nouvelle approche intégrée de l’internationalisation (i18n), conçue pour les interfaces web, qui vous offre une plus grande flexibilité lors de la création de pages Qodly multilingues.

Voyons comment cela fonctionne en pratique.

HDI_4DQodlyProLocalisation

Qu’est-ce qu’une localisation ?

La localisation est le processus d’adaptation de votre application pour prendre en charge différentes langues, régions et nuances culturelles – il ne s’agit pas simplement de traduire le texte, mais de personnaliser la conception et les fonctionnalités pour répondre aux attentes locales.

Avec 4D Qodly Pro, la localisation est essentielle pour gagner et conserver des utilisateurs internationaux. Elle permet d’instaurer la confiance en respectant leur langue et leur culture, ce qui favorise des relations plus solides et une plus grande satisfaction. La localisation stimule également l’adoption en rendant votre produit naturel et intuitif, réduisant ainsi les frictions pour les utilisateurs du monde entier.

L’intégration de la localisation dès le début du développement prépare votre application à une expansion en douceur sur de nouveaux marchés, ce qui permet une mise à l’échelle efficace et le maintien d’un avantage concurrentiel à l’échelle mondiale. Même si vous commencez localement, le fait de planifier la localisation dès maintenant vous permet d’économiser du temps et de l’argent par la suite, ce qui accélère votre croissance à l’échelle mondiale.

Cas d’utilisation : Création d’une interface utilisateur de localisation minimale

Pour notre cas d’utilisation, nous allons construire une page simple qui montre un composant texte et une boîte de sélection où les utilisateurs peuvent choisir leur langue.

• Pour le composant texte, nous aurons le texte suivant : « Cette application est disponible en plusieurs langues. Vous pouvez changer de langue à tout moment dans le menu des paramètres. »
• L’application prendra en charge l’anglais, le français, l’arabe et l’espagnol.

Étape 1 : Sélection de la langue avec le Qodlysource UserLanguage

Lors de l’implémentation de choix de langues, vous souhaitez souvent disposer d’une boîte de sélection listant toutes les langues prises en charge dans votre application. Au lieu de créer une source Qodly personnalisée pour cela, 4D Qodly Pro vous offre une source Qodly intégrée appelée UserLanguage qui simplifie cette tâche.

La source Qodly UserLanguage permet d’effectuer automatiquement les opérations suivantes

• Remplit la boîte de sélection avec les langues disponibles en utilisant UserLanguage.supported

• Effectue le suivi de la langue sélectionnée via UserLanguage.selected

Tout ce que vous avez à faire est de lier UserLanguage.supported à votre boîte de sélection. Le résultat ? Les utilisateurs finaux peuvent changer de langue au moment de l’exécution – aucune logique supplémentaire n’est nécessaire.

Étape 2 : Créer vos langues

Avant de pouvoir utiliser pleinement cette source Qodly pour la sélection de la langue, nous devons d’abord définir les locales que votre application prendra en charge.

Qu’est-ce qu’une locale ?

Une locale représente une langue spécifique et un paramètre régional qui détermine comment votre application affiche le contenu aux utilisateurs.

Comment créer une locale ?

Une nouvelle section Localisation a été ajoutée à l’explorateur de Qodly Studio pour gérer les locales de votre application.

Pour ajouter votre première locale, cliquez simplement sur le bouton Ajouter une nouvelle locale dans la section de localisation.

Une fois que vous aurez cliqué, un menu déroulant apparaîtra, vous permettant de sélectionner la locale que vous souhaitez ajouter, pour notre cas d’utilisation, nous sélectionnerons l’anglais, le français, l’arabe et l’espagnol.

Étape 3 : LOCALISEZ VOS PAGES QODLY LORS DE L’ÉDITION

4D Qodly Pro offre une commande de changement de langue dans le panneau d’en-tête. Cela vous permet de prévisualiser et de traduire directement vos pages Qodly en mode édition.

Une fois que vous avez sélectionné une locale :

• Vous pouvez modifier le texte, les images et même la mise en page uniquement pour cette langue.

• Toutes les modifications visuelles (comme la taille de la police, l’alignement ou la taille du conteneur) ne s’appliquent qu’à la langue active.

• Vous pouvez échanger des images ou des ressources en fonction de la région cible.

Cela signifie que la localisation dans Qodly n’est pas seulement une question de chaînes de caractères – c’est une adaptation complète de l’interface utilisateur.

Utile pour les langues comme l’arabe ou l’hébreu qui nécessitent une mise en page de droite à gauche.

✅ Idéal pour les langues où les traductions sont plus longues ou nécessitent un formatage différent

💡 La localisation fonctionne également de manière transparente avec les États – ce qui signifie que toute modification localisée s’applique en même temps que les variations d’état définies dans votre page.

Étape 4 : Réutiliser les traductions fréquemment utilisées à l’aide de clés

Si une phrase traduite apparaît sur plusieurs pages ou composants, vous pouvez la stocker en tant que clé de traduction, unidentifiant réutilisable qui contient le même texte dans toutes les localisations.

Que sont les clés de traduction ?

Une clé de traduction est un identifiant unique utilisé pour gérer le contenu multilingue de votre application. Au lieu de saisir manuellement le texte traduit dans chaque composant, vous liez une clé au composant. Chaque clé stocke une version du texte pour toutes les langues prises en charge, ce qui permet à votre application d’être propre, cohérente et facile à maintenir. Lorsque vous mettez à jour le texte d’une clé, cette mise à jour est automatiquement répercutée partout où cette clé est utilisée.

Dans notre cas d’utilisation, nous utiliserons la clé de traduction« key1« , liée à notre composant texte.

Voici ce que cela donne dans les quatre langues prises en charge :

Anglais : Cette application est disponible en plusieurs langues. Vous pouvez changer de langue à tout moment dans le menu des paramètres.

Français : Cette application est disponible en plusieurs langues. Vous pouvez changer votre langue préférée à tout moment depuis le menu des paramètres.

Arabe : هذا التطبيق متاح بعدة لغات. يمكنك تغيير لغتك المفضلة في أي وقت من خلال قائمة الإعدادات.

Espagnol : L’application est disponible en plusieurs langues. Puedes cambiar tu idioma preferido en cualquier momento desde el menú de configuración.

Chaque fois que« key1 » est utilisé dans l’application, Qodly affichera automatiquement la version correcte en fonction de la locale sélectionnée. C’est une méthode efficace, fiable et idéale pour étendre votre application à plusieurs langues.

Comment créer et lier une clé de traduction

Vous pouvez créer et lier votre première clé de traduction en double-cliquant sur l’étiquette d’un composant texte, à condition qu’aucune locale ne soit sélectionnée. Pour les autres composants, vous pouvez faire la même chose dans le panneau Propriétés.

Vous pouvez également gérer vos clés dans la section Localisation, où toutes les clés et leurs traductions sont affichées en un seul endroit pour faciliter la visualisation et l’édition.

Ces deux méthodes vous donnent un contrôle total et vous aident à organiser votre localisation au fur et à mesure que votre application se développe.

:idée : La localisation ne se limite pas à la traduction du texte. Pour des langues comme l’arabe, le kurde… vous devez également ajuster la mise en page – par exemple en changeant la direction du texte de gauche à droite à droite à gauche – pour que l’application soit naturelle et conviviale.

ÉTAPE 5 : IMPORTER ET EXPORTER DES TRADUCTIONS

Vous pouvez télécharger toutes vos clés et valeurs de traduction au format JSON ou CSV.

Cela vous permet de

• Traduire du contenu en externe (même en utilisant l’IA ou un service de traduction).

• partager avec une équipe de traduction

• de le recharger dans Qodly en un seul clic.

Cette fonction est particulièrement utile pour les projets de grande envergure comportant des dizaines de langues.

CONSEIL BONUS : STOCKER LES PRÉFÉRENCES LINGUISTIQUES DE L’UTILISATEUR

Pour la personnalisation côté serveur (comme les messages d’erreur ou le contenu localisé de la base de données), vous pouvez stocker la langue préférée de l’utilisateur dans l’objet Session.

Cela permet de maintenir une expérience cohérente entre le client et le serveur, même pour les données qui ne se trouvent pas dans la page Qodly elle-même.

Ce que vous voyez dans l’interface utilisateur

Lorsque vous prévisualisez l’application, vous voyez que le texte se met instantanément à jour lorsque vous passez d’une langue à l’autre à l’aide de la boîte de sélection. Il s’agit d’une expérience fluide qui reflète en temps réel la langue sélectionnée par l’utilisateur.

Mais que se passe-t-il si l’utilisateur ne choisit pas une langue manuellement ?

C’est là que 4D Qodly Pro intervient avec une gestion intelligente en coulisses. Il suit une stratégie à plusieurs niveaux pour s’assurer que votre application affiche toujours le contenu dans la langue la plus pertinente :

• Langue stockée dans la session : Si l’utilisateur a déjà sélectionné une langue auparavant, Qodly s’en souvient. Son choix est stocké dans la session et automatiquement appliqué lors de la prochaine ouverture de l’application.
• Détection de la langue du navigateur : Lors de la première visite d’un utilisateur, si aucune préférence n’a été enregistrée, Qodly vérifie la langue par défaut du navigateur. Si elle correspond à l’une des langues locales prises en charge, cette langue est automatiquement sélectionnée.
• Lalangue de remplacementprimaire: S’il n’y a pas de correspondance dans la session ou le navigateur, Qodly utilise par défaut la langue principale définie dans votre section Localisation, ce qui garantit que l’application s’affiche toujours dans une langue que vous avez choisie comme référence.

Ainsi, que les utilisateurs choisissent activement une langue ou non, votre application se présente toujours d’une manière qui semble naturelle, familière et prête à l’emploi, dès sa sortie de la boîte.

Dernière réflexion

Les utilisateurs internationaux ne sont pas une réflexion après coup : ils sont votre prochaine opportunité. En intégrant la localisation dès le début, vous ne vous contentez pas de traduire une application, vous concevez un produit qui semble natif partout où il va.

Dans un monde où la première impression compte, parler la langue de l’utilisateur n’est pas un luxe, c’est la nouvelle norme. Et avec 4D Qodly Pro, vous êtes équipé pour répondre à cette norme avec clarté, efficacité et confiance.

Le meilleur moment pour localiser ? Avant même que vos utilisateurs ne le demandent.