Rails I18n: Múltiplos idiomas no seu APP Rails (internacionalização)

Rails I18n: Múltiplos idiomas no seu APP Rails

É comum a necessidade de dar suporte a outros idiomas em um APP Rails, felizmente toda a estrutura necessária para fazer isto já vem incluída no framework (através da gem Rails I18n).

Neste Artigo você vai aprender de forma prática como deixar seu APP em dois idiomas utilizando as ferramentas que o Rails disponibiliza.

Porém antes, só para que você compreenda o que significa o termo i18n, dá uma olhada no que o Wikipedia diz sobre internacionalização (i18n) e localização (l10n):

 

Internacionalização e localização, em informática, são processos de desenvolvimento e/ou adaptação de um produto, em geral softwares de computadores, para uma língua e cultura de um país

 

Bem legal né? Além da vantagem de poder incluir múltiplos idiomas no seu APP, é válido utilizar a estrutura do i18n no seu projeto para que seus textos não fiquem acoplados ao HTML, dessa forma fica mais fácil editar e controlar tudo.

 

O que vamos criar?

Através deste guia, você desenvolverá um site sobre Cinema, com dois idiomas diferentes (Inglês e Português)

Será possível alterar para o idioma de sua preferência de forma intuitiva, e essa escolha ficará salva durante a navegação.
Na execução deste projeto abordaremos temas sobre como definir traduções para models, atributos, datas e textos.

 

 

  Dependências

• Ruby 2.5
• Rails 5.2
• gem ‘flag-icons-rails’
• gem ‘materializecss’

 

Caso não tenha o ruby e o rails instalados, prepare seu ambiente de desenvolvimento com este breve tutorial:
Instalando o Rails e suas dependências no Linux

 

 

 

Passo a Passo do nosso Projeto

A partir desde ponto vamos criar nosso pequeno projeto para você aprender como utilizar cada uma das ferramentas do i18n, vem com a gente nesse projeto rápido e fácil 🙂

 

Setup Inicial – Parte 1

1 – Pelo terminal, vá até o local que você deseja criar o projeto e execute:

2 – Utilizaremos as gems materializecss para estilizar nosso projeto e flag-icon-rails para exibir os ícones das bandeiras Brasileira e Americana, então adicione ao seu Gemfile (Gemfile.rb):

3 – Para instalar as gems rode:

4 – Vamos incluir os estilos das gems instaladas ao nosso projeto, em “app/assets/stylesheets/applications.css” adicione:

 

Filmes – Parte 2

O objetivo do site será exibir as seguintes informações sobre alguns filmes:  Nome do filme Diretor Tempo de duração Data de Lançamento

1 – Para possibilitar a persistência e manipulação destes dados, execute o scaffold que vemos abaixo:

2 – Depois crie o banco de dados e rode as migrations:

3 – Defina que o root do nosso projeto “/” será o controller movies colocando em config/routes.rb o seguinte código:

4 – Nosso formulário foi gerado com um helper chamado data_select. Nós vamos utilizar o helper data_field, então substitua o código de _form.html.erb por app/views/movies/_form.html.erb

 

Localização – Parte 3

O i18n utiliza o Inglês como o local padrão para nossas traduções. Nosso site seguirá este contexto, porém,  caso queira você pode mudar isso de forma fácil em seu arquivo config/application.rb adicionando por exemplo a linha:

Obs: Nossas configurações de linguagem ficam salvas no diretório config/locales.

 

1 – Crie dentro dele um arquivo chamado movies.en.yml (config/locales/movies.en.yml) e depois adicione a ele:

Obs: Os arquivos com extensão yml são sensíveis a indentação. Certifique-se de seguir esta regra na hora de estruturar seu arquivo.

 

2 – Localize o seguinte código em index.html.erb (app/views/movies/index.html.erb):

3 – Substitua ele por:

