Tutoriales

En este tutorial, implementaremos una simple aplicación en multiples idiomas. Usaremos la internacionalización basada en los estándares de formatjs.io. Con el proveedor Antl de AdonisJS.

Beginning C for Arduino, Second Edition: Learn C Programming for the Arduino
Publicidad
Beginning C for Arduino, Second Edition: Learn C Programming for the Arduino by Jack Purdum

¿Qué vamos a construir?

Crearemos una simple aplicación en multiples idiomas (Alemán, Inglés, Español, Francés y Portugués). Cambiaremos de idioma mediante un menú desplegable para visualizar la aplicación en el idioma deseado.

Usaremos AdonisJS 4.1 en este tutorial y a continuación se muestra la tabla de contenido de cómo se desarrollará la aplicación final:

Tabla de contenido

Requerimientos

Este tutorial asume que tienes lo siguiente instalado en tu computadora:

node >= 8.0 o mayor

$ node --version

npm >= 5.0 o mayor

$ npm --version
Fundamentos de programación para principiantes
Publicidad
Fundamentos de programación para principiantes by Raúl Antonio Zavala López

Instalación de Adonis CLI

Primero necesitamos instalar la Adonis CLI que nos ayudará a crear nuevas aplicaciones de AdonisJS:

$ npm i -g adonisjs-cli

Crear el nuevo proyecto

Comenzaremos creando una nueva aplicación de AdonisJS. Haremos uso de Adonis CLI.

$ adonis new adonisjs-antl #Creamos la aplicación

El comando anterior creará una nueva aplicación de AdonisJS con el nombre adonisjs-antl utilizando la plantilla de la aplicación fullstack. Para asegurarnos de que todo funcione como se esperaba, ejecutemos la aplicación recién creada. Primero, ingresamos a la carpeta adonisjs-antl y ejecutamos el siguiente comando:

$ cd adonisjs-antl #Ingresar al proyecto
$ adonis serve --dev #Ejecutamos la aplicación

#info: serving app on http://127.0.0.1:3333

Abrimos http://localhost:3333 en el navegador para ver la página de bienvenida.

¡Bien! Ahora comencemos a desarrollar la aplicación.

Guía de Hábitos Inteligentes: 36 Pequeños Cambios de Vida que su Cerebro Agradecerá
Publicidad
Guía de Hábitos Inteligentes: 36 Pequeños Cambios de Vida que su Cerebro Agradecerá by Appress

Crear el controlador

Utilizaremos solo un controlador principal llamado HomeController. Usaremos el comando adonis make:controller Home de Adonis CLI para crealo:

$ adonis make:controller Home

Cuando se le solicite, elija la opción For HTTP requests y presione Enter. Ahora tenemos un archivo llamado HomeController.js dentro del directorio app/Controllers/Http.

El controlador HomeController tendrá 2 métodos: index() y switchLang(). Abra el archivo HomeController.js y agregue el siguiente código:


//app/Controllers/Http/HomeController.js
'use strict'

class HomeController {

  index({ view, request }) {
    const lang = request.cookie('lang') || 'de'
    const flags = {
      de: 'de',
      fr: 'fr',
      pt: 'pt'
    }
    return view.render('index', { 
      lang: lang, 
      flags: flags      
    })
  }

  switchLang({ response, params }) {
    const lang = params.lang
    response.cookie('lang', lang, { path: '/' })
    response.redirect('back')
  }

}

module.exports = HomeController
  

El método index() lee la cookie lang y simplemente desplegará la vista index (la cual crearemos previamente). El método switchLang() asigna el valor del idioma seleccionado en la cookie lang y redirecciona a la ruta principal.

Crear las rutas de la aplicación

Abra el archivo start/routes.js y lo actualizamos como a continuación:


//start/routes.js
...
Route.get('/', 'HomeController.index').as('index')
Route.get('/switch/:lang', 'HomeController.switchLang').as('switchLang')
...
  

Las rutas definidas nos servirán para otorgarle a la aplicación el comportamiento inicial. Es muy importante definirlas a cada una de ellas, junto con su alias, ya que este alias nos servirá para hacer referencia a nuestras rutas en la vista principal.

