Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The user interface should be localized in French #146

Open
7 of 8 tasks
benel opened this issue Jan 16, 2024 · 8 comments · May be fixed by #206
Open
7 of 8 tasks

The user interface should be localized in French #146

benel opened this issue Jan 16, 2024 · 8 comments · May be fixed by #206

Comments

@benel
Copy link
Member

benel commented Jan 16, 2024

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
Copy link

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
Copy link
Contributor

nitram35 commented Mar 13, 2024

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
Copy link

Image

@nitram35
Copy link
Contributor

Image

@vernet-william vernet-william moved this from Suggéré to À faire in Histoire du cinéma 2024 Apr 16, 2024
@ToGoSleep ToGoSleep moved this from À faire to En cours in Histoire du cinéma 2024 May 7, 2024
@benel
Copy link
Member Author

benel commented May 7, 2024

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

@vernet-william
Copy link

vernet-william commented May 21, 2024

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
Copy link
Member Author

benel commented Jun 10, 2024

@ToGoSleep @vernet-william

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

ToGoSleep added a commit that referenced this issue Jun 11, 2024
ToGoSleep added a commit that referenced this issue Jun 18, 2024
ToGoSleep added a commit that referenced this issue Jun 18, 2024
ToGoSleep added a commit that referenced this issue Jun 18, 2024
ToGoSleep added a commit that referenced this issue Jun 18, 2024
ToGoSleep added a commit that referenced this issue Jun 18, 2024
@vernet-william
Copy link

Screencast de la fonctionnalité par GONG Tony et VERNET William

Avancees_sur_Hyperglosae__Localisation_de_linterface_en_francais_.mp4

@benel benel linked a pull request Jul 11, 2024 that will close this issue
@benel benel moved this from En cours to En intégration in Histoire du cinéma 2024 Jul 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

4 participants