Ionic 2 - Podrška za višejezičnost

Ionic 2 – Podrška za višejezičnost

Kako raste važnost mobilne aplikacije tako se povećava i nužnost višejezičnosti. U ovom blog proći ćemo kroz postupak dodavanja podrške za višejezičnost korištenjem NG2-Translate plugina. Hrvatski jezik ćemo postaviti kao zadani dok će se uz njega moći odabrati još engleski i njemački jezik.

Uz pretpostavku da ste već pokrenuli novi Ionic 2 projekt možemo krenuti dalje.

Dodavanje NG2-Translate plugina

NG2-Translate plugin dodajemo pomoću naredbe

$ npm install ng2-translate --save

Nakon toga fokus prebacujemo na app.module.ts.

Kako bi uopće mogli koristiti NG2-Translate moramo ga uvesti u app.module.ts.

import { TranslateModule, TranslateStaticLoader, TranslateLoader} from 'ng2-translate/ng2-translate';
import { Http } from '@angular/http';

NG2-Translate kao zadano traži datoteke s prijevodom unutar mape i18n/ i tu ćemo mapu kreirati unutar src/assets.

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

Naravno, sada trebamo kreirati i18n mapu.

Ionic 2 – Podrška za višejezičnost  - kreiranje mape

Odmah nakon toga dodajemo ga i u NgModule niz.

imports: [
  IonicModule.forRoot(MyApp),
  TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [Http]
  })
]

Kreiranje .json datoteka

Za svaki jezik koji želimo omogućiti u Ionic 2 aplikaciji moramo napraviti posebnu .json datoteku. U ovom slučaju imamo tri .json datoteke.

  • hr.json za hrvatski
  • en.json za engleski
  • de.json za njemački

Datoteke izgledaju ovako:

hr.json

{
	"poruka": "Dobrodošli",
	"uvod" : "Uvod",
    "odjava" : "Odjava"
}

en.json

{
	"poruka": "Welcome",
	"uvod" : "Introduction",
     "odjava" : "Log out"
}

de.json

{
	"poruka": "Willkommen",
	"uvod" : "Einführung",
     "odjava" : "Ausloggen"
}

Korištenje višejezičnosti

Odlučili smo da će zadani jezik biti hrvatski. Zato u app.component.ts dodajemo sljedeće:

import {TranslateService} from 'ng2-translate';

...

constructor(_platform: Platform,
            _translate: TranslateService) {}

 _platform.ready().then(() => {
    //Zadani jezik
       _translate.setDefaultLang('hr');
  });

Prikaz prijevoda:

<ion-list inset>
   <ion-item>{{ 'poruka' | translate:param }}</ion-item>
   <ion-item>{{ 'uvod' | translate:param }}</ion-item>
   <ion-item>{{ 'odjava' | translate:param }}</ion-item>
</ion-list>

Jezik koji postavimo na ovaj način automatski se učitava prilikom pokretanja Ionic 2 aplikacije.

ng2-translate zadani jezik

Napredno korištenje višejezičnosti

Što kada želimo korisniku omogućiti da samostalno bira na kojem jeziku želi koristiti mobilnu aplikaciju?

U tom slučaju dodajemo tri funkcije

 translateCroatian(){
    this._translate.use('hr');
  }

   translateEnglish(){
    this._translate.use('en');
  }

   translateGerman(){
    this._translate.use('de');
  }

i tri gumba pomoću kojih će korisnici moći odabrati koji jezik žele koristiti

<ion-row>
    <ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>
</ion-row>

To izgleda ovako:

ng2-translate odabir jezika

Međutim, ovdje imamo jedan problem. Korisnik može odabrati jezik koji želi koristiti u mobilnoj aplikaciji, ali taj jezik se vrati na zadani čim se ponovno učita/osvježi aplikacija.

