Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Localization

Construyendo tu Startup con PHP: Localización con I18n

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Geolocation and Google Places
Building Your Startup: Access Control, Active Record Relations and Slugs

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Esta es la cuarta parte de la serie Construyendo tu Startup con PHP en Tuts +. En esta serie, te estoy guiando a través del lanzamiento de una startup, desde el concepto a la realidad utilizando mi aplicación Meeting Planner como un ejemplo de la vida real. A cada paso en el camino, liberaremos el código de Meeting Planner como ejemplos de código abierto de lo cuales puedes aprender. También veremos las cuestiones de negocios que puedan surgir relacionados con la puesta en marcha.

En este tutorial, quería retroceder y añadirle soporte de internacionalización I18n a nuestra aplicación antes de construir más y más código. Según Wikipedia, I18n es un numeronym:

18 se refiere al número de letras entre la primera i y la última n en la palabra internacionalización, un uso acuñado en DEC en la década de 1970 o en los años 80.

Con I18n, todas las cadenas de texto que se muestran al usuario de la aplicación, son sustituidos por las llamadas de función que pueden cargar dinámicamente cadenas traducidas para cualquier idioma que el usuario seleccione.

Todo el código para el Meeting Planner está escrito con el framework para PHP, Yii2, que tiene incorporado el soporte para I18n. Si deseas más información sobre Yii2, revisa nuestra serie paralela Programando con Yii2 en Tuts +.

Simplemente un recordatorio, participo en las cadenas de comentarios más abajo. Me interesa sobre todo si tienes diferentes enfoques o ideas adicionales o si deseas sugerir temas para futuros tutoriales.

Los Objetivos de Internacionalización

Al construir una startup, es útil pensar globalmente desde el comienzo, pero no siempre. Alternativamente, puede tener sentido centrarse en construirla sólo para tu mercado local. ¿Tu producto mínimo viable necesita funcionar en otros idiomas para los usuarios de diferentes países?

En nuestro caso, el Framework Yii proporciona una compatibilidad integrada para el I18n, por lo que es relativamente fácil construir el soporte para I18n desde el principio — y demandante de tiempo añadirlo más tarde.

Cómo Funciona el I18n

El I18n opera mediante la sustitución de todas las referencias al texto que se muestra al usuario con la función de llamadas que ofrecen la traducción cuando sea necesario.

Por ejemplo, así es cómo se ven los nombres de los atributos antes del I18n:

Proporcionar versiones traducidas del código sería muy complicado. Traductores no técnicos tendrían que traducir el código en su lugar, probable ruptura de sintaxis.

Así es como se ve el mismo código con I18n:

Yii:t() es una función que comprueba el idioma seleccionado y muestra la cadena apropiada traducida. 'frontend' se refiere a una sección de nuestra aplicación. Las traducciones pueden ser opcionalmente organizadas según distintas categorías. Pero, ¿dónde aparecen estas cadenas traducidas?

El idioma predeterminado, en este caso el inglés, se escribe en el código, como se muestra arriba. Los archivos del idioma son listas de arreglos de strings cuya clave es el texto en el idioma por defecto—ej. 'Tipo de lugar', y cada archivo proporciona valores de texto traducido para su idioma apropiado.

Aquí hay un ejemplo de nuestro archivo de traducción al Español completo, cuyo código de lenguaje es  "es". La función Yii:t() usa este archivo para encontrar la traducción apropiada para mostrar:

Si bien esto parece que toma mucho tiempo, Yii proporciona secuencias de comandos para automatizar la generación y organización de estos archivos.

Separando el texto del código, hacemos más fácil para que los expertos multilingües sin conocimientos técnicos traduzcan nuestras aplicaciones por nosotros, sin romper el código.

I18n también ofrece funciones especializadas para la traducción del tiempo, tipo de moneda, plurales et al. No detallaré esas funciones en este tutorial.

Configuración del Soporte de I18n

