Ionic 3 – uspostavljanje telefonskog poziva

Iako se poziv može uspostaviti i korištenjem

ipak je korisno imati više mogućnosti koje pruža Call Number plugin.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

Call Number

Plugin Call Number dodajem sljedećim naredbama:

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

Ekran za uspostavljanje poziva sadržavati će samo jedan gumb.

Funkcionalnost se sastoji od pozivanja call() funkcije.

Kao što se može vidjeti u dokumentaciji https://ionicframework.com/docs/native/call-number/ dva su parametra koja mogu koristiti prilikom uspostavljanja poziva.

Param Type Details
numberToCall string The phone number to call as a string
bypassAppChooser boolean Set to true to bypass the app chooser and go directly to dialer

U mojem primjeru koristio sam false zato što želim da me aplikacija puta putem koje aplikacije želim uspostaviti poziv.

Nakon klik na gumb za uspostavu poziva napuštam Ionic aplikaciju.

Ionic 3 – uspostavljanje telefonskog poziva

U tom trenutku prvo što se događa je to da Ionic aplikacija traži dozvolu za korištenje te funkcionalnosti. Nakon što se dobije dozvola biti će mi ponuđene sve aplikacije koje imam instalirane na mobilnom uređaju, a koje imaju mogućnost uspostavljanja poziva. Da sam u gornjem primjeru koristio true umjesto false u tom mi se slučaju ne bi prikazao taj popis aplikacija nego bi se poziv uspostavio odmah.

Ionic 3 – uspostavljanje telefonskog poziva

Zaključak

Struktura aplikacije prema package.json

Ionic – kako odrediti minimalnu verziju Androida

Jedan od detalja o kojemu je potrebno razmišljati prije nego se krene s razvojem Ionic aplikacije za Android platformu je minimalna podržana verzija Androida na kojoj će se Ionic aplikacija moći pokrenuti.

Ionic – kako odrediti minimalnu verziju Androida

To se može postaviti unutar config.xml datoteke, a izgleda ovako:

U primjeru iznad stoji <preference name="android-minSdkVersion" value="19" /> što znači da se ta Ionic aplikacija može pokrenuti na verziji Androida KitKat (4.4 – 4.4.4) ili novijoj.

Na Google Play Storeu to će izgledati ovako:

Ionic – kako odrediti minimalnu verziju Androida

Ako sam aplikaciju testirao na raznim verzijama i zaključio da se najbolje ponaša na verziji Lollipop (5.0 – 5.1.1) ili novijoj onda ću postaviti sljedeće:

U tom će slučaju ta informacija na Google Play Storeu izgledati ovako:

Ionic – kako odrediti minimalnu verziju Androida

Ionic geolociranje – dohvaćanje i prikaz lokacije korisnika

Ranije sam već objavio jedan blog post na temu prikaza Google karte međutim ondje kao početnu lokaciju koristim zadane koordinate Vinkovaca.

I to je u redu opcija ako će korisnici aplikacije biti iz Vinkovaca, ali ako se korisnik nalazi u bilo kojem drugom mjestu neće baš imati koristi od aplikacije koja mu kao zadanu lokaciju prikazuje mjesto gdje on nije.

Zato moram pronaći način kako dinamički dohvatiti lokaciju korisnika u trenutku kada on pokreće mobilnu aplikaciju ili u trenutku kada on unutar mobilne aplikacije ode na dio koji mu prikazuje Google kartu.

Kako dohvatiti lokaciju korisnika?

U ovom slučaju mogu koristiti Ionic Native Geolocation plugin koji će mi omogućiti dohvaćanje lokacije korisnika (koordinate).

This plugin provides information about the device’s location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.

Plugin instaliram sljedećim naredbama:

Odmah nakon instalacije plugin deklariram unutar app.module.ts

Sada sam spreman za praktičan prikaz dohvaćanja lokacije korisnika. To radim pozivanjem funkcije mojaLokacija().

Korisnik mora odobriti Ionic aplikaciji dohvaćanje lokacije.

Ionic geolociranje – dinamičko dohvaćanje lokacije korisnika

U ovom slučaju tek nakon što sam dobio koordinate korisnika pozivam funkciju this.loadMap(resp.coords.latitude, resp.coords.longitude); koja će prikazati Google kartu na ekranu, a korisnikova lokacija biti će na sredini ekrana.

Ionic geolociranje – dinamičko dohvaćanje lokacije korisnika

Međutim, ovdje postoji jedan problem. Da bi ovo iznad bilo moguće na mobilnom uređaju u postavkama mora biti omogućeno dohvaćanje lokacije.

Android postavke uređaja

Komponenta na kraju sa svim funkcionalnostima izgleda ovako:

