Autor: Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Pregled 2018. godine

2018. je stigla svome kraju što znači da je pravo vrijeme za razmisliti o svemu što se tijekom godine događalo i možda postaviti temelje za 2019.

Jedan blog post tjedno

Ukupno sam ove godine objavio 53 blog posta.

Nije uvijek bilo jednostavno, ali već dvije godine se držim odluke da objavljujem jedan blog post tjedno, vikendom.

Inspiration is for amateurs – the rest of us just show up and get to work. – Chuck Close

Najveća greška što se ovoga tiče je činjenica da 99% blog postova nisam pripremio unaprijed nego bi ih pisao upravo tijekom vikenda. Najčešće bi to bilo nedjeljom jer bi subotom imao nekog posla koji ne mogu ostaviti za nedjelju. Sve to znači da nije bilo dana u tjednu kada ne bi mislio o developmentu – od ponedjeljka do petka na poslu, subotom radim nešto drugo, ali razmišljam o temi koju ću objaviti na blogu kasnije tijekom dana ili u nedjelju, a onda u nedjelju poslije ručka se ide u razradu teme i sastavljanje blog posta. Nakon toga opet dolazi radni tjedan i tako u krug.

I sam vidim da bi trebao promijeniti ritam, da mi se ne bi dogodio burnout, ali mi je taj tempo do sada toliko prešao u naviku da ne znam kako ću se odlučiti preskočiti neki vikend. Posebno kada vidim koliko su neki od blog postova pomogli kolegama s posla koji su na taj način brže i jednostavnije mogli obavljati svoje radne zadatke.

Ono što mi nije uspjelo ove godine je paralelno održavanje bloga na engleskom jeziku gdje bi obrađivao iste teme kao i na ovom blogu. Objavio sam nekoliko blog postova i onda je sve stalo jer nedjelja kasno poslije podne, kada bi objavio blog post na ovom blogu, jednostavno nije bilo pravo vrijeme za ponavljanje svega toga na engleskom jeziku.

Imam osjećaj da bi ova godina mogla biti odlučujuća za ovaj blog. Ili ću sve dići na jedan viši nivo ili drastično smanjiti ulaganje resursa. U prosjeku mi godišnje ode cca 300 sati na blog. Da sam nastavio sa blogom na engleskom to bi se poduplalo, a da sam uz to radio i video tutorijale pitanje je kako bi više išta stigao raditi u životu.

Kako god bilo za sada još uvijek uživam u ovom blogu i svaki put kada kliknem na “Objavi” imam osjećaj da sam nešto dobro napravio.

Planovi za 2019.

Nastavljam s objavom barem jednog blog posta tjedno. Još moram odlučiti hoće li to i dalje biti vikendom ili ću objavu ostaviti za npr. ponedjeljak. Što se tema tiče fokus će i dalje biti na razvoju za web koristeći JavaScript (Angular, Ionic Framework, NodeJS).

Također, unatoč velikoj količini besplatnih dev resursa koji su na internetu dostupni svake godine odaberem nekoliko premium tj. plaćenih resursa koji će mi na strukturiran način dati temelje za područje koje me u tom trenutku zanima. Uskoro počinjem s jednim NodeJS tečajem, a paralelno uz to ide i CSS tako da će nešto o tome uskoro biti i na ovom blogu.

2017. i 2018. godine objavio sam blog postove sa popisom pročitanih knjiga jer nisam htio ovaj blog pretvoriti u knjižnicu.

U 2019. godini svaka će knjiga dobiti svoj blog post. Tako ću imati priliku više se posvetiti svakoj knjizi, izvući više citata, pokazati naslovnicu i sl.

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 3 Popover

Popover je dijaloški okvir koji se pojavljuje na vrhu trenutne stranice. Može se koristiti za bilo što, ali većinom sadržava brze radnje koje ne spadaju ili ne stanu na trenutnu stranicu.

U ovom ću blog postu pokazati kako se kreira popover dijaloški okvir, kako mu proslijediti parametre tj. podatke i kako dohvaćati podatke iz njega.

Kreiranje Ionic aplikacije

Kao i svaki put do sada, prvo kreiram novu Ionic aplikaciju.

Popover gumb će se nalaziti u gornjem desnom kutu HomePage komponente.

Ionic 3 Popover

Trenutno taj gumb ne radi ništa i prvo što moram napraviti je kreirati posebnu komponentu koja će sadržavati logiku koju će popover izvršavati.

Ionic 3 Popover Page

Sada, prema službenoj dokumentaciji na adresi https://ionicframework.com/docs/api/components/popover/PopoverController/, mogu pozvati metodu koja će mi na osnovu PopoverPage stranice kreirati popover dijaloški okvir.

Prikaz popovera vrši se funkcijom presentPopover($event). Tu je jako bitno da proslijedim parametar $event jer će se popover inače umjesto u gornjem desnom kutu prikazati na sredini stranice, a to u ovom slučaju ne želim.

U nastavku se može vidjeti kako sam proslijedio niz sa popisom gradova. Taj ću niz prikazati unutar popover okvira.

Ionic 3 Popover prozori

Prikaz popover okvira temelji se na sljedećem:

Primanje parametara u popover okvir može se vidjeti u nastavku, a temelji se na NavParams objektu.

U praksi to izgleda ovako:

Ionic 3 Popover animacija

Iz gornjeg se primjera može vidjeti da se proslijeđeni podaci uspješno prikazuju i da ih je moguće odabrati kao checkbox polja. Također, odabirom vrijednosti popover okvir se automatski ne zatvara, nego je potrebno kliknuti pa bilo koji dio ekrana kako bi se okvir zatvorio, niti su u HomePage komponentu proslijeđeni podaci koje sam odabrao.

Automatsko zatvaranje popover okvira odabirom vrijednosti postižem korištenjem ViewControllera.

U praksi to izgleda ovako:

Ionic ViewController

Prosljeđivanje odabranog podatka iz popover okvira natrag u HomePage komponentu postižem koristeći onDidDismiss.

U praksi to izgleda ovako:

Ionic onDidDismiss

Popover je moguće i dodatno prilagođavati CSS-om. U ovom slučaju klasom 'custom-popover' želim postići da se popover prikazuje ispod navbara.

Klasa je definirana unutar app.scss

U praksi to izgleda ovako:

Popover CSS

Zaključak

Struktura projekta prema package.json. Za ovu funkcionalnost nisu mi trebali nikakvi dodatni pluginovi tako da je struktura defaultna.

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