Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 / Angular: utilice la vibración con Cordova y Ionic Native

 En este tutorial, aprenderemos juntos cómo usar el complemento Cordova Vibration para hacer vibrar aplicaciones creadas con Ionic 5 / Angular framework. El ejemplo que vamos a construir es simple con un botón al hacer clic en vibrar nuestro dispositivo pero por supuesto esto es solo para demostrar cómo usar la vibración. Puede usarlo como plantilla base para crear una aplicación real con todas las funciones, vibración y otras funciones.

Comencemos generando un nuevo proyecto basado en Ionic 3 o puede usarlo en un proyecto existente.

Abra su terminal o símbolo del sistema y ejecute:

ionic start vibration-demo bank --type=angular
Tenga en cuenta que estoy usando Ionic CLI 4.

A continuación, navegue dentro del directorio raíz de su proyecto e instale tanto el complemento de vibración Cordova como su envoltorio Ionic Native:

ionic cordova plugin add cordova-plugin-vibration --save 
npm install --save @ionic-native/vibration

Ahora necesitamos agregarlo a la lista de proveedores de módulos principales

Continúe y abra src / app / app.module.ts

Comience importando el contenedor de vibración de @ ionic-native:

/* ... */

import { Vibration } from '@ionic-native/vibration';

/* ... */

providers: [
    StatusBar,
    SplashScreen,
    Vibration,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Después de esto, debería poder inyectar y usar la vibración en su componente, así que abra src / pages / home / home.ts

Luego importe e inyecte el complemento de vibración

import { Vibration } from '@ionic-native/vibration';

/* ... */

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

    constructor(public navCtrl: NavController , private vibration :Vibration) {

    }

/* ... */

A continuación, agregue un método vibrate ()

vibrate(){
    this.vibration.vibrate(1000);
}

que va a hacer vibrar el dispositivo 1000 ms == 1 s, también puede pasar una matriz para vibrar ()

vibrate(){
    this.vibration.vibrate([1000 , 500 , 2000]);
}

Lo que hará vibrar el dispositivo 1s, luego pausará medio segundo y luego lo hará vibrar 2 segundos.

Ahora agreguemos un botón y vinculemos el controlador de clic al método vibrate ().

Abra src / pages / home / home.html y luego agregue un botón

<ion-header>

<ion-navbar>
    <ion-title>Vibration example demo </ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<button ion-button (click)="vibrate()">Vibrate ME </button>
</ion-content>    

El siguiente paso es agregar una plataforma a su proyecto. Usaré Android, así que

ionic cordova platform add android 

Luego, ejecute en su dispositivo con sincronización en vivo usando

ionic run android -l 

Conclusión


Hemos visto cómo usar el complemento de vibración Cordova y Ionic Native 3 para crear una aplicación Ionic 5 / Angular que usa vibración.

Gracias por leer y ver el siguiente tutorial.

Publicar un comentario

0 Comentarios