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. 

What Is Internationalization? 

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.

Internationalization in 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.

Localization in 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.