Ionic 3 – podrška za vibraciju

Ionic 3 – podrška za vibraciju

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.

$ ionic start Ionic3VibrateApp blank
$ cd Ionic3VibrateApp
$ ionic serve

Sada ću instalirati Ionic Native Vibration plugin:

$ 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

import { Vibration } from '@ionic-native/vibration';
...
 
@NgModule({
  ...
  providers: [
    ...
    Vibration 
    ...
  ]
  ...
})
export class AppModule { }

Za potrebu ovog blog posta napravit ću tri funkcije

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

<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

{
    "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"
        ]
    }
}

Objavio

Tomislav Stanković

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

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *