Negli ultimi mesi ho giocato con la nuova API Web Bluetooth che sarà disponibile in Chrome 56 a febbraio 2017. E lascia che te lo dica, questa nuova funzionalità ha appena sbloccato molte nuove possibilità per il Web.

In qualità di sostenitore del Web, ero così entusiasta e non vedevo l'ora di creare un'applicazione che mostrasse quanto sia facile combinare Angular e l'API Web Bluetooth (ancora di più, con una qualsiasi delle prossime API Web, ne parleremo presto, rimanete sintonizzati ).

Incontriamo il modulo Bluetooth The Missing Web per l'applicazione Angular

Ho iniziato quindi a lavorare con il mio amico François Beaufort (complimenti a lui!) per realizzare un'app demo , una sorta di proof of concept che illustri come integrare Web Bluetooth con Angular.

Dopo aver implementato un paio di casi d'uso, ho creato un modulo Angular che estrae tutto il boilerplate necessario per configurare l'API Web Bluetooth.

Alcune dichiarazioni di non responsabilità

API Bluetooth Web

Presumo che tu abbia già familiarità con le API Web Bluetooth: server GATT, servizi, caratteristiche... ecc. Mettiti comodo con questo argomento prima di leggere le sezioni successive. Ecco alcune risorse:

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

Presumo anche che tu abbia alcune conoscenze di base su osservabili , osservatori e soggetti .

Notazione finlandese

Noterai che alcuni metodi terminano con il simbolo $. Questa è una sorta di convenzione nel mondo degli Osservabili che usiamo da un po'. Potremmo eliminare questo simbolo $ in futuro a causa di questo post sul blog.

Installazione del modulo

Puoi ottenere questo modulo utilizzando Yarn o NPM :

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

Il modulo è semplice da usare. Innanzitutto, importa il modulo WebBluetoothModule dal modulo @manekinekko/angular-web-bluetooth :

La chiamata al metodo WebBluetoothModule.forRoot() fornirà il servizio BluetoothCore che dovrai utilizzare all'interno dei tuoi servizi/componenti, come in Battery-level.component.ts :

WebBluetoothModule.forRoot () fornisce anche un'implementazione BrowserWebBluetooth che utilizza navigator.bluetooth sotto il cofano. Un'implementazione ServerWebBluetooth per Angular Universal arriverà più avanti. Naturalmente, utilizzando DI di Angular, sei libero di fornire la tua implementazione personalizzata, se lo desideri.

Il servizio BatteryLevelService ( battery-level.service.ts ) è il luogo in cui implementerai (dovresti) la logica del tuo dispositivo/sensore. Nell'esempio seguente, stiamo implementando un servizio di livello della batteria che legge il livello della batteria del dispositivo collegato:

Dammi qualche spiegazione

Va bene! Spieghiamo cosa succede all'interno del metodo getBatteryLevel() ...

Fondamentalmente, per leggere un valore da un dispositivo, è necessario seguire lo stesso flusso di lavoro (per i casi d'uso comuni):

1. Chiama il metodo discover$() per eseguire il processo di rilevamento

3. Quindi otterrai il servizio principale di quel server GATT

4. Successivamente, ottieni una caratteristica specifica

5. Ultima lettura del valore estratto da quella caratteristica (come DataView)

6. L'ultimo passaggio ti fornirà i valori come tipi DataView. Dovrai leggere i valori corretti specifici del tuo dispositivo/sensore. Ad esempio, per valori semplici come Battery Level , è sufficiente chiamare value.getUint8(0) :

.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);
 });

Hai bisogno di un antipasto?

Ecco un repository di base che ti aiuterà a iniziare...

Hai un feedback?

Tutti i contributi sono benvenuti. Per favore apri un problema su github e forniscici il tuo feedback...

Andare avanti

Se hai bisogno di andare ancora oltre e implementare applicazioni ancora più interessanti utilizzando più dispositivi e sensori, puoi dare un'occhiata all'API Web Bluetooth .

Seguimi su Twitter @manekinekko per saperne di più sulla piattaforma web.