Christian HissibiniDéveloppeur Windows Phone Christian Hissibini (Histech Solutions) partage comment il a crée des applications Windows Phone pour un public international.

Cet post est aussi disponible en anglais/This post is also available in English

Note de Susan: Au Canada, dans le cadre du Mouvement des développeurs, amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

Assez avec les notes de Susan, vas-y Christian

Généralement, quand on se lance dans un projet de création d’application, que l’on parte d’une idée de génie ou d’une idée complètement loufoque, on espère secrètement que celle-ci devienne « The Next Big Thing » :)

Objectif de Mission : « The Next Big Thing »

Il s’agit ici de séduire le maximum d’utilisateurs… A ce propos, la plateforme Windows Phone nous offre la possibilité de rendre notre application disponible dans le monde entier ou de ne la restreindre qu’à certains pays.

Mais pour garantir un taux de téléchargements et d’adoptions efficients, l’application se doit d’être conviviale et cela passe par la considération du public visé, de la culture, de la zone géographique et de la langue d’interface; d’où la pratique de l’internationalisation.

C’est quoi Internationaliser une application ?

Vous l’avez sans doute déjà deviné, internationaliser une application c’est l’adapter à d’autres langues, marchés, cultures et régions.
Ici deux notions sont essentielles : Globalisation et Localisation.

La Globalisation permet à l’application, pendant son fonctionnement, de considérer les paramètres de culture de l’utilisateur (format d’affichage de date, monnaie, etc.).

La Localisation quant à elle permet à l’application de considérer la langue et les paramètres régionaux de l’utilisateur. Elle consiste entre autre à la traduction de texte, au choix de police (fonte), au sens de lecture, au choix des visuels adéquats, etc.

Maintenant que nous avons meilleure connaissance du sujet, rappelons quelques avantages de l’internationalisation, histoire d’encourager les plus sceptiques.

Quels sont les avantages de l’internationalisation ?

  • L’expérience utilisateur est de loin meilleure.
  • Elle permet de toucher un public plus important (on parle ici du monde entier).
  • On récolte forcément beaucoup plus de téléchargements.
  • Le taux d’adoption de l’application est beaucoup plus élevé.
  • Etc.

Bref tout tourne autour de l’argument « The Next Big Thing » :). Tout ceci a forcément un impact positif sur les ventes dans les différents marchés et génère plus de trafic au sein de l’application.

Convaincu ? Allons donc voir comment préparer notre application pour qu’elle soit prête pour la conquête du monde. J

Comment préparer son application pour le marché international ?

Intégrer la logique de l’internationalisation dès la phase de conception est très avantageux, mais même si vous partez d’un projet existant, soyez sans crainte car grâce à l’infrastructure .NET, l’intégration est super simple à mettre en œuvre. La globalisation et à la localisation deviennent vite un jeu d’enfant.

1 – Globalisation d’une application Windows phone

Comme nous l’avons dit tantôt, la globalisation permet à l’utilisateur de retrouver un environnement culturel qui lui est familier.
Pour ce faire, nous avons recours à la classe CultureInfo. Celle-ci contient déjà les langues adéquates et les codes de pays. Par exemple, en-US pour anglais-Etats Unis ou fr-CA pour français-Canada (qui est différent de fr-FR pour français-France). L’instance est prête à être utilisée pour tous le formatage de chaînes locales (devise, date et heure).

Exemple : Modification de la culture courante grâce à CultureInfo

String cul; 

cul = "fr-CA";

CultureInfo newCulture = new CultureInfo(cul); 

Thread.CurrentThread.CurrentCulture = newCulture;

Thread.CurrentThread.CurrentUICulture = newCulture;

Le site Web de MSDN propose dans sa documentation un tutoriel intitulé “How to build a globalized app for Windows Phone”.
Vous y retrouverez les différents usages dont on a recourt dans la globalisation d’une application et aussi, un exemple d’application globalisée est disponible en téléchargement.

2 – Localisation d’une application Windows Phone

Note : Dans ce contexte, localisation signifie adaptation à un groupe linguistique... Donc, aucun lien avec le positionnement GPS...

