Mobile – Tomislav Stanković

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

$ ionic start IonicSlidesGallery blank

$ cd IonicSlidesGaller

$ionic serve

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

//ion-slides će ići ovdje

</ion-content>

Slike se nalaze unutar assets/imgs mape.

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

imageContainer = [

{url:"assets/imgs/image1.jpg"},

{url:"assets/imgs/image2.jpg"},

{url:"assets/imgs/image3.jpg"},

{url:"assets/imgs/image4.jpg"} ];

slideOpts = {

};

constructor(){

}

Galerija preko cijelog ekrana

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

</ion-content>

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

<ion-card>

<ion-card-header>

<ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>

<ion-card-title>Primjer galerije slika</ion-card-title>

</ion-card-header>

<ion-card-content>

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

<p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>

</ion-card-content>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{

"name": "IonicSlidesGallery",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.4.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic 4 Slides project"

}

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:

"about", // ios

"accessibility", // ios, android

"account", // ios, android

"airplane_mode", // ios, android

"apn", // android

"application_details", // ios, android

"application_development", // android

"application", // android

"autolock", // ios

"battery_optimization", // android

"bluetooth", // ios, android

"castle", // ios

"captioning", // android

"cast", // android

"cellular_usage", // ios

"configuration_list", // ios

"data_roaming", // android

"date", // ios, android

"display", // ios, android

"dream", // android

"facetime", // ios

"home", // android

"keyboard", // ios, android

"keyboard_subtype", // android

"locale", // ios, android

"location", // ios, android

"locations", // ios

"manage_all_applications", // android

"manage_applications", // android

"memory_card", // android

"music", // ios

"music_equalizer", // ios

"music_volume", // ios

"network", // ios, android

"nike_ipod", // ios

"nfcsharing", // android

"nfc_payment", // android

"nfc_settings", // android

"notes", // ios

"notification_id", // ios

"passbook", // ios

"phone", // ios

"photos", // ios

"print", // android

"privacy", // android

"quick_launch", // android

"reset", // ios

"ringtone", // ios

"browser", // ios

"search", // ios, android

"security", // android

"settings", // ios, android

"show_regulatory_info",

"sound", // ios, android

"software_update", // ios

"storage", // ios, android

"store", // ios, android

"sync", // android

"tethering", // ios

"twitter", // ios

"touch", // ios

"usage", // ios, android

"user_dictionary", // android

"video", // ios

"voice_input", // android

"vpn", // ios

"wallpaper", // ios

"wifi_ip", // android

"wifi", // ios, android

"wireless" // android

Kreiranje aplikacije

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

$ ionic start IonicNativeSettings blank

$ cd IonicNativeSettings

$ ionic cordova platform add android

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

1 2	$ ionic cordova plugin add cordova-open-native-settings $ npm install @ionic-native/open-native-settings

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

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

providers: [

StatusBar,

SplashScreen,

OpenNativeSettings,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

bootstrap: [AppComponent]

})

export class AppModule {}

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.

import { Component } from '@angular/core';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

constructor(private _openNativeSettings: OpenNativeSettings) {

}

accessibility(){

//this._openNativeSettings.open("accessibility");

this._openNativeSettings.open(["accessibility", true]);

}

bluetooth(){

//this._openNativeSettings.open("bluetooth");

this._openNativeSettings.open(["bluetooth", true]);

}

date(){

//this._openNativeSettings.open("date");

this._openNativeSettings.open(["date", true]);

}

keyboard(){

//this._openNativeSettings.open("keyboard");

this._openNativeSettings.open(["keyboard", true]);

}

location(){

//this._openNativeSettings.open("location");

this._openNativeSettings.open(["location", true]);

}

manage_applications(){

//this._openNativeSettings.open("manage_applications");

this._openNativeSettings.open(["manage_applications", true]);

}

print(){

//this._openNativeSettings.open("print");

this._openNativeSettings.open(["print", true]);

}