Desafortunadamente, la documentación de Yii2 para I18n no es muy descriptiva, y es difícil encontrar ejemplos de trabajos paso a paso. Por suerte para ti, voy a guiarte por lo que he aprendido de pulir la documentación y la web. He encontrado el ejemplo de I18n del Código Ninja y la útil Guía Definitiva de Yii2 en I18n y el colaborador de Yii  Alexander Makarov también me ofreció ayuda.

Generar el Archivo de Configuración de I18n

Estamos utilizando la plantilla de Yii2 avanzada para el Meeting Planner. Esto crea dos aplicaciones Yii en nuestro código base, frontend y backend. Y crea un área común para los modelos compartidos entre ambas aplicaciones. Los archivos de configuración de Yii son cargados cada vez que se hacen las solicitudes de las páginas. Vamos a usar los scripts de mensajes de I18n de Yii para construir un archivo de configuración para I18n en la ruta common/config.

De nuestra raíz de código base, corremos el script de Yii mensaje/config:

Esto genera la siguiente plantilla de archivo que podemos personalizar:

Yo estoy personalizando mi archivo. Muevo  messagePath hasta la parte superior y personalizo sourcePath y messagePath. También estoy especificando los idiomas que quiero que mi aplicación soporte además del inglés, en este caso el español y el alemán, 'es' y 'de'. Aquí hay una lista de todos los códigos de los idiomas de I18n.

En el siguiente paso, ejecutaremos el script de extracto de Yii, que escaneará todo el código en el árbol de sourcePath para generar los archivos de secuencia por defecto para todas las etiquetas utilizadas en nuestro código. Yo estoy personalizando sourcePath para explorar el árbol del código completo. Estoy personalizando messagePath para generar los archivos resultantes en common/messages.

Verás a Yii escanear todos los archivos de código:

Cuando termine, verás algo como esto en tu código:

Meeting Planner I18n Message Files and PathsMeeting Planner I18n Message Files and PathsMeeting Planner I18n Message Files and Paths

Activación de I18n y Selección un idioma

En el archivo de configuraciones comunes, common/config/main.php, le vamos a decir a Yii sobre el soporte de nuestro nuevo idioma. Voy a hacer del español mi idioma predeterminado:

Pero aún hay más que hacer. Tenemos que hacer que nuestro código I18n esté enterado.

Usando el generador de Yii, Gii con I18n

En la segunda parte de esta serie, Construye tu Startup con PHP: Requisitos de las Funciones y Diseño de la Base de Datos, utilizamos el impresionante generador de Yii, Gii, para generar los modelos, controladores y vistas. Sin embargo, no activamos I18n, por lo que todo nuestro código incrusta cadenas de texto. Vamos a rehacer esto.

Volvemos a Gii, probablemente a http://localhost:8888/mp/gii en tu navegador, y vuelve a ejecutar los generadores del modelo y el controlador con el I18n activado.

Nota: Si estuviste pendiente de la tercera parte de nuestra serie, puede que necesites tomar nota de las diferencias con cada archivo y mover manualmente el código. O, puede ser más fácil reemplazar el código con el repositorio de Github de este tutorial, en la parte superior derecha.

Aquí hay un ejemplo de generar el código del modelo de Meeting con el I18n activado. Observa que especificamos "frontend" de nuestra categoría de mensaje. Estamos poniendo todas nuestras cadenas de texto en un archivo de categoría frontend.

Meeting Planner I18n Gii Model GeneratorMeeting Planner I18n Gii Model GeneratorMeeting Planner I18n Gii Model Generator

Hagamos lo mismo para la generación del CRUD para los controladores y las vistas:

Meeting Planner I18n Message CRUD Generator with GiiMeeting Planner I18n Message CRUD Generator with GiiMeeting Planner I18n Message CRUD Generator with Gii

