Comment détecter les iBeacons dans une application NativeScript-Angular.
Sur mon lieu de travail, nous réfléchissons constamment aux moyens d’améliorer l’expérience utilisateur. L’une des choses sur lesquelles je travaille est de permettre à notre application mobile de connaître la présence de l’utilisateur lorsque l’utilisateur se trouve à proximité de certaines pièces chez nous et d’archiver automatiquement l’utilisateur. Pour cette fonctionnalité d’enregistrement, j’ai trouvé un plugin NativeScript pour détecter les iBeacons en utilisant mon téléphone Android. Dans cet article, je vais vous montrer quelques codes dans un exemple d’application NativeScript-Angular pour rechercher des iBeacons.
Avant Bluetooth 4.0, les communications via Bluetooth avaient toujours été de deux manières, ce qui signifie qu’un appareil peut à la fois émettre et recevoir des signaux Bluetooth. Par exemple, dans notre vie quotidienne, nous utilisons Bluetooth lorsque nous diffusons de la musique sans fil depuis des smartphones vers des casques Bluetooth, ou connectons les téléphones aux systèmes stéréo des voitures. En 2010, Bluetooth 4.0 est sorti et avec lui, une communication unidirectionnelle à faible consommation d’énergie est possible et ouvre des cas d’utilisation innovants tels que la détection de proximité, le suivi des actifs et la signalisation intérieure.
Une balise BLE est un petit appareil qui émet constamment des signaux à l’aide de Bluetooth Low Energy (BLE). Vous pouvez les trouver dans une variété de facteurs de forme, dans les grands magasins de détail et intégrés dans d’autres appareils tels que les points d’accès WIFI et à l’intérieur des smartphones. Une balise alimentée par batterie peut durer plusieurs années, en fonction de différents facteurs tels que la configuration, le type de batterie et la fabrication. Par exemple, j’ai obtenu un kit de développement de balises d’Estimote il y a deux ans, et à ce jour, chacune de ces balises a encore 70% de jus. Plus l’intervalle publicitaire est fréquent et / ou plus la force du signal est forte, plus la balise consomme d’énergie.
Les paquets de données des balises BLE ne sont pas utiles si nous ne comprenons pas la signification des données. Cependant, il serait difficile pour les développeurs si les fabricants proposent leurs propres méthodes de codage des données dans les balises BLE. Il est tout à fait logique qu’Apple ait trouvé un moyen standard pour permettre à une balise de fournir des informations contextuelles en attribuant à la balise des identifiants de hiérarchie qui sont uuid, major, mior et tx power.
UUID: Chaîne de 16 octets pour identifier un ensemble de balises appartenant à un grand groupe.
Majeur: Chaîne de 2 octets pour identifier un ensemble de balises appartenant à un sous-ensemble de balises au sein du grand groupe identifiable par l’UUID.
Mineur: Chaîne de 2 octets pour identifier une balise individuelle au sein d’un groupe identifiable par l’identifiant principal.
Puissance d’émission: La force du signal émis par une balise à 1 mètre de son emplacement.
iBeacon est devenu un protocole pris en charge par Android et iOS. En remarque, Eddystone est un autre protocole développé par Google pour communiquer en utilisant BLE. Une balise compatible Eddystone transmet les données dans un format différent de celui d’iBeacon. Cependant, dans ce post, nous n’allons pas discuter d’Eddystone.
Les SDK iOS et Android prennent en charge nativement la numérisation des iBeacons. Pour NativeScript, vous pouvez utiliser un plugin ou écrire le vôtre. Heureusement, j’ai trouvé un plugin existant, le Plugin iBeacon par demetrio812 qui fonctionne et c’est ce que j’utilise.
Si vous vous dirigez vers la page Web du plugin, vous pouvez voir les instructions pour l’installer et l’utiliser dans votre application NativeScript. Pour la plupart, le document fournit suffisamment d’informations pour commencer. J’ai pu rapidement prototyper un exemple de projet NativeScript-Angular et utiliser le plugin pour rechercher des iBeacons. Ci-dessous, je montre les exemples de codes que j’ai dans mon app.component:
import { Component, OnInit, OnDestroy } from "@angular/core";
import { NativescriptIbeacon } from 'nativescript-ibeacon';
import { BeaconLocationOptions, BeaconLocationOptionsIOSAuthType,
BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon/nativescript-ibeacon.common';@Component({
selector: "ns-app",
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit, OnDestroy {
private _nativescriptIbeacon;
private _region;
constructor () {
var myIbeacon = {
id: "My iBeacon in conference room of Office A ",
proximityUUID: "B9407F30-F5F8-466E-AFF9-25556B57FE6D",
major: 17744,
minor: 28116
}
this._region = new BeaconRegion(myIbeacon.id, myIbeacon.proximityUUID, myIbeacon.major, myIbeacon.minor);
let options: BeaconLocationOptions = {
iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Fine,
androidAuthorisationDescription: "Location permission needed"
};
this._nativescriptIbeacon = new NativescriptIbeacon(this.beaconCallback(), options);
if (!this._nativescriptIbeacon.isAuthorised()) {
console.log("NOT Authorised");
this._nativescriptIbeacon.requestAuthorization()
.then(() => {
console.log("Authorised by the user");
this._nativescriptIbeacon.bind();
}, (e) => {
console.log("Authorisation denied by the user");
})
} else {
console.log("Already authorised");
this._nativescriptIbeacon.bind();
}
}
ngOnDestroy(): void {
if (this._nativescriptIbeacon) {
this._nativescriptIbeacon.unbind();
}
}
beaconCallback() {
var self = this;
return {
onBeaconManagerReady(): void {
// start ranging and/or monitoring only when the beacon manager is ready
self._nativescriptIbeacon.startRanging(self._region);
self._nativescriptIbeacon.startMonitoring(self._region);
},
didRangeBeaconsInRegion: function(region: BeaconRegion, beacons: Beacon[]) {
console.log(JSON.stringify(beacons));
},
didFailRangingBeaconsInRegion: function(region: BeaconRegion, errorCode: number, errorDescription: string) {
console.error(`Failed to find beacons with errorCode: ${errorCode} and description:
${errorDescription}`);
},
didEnterRegion: function(region: BeaconRegion) {
console.log("Did enter region called");
},
didExitRegion: function(region: BeaconRegion) {
console.log("Did exit region called.");
}
}
}
ngOnInit(): void {
}
}
Pour la plupart, les codes sont simples et basés sur la documentation du plugin. Cependant, certaines choses que vous voudrez peut-être faire attention:
-
BeaconRegionencapsule les métadonnées que vous définissez pour balayer les balises. Vous pouvez rechercher toutes les balises ayant un même uuid. Vous pouvez également restreindre l’analyse à un groupe spécifique en fournissant l’ID principal, et plus loin à une balise spécifique en fournissant l’ID mineur. - Sur l’appareil Android, assurez-vous que vos applications ont accès à Location. Pour ce faire, accédez à Paramètres -> Applications -> {votre application} -> Autorisations et activez Emplacement.
- Dans
beaconCallback(), j’utilise la fermeture pour capturer la référence à mon composant d’application. En effet, la méthode est un rappel, ce qui signifie que l’objet qui l’invoque ultérieurement n’est pas mon composant d’application, mais plutôt certains objets du plug-in. Par conséquent, si j’avais utilisé cette mot-clé pour accéder aux objets définis dans mon composant d’application, j’obtiendrais des erreurs en raison de l’accès aux propriétés sur un objet non défini. Ce n’est que du JavaScript.
Voici ce que j’obtiens dans la console, qui me permet de savoir que les choses fonctionnent lorsque j’exécute l’application sur mon appareil Android:
onBeaconServiceConnect JS: startRanging JS: startRangingBeaconsInRegion JS: startMonitoring JS: didDetermineStateForRegion JS: 1 JS: id1: b9407f30-f5f8-466e-aff9-25556b57fe6d id2: 17744 id3: 28116 JS: [{"proximityUUID":"b9407f30-f5f8-466e-aff9-25556b57fe6d","major":17744,"minor":28116,"distance_proximity":0.13055123127828835,"rssi":-60,"txPower_accuracy":-76}]
C’est ça. Merci pour la lecture et le codage heureux.
Balise Bluetooth basse énergie
Déterminer la proximité d’un périphérique ibeacon plugin nativescript-ibeacon