storage(){

//this._openNativeSettings.open("storage");

this._openNativeSettings.open(["storage", true]);

}

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.

Ovo na ekranu izgleda ovako:

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic Native Settings

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding text-center>

<p>Plugin to open native screens of iOS/android settings.</p>

<ion-row>

<ion-col>

<ion-button color="primary" (click)="accessibility()">Accessibility</ion-button>

<ion-button color="secondary" (click)="bluetooth()">Bluetooth</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="tertiary" (click)="date()">Date</ion-button>

<ion-button color="success" (click)="keyboard()">Keyboard</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="warning" (click)="location()">Location</ion-button>

<ion-button color="danger" (click)="manage_applications()">Manage Applications</ion-button>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button color="light" (click)="print()">Print</ion-button>

<ion-button color="medium" (click)="storage()">Storage</ion-button>

</ion-col>

</ion-row>

</ion-content>

Zaključak

Struktura projekta prema package.json

{

"name": "IonicNativeSettings",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/open-native-settings": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"cordova-android": "7.1.4",

"cordova-open-native-settings": "1.5.2",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^3.1.2",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.3.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-open-native-settings": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

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

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:

1 2	$ ionic cordova plugin add cordova-plugin-name $ npm install @ionic-native/plugin-name

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:

1 2	$ ionic activate-native-ee --key=YOURPRODUCTKEY $ ionic integrations add @ionic-native/plugin-name

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.

import { Camera } from '@ionic-native/camera/ngx';

...

@NgModule({

...

providers: [

...

Camera

...

]

...

})

export class AppModule { }

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:

– requireExpiry (boolean) – Set to true to require expiry date

– requireCVV (boolean) – The user will be prompted for the card CVV

– requirePostalCode (boolean) – The user will be prompted for the card billing postal code.

– suppressManual (boolean) – Removes the keyboard button from the scan screen.

– restrictPostalCodeToNumericOnly (boolean) – The postal code will only collect numeric input. Set this if you know the expected country’s postal code has only numeric postal codes.

– keepApplicationTheme (boolean) – The theme for the card.io Activity’s will be set to the theme of the application.

– requireCardholderName (boolean) – The user will be prompted for the cardholder name

– scanInstructions (string) – Used to display instructions to the user while they are scanning their card.

– noCamera (boolean) – If set, the card will not be scanned with the camera.

– scanExpiry (boolean) – If scanExpiry is true, an attempt to extract the expiry from the card image will be made.

– languageOrLocale (string) – The preferred language for all strings appearing in the user interface. If not set, or if set to null, defaults to the device’s current language setting.

– guideColor (string | number) – Changes the color of the guide overlay on the camera. The color is provided in hexadecimal format (e.g. #FFFFFF)

– supressConfirmation (boolean) – The user will not be prompted to confirm their card number after processing.

– hideCardIOLogo (boolean) – The card.io logo will not be shown overlaid on the camera.

– useCardIOLogo (boolean) – The card.io logo will be shown instead of the PayPal logo.

– supressScan (boolean) – Once a card image has been captured but before it has been processed, this value will determine whether to continue processing as usual.

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.

- cardType (string) - Card type

- redactedCardNumber (string) - Masked card number, showing only last 4 digits

- cardNumber (string) - Full card number

- expiryMonth (number) - Expiry month

- expiryYear (number) - Expiry year

- cvv (string) - CVV

- postalCode (string) - Postal code

- cardholderName (string) - Cardholder name

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

$ ionic start IonicCardIO blank

$ cd IonicCardIO

$ ionic cordova platform add android

Card IO implementacija

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

1 2	$ ionic cordova plugin add card.io.cordova.mobilesdk $ npm install --save @ionic-native/card-io

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

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { CardIO } from '@ionic-native/card-io';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

CardIO,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

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.

<ion-header>

<ion-navbar color="primary">

<ion-title>

Ionic CardIO

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-fab bottom right>

<ion-icon name="card"></ion-icon>

</button>

</ion-fab>

</ion-content>

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

import { Component } from '@angular/core';

import { NavController, Platform } from 'ionic-angular';

import { CardIO, CardIOOptions, CardIOResponse } from '@ionic-native/card-io';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

results: CardIOResponse;

constructor(public navCtrl: NavController,

private _platform: Platform,

private _cardIO: CardIO) {

}

async scanCard(){

try {

await this._platform.ready();

const canScan = await this._cardIO.canScan();

if(canScan){

const options: CardIOOptions = {

scanInstructions: "Skenirajte bankovnu karticu!",

};

this.results = await this._cardIO.scan(options);

console.log(this.results);

}

catch (e) {

console.error(e);

}

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

const options: CardIOOptions = {

requireExpiry: true,

requireCVV: true,

requirePostalCode: true,

suppressManual: false,

restrictPostalCodeToNumericOnly: false,

keepApplicationTheme: true,

requireCardholderName: true,

scanInstructions: "Skenirajte bankovnu karticu!",

noCamera: false,

scanExpiry: true,

languageOrLocale: "HR",

guideColor: "#488aff",

supressConfirmation: false,

hideCardIOLogo: false,

useCardIOLogo: true,

supressScan: false

};

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

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

const options: CardIOOptions = {

requireExpiry: true,

requireCVV: true,

requirePostalCode: false,

suppressManual: false,

restrictPostalCodeToNumericOnly: false,

keepApplicationTheme: true,

requireCardholderName: true,

scanInstructions: "Skenirajte bankovnu karticu!",

noCamera: false,

scanExpiry: true,

languageOrLocale: "HR",

guideColor: "#488aff",

supressConfirmation: false,

hideCardIOLogo: false,

useCardIOLogo: false,

supressScan: false

};

i ekrani će izgledati drugačije

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

Prikupit ću podatke s dvije kartice.

Što unutar Chrome Developer konzole izgleda ovako:

Zaključak

Struktura aplikacije prema package.json

{

"name": "IonicCardIO",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/card-io": "^4.19.0",

"@ionic-native/core": "~4.18.0",

"@ionic-native/splash-screen": "~4.18.0",

"@ionic-native/status-bar": "~4.18.0",

"@ionic/storage": "2.2.0",

"card.io.cordova.mobilesdk": "2.1.0",

"cordova-android": "7.1.4",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.3.2",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.1",

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"card.io.cordova.mobilesdk": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

Ionic 3 – uspostavljanje telefonskog poziva

Iako se poziv može uspostaviti i korištenjem

1	<a href="tel:0101010101">Zovi</a>

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.

$ ionic start IonicCallNumber --blank

$ cd IonicCallNumber

$ ionic cordova platform add android

Call Number

Plugin Call Number dodajem sljedećim naredbama:

1 2	$ ionic cordova plugin add call-number $ npm install --save @ionic-native/call-number

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

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { CallNumber } from '@ionic-native/call-number';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

CallNumber,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

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

<ion-header>

<ion-navbar>

<ion-title>

Ionic Call Number

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

Funkcionalnost se sastoji od pozivanja call() funkcije.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { CallNumber } from '@ionic-native/call-number';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

private _callNumber: CallNumber) {

}

async call(){

try {

await this._callNumber.callNumber('0101010101', false);

console.log("Pozivam broj.");

}

catch(e){

console.error(e);

}

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.

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.

Zaključak

Struktura aplikacije prema package.json

{

"name": "IonicCallNumber",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/call-number": "^4.18.0",

"@ionic-native/core": "~4.18.0",

"@ionic-native/splash-screen": "~4.18.0",

"@ionic-native/status-bar": "~4.18.0",

"@ionic/storage": "2.2.0",

"call-number": "^1.0.1",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.3.1",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"mx.ferreyra.callnumber": "~0.0.2",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.1",

"typescript": "~2.6.2"

"description": "An Ionic Call Number project",

"cordova": {

"plugins": {

"mx.ferreyra.callnumber": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}