Si navegas por el código generado en los modelos, los controladores y las vistas, verás las cadenas de texto reemplazadas con la función Yii:t('frontend',...)

Traduciendo tus Archivos de Mensajes

Échale un vistazo a nuestro archivo de mensaje en español, /common/messages/es/frontend.php Es una larga lista de valores de matriz vacía:

Para los efectos de rellenar nuestras traducciones en español en este tutorial, usaré Google Translate. Complicado, ¿No?

Meeting Planner I18n Using Google Translator to Fill Message FilesMeeting Planner I18n Using Google Translator to Fill Message FilesMeeting Planner I18n Using Google Translator to Fill Message Files

Luego, copiaremos y pegaremos estas traducciones en el archivo de mensajes.

Cuando visitamos la página de índice del sitio, veremos la versión en Español: bien, ¿No?

Meeting Planner I18n Spanish Places Index PageMeeting Planner I18n Spanish Places Index PageMeeting Planner I18n Spanish Places Index Page

Nota que la barra de navegación permanece en Inglés - esto es debido a que el script Message/Extract no ha tomado las definiciones del array de la navegación en Bootstrap y las convierte usando Yii:t(). Lo haremos a mano. Ten en cuenta también que el texto de la página de inicio y la paginación fue traducido automáticamente — el código base de Yii incluye traducciones para estas cadenas estándar.

Aquí está el formulario Crear un Lugar:

Meeting Planner I18n Spanish Create a Place FormMeeting Planner I18n Spanish Create a Place FormMeeting Planner I18n Spanish Create a Place Form

Si quiero volver al inglés, solo cambio el archivo de configuración /common/main.php, para regresar al inglés:

Meeting Planner Create a Place in EnglishMeeting Planner Create a Place in EnglishMeeting Planner Create a Place in English

También observarás cuando procedas que reemplazar las cadenas en JavaScript tiene sus propias complejidades. No lo he explorado yo mismo, pero la extensión JsTrans de Yii 1.x puede proporcionar una guía útil para darle soporte a esto.

Yendo más lejos con I18n

En definitiva, podríamos querer traducir nuestra aplicación en varios idiomas. Acabo de publicar una petición de una característica de Yii que extienda el script Message/Extract para utilizar la API de Google Translate y así automatizar este proceso. También le he pedido Tuts + para que me deje escribir un tutorial sobre ello, así que debes estar atento. Por supuesto, esto sólo proporciona una traducción básica. Puede que luego desees contratar traductores para refinar los archivos.

Algunas aplicaciones permiten al usuario seleccionar su idioma para que cuando inicien sesión, la interfaz de usuario se traduzca automáticamente para ellos. En Yii, estableciendo la variable $app->language se logra esto:

Otras aplicaciones, como JScrambler.com, aprovechan la ruta de la URL para cambiar de idioma. El usuario simplemente hace clic en el prefijo del idioma que desea, por ejemplo, "FR", y la aplicación automáticamente se traduce:

JScrambler Dynamic Language PathsJScrambler Dynamic Language PathsJScrambler Dynamic Language Paths

Nota: Ve a mi página de Instructor en Tuts + para un próximo tutorial sobre JScrambler, es un servicio bastante útil. Puede que ya haya aparecido en el momento en que leas esto.

El administrador de enlaces de Yii puede proporcionar este tipo de functionalidad también. Probablemente implementaré estas características para el Meeting Planner en un futuro tutorial.

¿Qué sigue?

Espero que hayas aprendido algo nuevo con este tutorial. He usado I18n con Rails antes, pero esta fue la primera vez que lo he implementado con PHP. Queda atento a los próximos tutoriales en nuestra serie de Construyendo tu Startup con PHP, hay un montón de características divertidas en camnino.

Por favor siéntete libre de agregar tus preguntas y comentarios abajo; generalmente, participo en los debates. También puedes encontrarme en Twitter @reifman o envíarme un correo electrónico directamente.

Enlaces relacionados

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.