Learn Python 3 the Hard Way: A Very Simple Introduction to the Terrifyingly Beautiful World of Computers and Code
Publicidad
Learn Python 3 the Hard Way: A Very Simple Introduction to the Terrifyingly Beautiful World of Computers and Code by Zed A Shaw

Crear la vista principal

Vamos a crear una sola vista llamada index para nuestra aplicación. Todos los archivos de las vistas deben estar dentro del directorio resources/views. Entonces, dentro del directorio, crearemos una nueva vista y le asignamos el nombre index.edge. Abra el archivo recién creado y pegue el siguiente código:

  
  

Usaremos el framework CSS llamado Bootstrap y la librería de banderas del mundo CountryFlags.io, además de las funciónes globales style() y script() de AdonisJS para hacer referencia a nuestros estilos .css y librerías .js respectivamente en CDN.

Hasta este punto, simplemente hemos realizado la base de la aplicación. Cuando se seleccione un idioma, se actualizará la aplicación con el idioma seleccionado. La parte del contenido estará fijo de momento. Si visitamos la aplicación en el navegador, deberíamos obtener algo similar a la siguiente imagen:

Instalación del proveedor Antl

AdonisJs tiene un soporte de primera clase para la internacionalización basada en los estándares de formatjs.io. Con el proveedor Antl, se puede traducir fácilmente números, fechas y mensajes a varios idiomas.

Para continuar, instalaremos el proveedor Antl, ya que no está instalado de forma predeterminada. Entonces, lo instalamos de la siguiente manera:

$ adonis install @adonisjs/antl #Instalamos el proveedor Antl

Cuando se le solicite, elija la opción Filesystem (locales directory) y presione Enter. A continuación, debemos registrar el proveedor dentro del archivo start/app.js.


//start/app.js
const providers = [
  ...
  '@adonisjs/antl/providers/AntlProvider'
]
  

El archivo de configuración para la internacionalización se guarda dentro del archivo config/app.js en la variable locales.


//config/app.js
...
locales: {
  //El tipo de cargador que se usará para cargar la traducción de idiomas
  loader: 'file', //'file' o 'database'
  //El idioma por Default
  locale: 'en' 
}
..
  

Para este ejemplo seleccionamos el tipo de cargador de archivos loader: 'file', por lo tanto, todas las traducciones se deben almacenar dentro del directorio resources/locales.

Cada directorio debe contener una lista de archivos de traducción grupal, para este ejemplo, crearemos la traduccción para los 5 idiomas siguientes: Alemán de, Inglés en, Español es, Francés fr y Portugués pt, además de estar estructurado de la siguiente manera.


└── resources
  └── locales
    ├── de //Alemán
    │ ├── lang.json
    │ ├── page.json    
    ├── en //Inglés
    │ ├── lang.json
    │ ├── page.json    
    ├── es //Español
    │ ├── lang.json
    │ ├── page.json    
    ├── fr //Francés
    │ ├── lang.json
    │ ├── page.json    
    └── pt //Portugués
      ├── lang.json
      ├── page.json    
  
Microsoft Microsoft 365 Personal
Publicidad
Microsoft Microsoft 365 Personal by Microsoft

Crear los archivos de traducción

Para iniciar con las traducciones, crearemos la estructura de cada una de las traducciones. El archivo lang.json contendrá las traducciones del menú desplegable y estará estructurado de la siguiente manera:

Alemán de.


//resources/locales/de/lang.json [Eliminar línea]
{
  "currentLang": "Deutsch",
  "lang-de": "Deutsch",
  "lang-en": "Englisch",
  "lang-es": "Spanisch",
  "lang-fr": "Französisch",
  "lang-pt": "Portugiesisch"
}
  

Inglés en.


//resources/locales/en/lang.json [Eliminar línea]
{
  "currentLang": "English",
  "lang-de": "German",
  "lang-en": "English",
  "lang-es": "Spanish",
  "lang-fr": "French",
  "lang-pt": "Portuguese"
}
  