Kako bi to riješili koristiti ćemo localStorage. Kada korisnik odabere jezik podatak o tome sprema se u lokalnu memoriju. Taj podatak ćemo kasnije koristiti kako bi znali je li korisnik odabrao jezik kako bi mu isti mogli prikazati. U konačnici to izgleda ovako:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {TranslateService} from 'ng2-translate';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  en:string;
  de:string;

  constructor(public _navCtrl: NavController,
              public _translate: TranslateService) {
  }

  translateCroatian(){
    this._translate.use('hr');
    //Brisanje EN ili DE iz lokalne memorije
    localStorage.removeItem('language');
  }

   translateEnglish(){
    this._translate.use('en');
    //Spremanje varijable u lokalnu memoriju
    this.en = "EN";
    localStorage.setItem('language',this.en);
  }

   translateGerman(){
    this._translate.use('de');
    //Spremanje varijable u lokalnu memoriju
    this.de = "DE";
    localStorage.setItem('language',this.de);
  }

}

Prilikom pokretanja aplikacije vršit ćemo provjeru odabranog jezika.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';

import {TranslateService} from 'ng2-translate';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(_platform: Platform,
              _translate: TranslateService) {
    _platform.ready().then(() => {

       //Zadani jezik
       _translate.setDefaultLang('hr');

      //Provjera jezika
      if(localStorage.getItem('language') === "EN"){
         _translate.use('en');
      } else if(localStorage.getItem('language') === "DE") {
         _translate.use('de');
      }

      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

Ako u localStorage nemamo zapisano ništa prikazat će se zadani hrvatski jezik. Međutim, ako se u lokalnoj memoriji nalazi EN ili DE to znači da je korisnik kliknuo na gumb i da želi koristiti neki drugi jezik umjesto hrvatskog.

<ion-header>
  <ion-navbar>
    <ion-title>
      NG2-Translate
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

 <ion-row>
    <ion-col><button ion-button color="light" (click)="translateCroatian()">HR</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateEnglish()">EN</button></ion-col>
    <ion-col><button ion-button color="light" (click)="translateGerman()">DE</button></ion-col>
</ion-row>

<ion-list inset>
   <ion-item>{{ 'poruka' | translate:param }}</ion-item>
   <ion-item>{{ 'uvod' | translate:param }}</ion-item>
   <ion-item>{{ 'odjava' | translate:param }}</ion-item>
</ion-list>

</ion-content>

ng2-translate localstorage

Jezik uređaja kao jezik aplikacije

Postoji još jedna opcija, a to je aplikacija bude automatski prevedena na jezik uređaja. Znači, ako korisnik ima kao jezik uređaja postavljen npr. hrvatski jezik onda će mu i aplikacija prilikom pokretanja biti automatski prikazana na hrvatskom jeziku tako da on neće morati raditi ručno pritiskom na gumb kao i primjeru iznad.

Kako bi se ovo omogućilo potrebno je instalirati Globalization plugin.

Nakon instalacije plugin se uveze u app.module.ts

import { Globalization } from '@ionic-native/globalization';

..

providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Globalization  
  ]

I odmah se može koristiti.

Provjeru i postavljenja jezika postavit ćemo u app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
 
import { HomePage } from '../pages/home/home';
 
import { TranslateService } from 'ng2-translate';
import { Globalization } from '@ionic-native/globalization';
 
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;
 
  constructor(_platform: Platform,
              _translate: TranslateService,
              _globalization: Globalization) {
    _platform.ready().then(() => {
          StatusBar.styleDefault();
          Splashscreen.hide();
 
       //Zadani jezik
       _translate.setDefaultLang('hr');
 
       _globalization.getPreferredLanguage().then(result => {
          let deviceLng = result.value.substring(0,2).toLowerCase();
          _translate.use(deviceLng);
         })
    });
  }
}

Zaključak

U ovom smo blog postu prikazali jedan od načina kako omogućiti višejezičnost u Ionic 2 aplikaciji. Naravno da postoji više različitih načina na koje je moguće koristiti višejezičnost i sve ranije navedeno može se prilagoditi specifičnim potrebama svake Ionic 2 aplikacije.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *