Ionic 3 – prikaz informacija o uređaju i platformi

Share Button

Postoji mnogo vrsta i verzija mobilnih i drugih uređaja na kojima možemo pokrenuti Ionic aplikaciju, a također postoji i mnogo pluginova tj. dodataka pomoću kojih možemo proširiti mogućnosti Ionic aplikacije. Međutim, mnoštvo mogućnosti donosi i mnoštvo briga jer neće se sve funkcionalnosti moći iskoristiti na svim vrstama uređaja i nama kao developerima je vrlo korisno znati na kojem se uređaju tj. na kojoj se platformi vrti naša Ionic aplikacija kako bi je bolje znali prilagoditi.

Za ovu ćemo svrhu koristiti Device plugin koji dohvaća sljedeće podatke:

  • cordova – verzija Cordove
  • model – naziv modela. Vrijednost koju određuje proizvođač i može se razlikovati u različitim verzijama istog proizvoda
  • platform – naziv operacijskog sustava uređaja
  • uuid – jedinstveni identifikator uređaja
  • version – inačica/verzija operacijskog sustava
  • manufacturer – naziv proizvođača uređaja
  • isVirtual – je li uređaj pokrenut na simulatoru
  • serial – serijski broj uređaja

Dodavanje Device plugina

Pod uvjetom da već imamo pokrenut Ionic projekt možemo dodati IonicNative Device plugin sljedećim naredbama:

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera u app.module.ts

Primjena Device plugina

IonicNativeDevice

U ovom ćemo primjeru prikazati sve informacije koje nam Device plugin može dati na početnoj stranici.

Na uređaju to izgleda ovako

IonicNative Device Instance Members

Zaključak

Kao što se iz ranije navedenog može vidjeti korištenje Device plugina je vrlo logično i jednostavno, a mogućnosti koje pruža su mnogobrojne i ovise jedino o vašoj mašti da određene funkcionalnosti pružite na određenim uređajima i platformama.

Ionic 2 – SQLite za trajno spremanje podataka

Share Button

Jedna od najvažnijih funkcionalnosti svake mobilne aplikacije je mogućnost trajnog spremanja podataka kako bi se oni mogli koristiti kasnije. Podaci koje spremite u SQLite bazu podataka mogu se koristiti kada npr. aplikacija nije povezana s mrežom, a želite korisniku omogućiti da i dalje može pregledavati sadržaj mobilne aplikacije.

VAŽNA NAPOMENA! – Testiranje SQLite baze ne možete raditi unutar web preglednika nego isključivo na uređaju.

Instalacija plugina

Ionic Native 3.x

Ako koristite Ionic Native 3.x plugin ćete instalirati naredbama

U ovom slučaju, kada koristite novi Ionic Native 3.x, plugin se poziva na sljedeći način

Umjesto kao što je bilo do sada

Korištenje SQLite plugina

Plugin za početak trebamo dodati u app.module.ts

Kreiranje tablica

Sada se fokusiramo na app.component.ts gdje ćemo kreirati sve potrebne tablice. Svaki put kada se aplikacija pokrene ova će root komponenta kreirati potrebne tablice ako one već ne postoje.

Korištenje SQLite baze

Na sljedeći način koristimo ranije kreirane tablice. Prvo u konstruktoru moramo otvoriti SQLite bazu. Nakon toga možemo unositi podatke u SQLite bazu, čitati spremljene podatke iz nje ili ih obrisati.

Spremljene podatke možemo prikazati na sljedeći način

Zaključak

Ovo je najjednostavniji prikaz korištenja SQLite baze podataka unutar Ionic 2 projekta. U jednom od sljedećih blog postova pokazati ću kako napraviti SQLite servis koji će olakšati upravljanje offline podacima tj. u kojem će se odvijati sva logika vezana uz kreiranje tablica, spremanje, čitajne i brisanje podataka.

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

Share Button

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.

Ionic 2 – provjera povezanosti s mrežom

Share Button

Iako sam već objavio blog post o provjeri povezanosti s mrežom/internetom za Ionic 1 mislim da je vrijeme da osvježim informacije s uputama vezanim uz Ionic 2. Od sada više nećemo koristiti ngCordova pluginove nego se prebacujemo na Ionic Native.

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

Ionic Native Network plugin

Network plugin ćemo dodati pomoću naredbe $ ionic plugin add cordova-plugin-network-information.

Ionic Native Network

Network servis

Plugin koji smo ranije instalirali daje nam mogućnost da uopće možemo napraviti servis koji će vršiti provjeru povezanosti s mrežom/internetom. Servis ćemo kreirati koristeći Ionic CLI točnije naredbu $ ionic g provider NetworkService.

Ionic2 Network Service

Prilikom kreiranja servisa u njemu se nalazi samo import { Injectable } from '@angular/core'; , a to nam nije dovoljno za provjeru povezanosti s mrežom/internetom. Sada trebamo pozvati ranije instaliran plugin uz dodatak Platform servisa koji će provjeravati na kojoj smo trenutno platformi (Android ili iOS) tj. jesmo li uopće na nekoj od tih platformi.

Sadržaj koji se nalazi u network-service.ts zamijenit ćemo sljedećim:

Servis nam se zapravo sastoji od dvije funkcije isOnline i isOffline koje možemo pozivati bilo gdje u aplikaciji kada želimo provjeriti povezanost s mrežom/internetom.

Iako sada imamo funkcionalan servis još uvijek ga ne možemo koristiti u aplikaciji jer ga nismo naveli u app.module.ts i aplikacija zapravo ne zna za njega. Zato ćemo sada dodati sljedeće u app.module.ts.

Korištenje servisa

Servis koristimo na način da ga pozovemo import { NetworkService } from '../../providers/network-service'; u komponentu tj. klasu u kojoj želimo znati imamo li povezanost s mrežom/internetom.

U ovom primjeru NetworkService će na stranici page1.html provjeravati imamo li povezanost s mrežom/internetom tako da ćemo unutar page1.ts dodati sljedeće:

Unutar page1.html dodali smo sljedeće:

U konačnici to izgleda ovako

Ionic 1 - Ima ili nema interneta

Zaključak

I to je to! Ovo je samo jedna od mogućnosti kako koristiti Ionic Native Network plugin.

Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom. – Ionic aplikacija (ni)je povezana s internetom