Nos últimos meses, tenho brincado com a nova API Web Bluetooth , que está prestes a ser lançada no Chrome 56 em fevereiro de 2017. E deixe-me dizer, esse novo recurso acaba de desbloquear muitas novas possibilidades para a Web.

Como Web Advocate, fiquei muito animado e mal podia esperar para construir um aplicativo mostrando como é fácil combinar Angular e a API Web Bluetooth (ainda mais, com qualquer uma das próximas APIs Web, mais sobre isso em breve, fique ligado ).

Vamos conhecer o módulo Bluetooth Web ausente para aplicação angular

Comecei então a trabalhar com meu amigo François Beaufort (parabéns a ele!) para construir um aplicativo demo , uma espécie de prova de conceito que ilustra como integrar Web Bluetooth com Angular.

Depois de implementar alguns casos de uso, criei um módulo Angular que abstrai todo o padrão necessário para configurar a API Web Bluetooth.

Algumas isenções de responsabilidade

APIs Bluetooth da Web

Presumo que você já esteja familiarizado com as APIs Web Bluetooth: servidor GATT, serviços, características… etc. Por favor, sinta-se confortável com este tópico antes de ler as próximas seções. Aqui estão alguns recursos:

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

Também presumo que você tenha algum conhecimento básico sobre Observáveis , Observadores e Assuntos .

Notação Finlandesa

Você notará que alguns métodos terminam com um símbolo $. Este é algum tipo de convenção no mundo dos Observáveis ​​que já usamos há algum tempo. Podemos abandonar este símbolo $ no futuro por causa desta postagem no blog.

Instalando o módulo

Você pode obter este módulo usando Yarn ou NPM :

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

O módulo é simples de usar. Primeiro, importe o formulário do módulo WebBluetoothModule @manekinekko/angular-web-bluetooth :

Chamar o método WebBluetoothModule.forRoot() fornecerá o serviço BluetoothCore que você precisará usar dentro de seus próprios serviços/componentes, como em battery-level.component.ts :

O WebBluetoothModule.forRoot() também fornece uma implementação BrowserWebBluetooth que usa navigator.bluetooth nos bastidores. Uma implementação ServerWebBluetooth para Angular Universal virá mais tarde. É claro que, usando o DI do Angular, você pode fornecer sua implementação personalizada, se desejar.

O serviço BatteryLevelService ( battery-level.service.ts ) é onde você irá (deverá) implementar a lógica do seu dispositivo/sensor. No exemplo a seguir, estamos implementando um serviço de nível de bateria que lê o nível da bateria do dispositivo conectado:

Me dê algumas explicações

OK! Vamos explicar o que está acontecendo dentro do método getBatteryLevel() …

Basicamente, para ler um valor de um dispositivo, você precisa passar pelo mesmo fluxo de trabalho (para casos de uso comuns):

1. Chame o método discover$() para executar o processo de descoberta

3. Então, você obterá o serviço primário desse servidor GATT

4. Em seguida, obtenha uma característica específica

5. Leia pela última vez o valor extraído dessa característica (como DataView)

6. A última etapa fornecerá os valores como tipos de DataView. Você terá que ler os valores corretos específicos do seu dispositivo/sensor. Por exemplo, para valores simples como battery level , chamar value.getUint8(0) é suficiente:

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

Precisa de uma entrada?

Aqui está um repositório básico que o ajudará a começar…

Tem um feedback?

Todas as contribuições são bem-vindas. Abra um problema no github e dê-nos seus comentários…

Indo além

Se você precisar ir ainda mais longe e implementar aplicativos ainda mais interessantes usando mais dispositivos e sensores, você pode dar uma olhada na API Web Bluetooth .

Siga-me no Twitter @manekinekko para saber mais sobre a plataforma web.