Ruby on Rails-Übersetzungen mit KI in menschlicher Qualität

Rails i18n Beispiel: Demo einer übersetzbaren Rails-App

Um zu zeigen, wie die Internationalisierung (i18n) und Übersetzung von Ruby on Rails in der Praxis funktioniert, haben wir eine kleine Rails-Demoanwendung erstellt. Die App zeigt die aktuelle Serverzeit mit einem Aktualisierungsbutton an und enthält einen einfachen Sprachumschalter. Jeder Schritt unten enthält eine Commit-Referenz, damit Sie die Codeänderungen nachvollziehen können.

Zuerst, in config/application.rb, teilen Sie Rails mit, welche Sprachen die App unterstützen soll und legen Sie ein Standard-Locale fest.

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

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

Fügen Sie als Nächstes das Locale zur URL hinzu, damit jede Sprache ihren eigenen Pfad hat, wie /en/time oder /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

Stellen Sie schließlich in app/controllers/application_controller.rb sicher, dass Rails das richtige Locale aus der URL lädt und in alle Links aufnimmt.

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

Da die App nun mehrere Locales unterstützt, geben Sie den Benutzern eine Möglichkeit, zwischen ihnen zu wechseln.

Rails enthält die aktuelle Locale bereits in allen generierten URLs (aufgrund der Methode default_url_options in ApplicationController). Das bedeutet, dass Sie eine einfache Benutzeroberfläche erstellen können, die nur den Locale-Parameter aktualisiert, während der Benutzer auf derselben Seite bleibt.

In unserer Demo-App wird der Sprachumschalter in app/views/layouts/application.html.erb hinzugefügt und in app/assets/stylesheets/application.css gestylt.

<nav>
  <%= link_to "Englisch", url_for(locale: :en) %> |
  <%= link_to "Spanisch", 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>

Bevor Sie Ihre App übersetzen können, müssen alle benutzerorientierten Texte in Rails i18n-Dateien liegen, anstatt fest codiert zu sein. Das bedeutet:

• Machen Sie dasselbe für alle sichtbaren JavaScript-Texte (wie Warnungen oder Tooltips)
• Texte in Ansichten und Controllern durch Übersetzungsschlüssel ersetzen
• Fügen Sie diese Schlüssel und ihre Standard-Sprachwerte hinzu zu config/locales/en.yml

Teil a. Texte in Ansichten und Controllern ersetzen

Rails verwendet den integrierten I18n.t (oder einfach t) Helfer, um Zeichenketten aus Ihren Übersetzungsdateien nachzuschlagen.

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

Fest codierter Text wird nicht in Ihrer YAML-Datei angezeigt, was bedeutet, dass er später nicht übersetzt werden kann.

Fügen Sie diese Schlüssel in config/locales/en.yml hinzu:

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

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

Teil b. JavaScript-Strings zu YAML hinzufügen

Rails extrahiert Text nicht automatisch aus JavaScript-Dateien. Wenn Sie Zeichenketten haben, die Benutzern im Browser angezeigt werden, wie z. B. Warnmeldungen, Tooltips oder Bestätigungsnachrichten, müssen Sie diese ebenfalls in Ihrer YAML-Datei der Ausgangssprache ablegen.

Um beispielsweise ein Bestätigungs-Popup in JavaScript zu übersetzen, fügen Sie den String zu config/locales/en.yml hinzu:

en:
 confirm: "Are you sure?"

en:
  confirm: "Are you sure?"

Später wird dies zusammen mit Ihren Ruby-Übersetzungen exportiert, sodass sowohl Ansichten als auch JavaScript dieselben Schlüssel verwenden.

An diesem Punkt enthält Ihre en.yml-Datei den gesamten Text, der in Ihrer App erscheint. Diese Datei ist die Basisversion, die PTC verwenden wird, um Übersetzungen in andere Sprachen zu erstellen.

Da nun der gesamte Text Ihrer App in config/locales/en.yml gespeichert ist, können Sie sich in Ihr PTC-Konto einloggen und Übersetzungen generieren.

• PTC hat sich mit unserem Repository verbunden und die englische Datei automatisch erkannt
• Es wurden übersetzte Versionen wie fr.yml und erstellt. de.yml
• Es wurde ein Pull-Request mit den neuen Dateien im selben Ordner geöffnet

Jede übersetzte Datei behält dieselben Schlüssel und dieselbe Struktur wie die englische Version, sodass Sie sie sicher in Ihr Projekt integrieren können.

Ihre übersetzten .yml-Dateien funktionieren automatisch in Rails-Ansichten. Aber JavaScript kann YAML nicht lesen – es benötigt JSON.

Um Ihre Übersetzungen in JavaScript verfügbar zu machen, verwenden Sie das i18n-js-Gem, um YAML in eine JSON-Datei zu konvertieren, die der Browser lesen kann:

1. Fügen Sie das Gem i18n-js zu Ihrer Gemfile hinzu und führen Sie bundle install aus.
2. Nach der Installation führen Sie i18n init aus, um die Standardkonfiguration zu generieren.
3. Aktualisieren Sie Ihre Konfiguration, um die Datei auf public/locales.json zu setzen. Dies bereitet Ihre App darauf vor, Übersetzungen in einer JSON-Datei zu speichern, auf die JavaScript zugreifen kann.

Führen Sie nun den Befehl i18n export aus. Dieser Befehl liest Ihre .yml-Dateien und schreibt die übersetzten Schlüssel in public/locales.json.

Mit locales.json können Sie Übersetzungen in Ihren JavaScript-Code laden und den korrekten Text basierend auf der aktiven Sprache anzeigen.

Rails 7 enthält Importmap, was die Verwaltung von JavaScript-Abhängigkeiten ohne Bundler vereinfacht.

1. Pinnen Sie die Bibliotheken 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. Erstellen Sie eine Datei in app/javascript/load_locale.js und fügen Sie ein Ladeskript hinzu, um die JSON-Datei abzurufen:

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

Nun kann Ihr JavaScript die Übersetzungen abrufen und sie genau wie Rails-Ansichten anzeigen.

An diesem Punkt exportiert Rails Übersetzungen nach locales.json und Ihr JavaScript kann sie laden. Der letzte Schritt ist sicherzustellen, dass JavaScript dasselbe Locale wie die Rails-Ansichten verwendet.

1. Übergeben Sie das aktuelle Locale an das Frontend, indem Sie es zum <body>-Tag hinzufügen:

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

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

2. Importieren Sie i18n-js und die Ladefunktion in Ihrem JavaScript:

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

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

3. Wenn die Seite geladen wird, rufen Sie die Übersetzungen ab und setzen Sie das Locale:

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

 // das aktuelle Locale aus dem Body-Tag verwenden
 i18n.locale = document.body.dataset['locale']

 // Beispiel: Bestätigungsdialog
 if (confirm(i18n.t('confirm'))) {
 // Benutzer hat OK geklickt
 }
})

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

Nun zeigt Ihr JavaScript Nachrichten in der ausgewählten Sprache an, genau wie Ihre Rails-Ansichten.

Damit ist die Demo-App vollständig mehrsprachig: Rails-Ansichten und JavaScript zeigen beide die richtige Sprache an, und PTC hält die Übersetzungen auf dem neuesten Stand.