Guia de Localização e Internacionalização: Como Traduzir o Cliente de API Yaak

O Yaak é um cliente de API moderno e extensível que oferece suporte a protocolos como REST, GraphQL, WebSockets, Server Sent Events e gRPC. Por ser um projeto de código aberto, ele depende da colaboração da comunidade para expandir seu alcance global através da localização da interface. Este guia detalha o processo técnico para contribuir com traduções e melhorar a experiência de usuários em diferentes idiomas.

Arquitetura de Interface e Suporte a Idiomas

A estrutura do Yaak foi desenvolvida com foco em modularidade, facilitando a implementação de novos idiomas. Os principais pontos de interesse no código-fonte para tradução incluem:

  • Configurações de Interface: Localizado em src-web/components/Settings/SettingsInterface.tsx, este arquivo gerencia preferências visuais como tipografia e escala.
  • Suporte a Linguagens de Editor: A integração com o @codemirror/language permite o realce de sintaxe dinâmico.
  • Detecção de Conteúdo: O utilitário src-web/lib/contentType.ts identifica automaticamente o formato das respostas da API para aplicar o tratamento adequado.

Fluxo de Trabalho para Contribuição

1. Configuração do Ambiente

Para iniciar, é necessário realizar o fork e clonar o reepositório oficial para o seu ambiente de desenvolvimento local:

# Clonando o repositório forkado
git checkout -b feature/adicionar-traducao-pt-br
npm install

2. Mapeamento de Strings

O trabalho de localização consiste em identificar strings estáticas dentro dos componentes React, localizados principalmente em src-web/components/. Isso abrange desde rótulos de botões até mensagens de erro e descrições de ferramentas.

3. Implementação de Arquivos de Localização

As traduções devem ser organizadas em arquivos de formato JSON. Se você estiver adicionando suporte ao Português Brasileiro, o arquivo deve seguir uma estrutura hierárquica lógica:

{
  "ui": {
    "interface_settings": "Configurações de Interface",
    "appearance": {
      "font_family": "Família da Fonte",
      "font_size": "Tamanho do Texto",
      "theme_selection": "Seleção de Tema"
    },
    "actions": {
      "save": "Salvar",
      "cancel": "Cancelar",
      "delete": "Excluir"
    }
  }
}

Diretrizes Técnicas e de Qualidade

Para garantir uma tradução de alta qualidade técnica, siga estas recomendações:

  • Consistência Terminológica: Termos técnicos amplamente aceitos na comunidade de desenvolvimento (como "Payload", "Endpoint" ou "Query") podem ser mantidos no original ou traduzidos conforme o uso padrão da indústria.
  • Contextualização: Verifique onde a string aparece na intreface para garantir que o gênero e o número da tradução estejam corretos em relação ao espaço disponível no layout.
  • Tratamento de Variáveis: Ao lidar com strings dinâmicas, certifique-se de manter os placeholders de variáveis intactos para não quebrar a lógica de renderização do React.

Processo de Submissão (Pull Request)

  1. Sincronização: Certifique-se de que seu branch local está atualizado com a main do projeto original.
  2. Validação: Execute os testes locais e verifique se a nova linguagem é carregada corretamente nas configurações do aplicativo.
  3. Envio: Submeta um Pull Request detalhando as alterações e o idioma adicionado. A comunidade revisará a precisão técnica e linguística antes da integração final.

Considerações sobre Layout

Um desafio comum na internacionalização é o comprimento das palavras. O Português costuma ocupar mais espaço que o Inglês. Monitore se a tradução causa quebras de linha inesperadas ou se oculta elementos críticos da interface. Se necessário, utilize termos mais concioss que mantenham o sentido original.

Tags: React TypeScript i18n API-Client open-source

Publicado em 7-25 21:21