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:
|
1 |
rails new OneBitCine |
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):
|
1 2 |
gem 'flag-icons-rails' gem 'materializecss' |
3 – Para instalar as gems rode:
|
1 |
bundle install |
4 – Vamos incluir os estilos das gems instaladas ao nosso projeto, em “app/assets/stylesheets/applications.css” adicione:
|
1 2 |
*= require flag-icon *= require materialize |
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:
|
1 |
rails g scaffold Movie name:string director:string run_time:string release_date:date --no-stylesheets |
2 – Depois crie o banco de dados e rode as migrations:
|
1 |
rails db:create db:migrate |
3 – Defina que o root do nosso projeto “/” será o controller movies colocando em config/routes.rb o seguinte código:
|
1 |
root to: 'movies#index' |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<%= form_with(model: movie, local: true) do |form| %> <% if movie.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(movie.errors.count, "error") %> prohibited this movie from being saved:</h2> <ul> <% movie.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :name %> <%= form.text_field :name %> </div> <div class="field"> <%= form.label :director %> <%= form.text_field :director %> </div> <div class="field"> <%= form.label :run_time %> <%= form.text_field :run_time %> </div> <div class="field"> <%= form.label :release_date %> <%= form.date_field :release_date %> </div> <div class="btn waves-effect waves-light"> <%= form.submit %> </div> <% end %> |
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:
|
1 |
config.i18n.default_locale = 'pt-BR' |
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:
|
1 2 3 4 |
en: movies: title: Movies subtitle: Informations about some greatest films of all time |
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):
|
1 |
<h1>Movies</h1> |
3 – Substitua ele por:
|
1 2 |
<h1><%= translate 'movies.title' %></h1> <h4><%= translate 'movies.subtitle' %></h4> |
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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
en: date: abbr_day_names: - Sun - Mon - Tue - Wed - Thu - Fri - Sat abbr_month_names: - - Jan - Feb - Mar - Apr - May - Jun - Jul - Aug - Sep - Oct - Nov - Dec day_names: - Sunday - Monday - Tuesday - Wednesday - Thursday - Friday - Saturday formats: default: "%Y-%m-%d" long: "%B %d, %Y" short: "%b %d" month_names: - - January - February - March - April - May - June - July - August - September - October - November - December order: - :year - :month - :day actions: show: Show edit: Edit destroy: Destroy new: New back: Back helpers: submit: create: "Create a %{model}" update: "Update the %{model}" confirm: Are you sure? |
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:
|
1 |
<td><%= movie.release_date %></td> |
6 – Substitua ela por:
|
1 |
<td><%= localize(movie.release_date, format: :long) %></td> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
pt-BR: date: abbr_day_names: - Dom - Seg - Ter - Qua - Qui - Sex - Sáb abbr_month_names: - - Jan - Fev - Mar - Abr - Mai - Jun - Jul - Ago - Set - Out - Nov - Dez day_names: - Domingo - Segunda-feira - Terça-feira - Quarta-feira - Quinta-feira - Sexta-feira - Sábado formats: default: "%d/%m/%Y" long: "%d de %B de %Y" short: "%d de %B" month_names: - - Janeiro - Fevereiro - Março - Abril - Maio - Junho - Julho - Agosto - Setembro - Outubro - Novembro - Dezembro order: - :day - :month - :year actions: show: Exibir edit: Editar destroy: Excluir new: Novo back: Voltar helpers: submit: create: "Criar %{model}" update: "Alterar %{model}" confirm: Você tem certeza? |
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:
|
1 2 3 4 |
pt-BR: movies: title: Filmes subtitle: Informações sobre alguns dos maiores filmes de todos os tempos |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
pt-BR: activerecord: models: movie: one: Filme other: Filmes attributes: movie: name: nome director: diretor run_time: tempo de duração release_date: data de lançamento |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<p id="notice"><%= notice %></p> <h1><%= translate 'movies.title' %></h1> <h4><%= translate 'movies.subtitle' %></h4> <table> <thead> <tr> <th><%= @movies.human_attribute_name("name") %></th> <th><%= @movies.human_attribute_name("director") %></th> <th><%= @movies.human_attribute_name("run_time") %></th> <th><%= @movies.human_attribute_name("release_date") %></th> <th colspan="3"></th> </tr> </thead> <tbody> <% @movies.each do |movie| %> <tr> <td><%= movie.name %></td> <td><%= movie.director %></td> <td><%= movie.run_time %></td> <td><%= localize(movie.release_date, format: :long) %></td> <td><%= link_to "#{translate 'actions.show'}", movie %></td> <td><%= link_to "#{translate 'actions.edit'}", edit_movie_path(movie) %></td> <td><%= link_to "#{translate 'actions.destroy'}", movie, method: :delete, data: { confirm: "#{translate 'confirm'}" } %></td> </tr> <% end %> </tbody> </table> <br> <%= link_to "#{translate 'actions.new'}", new_movie_path %> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<p id="notice"><%= notice %></p> <p> <strong><%= translate 'activerecord.attributes.movie.name'%>:</strong> <%= @movie.name %> </p> <p> <strong><%= translate 'activerecord.attributes.movie.director'%>:</strong> <%= @movie.director %> </p> <p> <strong><%= translate 'activerecord.attributes.movie.run_time'%>:</strong> <%= @movie.run_time %> </p> <p> <strong><%= translate 'activerecord.attributes.movie.release_date'%>:</strong> <%= localize(@movie.release_date, format: :long) %> </p> <%= link_to "#{translate 'actions.edit'}", edit_movie_path(@movie) %> | <%= link_to "#{translate 'actions.back'}", movies_path %> |
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:
|
1 2 3 4 5 6 |
<h1><%= translate 'actions.edit'%> <%= @movie.model_name.human %> </h1> <%= render 'form', movie: @movie %> <%= link_to "#{translate 'actions.show'}", @movie %> <%= link_to "#{translate 'actions.back'}", movies_path %> |
7 – substitua também o código do arquivo new.html.erb (app/views/movies/new.html.erb) por:
|
1 2 3 4 5 |
<h1><%= translate 'actions.new'%> <%= @movie.model_name.human %> </h1> <%= render 'form', movie: @movie %> <%= link_to "#{translate 'actions.back'}", movies_path %> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>OneBitCine</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> </head> <body> <div class="container"> <a href="<%= request.path %>?locale=en"> <span class="flag-icon flag-icon-us"></span> </a> <a href="<%= request.path %>?locale=pt-BR"> <span class="flag-icon flag-icon-br"></span> </a> <%= yield %> </div> </body> </html> |
2 – Vamos alterar o código do controller application_controller.rb (app/controllers/application_controller.rb) por:
|
1 2 3 4 5 6 7 8 |
class ApplicationController < ActionController::Base before_action :set_locale def set_locale session[:locale] = params[:locale] if params[:locale].present? I18n.locale = session[:locale] || I18n.default_locale end end |
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!
|
1 |
rails s |
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/
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
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 também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!
Fique por dentro de todos os conteúdos o/
Nossas redes sociais:
📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
📱 • 10 simple rules for dating my daughter
🐦 • https://onebitcode.com/free-best-granny-dating-sites/
Nossos cursos:
🥇 • kansas city backpage women seeking men
💎 • Curso Completo de Ruby
⚙ • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec
Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
Muito bom. Parabéns
\o/
Muy bueno, gracias
Muito bom. me ajudou bastante com o i18n.
Obrigado.
Outra Gem legal de usar é o Route_translator que traduz as rotas de model e controlers para a linguagem do 1n que o site estiver usando naquele momento
por exemplo traduziria
http://www.teste.com/users/new
para
http://www.teste.com/usuarios/criar ou /novo como tu colocar no arquivo de tradução de rotas
faltou o link da gema
https://github.com/enriclluelles/route_translator/tree/master/lib/route_translator