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.

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

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