S obzirom da za nekoliko sati stiže Božić potrudit ću se ovaj blog post učiniti što konkretnijim bez puno okolišanja. U nastavku ću pokazati kako u Ionic aplikaciju dodati podršku za vibraciju.
Priprema Ionic projekta
Za početak kreiram novi Ionic projekt.
|
1 2 3 |
$ ionic start Ionic3VibrateApp blank $ cd Ionic3VibrateApp $ ionic serve |
Sada ću instalirati Ionic Native Vibration plugin:
|
1 2 |
$ ionic cordova plugin add cordova-plugin-vibration $ npm install --save @ionic-native/vibration |
Nakon toga, kako je i navedeno u službenoj dokumentaciji, dodajem plugin unutar app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Vibration } from '@ionic-native/vibration'; ... @NgModule({ ... providers: [ ... Vibration ... ] ... }) export class AppModule { } |
Za potrebu ovog blog posta napravit ću tri 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 27 28 29 30 31 32 33 34 35 36 37 38 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Vibration } from '@ionic-native/vibration'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private _vibration: Vibration) { } vibrate1(){ // Vibrate the device for a second // Duration is ignored on iOS. this._vibration.vibrate(1000); } vibrate2(){ // Vibrate 2 seconds // Pause for 1 second // Vibrate for 2 seconds // Patterns work on Android and Windows only this._vibration.vibrate([2000,1000,2000]); } vibrate3(){ // Stop any current vibrations immediately // Works on Android and Windows only this._vibration.vibrate(0); } } |
I napraviti tri gumba koji će aktivirati te funkcije
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic3 - Vibrate </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button (click)="vibrate1()">Vibrate 1</button> <button ion-button (click)="vibrate2()">Vibrate 2</button> <button ion-button (click)="vibrate3()">Vibrate 3</button> </ion-content> |
Zaključak
Vibracija je jedna od onih funkcionalnosti koja nekoj mobilnoj aplikaciji može dati završni sjaj ili ju učiniti odbojnom korisnicima i zato treba ju treba pažljivo koristiti.
I za kraj, struktura projekta 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 |
{ "name": "Ionic3VibrateApp", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/compiler-cli": "5.0.3", "@angular/core": "5.0.3", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "@ionic-native/core": "4.4.0", "@ionic-native/splash-screen": "4.4.0", "@ionic-native/status-bar": "4.4.0", "@ionic-native/vibration": "^4.5.2", "@ionic/storage": "2.1.3", "cordova-android": "^6.2.3", "cordova-plugin-device": "^1.1.4", "cordova-plugin-ionic-webview": "^1.1.11", "cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-vibration": "^2.1.6", "cordova-plugin-whitelist": "^1.3.1", "ionic-angular": "3.9.2", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "rxjs": "5.5.2", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }, "devDependencies": { "@ionic/app-scripts": "3.1.6", "typescript": "2.4.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-vibration": {}, "cordova-plugin-device": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-whitelist": {}, "ionic-plugin-keyboard": {} }, "platforms": [ "android" ] } } |
