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

Nakon toga fokus prebacujemo na app.module.ts.

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

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

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.

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

en.json

de.json

Korištenje višejezičnosti

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

Prikaz prijevoda:

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

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

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:

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

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.

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

I odmah se može koristiti.

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

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ć

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *