Como lidar com a internacionalização e localização em Angular grades de dados?

Quando se trata de criar software que atinja um público global, dois processos essenciais entram em jogo – Internacionalização (i18n) e Localização (l10n). Embora frequentemente usados de forma intercambiável, esses termos se referem a dois processos diferentes.

Neste artigo, abordaremos os fundamentos da internacionalização e localização, fornecendo um exemplo passo a passo da configuração de um aplicativo de Angular localizado, bem como abordagens práticas para usar Ignite UI for Angular para criar grades de dados multilíngues.

So, let’s dive in. 

O que é internacionalização?

A internacionalização (i18n) é normalmente realizada por desenvolvedores e engenheiros que projetam a base de código para oferecer suporte a vários idiomas e configurações regionais sem ter que fazer uma grande reestruturação para adicionar idiomas posteriormente. O texto voltado para o usuário é substituído por espaços reservados, que o sistema interpreta com base em diferentes configurações para cada idioma. Além disso, o suporte para codificação de caracteres Unicode e sistemas de escrita da esquerda para a direita deve ser planejado.

O que é localização?

A localização personaliza o aplicativo para idioma e cultura específicos. Esse processo inclui a tradução de texto e o ajuste da formatação de dados, como datas, horas, números e moedas, para se adequar às convenções locais. Os especialistas em localização traduzem e adaptam o conteúdo dos componentes para criar uma experiência natural para cada público.

Internacionalização e localização andam de mãos dadas: a internacionalização cria flexibilidade, enquanto a localização a adapta para usuários individuais.

Por que i18n e l10n são importantes?

A internacionalização e a localização são essenciais para qualquer aplicativo voltado para um público global. A maioria dos usuários prefere conteúdo em seu idioma nativo, com formatos familiares para dados. Isso melhora a usabilidade e a experiência do usuário, permitindo que os aplicativos atendam a diversos públicos em diferentes regiões e ajuda uma empresa a se expandir para novos mercados internacionais e crescer.

Internacionalização em Angular

Angular possui recursos integrados de internacionalização (i18n) que facilitam o gerenciamento de aplicativos multilíngues. Ele permite que os desenvolvedores traduzam conteúdo estático e lidem com a formatação baseada em localidade com mais facilidade.

Ativar o i18n em um projeto Angular 

Vejamos o exemplo abaixo para ver como configurar a localização em um aplicativo Angular.

Etapa 1:Configure seu projeto Angular 

Install Angular CLI  

npm install -g @angular/c

Crie um novo projeto Angular:

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

Adicione o pacote de localização:

ng add @angular/localize 

Etapa 2:Prepare seu aplicativo para internacionalização 

Abra angular.json e configure a seção locales em seu projeto. Vamos configurá-lo para coreano e japonês.

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

Etapa 3:Marcar texto para tradução 

Abra o arquivo src/app/app.component.html e modifique-o para incluir atributos de tradução – a tag i18n:

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

Você também pode estilizar a página como quiser no arquivo .css

Etapa 4:Extrair traduções 

ng extract-i18n 

Esse comando cria um arquivo chamado messages.xlf na pasta src.

Step 5: Create Translation Files 

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

Copie o arquivo messages.xlf para criar traduções para coreano e japonês:

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

Edite os arquivos para incluir traduções

messages.ko.xlf do Arquivo :

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

Etapa 6: Criar o aplicativo com códigos de idioma 

Defina a configuração de produção em angular.json para incluir as configurações de localização

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

run the command: 

ng build --configuration=production --loca

Isso gerará uma compilação separada para cada localidade definida em seu projeto (en, ko, ja), criando pastas específicas do idioma em seu diretório dist. Após a compilação, você deve ver subdiretórios em dist/translation-example

É basicamente isso. Agora, ao executar o aplicativo, você terá as páginas traduzidas em endereços diferentes, simples assim.

Localização em Angular Grids

Ao localizar grades de dados em aplicativos Angular, o foco vai além da simples tradução de texto. As grades de dados são normalmente usadas para exibir dados dinâmicos, portanto, a localização deve se adaptar a vários elementos, como formatos numéricos, apresentação de data e hora, símbolos de moeda e opções de classificação e filtragem culturalmente relevantes.

• A localização de data e hora pode variar significativamente entre as regiões. Por exemplo, o formato MM/DD/AAAA é comum nos EUA, enquanto DD/MM/AAAA é padrão em muitos países europeus ou AAAA/MM/DD na cultura japonesa.
• A formatação de números, incluindo decimais e milhares de separadores, difere muito entre as localidades. Por exemplo, enquanto os países de língua inglesa costumam usar 1.000,00, outras regiões podem exibi-lo como 1.000,00.
• Idiomas como árabe e hebraico são lidos da direita para a esquerda, o que pode afetar o layout da grade de dados.
• A classificação alfabética pode variar de acordo com a localidade devido a conjuntos de caracteres e acentos exclusivos em idiomas como francês ou alemão.

Ignite UI for Angular Grid – Uma grade projetada para alcance global

Ignite UI for Angular Grid fornece recursos internos para dar suporte à localização, permitindo que os desenvolvedores apresentem dados de uma maneira cultural e linguisticamente apropriada para os usuários. Isso inclui formatar datas, números e moedas de acordo com as configurações regionais, o que aprimora a experiência do usuário e a usabilidade do seu aplicativo. O Angular Grid foi projetado para ajudar os desenvolvedores a fornecer experiências de dados localizadas para públicos globais.

Nossa grade oferece cadeias de caracteres de recursos prontas para uso para mais de 20 idiomas, incluindo francês, japonês, espanhol e muito mais. Eles estão disponíveis por meio do pacote igniteui-angular-i18n, exceto para o inglês, que é a localização padrão em igniteui-angular. Ao aproveitar o pacote igniteui-angular-i18n, os desenvolvedores podem carregar e aplicar esses pacotes de idiomas em apenas algumas etapas, criando uma interface personalizada e culturalmente precisa.

Embora o Ignite UI ofereça suporte a uma ampla variedade de idiomas, ele também permite fácil personalização, para que você possa definir seus recursos localizados se um idioma não estiver disponível. Essa flexibilidade garante que a grade se alinhe precisamente com as nuances linguísticas e culturais do seu público.

Com Ignite UI, formatação de data e número, símbolos de moeda e outras representações de dados críticos são localizados automaticamente. Ao importar as cadeias de caracteres de recursos necessárias ou criar pacotes de idiomas personalizados, os desenvolvedores podem aprimorar rapidamente a usabilidade e o apelo de seus aplicativos em escala global.

Explore Ignite UI para obter mais detalhes sobre o i18n e as opções de localização.