Español es.


//resources/locales/es/lang.json [Eliminar línea]
{
  "currentLang": "Español",
  "lang-de": "Alemán",
  "lang-en": "Inglés",
  "lang-es": "Español",
  "lang-fr": "Francés",
  "lang-pt": "Portugués"
}
  

Francés fr.


//resources/locales/fr/lang.json [Eliminar línea]
{
  "currentLang": "Français",
  "lang-de": "Allemand",
  "lang-en": "Anglais",
  "lang-es": "Espagnol",
  "lang-fr": "Français",
  "lang-pt": "Portugais"
}
  

Portugés pt.


//resources/locales/pt/lang.json [Eliminar línea]
{
  "currentLang": "Português",
  "lang-de": "Alemão",
  "lang-en": "Inglês",
  "lang-es": "Espanhol",
  "lang-fr": "Francês",
  "lang-pt": "Português"
}
  

La variable currentLang representará el idioma actual, y las variables lang-* la traducción de los 5 idiomas.

Ahora, crearemos la estructura del archivo page.json, el cual contendrá las traducciones del cuerpo de la aplicación y estará estructurado de la siguiente manera:

Alemán de.


//resources/locales/de/page.json [Eliminar línea]
{
  "title": "AdonisJS",
  "description": "AdonisJS ist ein auf Webentwicklung ausgerichtetes Framework, das auf Node.js basiert. Dieser Vorschlag enthält eine Reihe interessanter Funktionen, die von gängigen Frameworks wie Ruby on Rails und Laravel inspiriert wurden. Aufbrechen des vorherrschenden Schemas von konfigurationsorientierten Frameworks im Node.js-Ökosystem",
  "button": "Gehen Sie zur AdonisJS-Seite",
  "footer": "Alle rechte vorbehalten",
  "menuPrivacy": "Privatsphäre",
  "menuTerms": "Begriffe",
  "menuSupport": "Unterstützung"
}
  

Inglés en.


//resources/locales/en/page.json [Eliminar línea]
{
  "title": "AdonisJS",
  "description": "AdonisJS is a web development oriented framework, based on Node.js. This proposal has a series of interesting features inspired by popular frameworks such as: Ruby on Rails and Laravel. Breaking the predominant scheme of configuration-oriented frameworks in the Node.js ecosystem.",
  "button": "Go to the AdonisJS page",
  "footer": "All rights reserved",
  "menuPrivacy": "Privacy",
  "menuTerms": "Terms",
  "menuSupport": "Support"
}
  

Español es.


//resources/locales/es/page.json [Eliminar línea]
{
  "title": "AdonisJS",
  "description": "AdonisJS es un framework orientado al desarrollo web, basado en Node.js. Esta propuesta cuenta con una serie de características interesantes inspiradas en frameworks populares como: Ruby on Rails y Laravel. Rompiendo el esquema predominante de frameworks orientados a la configuración en el ecosistema Node.js.",
  "button": "Ir a la página de AdonisJS",
  "footer": "Todos los derechos reservados",
  "menuPrivacy": "Privacidad",
  "menuTerms": "Terminos",
  "menuSupport": "Soporte"
}
  

Francés fr.


//resources/locales/fr/page.json [Eliminar línea]
{
  "title": "AdonisJS",
  "description": "AdonisJS est un framework orienté développement web, basé sur Node.js. Cette proposition comporte une série de fonctionnalités intéressantes inspirées de cadres populaires tels que: Ruby on Rails et Laravel. Briser le schéma prédominant des frameworks orientés configuration dans l'écosystème Node.js",
  "button": "Accédez à la page AdonisJS",
  "footer": "Tous droits réservés",
  "menuPrivacy": "Confidentialité",
  "menuTerms": "Termes",
  "menuSupport": "Le soutien"
}
  

Portugés pt.