Obs: Acabamos de dizer a nossa view que o conteúdo dentro das tags h1 e h4 será os textos que definimos na nossa configuração de linguagem (fizemos isso através daquele método translate que vimos lá atrás)

 

4 -Aproveitando que estamos recordando do passado, vamos utilizar aquele outro método chamado localize, primeiro substitua o conteúdo do arquivo en.yml (config/locale/en.yml):

5 – Agora volte ao arquivo index.html.erb (app/views/movies/index.html.erb) e encontre a linha da tabela onde exibimos a data de lançamento dos filmes:

6 – Substitua ela por:

Obs: O que fizemos aqui foi  formatar nossa data para o tipo long que está definido no arquivo en.yml

Caso você queira criar seus próprios formatos, utilize esta documentação do ruby: https://apidock.com/ruby/DateTime/strftime

 

Tradução para o Português – Parte 4

Aprendemos como traduzir textos e formatar datas para língua inglesa. Reutilizaremos este conhecimento para fazer o mesmo em outra língua.

1 – Dentro de config/locales crie o arquivo pt-BR.yml (config/locales/pt-BR.yml)e adicione o código:

2 -Precisamos também definir a tradução para o título e subtítulo da página movies, em config/locales crie o arquivo movies.pt-BR.yml (config/locales/movies.pt-BR.yml) e adicione a ele o código:

3 -Tendo configurado o formato de data e tradução de textos, nosso próximo passo é traduzir o model, crie um novo arquivo em config/locales chamado activerecord.pt-BR.yml (config/locales/activerecord.pt-BR.yml) com o seguinte conteúdo:

Obs: Vamos utilizar essas traduções no cabeçalho de nossa tabela.

4 – Vá até  index.html.erb (app/views/movies/index.html.erb) e substitua seu conteúdo por:

5 – Para que nossa view show.html.erb (app/views/movies/show.html.erb) também seja exibida de acordo com o local do nosso site, substitua seu código por:

6 -Finalizando esta etapa, vamos traduzir as actions de nossas views edit e new, substitua o código do arquivo edit.html.erb (app/views/movies/edit.html.erb) por:

 7 –  substitua também o código do arquivo new.html.erb (app/views/movies/new.html.erb) por:

 

Alterando o idioma – Parte 5

Neste ponto, tornaremos possível a mudança entre os dois idiomas.

1 – Para inserir os links de transição entre Português e Inglês substitua o código de application.html.erb (app/views/layouts/application.html.erb) por:

2 – Vamos alterar o código do controller application_controller.rb (app/controllers/application_controller.rb) por:

Obs: Note que antes de executar qualquer action, definimos o local que estamos utilizando. Se algum parâmetro locale for enviado, salvamos ele em uma variável de sessão para assim utilizarmos em todas as requisições ao nosso site.

 

3 – Pronto, agora é só subir a aplicação com o comando abaixo e utilizar o idioma que você preferir!

  

 Resultado

Conclusão

Através deste post podemos ter uma noção de como é simples e ágil utilizar o I18n. Conseguimos formatar datas e traduzir textos e models sem muita dificuldade.

Em sua jornada no mundo Ruby on Rails, você provavelmente precisará utilizar estes conhecimentos que foram compartilhados e quando isso acontecer estará preparado!

Se gostou do Artigo, deixa um comentário pra gente e compartilhe no Twitter com a galera clicando na frase a baixo,
Valeu \o/

Aprenda a incluir múltiplos idiomas no seu APP #Rails passo a passo o/ Click To Tweet

 

 



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/




Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

 

junho 29, 2018

4
Deixe um comentário

avatar
3 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
JuniorJoseLeonardo ScorzaMarcelo Martins Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Marcelo Martins
Membro
Marcelo Martins

Muito bom. Parabéns

Leonardo Scorza

\o/

Jose Padre
Membro

Muy bueno, gracias

Junior
Visitante
Junior

Muito bom. me ajudou bastante com o i18n.
Obrigado.

Feito com s2 por OneBitCode
%d blogueiros gostam disto: