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.
|
1 2 3 |
$ 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header> <ion-navbar> <ion-title> Ionic Call Number </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button (click)="call()">Zovi</button> </ion-content> |
Funkcionalnost se sastoji od pozivanja call() funkcije.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
{ "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" ] } } |
