¿Cómo manejar la internacionalización y la localización en Angular redes de datos?

Cuando se trata de crear software que llegue a una audiencia global, entran en juego dos procesos esenciales: la internacionalización (i18n) y la localización (l10n). Aunque a menudo se usan indistintamente, estos términos se refieren a dos procesos diferentes.

En este artículo, cubriremos los aspectos básicos de la internacionalización y la localización, proporcionando un ejemplo paso a paso de la configuración de una aplicación de Angular localizada, así como enfoques prácticos para usar Ignite UI for Angular para crear cuadrículas de datos multilingües.

So, let’s dive in. 

¿Qué es la internacionalización?

La internacionalización (i18n) suele ser llevada a cabo por desarrolladores e ingenieros que diseñan el código base para admitir varios idiomas y configuraciones regionales sin tener que realizar una reestructuración importante para agregar idiomas más adelante. El texto orientado al usuario se sustituye por marcadores de posición, que el sistema interpreta en función de diferentes configuraciones para cada idioma. Además, se debe planificar la compatibilidad con la codificación de caracteres Unicode y los sistemas de escritura de izquierda a derecha.

¿Qué es la localización?

La localización personaliza la aplicación para un idioma y una cultura específicos. Este proceso incluye la traducción de texto y el ajuste del formato de los datos, como fechas, horas, números y monedas, para adaptarlo a las convenciones locales. Los especialistas en localización traducen y adaptan el contenido de los componentes para crear una experiencia que resulte natural para cada público.

La internacionalización y la localización van de la mano: la internacionalización genera flexibilidad, mientras que la localización la adapta a los usuarios individuales.

¿Por qué i18n y l10n son importantes?

La internacionalización y la localización son esenciales para cualquier aplicación dirigida a un público global. La mayoría de los usuarios prefieren el contenido en su idioma nativo, con formatos familiares para los datos. Esto mejora la usabilidad y la experiencia del usuario, lo que permite que las aplicaciones atiendan a diversas audiencias en diferentes regiones y ayuda a una empresa a expandirse a nuevos mercados internacionales y crecer.

Internacionalización en Angular

Angular tiene funciones integradas de internacionalización (i18n) que facilitan la gestión de aplicaciones multilingües. Permite a los desarrolladores traducir contenido estático y manejar el formato basado en la configuración regional con mayor facilidad.

Habilitar i18n en un proyecto de Angular 

Echemos un vistazo al siguiente ejemplo para ver cómo configurar la localización en una aplicación Angular.

Paso 1:Configura tu proyecto Angular 

Install Angular CLI  

npm install -g @angular/c

Crear un nuevo proyecto de Angular:

ng new translation-example --style=css --routing=false --skip-tests 
cd translation-example 

Agregue el paquete de localización:

ng add @angular/localize 

Paso 2:Prepare su aplicación para la internacionalización 

Abra angular.json y configure la sección de configuraciones regionales en su proyecto. Lo configuraremos para coreano y japonés.

"projects": { 
  " translation-example": { 
    "i18n": { 
      "sourceLocale": "en", 
      "locales": { 
        "ko": "src/locale/messages.ko.xlf", 
        "ja": "src/locale/messages.ja.xlf" 
      } 
    },  

Paso 3:Marcar texto para traducción 

Abra el archivo src/app/app.component.html y modifíquelo para incluir atributos de traducción: la etiqueta i18n:

<h1 i18n="@@helloWorld">Hello World</h1> 

También puede diseñar la página como desee en el archivo .css

Paso 4:Extraer traducciones 

ng extract-i18n 

Este comando crea un archivo llamado messages.xlf en la carpeta src.

Step 5: Create Translation Files 

Create a locale folder in the src directory: mkdir src/locale 

Copie el archivo messages.xlf para crear traducciones al coreano y al japonés:

cp messages.xlf src/locale/messages.ko.xlf 
cp messages.xlf src/locale/messages.ja.x

Editar los archivos para incluir traducciones

messages.ko.xlf archivo:

 <trans-unit id="helloWorld" datatype="html"> 
  <source>Hello World</source> 
  <target>안녕하세요 세계</target> 
</trans-unit> 

Paso 6: Compilar la aplicación con configuraciones regionales 

Defina la configuración de producción en angular.json para incluir la configuración de localización

 "configurations": { 
           "production": { 
            "localize": true, 
    … 
    }

run the command: 

ng build --configuration=production --loca

Esto generará una compilación separada para cada configuración regional definida en su proyecto (en, ko, ja), creando carpetas específicas del idioma en su directorio dist. Después de la compilación, debería ver subdirectorios dentro de dist/translation-example

Eso es todo. Ahora, cuando ejecutes la aplicación, tendrás las páginas traducidas bajo diferentes direcciones, así de simple.

Localización en Angular cuadrículas

Al localizar cuadrículas de datos en aplicaciones Angular, el enfoque se extiende más allá de la simple traducción de texto. Las cuadrículas de datos se utilizan normalmente para mostrar datos dinámicos, por lo que la localización debe adaptarse a varios elementos, como los formatos numéricos, la presentación de la fecha y la hora, los símbolos de moneda y las opciones de clasificación y filtrado culturalmente relevantes.

• La localización de fecha y hora puede variar significativamente de una región a otra. Por ejemplo, el formato MM/DD/AAAA es común en los EE. UU., mientras que DD/MM/AAAA es estándar en muchos países europeos o YYYY/MM/DD en la cultura japonesa.
• El formato de los números, incluidos los decimales y los miles de separadores, difiere ampliamente de una configuración regional a otra. Por ejemplo, mientras que los países de habla inglesa suelen usar 1.000,00, otras regiones pueden mostrarlo como 1.000,00.
• Idiomas como el árabe y el hebreo se leen de derecha a izquierda, lo que puede afectar al diseño de la cuadrícula de datos.
• La clasificación alfabética puede variar según la configuración regional debido a los conjuntos de caracteres y acentos únicos en idiomas como el francés o el alemán.

Ignite UI for Angular Grid: una red diseñada para un alcance global

Ignite UI for Angular Grid proporciona funciones integradas para respaldar la localización, lo que permite a los desarrolladores presentar los datos de una manera que sea cultural y lingüísticamente apropiada para los usuarios. Esto incluye el formato de fechas, números y monedas de acuerdo con la configuración regional, lo que mejora la experiencia del usuario y la facilidad de uso de la aplicación. Angular Grid está diseñado para ayudar a los desarrolladores a ofrecer sin problemas experiencias de datos localizados para audiencias globales.

Nuestra cuadrícula ofrece cadenas de recursos listas para usar para más de 20 idiomas, incluidos francés, japonés, español y muchos más. Estos están disponibles a través del paquete igniteui-angular-i18n, excepto para el inglés, que es la localización predeterminada en igniteui-angular. Al aprovechar el paquete igniteui-angular-i18n, los desarrolladores pueden cargar y aplicar estos paquetes de idioma en solo unos pocos pasos, creando una interfaz personalizada y culturalmente precisa.

Si bien Ignite UI admite una amplia gama de idiomas, también permite una fácil personalización, por lo que puede definir sus recursos localizados si un idioma no está disponible. Esta flexibilidad garantiza que la cuadrícula se alinee con precisión con los matices lingüísticos y culturales de su audiencia.

Con Ignite UI, el formato de fecha y número, los símbolos de moneda y otras representaciones de datos críticos se localizan automáticamente. Mediante la importación de las cadenas de recursos necesarias o la creación de paquetes de idioma personalizados, los desarrolladores pueden mejorar rápidamente la usabilidad y el atractivo de sus aplicaciones a escala global.

Explore Ignite UI para obtener más información sobre i18n y las opciones de localización.