Internacionalización de Formularios en Rails con i18n y SimpleForm

Clase 21 de 36Curso de Introducción a Ruby on Rails

Contenido del curso

Nuestra primera aplicación

Resumen

Cuando trabajas con scaffolds en Rails y necesitas que tu aplicación soporte múltiples idiomas, la internacionalización (i18n) se convierte en una habilidad fundamental. Aquí se explica paso a paso cómo tomar un formulario generado por Simple Form y traducirlo al español utilizando diccionarios YAML, el helper t, convenciones de Active Record y gemas como rails-i18n e i18n-tasks.

¿Cómo se internacionaliza el título de una vista en Rails?

El punto de partida es el archivo new.html.haml dentro de app/views/categories/ [01:10]. Este archivo contiene un título con el texto "New Category" renderizado como un <h1>. Para internacionalizarlo se reemplaza el texto estático por el helper t con un camino de claves, por ejemplo t('categories.new_category') [01:28].

Sin embargo, el texto no aparece traducido hasta que se configura el locale de la aplicación. Para forzar el idioma español se utiliza un before_action en el ApplicationController que invoca un método llamado set_locale [01:52]. Dentro de ese método se asigna I18n.locale = :es, indicando que el idioma activo será español.

Después es necesario crear el diccionario en español. Rails genera por defecto en.yml y simple_form.en.yml. Se duplican ambos archivos con la terminología es y se edita su contenido [02:18]. En es.yml se cambia la clave raíz de en a es y se añade el camino categories.new_category con el valor "Nueva categoría" [02:50]. Al recargar el navegador, el título aparece correctamente traducido.

¿Cómo traducir etiquetas del formulario con i18n-tasks?

El formulario de categorías se renderiza desde un parcial llamado _form [03:30]. Este parcial comienza con underscore porque es un fragmento reutilizable: tanto la vista new como la vista edit lo invocan mediante el método render [03:48].

Para internacionalizar la etiqueta del campo name, se añade la opción label al componente gráfico de entrada y se usa el helper t con un punto como prefijo seguido de la clave, por ejemplo .name [04:12]. El punto indica que la ruta se resuelve de forma relativa a la vista actual.

En lugar de crear manualmente cada clave en el diccionario, se ejecuta el comando i18n-tasks add-missing desde la consola [04:38]. Este comando:

  • Detecta las claves que faltan en los diccionarios.
  • Crea automáticamente la estructura categories.form.name tanto en inglés como en español.
  • Evita errores tipográficos y ahorra tiempo considerable.

Tras ejecutarlo, se edita el diccionario es.yml para colocar la traducción correspondiente, como "Nombre" [05:00].

¿Cómo se traducen botones y elementos comunes con convenciones de Active Record?

Los botones de acción como "Create" siguen una convención específica dentro del diccionario de internacionalización [05:18]. Se debe agregar en es.yml la estructura:

yaml es: activerecord: models: category: one: "Categoría" other: "Categorías"

Esta convención utiliza singularización y pluralización para que Rails traduzca automáticamente los nombres del modelo en botones y mensajes del sistema [05:40].

Para traducir la palabra "Create" que acompaña al botón, se instala la gema rails-i18n agregándola al Gemfile y ejecutando bundle install [06:10]. Esta gema detecta el locale activo y aplica traducciones predefinidas para patrones comunes, convirtiendo "Create" en "Crear" sin intervención manual [06:32].

¿Cómo crear claves genéricas reutilizables?

El enlace "Back" aparece en múltiples vistas, lo que lo convierte en un candidato ideal para una clave genérica. Se crea un camino llamado common.back con la traducción "Atrás" en el diccionario español [06:52]:

yaml es: common: back: "Atrás"

En la vista new.html.haml se reemplaza el texto "Back" por t('common.back') [07:08]. De esta forma cualquier vista puede reutilizar la misma traducción.

¿Cómo completar la internacionalización de todos los campos?

Para el campo description se replica el mismo patrón usado con name: se añade label: t('.description') en el parcial del formulario, se ejecuta i18n-tasks add-missing y se traduce la clave generada como "Descripción" en es.yml [07:30]. Con esto, la página de creación de categorías queda completamente internacionalizada.

Ahora que dominas el proceso con el modelo Category, el siguiente paso es aplicar exactamente la misma estrategia al modelo Task. ¿Qué otros elementos de tu aplicación consideras que necesitan internacionalización? Comparte tu experiencia en los comentarios.