Ako to nije uključeno unutar Ionic aplikacije neće se prikazati ništa tj. ekran će biti prazan jer se funkcija za prikaz Google karte neće niti učitati jer nema koordinara. U slučaju da su varijable s koordinatama prazne prikazat će se zadana lokacija negdje u Africi na moru.

Ionic geolociranje – dinamičko dohvaćanje lokacije korisnika

Naravno da ovo ne želim dopustiti i da korisnik Ionic aplikacije treba biti obaviješten o čemu se radi tj. ako želi koristiti određenu funkcionalnost mobilne aplikacije treba dati lokaciju uređaja. Korisnik čak ne mora niti znati da mu su mu postavke lokacije isključene i zato moram pronaći način kako da to saznam i omogućim mu da to uključi.

Android – upravljanje postavkama lokacije

Pomoću plugina Ionic Native Diagnostic mogu saznati je li dohvaćanje lokacije omogućeno na tom konkretnom Android uređaju. U slučaju kada nije imam mogućnost obavijestiti korisnika i omogućiti mu da uključi lociranje.

Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi

Plugin instaliram sljedećim naredbama:

Odmah nakon instalacije plugin deklariram unutar app.module.ts

Sada mogu testirati ovu opciju.

Ako sada pokrenem aplikaciju dobijem sljedeće

Ionic geolociranje – dinamičko dohvaćanje lokacije korisnika

Klikom na “UKLJUČI” otvaraju se postavke u kojima je moguće uključiti geolociranje.

Postavke lokacije - Android

Sva se funkcionalnost nalazi unutar funkcije provjeraLokacije().

Komponenta na kraju sa svim funkcionalnostima izgleda ovako:

Zaključak

Struktura projekta prema package.json

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 + OpenWeatherMap – prikaz vremenske prognoze

U ovom ću blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koristeći OpenWeatherMap.

Iako svaki Android mobilni uređaj sam po sebi već ima prikaz vremenske prognoze, koji je moguće dodatno prilagoditi, na početnom zaslonu ipak može biti korisno ubaciti i ovakav način prikaza takvih informacija.

Npr. ako je u pitanju nekakva turistička aplikacije dobro je prikazati trenutnu vremensku prognozu mjesta u koje smo stigli ili gdje planiramo putovati.

Uvod

Prije svega potrebno je kreirati korisnički račun na https://home.openweathermap.org/users/sign_up

OpenWeatherMap API registracija

Postoji nekoliko različitih opcija od kojih je manji dio besplatan, ali u svakom slučaju i to je dovoljno za osnovni prikaz vremenske prognoze. U slučaju potrebe za dodatnim informacijama moguće je koristiti neki od oblika mjesečne pretplate.

Kreiranje aplikacije

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

OpenWeatherMap API

S obzirom da sam se registrirao za besplatnu verziju API-ja mogu, od onoga što je meni trenutno zanimljivo, koristiti samo “Current weather dataAPI i “5 day / 3 hour forecastAPI.

Current weather data

Ovaj API prikazuje trenutnu vremensku prognozu za odabrani grad, a pozivam ga na adresi

U sljedećem primjeru pozivam ovaj API s dva osnovna parametra, a to su: moj API ključ koji sam dobio nakon registracije te ime grada za koji želim dobiti vremensku prognozu.

I odmah dobijem željene podatke na kojima se mogu primijetiti dva detalja. Prvi se tiče opisa vremenske prognoze koji je na engleskom jeziku, a drugi se tiče mjerne jedinice koja nije u °C.

OpenWeatherMap – prikaz vremenske prognoze

Kako bi to promijenio dodat ću još dva parametra u API URL.

Nakon toga mogu vidjeti da je sada opis vremenske prognoze na hrvatskom jeziku i da je mjerna jedinica °C.

OpenWeatherMap – prikaz vremenske prognoze

Ikona se prikazuje na način da se na URL 'http://openweathermap.org/img/w/' doda naziv slike data['weather'][0]['icon'] + ".png" koji se dobije kao odgovor na API zahtjev. Više o tome na poveznici https://openweathermap.org/weather-conditions

Na ekranu to može izgledati ovako, ali je i dalje malo čudno zbog decimalnog prikaza.

Ionic OpenWeatherMap

To se vrlo lako riješi pomoću Math.round().

Što daje sljedeći rezultat

Ionic OpenWeatherMap

5 day / 3 hour forecast

Ovaj API prikazuje vremensku prognozu za pet dana unaprijed u razmacima od po tri sata, a pozivam ga na adresi

OpenWeatherMap API forecast

Nakon svega navedenog u primjeru iznad u ovom se primjeru neće puno toga promijeniti. Rezultat će ostati na hrvatskom jeziku te u obliku °C.

Na ekranu to može izgledati ovako

Ionic OpenWeatherMap forecast

Zaključak

Struktura projekta prema package.json