COVID-19-electronic-health-system / Corona-tracker

An easy-to-use PWA to monitor the user's wellness and learn about COVID-19.
https://coronatracker.me/
MIT License
235 stars 101 forks source link

[FEAT] User can go directly to their language with URL path, ie say /nederlands or /espanol, etc. #657

Closed tesla809 closed 4 years ago

tesla809 commented 4 years ago

⚠️ IMPORTANT: Please fill out this template to give us as much information as possible to consider/implement the feature.

Prerequisites

Summary

Based on user feedback from doctor in Belgium Problem: “Which url brings me to the version where Dutch is integrated (as I use the beta link from the website I still do not see Dutch as a language).”

Action: Create React Router path (and if necessary backend endpoint to the translated version of site) in the user's native language. That way the user doesn't have to know English to navigate to the choose a language section.

For example: Dutch: coronatrackerbeta.com/nederlands

Spanish: coronatrackerbeta.com/español and coronatrackerbeta.com/espanol (in case they can't get ñ)

Corner case to consider: For non-Latin languages like Chinese or Arabic, should we have the endpoint in their native language and English version? How do speakers access English sites in their own languages? @AdhamAH @salvolpe @njordhov

How does Facebook or large multilingual site do this?

Motivation

Why are we doing this? We want non-English speakers to be able to use our application easier, by letting them visit the app in their native language directly from the URL

What use cases does it support? Easier user onboarding at the beginning of the app

What is the expected outcome? users can access our site without having the possible roadblock of not knowing English.

Possible Alternatives

Assume that most speakers with a cellphone know enough basic English to click on the button to choose their language. Or they will experiment and click on the button and see their language.

Additional Context

DocMusher is a doctor in Belgium who fits one of the user cohorts that we want to interview and gain good insights from. As an external set of eyes with domain experience dealing with COVID-19 patients, we are able to learn what is useful on the field.

tesla809 commented 4 years ago

Not sure if backend endpoint is necessary. Added the info just in case.

whoabuddy commented 4 years ago

This is likely related to #643

Based on schema.org we should look at an overall standard for language names, such as: https://en.m.wikipedia.org/wiki/IETF_language_tag

pavel-ilin commented 4 years ago

@tesla809 In order to get access to the user native language version of the app user still have to type url with latin characters.

I thinking we can declare routs for each language and if user hit the rout we can trigger the same logic as if user click on the select language button.

SomeMoosery commented 4 years ago

I agree with @pavel-ilin - I'd say we should update this issue accordingly, where if the user hits a certain route this calls the language selector and then opens the app

njordhov commented 4 years ago

Note that the user's preferred language can be determined from the web browser settings:

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language

That way, they can be directed directly to a page in their preferred language, instead of explicitly selecting it. Although its still a good idea to provide a way for the user to override the default language and choose another.

pavel-ilin commented 4 years ago

Just FYI, manual language routs, like this like if was described in this issue, did not setup.