Traduzioni Ruby on Rails con IA di qualità umana

Esempio di i18n di Rails: demo di un’app Rails traducibile

Per mostrare come funziona in pratica l’internazionalizzazione (i18n) e la traduzione di Ruby on Rails, abbiamo creato una piccola applicazione demo Rails. L’app visualizza l’ora corrente del server con un pulsante di aggiornamento e include un semplice selettore di lingua. Ogni passaggio seguente ha un riferimento di commit in modo da poter seguire le modifiche del codice.

Innanzitutto, in config/application.rb, indica a Rails quali lingue deve supportare l’app e imposta un locale predefinito.

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

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

Successivamente, aggiungi il locale all’URL in modo che ogni lingua abbia il suo percorso, come /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

Infine, in app/controllers/application_controller.rb, assicurati che Rails carichi il locale corretto dall’URL e lo includa in tutti i link.

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

Ora che l’app supporta più locale, dai agli utenti un modo per passare da uno all’altro.

Rails include già il locale corrente in tutti gli URL generati (a causa del metodo default_url_options in ApplicationController). Ciò significa che puoi creare una semplice interfaccia utente che aggiorna solo il parametro locale mantenendo l’utente sulla stessa pagina.

Nella nostra app demo, il selettore di lingua è aggiunto in app/views/layouts/application.html.erb e stilizzato in 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>

Prima di poter tradurre la tua app, tutto il testo rivolto all’utente deve risiedere nei file i18n di Rails invece di essere hard-coded. Questo significa:

• Fai lo stesso per qualsiasi testo JavaScript visibile (come avvisi o suggerimenti)
• Sostituisci il testo nelle viste e nei controller con le chiavi di traduzione
• Aggiungi quelle chiavi e i loro valori di lingua predefinita a config/locales/en.yml

Parte a. Sostituisci il testo nelle viste e nei controller

Rails utilizza l’helper integrato I18n.t (o semplicemente t) per cercare le stringhe dai tuoi file di traduzione.

<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>

Il testo hard-coded non apparirà nel tuo file YAML, il che significa che non potrà essere tradotto in seguito.

Aggiungi queste chiavi in 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. Aggiungi stringhe JavaScript a YAML

Rails non estrae automaticamente il testo dai file JavaScript. Se hai delle stringhe mostrate agli utenti nel browser, come avvisi, suggerimenti o messaggi di conferma, dovrai inserirle anche nel tuo file YAML della lingua di origine.

Ad esempio, per tradurre un popup di conferma in JavaScript, aggiungi la stringa a config/locales/en.yml:

en:
 confirm: "Are you sure?"

en:
  confirm: "Are you sure?"

Successivamente, questo verrà esportato insieme alle tue traduzioni Ruby in modo che sia le viste che JavaScript utilizzino le stesse chiavi.

A questo punto, il tuo file en.yml contiene tutto il testo che appare nella tua app. Questo file è la versione base che Private Translation Cloud utilizzerà per creare traduzioni in altre lingue.

Ora che tutto il testo della tua app è memorizzato in config/locales/en.yml, puoi accedere al tuo account Private Translation Cloud e generare traduzioni.

• Private Translation Cloud si è connesso al nostro repository e ha rilevato automaticamente il file inglese
• Ha creato versioni tradotte come fr.yml e de.yml
• Ha aperto una pull request con i nuovi file nella stessa cartella

Ogni file tradotto mantiene le stesse chiavi e la stessa struttura della versione inglese, quindi puoi unirli in modo sicuro nel tuo progetto.

I tuoi file .yml tradotti funzionano automaticamente nelle viste Rails. Ma JavaScript non può leggere YAML: ha bisogno di JSON.

Per rendere disponibili le tue traduzioni in JavaScript, usa la gem i18n-js per convertire YAML in un file JSON che il browser possa leggere:

1. Aggiungi la gem i18n-js al tuo Gemfile ed esegui bundle install.
2. Dopo l’installazione, esegui i18n init per generare la configurazione predefinita.
3. Aggiorna la tua configurazione per impostare il file su public/locales.json. Questo prepara la tua app a memorizzare le traduzioni in un file JSON a cui JavaScript può accedere.

Ora, esegui il comando i18n export. Questo comando legge i tuoi file .yml e scrive le chiavi tradotte in public/locales.json.

Con locales.json in posizione, puoi caricare le traduzioni nel tuo codice JavaScript e visualizzare il testo corretto in base alla lingua attiva.

Rails 7 include Importmap , che semplifica la gestione delle dipendenze JavaScript senza bundler.

1. Fissa le librerie in 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. Crea un file in app/javascript/load_locale.js e aggiungi uno script di caricamento per recuperare il file 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;
}

Ora il tuo JavaScript può recuperare le traduzioni e visualizzarle proprio come le viste Rails.

A questo punto, Rails sta esportando le traduzioni in locales.json e il tuo JavaScript può caricarle. L’ultimo passo è assicurarsi che JavaScript utilizzi lo stesso locale delle viste Rails.

1. Passa il locale corrente al frontend aggiungendolo al tag <body>:

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

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

2. Importa i18n-js e la funzione di caricamento nel tuo JavaScript:

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

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

3. Quando la pagina si carica, recupera le traduzioni e imposta il locale:

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
  }
})

Ora, il tuo JavaScript mostrerà i messaggi nella lingua selezionata, proprio come le tue viste Rails.

Con questo, l’app demo è completamente multilingue: le viste Rails e JavaScript visualizzano entrambe la lingua giusta e Private Translation Cloud mantiene aggiornate le traduzioni.