Ionic 4 Slides – prikaz galerije slika

O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.

ion-slides komponenta sastoji se od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.

Ionic 4 Slides
https://ionicframework.com/docs/api/slides

Ova se komponenta može koristiti za prikaz uputa prilikom prvog pokretanja mobilne aplikacije, primjer čega se nalazi u dokumentaciji, ali se isto tako pomoću ove komponente može napraviti lijepa galerija slika. Slike se mogu pomicati lijevo-desno, ali ih je isto tako moguće postaviti da se pomiču automatski u određenim intervalima.

S obzirom da ion-slides svoje temelje ima u Swiper.js-u i ondje je moguće pronaći dodatne opcije za upravljanje slajdovima.

Kreiranje aplikacije

Struktura ekrana na kojemu ću testirati ion-slides izgleda ovako:

Slike se nalaze unutar assets/imgs mape.

Ionic 4 - Assets Images

Galerija preko cijelog ekrana

Galerija preko cijelog ekrana

U ovom primjeru slike zauzimaju cijeli ekran. Dolaskom do zadnje slike nije moguće ići dalje loop: 'false'.

Galerija preko jednog dijela ekrana

Galerija preko jednog dijela ekrana

U ovom primjeru galerija slika zauzima samo jedan dio ekrana ispod koje se onda vidi ostatak sadržaja. Dolaskom do zadnje slike moguće je ići dalje tj. napraviti puni krug do prve slike pomoću loop: 'true'.

Zaključak

Struktura projekta prema package.json

Otvaranje postavki mobilnog uređaja iz Ionic aplikacije

Prilikom izrade Ionic mobilnih aplikacija jedan od zahtjeva može biti da se iz aplikacije mogu otvoriti neke od postavki mobilnoj uređaja. Npr. postavke vezane uz geolokaciju, WiFi ili nešto treće. Puno je jednostavnije omogućiti korisniku da klikom na jedan gumb ode direktno na postavke koje su mu u tom trenutku potrebne kako bi unutar Ionic aplikacije nešto obavio nego da sam mora tražiti te iste postavke.

Od postavki kojima je moguće pristupiti koristeći ovaj plugin dostupno je sljedeće:

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu jer planiram aplikaciju pokrenuti na mobilnom uređaju.

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase, a sastojat će se od funkcija od kojih svaka otvara neku od ranije navedenih postavki mobilnog uređaja.

Open Native Settings

Ako neku od postavki pozivam na ovaj način this._openNativeSettings.open("accessibility") ekran s postavkama će se otvoriti umjesto ekrana Ionic aplikacije dok ako dodam parametar true na sljedeći način this._openNativeSettings.open(["accessibility", true]) otvara se novi ekran s postavkama što se može vidjeti na sljedećoj slici.

Open Native Settings

Ovo na ekranu izgleda ovako:

Open Native Settings

Zaključak

Struktura projekta prema package.json

Š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.

Ionic Card IO – prikupljanje podataka s bankovne kartice

U ovom ću blog postu pokazati kako napraviti jednostavnu Ionic aplikaciju koja će imati mogućnost prikupljanja podataka s bankovne kartice kako bi se moglo provesti plaćanje.

Važna napomena! Ovdje navedeni primjer tiče se samo klijentske strane i plaćanje neće biti provedeno. Za to je potreban i backend koji je moguće napraviti u npr. NodeJS-u.

Što je Card IO?

https://www.card.io/ omogućava skeniranje bankovne kartice kako bi se olakšalo i ubrzalo plaćanje.

Više o funkcionalnostima moguće je pronaći na poveznici https://github.com/card-io/card.io-Cordova-Plugin ili unutar dokumentacije Ionic Native 3.x Card IO plugina

Nekoliko je opcionalnih parametara koji se mogu koristiti prilikom skeniranja bankovne kartice unutar CardIOOptions objekta:

S druge strane, tu je i CardIOResponse objekt unutar kojega je moguće odrediti koje informacije želimo dobiti nakon što se uspješno obavi skeniranje bankovne kartice.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

Card IO implementacija

Za početak, instaliram Ionic Native 3.x plugin Card IO.

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Sadržaj ekrana neće sadržavati ništa posebno. Glavna funkcionalnost krije se iza gumba tj. funkcije scanCard().

Ipak, kako bi se kartica mogla uslikati potrebno je dati odobrenje koje će biti automatski zatraženo prilikom prvog pokretanja aplikacije.

Ionic Card IO - početni ekran

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase.

Vezano uz ranije navedeni CardIOOptions objekt, ako ga postavim na sljedeći način

Ekran za skeniranje tj. za ručni unos podataka s bankovne kartice izgleda ovako:

Ionic Card IO

Međutim, ako to malo drugačije posložim

i ekrani će izgledati drugačije

Ionic Card IO

S obzirom da u ovom primjeru ne želim koristiti svoju karticu iskoristit ću dostupne demo podatke sa adrese https://www.datatrans.ch/showcase/test-cc-numbers

Test card numbers

Prikupit ću podatke s dvije kartice.

Ionic Card IO

Što unutar Chrome Developer konzole izgleda ovako:

Ionic Card IO

Zaključak

Struktura aplikacije prema package.json

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