//resources/locales/pt/page.json [Eliminar línea]
{
  "title": "AdonisJS",
  "description": "O AdonisJS é uma estrutura orientada para o desenvolvimento da Web, baseada no Node.js. Esta proposta possui uma série de recursos interessantes inspirados em estruturas populares como: Ruby on Rails e Laravel. Quebrando o esquema predominante de estruturas orientadas à configuração no ecossistema Node.js.",
  "button": "Vá para a página AdonisJS",
  "footer": "Todos os direitos reservados",
  "menuPrivacy": "Privacidade",
  "menuTerms": "Termos e condições",
  "menuSupport": "Suporte"
}
  

La variable title representará el titulo, description la descripción, button el botón, footer el pie de página y así sucesivamente.

Crear el middleware Locale

Los middleware se conectan al ciclo de vida de las solicitudes y/o respuestas de nuestra aplicación. Son un conjunto de funciones ejecutadas en secuencia y nos permiten transformar las solicitudes y/o respuestas.

Para crear un nuevo middleware, usaremos el comando adonis make:middleware Locale:

$ adonis make:middleware Locale

Cuando se le solicite, elija la opción For HTTP requests y presione Enter. Ahora tenemos un archivo llamado Locale.js dentro del directorio app/Middleware. Abra el archivo Locale.js y agregue el siguiente código:


//app/Middleware/Locale.js
'use strict'

class Locale {

  async handle ({ view, request, antl }, next) {
    const lang = request.cookie('lang') || 'en'   
    if (lang) {
      antl.switchLocale(lang)
    }
    view.share({             
      lang: lang,
      flags: {
        de: 'de',
        en: 'us',
        es: 'mx',
        fr: 'fr',
        pt: 'pt'
      },
      locales: antl.availableLocales()
    })
    await next()
  }

}

module.exports = Locale
  

El middleware Locale.js leerá el idioma actual a través de la variable guardada en la cookie lang y nos permitirá cambiar el idioma de nuestra aplicación. Además, pondrá a disposición de todas las vistas las variables lang, flags y locales

A continuación, debemos registrar el middleware Locale dentro del archivo start/kernel.js. Esto nos permitirá ejecutar la traducción del idioma en cada solicitud http de nuestra aplicación. Abra el archivo start/kernel.js y agregue el siguiente código:


//start/kernel.js
const globalMiddleware = [
  ...
  'App/Middleware/Locale'
]
  

Para teminar con la aplicación, modificaremos por último el controlador HomeController en ambos métodos index() y switchLang(). Abra el archivo HomeController.js y agregue el siguiente código:


//app/Controllers/Http/HomeController.js
'use strict'

class HomeController {

  index({ view }) {
    return view.render('index')
  }

  switchLang({ response, params, antl }) {
    const lang = params.lang
    const locales = antl.availableLocales()
    if (locales.indexOf(lang) > -1 ) {
      response.cookie('lang', lang, { path: '/' })               
    }
    response.redirect('back')
  }

}

module.exports = HomeController
  

El método index() quedará de manera más simple y el método switchLang() solo verificará que exista el idioma en nuestra colección de idiomas implementados en nuestra aplicación.

Por último, modificamos la vista index. Abra el archivo index.edge y agregue el siguiente código:


  

Reemplazamos todo el contenido de la aplicación por su respectiva traducción de acuerdo al idioma seleccionado. Usamos el método antl.formatMessage('group.item') para acceder a la respectiva traducción de cada elemento. Para recuperar un valor de la traducción, simplemente haga referencia a él por su clave, donde group representa al archivo [lang|group].json y item el valor de la traducción.

Si visitamos la aplicación en el navegador, deberíamos obtener el siguiente resultado final:

Aprende a programar en Python como si estuvieras en el siglo XXI
Publicidad
Aprende a programar en Python como si estuvieras en el siglo XXI by JJ Merelo

Conclusión

Ahora si, hemos terminado con nuestra aplicación, han visto lo fácil que es implementar multiples idiomas en una aplicación de AdonisJS. Incluso se pueden agregar más funcionalidades tales como representar la aplicación en el idioma del usuario que visite nuestra aplicación. Cabe destacar que también AdonisJS utiliza el estandar de sintaxis de mensajes ICU para formatear mensajes.