Traducciones de Ruby on Rails con IA de calidad humana

Ejemplo de i18n de Rails: demostración de una aplicación de Rails traducible

Para mostrar cómo funciona en la práctica la internacionalización (i18n) y la traducción de Ruby on Rails, hemos creado una pequeña aplicación de demostración de Rails. La aplicación muestra la hora actual del servidor con un botón de actualización e incluye un simple selector de idiomas. Cada paso a continuación tiene una referencia de confirmación para que pueda seguir los cambios de código.

En primer lugar, en config/application.rb, indique a Rails qué idiomas debe admitir la aplicación y establezca una configuración regional predeterminada.

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

A continuación, añada la configuración regional a la URL para que cada idioma tenga su propia ruta, como /en/time o /es/time.

scope "/:locale" do
 get '/time', to: 'home#index', as: :time_display
end

scope "/:locale" do
  get '/time', to: 'home#index', as: :time_display
end

Por último, en app/controllers/application_controller.rb, asegúrese de que Rails carga la configuración regional correcta desde la URL y la incluye en todos los enlaces.

class ApplicationController < ActionController::Base
 around_action :switch_locale

 def switch_locale(&action)
 locale = params[:locale] || I18n.default_locale
 I18n.with_locale(locale, &action)
 end

 def default_url_options
 { locale: I18n.locale }
 end
end

class ApplicationController < ActionController::Base
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

Ahora que la aplicación admite varias configuraciones regionales, ofrezca a los usuarios una forma de cambiar entre ellas.

Rails ya incluye la configuración regional actual en todas las URL generadas (debido al método default_url_options en ApplicationController). Esto significa que puede crear una interfaz de usuario sencilla que solo actualice el parámetro de configuración regional mientras mantiene al usuario en la misma página.

En nuestra aplicación de demostración, el selector de idiomas se añade en app/views/layouts/application.html.erb y se le da estilo en app/assets/stylesheets/application.css.

<nav>
<%= link_to "English", url_for(locale: :en) %> |
<%= link_to "Español", url_for(locale: :es) %> |
<%= link_to "Deutsch", url_for(locale: :de) %>
</nav>

<nav>
  <%= link_to "English",  url_for(locale: :en) %> |
  <%= link_to "Español",  url_for(locale: :es) %> |
  <%= link_to "Deutsch",  url_for(locale: :de) %>
</nav>

Antes de que pueda traducir su aplicación, todo el texto visible para el usuario debe residir en los archivos i18n de Rails en lugar de estar codificado. Esto significa:

• Haga lo mismo con cualquier texto JavaScript visible (como alertas o información sobre herramientas)
• Reemplace el texto en las vistas y los controladores con claves de traducción
• Añada esas claves y sus valores de idioma predeterminado a config/locales/en.yml

Parte a. Reemplace el texto en las vistas y los controladores

Rails utiliza el asistente integrado I18n.t (o simplemente t) para buscar cadenas en sus archivos de traducción.

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

El texto codificado no aparecerá en su archivo YAML, lo que significa que no se podrá traducir más adelante.

Añada estas claves en config/locales/en.yml:

en:
 hello: "Hello"
 current_time: "Current time: %{time}"
 refresh: "Refresh"

en:
  hello: "Hello"
  current_time: "Current time: %{time}"
  refresh: "Refresh"

Parte b. Añada cadenas de JavaScript a YAML

Rails no extrae automáticamente el texto de los archivos JavaScript. Si tiene alguna cadena que se muestre a los usuarios en el navegador, como alertas, información sobre herramientas o mensajes de confirmación, también deberá colocarlos en su archivo YAML de idioma de origen.

Por ejemplo, para traducir una ventana emergente de confirmación en JavaScript, añada la cadena a config/locales/en.yml:

en:
 confirm: "Are you sure?"

en:
  confirm: "Are you sure?"

Más adelante, esto se exportará junto con sus traducciones de Ruby para que tanto las vistas como JavaScript utilicen las mismas claves.

En este punto, su archivo en.yml contiene todo el texto que aparece en su aplicación. Este archivo es la versión base que PTC utilizará para crear traducciones a otros idiomas.

Ahora que todo el texto de su aplicación está almacenado en config/locales/en.yml, puede iniciar sesión en su cuenta de PTC y generar traducciones.

• PTC se conectó a nuestro repositorio y detectó automáticamente el archivo en inglés
• Creó versiones traducidas como fr.yml y de.yml
• Abrió una solicitud de extracción con los nuevos archivos en la misma carpeta

Cada archivo traducido mantiene las mismas claves y estructura que la versión en inglés, por lo que puede fusionarlos de forma segura en su proyecto.

Sus archivos .yml traducidos funcionan automáticamente en las vistas de Rails. Pero JavaScript no puede leer YAML, necesita JSON.

Para que sus traducciones estén disponibles en JavaScript, utilice la gema i18n-js para convertir YAML en un archivo JSON que el navegador pueda leer:

1. Añada la gema i18n-js a su Gemfile y ejecute bundle install.
2. Después de la instalación, ejecute i18n init para generar la configuración predeterminada.
3. Actualice su configuración para establecer el archivo en public/locales.json. Esto prepara su aplicación para almacenar traducciones en un archivo JSON al que JavaScript pueda acceder.

Ahora, ejecute el comando i18n export. Este comando lee sus archivos .yml y escribe las claves traducidas en public/locales.json.

Con locales.json en su lugar, puede cargar traducciones en su código JavaScript y mostrar el texto correcto en función del idioma activo.

Rails 7 incluye Importmap , lo que facilita la gestión de las dependencias de JavaScript sin bundlers.

1. Ancle las bibliotecas en config/importmap.rb:

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

2. Cree un archivo en app/javascript/load_locale.js y añada un script de carga para obtener el archivo JSON:

export async function loadLocale() {
 const response = await fetch('/locales.json');
 const data = await response.json();
 return data;
}

export async function loadLocale() {
  const response = await fetch('/locales.json');
  const data = await response.json();
  return data;
}

Ahora su JavaScript puede obtener las traducciones y mostrarlas al igual que las vistas de Rails.

En este punto, Rails está exportando traducciones a locales.json y su JavaScript puede cargarlas. El último paso es asegurarse de que JavaScript utiliza la misma configuración regional que las vistas de Rails.

1. Pase la configuración regional actual al frontend añadiéndola a la etiqueta <body>:

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

2. Importe i18n-js y la función de carga en su JavaScript:

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

3. Cuando se cargue la página, obtenga las traducciones y establezca la configuración regional:

document.addEventListener('turbo:load', async () => {
 const translations = await loadLocale()
 const i18n = new I18n(translations)

 // use the current locale from the body tag
 i18n.locale = document.body.dataset['locale']

 // Example: confirmation dialog
 if (confirm(i18n.t('confirm'))) {
 // user clicked OK
 }
})

document.addEventListener('turbo:load', async () => {
  const translations = await loadLocale()
  const i18n = new I18n(translations)

  // use the current locale from the body tag
  i18n.locale = document.body.dataset['locale']

  // Example: confirmation dialog
  if (confirm(i18n.t('confirm'))) {
    // user clicked OK
  }
})

Ahora, su JavaScript mostrará mensajes en el idioma seleccionado, al igual que sus vistas de Rails.

Con esto, la aplicación de demostración es totalmente multilingüe: las vistas de Rails y JavaScript muestran el idioma correcto, y PTC mantiene las traducciones actualizadas.