Što je i čemu služi Ionic Native 4.x?

Prošlo je skoro 2 godine od kako sam objavio blog post pod naslovom “Čemu služi Ionic Native 3.x?“. S obzirom da su se od tada neke stvari promijenile, stigao je Ionic Framework verzije 4, pravo je vrijeme za novi blog post.

Ionic Native je kolekcija Cordova pluginova koji unutar Ionic aplikacije omogućavaju korištenje nativnih funkcionalnosti mobilnih uređaja.

Ionic Native je od sada dostupan u dva izdanja: Community Edition i Enterprise Edition.

Native Core

Ionic Native Community Edition

Ovo izdanje označava pluginove koje održava open source zajednica tj. Ionic tim ih ne održava, ne popravlja niti garantira da će bilo koji od njih ispravno raditi.

Način instalacije:

Ionic Native Enterprise Edition

Ovo izdanje označava pluginove koje održava, popravlja i za njih garantira Ionic tim.

Posebno je zanimljivo što uključuje Native Core set funkcionalnosti što znači da se unutar jednog plugina nalazi nekoliko važnijih funkcionalnosti.

Način instalacije:

Korištenje s Angularom

Svaki se plugin nakon instalacije dodaje unutar app.module.ts datoteke. Npr. u nastavku se nalazi primjer korištenja Camera plugina.

Ovdje je posebno važno paziti da svaki plugin korišten u Angular projektu ima na kraju oznaku /ngx. Oko ovoga u zadnje vrijeme ima dosta pitanja na Stackoverflowu.

Kako saznati status napunjenosti baterije unutar Ionic aplikacije

Cilj ovog blog posta je prikazati na koji način je moguće unutar Ionic aplikacije saznati kakav je status napunjenosti baterije mobilnog uređaja i je li uređaj trenutno spojen na punjenje. Ovisno o dobivenim parametrima lakše se može upravljati ostalim stanjima unutar aplikacije.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem podršku za Android platformu.

Battery Status

Plugin Battery Status dodajem sljedećim naredbama:

Naravno, nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Battery Status – Ionic Native plugin

Funkcionalnost ću ugraditi unutar HomePage komponente.

Kada se mobilna aplikacija pokrene to izgleda ovako

Ionic status napunjenosti baterije

Gore prikazani rezultat označava da je baterija mobilnog uređaja na 78% kapaciteta napunjenosti i da je trenutno spojena na punjač.

Zaključak

Struktura projekta prema package.json

Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju

Ovaj će blog post biti vrlo sličan jednom ranije objavljenom pod naslovom “Ionic 3 & Google Maps – prikaz rute između dvije lokacije” s tom razlikom da se glavni dio prikaza karte neće odvijati unutar Ionic aplikacije nego u nekoj od nativnih aplikacija instaliranih na mobilnom uređaju.

Kreiranje aplikacije

Kreiram novi Ionic, u ovom slučaju Ionic 3, projekt i odmah dodajem podršku za Android platformu.

Launch Navigator plugin

Launch Navigator plugin omogućava otvaranje nativne aplikacije za navigaciju koja je u tom trenutku instalirana na mobilnom uređaju. Jedino potrebno iz Ionic aplikacije je proslijediti nekoliko parametara, npr. početna i završna lokacija, kako bi se mogla prikazati ruta između njih.

Android platforma trenutno podržava pokretanje sljedećih aplikacija: Google Maps, Waze, CityMapper, Uber, Yandex, Sygic, HERE Maps, Moovit, Lyft, MAPS.ME, Cabify, Baidu Maps, 99 Taxi i Gaode Maps.

Plugin instaliram sljedećim naredbama:

Naravno, nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Na ekranu će se nalaziti samo gumb za pokretanje navigacije.

Funkcionalnost se također sastoji od samo jedne funkcije.

Na ekranu to izgleda ovako:

Ionic Launch Navigator

Kao što se i vidi na zadnjoj slici ponuđena je vožnja putem aplikacije Uber. U slučaju da korisnik mobilnog uređaja u tom trenutku nema instaliranu tu aplikaciju biti će mu omogućeno automatsko instaliranje Uber aplikacije ako se odluči na vožnju.

Zaključak

Struktura projekta prema package.json

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