Depuis quelques mois, je joue avec la nouvelle API Web Bluetooth qui est sur le point d'être disponible dans Chrome 56 en février 2017. Et laissez-moi vous dire que cette nouvelle fonctionnalité vient d'ouvrir de nombreuses nouvelles possibilités pour le Web.

En tant que Web Advocate, j'étais tellement excité et j'avais hâte de créer une application montrant à quel point il est facile de combiner Angular et l'API Web Bluetooth (encore plus, avec l'une des API Web à venir, plus d'informations à ce sujet bientôt, restez à l'écoute ).

Rencontrons le module Bluetooth Web manquant pour l'application angulaire

J'ai alors commencé à travailler avec mon pote François Beaufort (bravo à lui !) pour construire une application de démonstration , une sorte de preuve de concept qui illustre comment intégrer le Web Bluetooth avec Angular.

Après avoir implémenté quelques cas d'utilisation, j'ai proposé un module Angular qui supprime tout le passe-partout nécessaire à la configuration de l'API Web Bluetooth.

Quelques avertissements

API Web Bluetooth

Je vais supposer que vous connaissez déjà les API Web Bluetooth : serveur GATT, Services, Caractéristiques…etc. Veuillez vous familiariser avec ce sujet avant de lire les sections suivantes. Voici quelques ressources :

1. https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
2. https://medium.com/@urish/start-building-with-web-bluetooth-and-progressive-web-apps-6534835959a6

Je suppose également que vous avez des connaissances de base sur les observables , les observateurs et les sujets .

Notation finlandaise

Vous remarquerez que certaines méthodes se terminent par un symbole $. Il s'agit d'une sorte de convention dans le monde des observables que nous utilisons depuis un certain temps. Nous pourrions supprimer ce symbole $ à l'avenir à cause de ce billet de blog.

Installation du module

Vous pouvez obtenir ce module en utilisant Yarn ou NPM :

$ yarn add @manekinekko/angular-web-bluetooth
$ npm i -S @manekinekko/angular-web-bluetooth

Le module est simple à utiliser. Tout d’abord, importez le formulaire du module WebBluetoothModule @manekinekko/angular-web-bluetooth :

L'appel de la méthode WebBluetoothModule.forRoot() fournira le service BluetoothCore que vous devrez utiliser dans vos propres services/composants, comme dans Battery-level.component.ts :

Le WebBluetoothModule.forRoot() fournit également une implémentation BrowserWebBluetooth qui utilise navigator.bluetooth sous le capot. Une implémentation ServerWebBluetooth pour Angular Universal viendra plus tard. Bien entendu, en utilisant le DI d'Angular, vous êtes libre de fournir votre implémentation personnalisée si vous le souhaitez.

Le service BatteryLevelService ( battery-level.service.ts ) est l'endroit où vous allez (devriez) implémenter la logique de votre appareil/capteur. Dans l'exemple suivant, nous implémentons un service de niveau de batterie qui lit le niveau de la batterie de l'appareil connecté :

Donne-moi quelques explications

D'accord! Expliquons ce qui se passe dans la méthode getBatteryLevel() …

Fondamentalement, pour lire une valeur à partir d'un appareil, vous devez suivre le même flux de travail (pour les cas d'utilisation courants) :

1. Appelez la méthode discover$() pour exécuter le processus de découverte

3. Ensuite, vous obtiendrez le service principal de ce serveur du GATT

4. Ensuite, obtenez une caractéristique spécifique

5. Dernière lecture de la valeur extraite de cette caractéristique (en tant que DataView)

6. La dernière étape vous donnera les valeurs sous forme de types DataView. Vous devrez lire les bonnes valeurs spécifiques à votre appareil/capteur. Par exemple, pour des valeurs simples telles que le niveau de batterie , appeler un value.getUint8(0) suffit :

.map( (value: DataView) => value.getUint8(0) );

.map( (data: DataView) => {
    let value = data.getUint16(0, true /* little endian */);
    let mantissa = value & 0x0FFF;
    let exponent = value >> 12;
    let magnitude = Math.pow(2, exponent);
    let output = (mantissa * magnitude);
    let lux = output / 100.0;
    return +lux.toFixed(2);
 });

Besoin d'une entrée ?

Voici un dépôt de base qui vous aidera à démarrer…

Vous avez un retour ?

Toutes les contributions sont les bienvenues. Veuillez ouvrir un ticket sur github et nous faire part de vos commentaires…

Aller plus loin

Si vous avez besoin d'aller encore plus loin et de mettre en œuvre des applications encore plus intéressantes utilisant davantage d'appareils et de capteurs, vous pouvez consulter l' API Web Bluetooth .

Suivez-moi sur Twitter @manekinekko pour en savoir plus sur la plateforme web.