Ici aussi la plateforme nous simplifie les choses, car lorsque nous créons un nouveau projet Windows Phone, un dossier de ressources (Resources) est automatiquement ajouté à la solution. Ce dossier contient un fichier appelé AppResources.resx. Ce fichier contient les chaînes traduisibles.

clip_image001

Normalement, lorsqu’on clique sur ce fichier, un éditeur de ressources s’ouvre.

clip_image002

Comme nous le constatons, par défaut, ce fichier intègre des entrées telles que ResourceLanguage (qui représente la langue par défaut), ResourceFlowDirection (qui détermine le sens directionnel pour la lecture).

Comment ajouter une nouvelle entrée au fichier de ressources ?

Pour ajouter une nouvelle entrée, il suffit de cliquer sur une nouvelle ligne et ajouter le nom et la valeur. Il n’y a pas plus simple non!? J

Bon, une petite illustration ne fera que grand bien

clip_image004

A présent que nous savons ajouter de nouvelles entrées dans le fichier de ressources, voyons comment faire pour que notre code vienne lire ces entrées.

Comment lier le code aux entrées du fichier de ressources ?

Cette liaison se fait aisément au niveau du XAML.

En effet, il suffit de remplacer le texte codé en dur entre les guillemets des attributs par le nom attribué à la ressource correspondante.

Un exemple vaut mieux qu’un long discours :

Supposons que nous voulons intégrer cette citation « If you lie to the compiler, it will get its revenge. » de Henry Spencer qui devra être traduite plus tard.

Sans localisation nous avons :

<TextBlock Text="Si on ment à un compilateur, il prendra sa revanche." 
Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

- Avec localisation ça devient :

<TextBlock Text="{Binding Path=LocalizedResources.CitationHenry, Source={StaticResource LocalizedStrings}}" 
Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

Dans cette dernière partie, nous avons fait savoir au TextBlock qu’il recevra sa valeur à partir de la ressource nommée CitationHenry, présente dans le fichier AppResources.resx

Une nouvelle ligne devra donc être obligatoirement ajoutée au fichier de ressources

clip_image006

Les moins aveugles d’entre nous ont surement constaté que dans les commentaires générés initialement avec le fichier MainPage.xaml de notre solution, il existe une remarque concernant la localisation.

<!-- REMARQUE CONCERNANT LA LOCALISATION :

Pour localiser les chaînes affichées, copiez leurs valeurs dans les clés correctes

du fichier de ressources linguistiquement neutre de l'application (AppResources.resx), puis

remplacez le texte codé en dur entre les guillemets des attributs

par la clause de liaison dont le chemin pointe vers ce nom de chaîne.

Par exemple :

Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

Cette liaison pointe vers la ressource de chaîne du modèle appelée ApplicationTitle.

L'ajout de langues prises en charge à l'onglet Propriétés du projet crée un

fichier resx par langue qui peut restituer les valeurs traduites de vos

chaînes d'interface utilisateur. La liaison dans ces exemples peut entraîner le retrait de la valeur des

attributs du fichier .resx qui correspond à la valeur

CurrentUICulture de l'application au moment de l'exécution.

-->

Comme quoi il est important de considérer les petits commentaires verts qui se retrouvent dans les fichiers générés automatiquement lors de la création d’un nouveau projet :)

Dans l’exemple précédent, nous avons vu comment localiser du texte, mais alors qu’en est-il des images ?

Localisation des images

Dans la pratique, localiser une image a le même principe que localiser du texte. En fait, il suffit juste de mettre son URI en ressource comme suit :

<Image Source="{Binding Path=LocalizedResources.ImageURI, Source={StaticResource LocalizedStrings}}"/>

A présent que nous avons quelques notions sur la localisation des applications, il est temps de voir comment la rendre accessible au plus grand nombre et comme vous vous en doutiez bien, cela passe par la prise en charge multilingue.

Comment ajouter de nouvelles langues à son application ?

Ajouter une ou plusieurs nouvelles langues à son application revient à joindre des fichiers de ressources additionnels.

A ma connaissance, il existe 2 méthodes :

Méthode 1 : Manuelle


Pour ce faire, il suffit d’ouvrir les propriétés de notre projet en effectuant un double-clic sur « Properties », ensuite à cocher les langues correspondantes dans le box « cultures prises en charge » et enfin à générer.
Une fois les fichiers AppResources créés, il faudra juste les renseigner à l’aide des valeurs correspondantes.

