The user interface should be localized in French

[benel]

Because current UI is in English, this ticket will need two successive deliverables:

• Internationalized UI + localization in English
• Additional localization in French

Deliverables

Phase 1

• Scenarios (Gherkin)
• Mockups
• Implementation strategy

Phase 2

• Acceptance tests (Capybara)
• Implementation
  • Internationalized UI + localization in English
  • Additional localization in French

Phase 3

• Screencast

[ToGoSleep]

Les élèves français sont plutôt jeunes et ne maitrisent pas forcement l'anglais, ce qui pourrait être un frein pour utiliser Hyperglosae, d'où la suggestion d'avoir une interface en français.

[nitram35]

A l'UTT, les étudiants viennent de différents pays mais sont pour la plupart français. Il faudrait par défaut la langue française pour l'interface et également permettre le changement dans une autre langue (anglais)

[vernet-william]

[nitram35]

[benel]

For future acceptance tests, here is how you can emulate language preferences in Capybara:
sample test code in another project.

[vernet-william]

Implementation strategy : @ToGoSleep et moi-même (@vernet-william) pensons à utiliser la bibliothèque react-i18next pour implementer l'intertionalization. Ce n'est pas très lourd, c'est fréquemment mis à jour et ca utilise des balises comme en react et la synthaxe du js (+ flexible).
Nous choisissons react-i18next car c'est le + populaire et le plus flexible pour les application React.
Nous avions également considérer lingui/react en 2ème qui est assez similaire à react-intl mais qui peut utiliser des syntaxes + simple en plus d'être plus léger. De plus, lingui serait plus adapté à des projets + gros.
i18next est + volumineux et n'est pas spécialisé en React.
La langue changera entre français et anglais en fonction de la langues préféré paramétrée dans le navigateur.
Pour cela il faut d'abord télécharger les bibliothèques nécessaires à l'aide de la commence "npm".
Ensuite, nous allons créer un fichier de configuration dans lequel la sous-bibliothèque "i18next-browser-languagedetector" détecte la langue du navigateur. Si la langue du navigateur n'est ni le francais ni l'anglais, l'anglais sera la langue par défaut.
Après ca, on créer 2 fichiers ("en" pour anglais et "fr" pour francais) manuellement qui contiendront les éléments que nous voulons traduire.
Dans les fichiers au format js qui contiennent les éléments que nous voulons traduire, après avoir importé la méthode "useTranslation" de la bibliothèque "react-i18next" nous allons intégrer leurs traduction à l'aide de la fonction "t" qui appellera la fonction "useTranslation()" de la bibliothèque "react-i18next"
Pour l'implémentation, nous allons utiliser cette documentation : https://react.i18next.com/guides/quick-start

	i18n-js	i18n	i18next	lingui/react	react-intl	react-i18next
poid	1,7Mb	82Kb	635Kb	35Kb	342Kb	332Kb
last publish	3 month	2years	20 hour	4 days	2 days	1month
version	4,4,3	0,15,1	23,11,5	4,11,0	6,6,8	14,1,1
weekly dl	326k	316k	5,2M	131k	1,5M	3,4M

[benel]

@ToGoSleep @vernet-william

Please open a draft pull request as soon as you have a branch with scenarios, tests or feature implementation.

[vernet-william]

Screencast de la fonctionnalité par GONG Tony et VERNET William

Avancees_sur_Hyperglosae__Localisation_de_linterface_en_francais_.mp4