Wie benutzt man das Cordova Plugin Bluetooth in ionic 3?

Question

Zusätzliche Informationen:

wissen, dass ich die üblichen way cordova Plugins zuzugreifen:

(<any>window).plugins.myPlugin 

or 

declare var yourGloballyAccessablePlugin: any; 

aber es ist anders mit der Plugin bluetoothle (dem nativen Bluetooth-Plugins durch ionische 3 unterstützt werden, da sie nicht gut genug keine Bluetooth-Peripheriefunktionalität z. B. Werbung)

Lösungsversuch:

I found a related question on the ionic forums and asked how they achieved this, bisher falle ich den Prozess zu replizieren und niemand beantwortete meine Frage so weit, das ist, warum diese Frage geöffnet wurde.

Offenbar exponiert bluetooth eine global zugängliche Variable.

Da erklärte ich hinzugefügt, um eine declaration.d.ts Datei auf meinem src Ordner mit folgendem Inhalt:

declare module 'cordova-plugin-bluetoothle'; 
import 'cordova-plugin-bluetoothle'; 
declare var cordova: any; 

Ich habe dann versucht, um das Plugin zugreifen (getestet auf meinem Handy) wie folgt aus:

import { bluetoothle } from 'cordova-plugin-bluetoothle'; 

... 

(<any>window).bluetoothle 

Problem:

Aber bluetoothle ist immer undef für mich. Da ich cordova, ionic und TypeScript neu bin, schätze ich, dass etwas mit der Art und Weise, wie ich declarations.d.ts verwende, nicht stimmt.

Also weiß jemand, was ich falsch mache, wie kann ich verwenden das cordova native Plugin bluetooth in ionic 3?

UPDATE, Lösung Versuch 2:

Also habe ich versucht, diesen Code innerhalb der ersten Projektstrukturen laufen app.component.ts wie @Webruster mit dem init params vom bluetoothle empfohlen documentation:

(die nur Ziel ist hier, um zu sehen, ob das Plugin funktioniert)

Importe ...

declare var cordova: any; 

@Component, Klasse Start- und Attribute ...

constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     console.log("I'm ready"); 
     // your bluetothle methods can be accessed after 
     //cordova.plugins.bluetoothle 
     // for brevity i added a sample method from repo , it can be changed 
     //based on your need 
     let initializeResult: object; 
     let params: object = { 
     "request": true, 
     "statusReceiver": false, 
     "restoreKey": "bluetoothleplugin" 
     }; 
     cordova.plugins.bluetoothle.initialize(initializeResult, params); 

     console.log(JSON.stringify(initializeResult)); 

     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 
    }); 
    this.initTranslate(); 
    } 

aber auf diese Weise die App nicht einmal geladen wird, ist es aus nur mal und gibt die Verbindung zum Server nicht erfolgreich war, wenn ich die App ohne die laufen Plugin-Code funktioniert.

UPDATE 2:

gedebuggt ich die App mit Chrom (der vorherige Fehler durch die --livereload Option für einen unbekannten Grund verursacht wurde) und das ist der Fehler, den ich bekommen:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'initialize' of undefined 
TypeError: Cannot read property 'initialize' of undefined 

Überprüfung der Arten von cordova, cordova.plugins und cordova.plugins.bluetoothle mit:

console.log(typeof cordova); 
    console.log(typeof cordova.plugins); 
    console.log(typeof cordova.plugins.bluetoothle); 

ich folgende Ergebnisse:

object 
object 
undefined 

Answer 1

Zuerst installieren Sie das Plugin (ionic3):

ionic cordova plugin add cordova-plugin-bluetoothle 

Dann (<any>window).bluetoothle verwenden, wenn die Plattform bereit ist, das Plugin für den Zugriff auf den üblichen Standort insted (cordova.plugins), basierend auf @dinomight Post auf dem ionic forum:

Das Fensterobjekt scheint das Bluetooth-Modul zu laden. wenn ich console.log (Fenster) kann ich es genau dort mit allen seinen Funktionen sehen. Problem ist, wenn ich versuche, es über „window.bluetoothle“ zu verweisen ich erhalte einen neuen Fehler

Hier ist der Testcode (nur der Konstruktor, weil ich nichts anderes ändern haben), die Sie auffordert, aktivieren bluetooth (nur auf android unterstützt) und und aktiviert sie, nachdem man es (befindet sich der Code in der component.app.ts des erweiterten ionic3 Starter App), dies zu tun:

constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) { 
    platform.ready().then(() => { 

     let initializeResult: object; 
     let params: object = { 
     "request": true, 
     "statusReceiver": false, 
     "restoreKey": "bluetoothleplugin" 
     }; 

     (<any>window).bluetoothle.initialize(initializeResult, params); 

     let enableSuccess: object; 
     let enableError: object; 

     (<any>window).bluetoothle.enable(enableSuccess, enableError); 

     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 
    }); 
    this.initTranslate(); 
    } 

Testumgebung:

Ich testete dies auf Android 7.1.1 (lineageOS) auf meinem Nexus 5

Answer 2

Schritt 1: Wir haben dieses Plugin

ionic cordova plugin add cordova-plugin-bluetooth-serial 
npm install --save @ionic-native/bluetooth-serial 

Schritt 2 importieren: hinzufügen BluetoothSerial innerhalb des Anbieters app.module .ts Seite Schritt 3: Aktivieren Sie die Bluetooth Ihr mo Galle Bluetooth automatisch an oder fragen Sie Erlaubnis.

 unpairedDevices: any; 
     pairedDevices: any; 
     gettingDevices: Boolean; 
    constructor(private bluetoothSerial: BluetoothSerial, 
    private alertCtrl: AlertController) { 
    bluetoothSerial.enable(); 
    } 

Schritt 4: Start Scanning

startScanning() { 
    this.pairedDevices = null; 
    this.unpairedDevices = null; 
    this.gettingDevices = true; 
    this.bluetoothSerial.discoverUnpaired().then((success) => { 
     this.unpairedDevices = success; 
     console.log(success, "hai") 
     this.gettingDevices = false; 
     success.forEach(element => { 
     // alert(element.name); 
     }); 
    }, 
     (err) => { 
     console.log(err); 
     }) 

    this.bluetoothSerial.list().then((success) => { 
     this.pairedDevices = success; 
    }, 
     (err) => { 

     }) 
    } 
    success = (data) => alert(data); 
    fail = (error) => alert(error); 

Schritt 5: Nach der Erkennung verfügbaren Bluetooth-Gerät ein beliebiges von diejenigen auszuwählen.

selectDevice(address: any) { 

    let alert = this.alertCtrl.create({ 
     title: 'Connect', 
     message: 'Do you want to connect with?', 
     buttons: [ 
     { 
      text: 'Cancel', 
      role: 'cancel', 
      handler:() => { 
      console.log('Cancel clicked'); 
      } 
     }, 
     { 
      text: 'Connect', 
      handler:() => { 
      this.bluetoothSerial.connect(address).subscribe(this.success, this.fail); 
      } 
     } 
     ] 
    }); 
    alert.present(); 

    } 

Schritt 6: Trennen Sie das Gerät

isconnect() { 
let alert = this.alertCtrl.create({ 
    title: 'Disconnect?', 
    message: 'Do you want to Disconnect?', 
    buttons: [ 
    { 
     text: 'Cancel', 
     role: 'cancel', 
     handler:() => { 
     console.log('Cancel clicked'); 
     } 
    }, 
    { 
     text: 'Disconnect', 
     handler:() => { 
     this.bluetoothSerial.disconnect(); 
     } 
    } 
    ] 
}); 
alert.present(); 

}

Schritt 7: home.html Seite

<ion-content padding> 

<ion-list padding> 
    <button ion-button block (click)="startScanning()">scan</button> 
    <ion-list-header> 
    Paired Devices 
    </ion-list-header> 
    <ion-item *ngFor="let device of pairedDevices"> 
    {{device.name}} 
    </ion-item> 
    <button ion-button block (click)="disconnect()">Disconnect</button> 
    <ion-list-header> 
    availlable Devices 
    </ion-list-header> 
    <ion-item *ngFor='let device of unpairedDevices'> 
    <span (click)="selectDevice(device.address)"> 
     {{device.name}} 
    </span> 
    </ion-item> 
    <ion-spinner name="crescent" *ngIf="gettingDevices"></ion-spinner> 
</ion-list> 

</ion-content> 

Hinweis: Ich hoffe, es wird Ihnen. Einen schönen Tag noch!

Answer 3

Genau wie die normale Art und Weise, können Sie es mit installieren:

ionic plugin add cordova-plugin-bluetoothle 

danach unterhalb der Linie nach der Anweisung Imports umfassen wie folgt:

declare var cordova:any; 

Und es verwenden, wenn die Plattform bereit ist, :

Answer 4

Fügen Sie diese Zeile am Anfang jeder Seite hinzu, auf der Sie das Plugin verwenden möchten los von IDE-Fehlern:

deklarieren var bluetoothle: any;