Ionic 3 – podrška za vibraciju

S obzirom da za nekoliko sati stiže Božić potrudit ću se ovaj blog post učiniti što konkretnijim bez puno okolišanja. U nastavku ću pokazati kako u Ionic aplikaciju dodati podršku za vibraciju.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

Sada ću instalirati Ionic Native Vibration plugin:

Nakon toga, kako je i navedeno u službenoj dokumentaciji, dodajem plugin unutar app.module.ts

Za potrebu ovog blog posta napravit ću tri funkcije

I napraviti tri gumba koji će aktivirati te funkcije

Zaključak

Vibracija je jedna od onih funkcionalnosti koja nekoj mobilnoj aplikaciji može dati završni sjaj ili ju učiniti odbojnom korisnicima i zato treba ju treba pažljivo koristiti.

I za kraj, struktura projekta prema package.json

Ažuriranje Ionic Android aplikacije bez Google Storea

Ažuriranje Ionic aplikacije moguće je na nekoliko načina. Prvi je naravno koristeći Google Store, drugi je koristeći Ionic Deploy, treći je ručna instalacija nove verzije aplikacije svakom korisniku posebno dok je četvrti način koristeći App Update plugin (u slučaju ovog plugina moguće je ažurirati isključivo Android verzije Ionic aplikacije).

Više o načinu korištenja App Update plugina u nastavku ovog blog posta.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu jer kasnije planiram aplikaciju pokrenuti na Android mobilnom uređaju

Sada ću instalirati App Update plugin koji će biti zadužen za ažuriranje aplikacije.

Plugin odmah dodajem u app.module.ts

Trenutna verzija aplikacije (0.0.1) navedena je u config.xml datoteci.

Kako bi kasnije mogao provjeriti postoji li nova verzija Android aplikacije moram ugraditi glavnu funkcionalnost koja će se nalaziti unutar home.ts datoteke.

Za potrebu ovog primjera promijeniti ću sadržaj unutar home.html datoteke u kojoj ću prikazati trenutnu verziju Ionic aplikacije.

P.S. Nakon instalacije App Update plugina nisam mogao instalirati Ionic aplikaciju na uređaj niti kreirati APK zbog sljedeće greške

Ažuriranje Ionic Android aplikacije

To sam riješio instalacijom Android Support v4 client library

Aplikaciju nakon toga uspješno pokrećem

Ažuriranje Ionic Android aplikacije

Nova verzija aplikacije

Sada ću kreirati novu verziju aplikacije u kojoj ću samo promijeniti sadržaj unutar home.html datoteke.

Također, isto moram napraviti i unutar config.xml datoteke jer inače nije moguće ažurirati aplikaciju.

Gdje se nalazi nova verzija aplikacije?

Pretpostavimo da moju aplikaciju koristi nekoliko desetaka osoba na raznim lokacijama i da svima njima moram poslati novu verziju. S obzirom da to nisam u mogućnosti napraviti koristeći npr. Google Store moram smisliti novu lokaciju s koje korisnici mogu preuzeti novu verziju aplikacije. Ranije sam već unutar Ionic aplikacije naveo da će se nove verzije aplikacije nalaziti na poveznici ‘https://www.tomislavstankovic.com/Ionic/update.xml’ pa ju sada moram i kreirati.

To činim putem FTP-a na način da kreiram mapu naziva “Ionic” unutar koje se nalazi informacija u novoj verziji Ionic aplikacije kao i sama Ionic aplikacija tj. novi APK.

Kreiram datoteku update.xml

I uploadam novi APK.

Ažuriranje Ionic Android aplikacije

Kada sljedeći put pokrenem aplikaciju automatski će se provjeriti postoji li ažuriranje i ako postoji ono će se automatski instalirati.

Ažuriranje Ionic Android aplikacije

Zaključak

Korištenje App Update plugina dobro je rješenje u slučajevima kada želite svoju Ionic aplikaciju učiniti dostupom odabranom krugu osoba, npr. unutar neke tvrtke, tj. kada ju ne želite učiniti javno dostupnom putem Google Storea.

I za kraj, struktura projekta prema package.json datoteci

Ionic 3 – prikaz informacija o uređaju i platformi

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

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

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.