clip_image008

Méthode 2 : A l’aide du kit de ressources pour application multilingue (Multilingual App Toolkit)

Cette méthode est ma préférée :) Vous verrez pourquoi…

Nous devons d’abord télécharger et installer le kit de ressources pour application multilingue. Qui en fait est une extension pour Visual Studio qui vient simplifier tout le processus de traduction.

Dans la page de téléchargement, je vous conseille de choisir la version française.

Une fois l’installation complétée, dans le menu de Visual Studio, sélectionnez Outils puis cliquez sur Activer le kit de ressources pour application multilingue.

Dans l’explorateur de solution, faites un clic droit sur le fichier du projet et sélectionnez Ajouter des langues de traduction.

Une fois la fenêtre ouverte, sélectionnez la langue désirée. Dans notre exemple allons commencer par offrir le rêve américain à notre application en choisissant Anglais (États-Unis) [en-US]

clip_image009

Après avoir cliqué sur le bouton OK, les fichiers ressources en anglais sont automatiquement générés.

clip_image010

Si vous cliquez sur ce nouveau fichier de ressources, vous remarquerez que toutes les entrées de votre premier fichier AppResources s’y retrouvent, mais sans aucune traduction.
A ce niveau, nous avons le choix soit de traduire manuellement chaque entrée ou de passer par l’outil de traduction automatique fourni par le kit de ressources.

clip_image011

Il faut noter que la traduction n’est pas souvent parfaite, donc la faire vérifier serait fort utile et ça nous évitera aussi de tomber dans la confusion ou même de déclencher un scandale international J

A présent que nous avons intégré une nouvelle langue à notre projet, il est temps de tester afin de pouvoir pousser un hourra de joie J

Comment effectuer des tests ?

On commence par générer notre solution.
Ensuite on lance l’application sur l’émulateur (ou notre appareil).
Enfin dans l’émulateur sélectionner Paramètres à Ensuite langue + région à Modifier la langue du téléphone en anglais (ou toute autre langue choisie pendant la localisation) puis cliquer (ou appuyer) sur Redémarrer le téléphone

On relance l’application sur l’émulateur (ou notre appareil) et puis quoi ??? On vient de franchir un cap vers la conquête du monde !!! Souvenez-vous de l’objectif de notre mission : The Next Big Thing !!!

Nous ne pouvons clore cette partie sans citer quelques bonnes pratiques qui nous aideront à réussir efficacement nos localisations.

Bonnes pratiques pour la localisation

  • Séparer les ressources du code (permet de rendre le code indépendant de la langue et ainsi de supporter des encodages différents…).
  • Ne pas abuser de la localisation (Par exemple, on n’a pas besoin de localiser des balises…)
  • Prévoir des longueurs de chaîne plus grandes (la traduction d’un mot peut être plus longue…)
  • Localiser les phrases au lieu des mots séparément. (Aide à préserver le sens des phrases après traduction…)
  • S’assurer de lister les paramètres dans le bon ordre.
  • Utiliser des attributs uniques pour identifier les ressources
  • Choisir une approche appropriée de traduction.

Pour plus de détails concernant ces bonnes pratiques, je vous invite à consulter la documentation de MSDN, à la section intitulée « Localization best practices for Windows Phone »

Pour aller plus loin…

Voici un rappel de la liste de ressources en ligne qui m’ont été utiles dans la pratique et aussi dans la rédaction de cet article. Elles vous aideront à aller plus loin sur le sujet :

Conclusion

Nous avons vu que l’internationalisation des applications Windows Phone comporte de gros avantages et, aussi qu’il est important d’intégrer cette logique dès la phase de conception et enfin, que sa mise en œuvre, à travers la globalisation et la localisation, est aussi simple qu’un jeu d’enfant.
Si un aspect évoqué dans cet article ne vous semble pas assez clair, n’hésitez pas à poser vos questions.

Bonne continuation vers «The Next Big Thing » :)

P.S. N’oubliez pas, cette année au Canada, dans le cadre du Mouvement des développeurs, vous apprendrez sous la tutelle du Sensei du code et maîtriserez l’art de coder! Amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!