Internacionalización en Ionic - Javascript

La internacionalización es un proceso que permite adaptar una aplicación a distintas culturas, idiomas o regiones. En el caso de las aplicaciones móviles desarrolladas con Ionic, existe la posibilidad de implementar la internacionalización en el frontend utilizando Javascript.

A continuación, se describe cómo llevar a cabo este proceso en Ionic utilizando la librería ngx-translate.

ngx-translate

ngx-translate es una librería de internacionalización para Angular y Ionic que permite la traducción de textos en aplicaciones web y móviles. Para utilizar esta librería en Ionic, es necesario instalarla mediante el comando:

npm install @ngx-translate/core --save

También es necesario instalar la librería que proporciona el soporte para las flujos de internacionalización:

npm install @ngx-translate/http-loader --save

Configuración

Una vez instalada la librería, es necesario realizar algunas configuraciones en la aplicación. En el archivo app.module.ts se deben importar y configurar ngx-translate, como se muestra a continuación:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
      }
    })],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

En la sección de imports se importan las clases relacionadas a ngx-translate y se configura el proveedor para las traducciones en el archivo JSON correspondiente. En esta caso, se utiliza el archivo ./assets/i18n.json.

Uso

Para utilizar ngx-translate en la aplicación es necesario importar la clase TranslateService desde @ngx-translate/core. A continuación, se muestra un ejemplo de cómo utilizar esta clase:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponent {

    constructor(private translate: TranslateService) {
        this.translate.setDefaultLang('en');
    }

    switchLanguage(language: string) {
        this.translate.use(language);
    }
}

En el constructor se establece el idioma por defecto de la aplicación y en el método switchLanguage se cambia el idioma de la aplicación al idioma seleccionado (el cual se recibe como parámetro).

Para utilizar el servicio de traducción, se deben agregar etiquetas en los archivos correspondientes de la aplicación con la etiqueta "translate" y se indica el texto que se desea traducir.

<ion-header>
  <ion-toolbar>
    <ion-title>
      <ion-img src="assets/icon/ionic.png" alt="Ionic"></ion-img>
      {{ 'HELLO' | translate }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h1>{{ 'WELCOME' | translate }}</h1>
  <p>
    {{ 'MESSAGE' | translate:{value: '. Learn Ionic now!'} }}
  </p>

  <div class="button-group">
    <button ion-button (click)="switchLanguage('es')">Español</button>
    <button ion-button (click)="switchLanguage('en')">English</button>
  </div>
</ion-content>

En este caso, se utiliza la etiqueta "translate" en los títulos del encabezado y en el contenido principal de la página.

Conclusión

La internacionalización en Ionic es una tarea fundamental para esta aplicación y mediante el uso de la librería ngx-translate se puede realizar este proceso de manera sencilla e intuitiva. Con unos pocos pasos se puede implementar una solución escalable y fácil de mantener para la traducción de texto en la aplicación.