Neste curto codelab, você aprenderá como descobrir e interagir com um dispositivo Bluetooth próximo a você usando o Polymer. Ao longo do Codelab você também verá as vantagens da funcionalidade de data-binding do Polymer.

O que você aprenderá

O que você precisa

Como você utilizará esse tutorial?

Apenas ler o tutorial Ler e completar os exercícios

Como você avalia sua experiência com Polymer?

Básico Intermediário Avançado

Crie um novo projeto

A primeira vez que você abrir o Chrome Dev Editor, você precisará configurar seu ambiente de desenvolvimento.

Abra o Chrome Dev Editor e inicie um novo projeto:

  1. Click no íconepara iniciar um novo projeto.
  2. Digite "PolymerBluetoothCodelab" como o Project name.
  3. No elemento dropdown Project type, selecione "JavaScript web app (utilizando Polymer paper elements)".
  4. Click no botão CREATE.

Chrome Dev Editor criará uma estrutura básica para sua app Polymer. Ele também utilizará o Bower para baixar e instalar a lista de dependências (incluindo a biblioteca Polymer core) dentro do diretório bower_components/. Você aprenderá mais sobre como utilizar o Bower na próxima etapa.

A estrutura do diretório deve ser igual a essa:

PolymerBluetoothCodelab/
  bower_components/ <!-- Installed dependencies from Bower -->
  bower.json  <!-- Bower metadata files used for managing deps -->
  index.html  <!-- your app -->
  main.js
  styles.css

Próximo passo

Neste momento o aplicativo não faz muita coisa. Vamos adicionar o suporte ao Bluetooth!

A Coleção de elementos Polymer Platinum disponibiliza o elemento platinum-bluetooth para encontrar e interagir com dispositivos Bluetooth próximos. Para utilizá-lo você precisa instalá-lo com o Bower.

Instalando o elemento <platinum-bluetooth>

O Chrome Dev Editor não possui uma linha de comandos para executar os comandos do Bower. Você precisa alterar manualmente o arquivo bower.json para incluir o platinum-bluetooth, então execute a funcionalidade Bower Update do Chrome Dev Editor. Bower Update verifica todas as dependências no arquivo bower.json e instala aquelas que estão faltando.

  1. Altere o arquivo bower.json e adicione o elemento platinum-bluetooth ao objeto dependencies:
  ...
  "dependencies": {
    "iron-elements": "PolymerElements/iron-elements#^1.0.0",
    "paper-elements": "PolymerElements/paper-elements#^1.0.1",
    "platinum-bluetooth": "PolymerElements/platinum-bluetooth#^2.0.0"
  }
}
  1. Click com o botão direito no arquivo bower.json no painel do editor.
  2. Selecione a opção Bower Update no menu de contexto.

O download pode levar alguns segundos. Você pode verificar se o elemento platinum-bluetooth (e suas dependências) foi instalado checando se o diretório bower_components/platinum-bluetooth/ foi criado e populado.

Usando o elemento <platinum-bluetooth-device>

Para utilizar o elemento <platinum-bluetooth-device>, você precisa:

  1. Usar o HTML Import para adicionar o elemento no index.html.
  2. Declare uma instância do elemento na página.
  3. Adicione a chamada do método request() à instância do elemento para responder ao gestos do usuário.

No arquivo index.html, remova todos outros HTML imports no <head> e substitua-os com os 2 HTML imports que adicionam o paper-button.html e o platinum-bluetooth-device.html:

index.html

<head>
  ....
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="bower_components/paper-button/paper-button.html">

  <link rel="import" href="bower_components/platinum-bluetooth/platinum-bluetooth-device.html">

  <link rel="stylesheet" href="styles.css">
</head>

A seguir, substitua o conteúdo da tag <body> com uma instância do elemento <platinum-bluetooth-device>, um simples <paper-button> e um script:

index.html

<body>
  <platinum-bluetooth-device services-filter='["battery_service"]'>
  </platinum-bluetooth-device>

  <section>
    <paper-button raised>Get Device</paper-button>
  </section>

  <script src="main.js"></script>
</body>

Finalmente, no arquivo main.js, altere o conteúdo com o código javascript abaixo:

main.js

document.addEventListener('WebComponentsReady', function() {

  var batteryDevice = document.querySelector('platinum-bluetooth-device');
  var button = document.querySelector('paper-button');

  button.addEventListener('click', function() {
    console.log('Requesting a bluetooth device advertising battery service...');
    
    batteryDevice.request().then(function(device) {
      console.log('A bluetooth device has been found!');
      console.log('Device Name: ' + device.name);
    })
    .catch(function(error) {
      console.error('Argh! ', error);
    });
  });
});

Executando o app

Agora, selecione o arquivo index.html e pressione o botão no lado superior esquerdo para executar o app. O Chrome Dev Editor iniciará um servidor web local e mostrará a página index.html.

Você deve ver um simples botão "Get Device". Click nele, abra o console do Dev Tools usando o atalho no teclado Ctrl + Shift + J e aguarde...

Você pode receber um erro se não existir nenhum dispositivo Bluetooth próximo. Nesse caso, use um smartphone Android que suporte BLE Peripheral Mode e siga para o próximo passo.

Perguntas Frequentes

Assim que você estiver em posse de um smartphone Android que suporte o modo BLE peripheral mode (Nexus 6, Nexus 9, Moto E 4G LTE, LG G4, Galaxy S6), procure por "BLE Peripheral Simulator" na Google Play Store e instale o aplicativo no seu Android, se você ainda não o tem instalado.

O aplicativo também está disponível em https://play.google.com/store/apps/details?id=io.github.webbluetoothcg.bletestperipheral.

Advertise a battery service

Abra o aplicativo BLE Peripheral Simulator, selecione "Battery" e é só isso que você precisa fazer! A partir de agora, seu smartphone Android irá disponibilizar um battery service via bluetooth enquanto a tela estiver ativa.

Você também pode alterar o nível da bateria através do slider disponibilizado.

.

Executando o app de verdade

Agora que seu smartphone Android está disponibilizando um battery service, vamos voltar à aplicação web com Polymer e clicar mais uma vez no botão "Get Device". Veja abaixo o resultado caso você esteja usando um Nexus 6:

Próximo passo

Vamos verificar o nível da bateria informada pelo aplicativo Android.

Perguntas frequentes

A leitura de uma característica de um dispositivo bluetooth pode ser feita facilmente utilizando os elementos <platinum-bluetooth-service> e <platinum-bluetooth-characteristic>.

Usando os elementos <platinum-bluetooth-service> e <platinum-bluetooth-characteristic>

Para usar o elemento <platinum-bluetooth-service> e o <platinum-bluetooth-characteristic>, você precisa:

  1. Usar HTML Import para importar os elementos no index.html.
  2. Declarar uma instância do elemento <platinum-bluetooth-service> como filho do elemento <platinum-bluetooth-device>.
  3. Declarar uma instância do elemento <platinum-bluetooth-characteristic> como filho do elemento <platinum-bluetooth-device>.
  4. Adicionar uma chamada ao método read() para a instância do elemento <platinum-bluetooth-characteristic>.

No arquivo index.html, adicione novos HTML imports que adicionam os elementos platinum-bluetooth-service.html e platinum-bluetooth-characteristic.html depois do platinum-bluetooth-device.html:

index.html

 <link rel="import" href="bower_components/platinum-bluetooth/platinum-bluetooth-device.html">
  <link rel="import" href="bower_components/platinum-bluetooth/platinum-bluetooth-service.html">
  <link rel="import" href="bower_components/platinum-bluetooth/platinum-bluetooth-characteristic.html">

A seguir, adicione um novo elemento <platinum-bluetooth-service> como filho do elemento <platinum-bluetooth-device> e adicione um novo elemento <platinum-bluetooth-characteristic> como filho do elemento <platinum-bluetooth-service>. Finalmente renomeie o botão "Get Device" para "Get Battery" para refletir o nosso objetivo:

index.html

 <platinum-bluetooth-device services-filter='["battery_service"]'>
    <platinum-bluetooth-service service="battery_service">
      <platinum-bluetooth-characteristic characteristic="battery_level">
      </platinum-bluetooth-characteristic>
    </platinum-bluetooth-service>
  </platinum-bluetooth-device>

  <section>
    <paper-button raised>Get Battery</paper-button>
  </section>

Finalmente no arquivo main.js inclua o código que retorna o nível da bateria na resposta do método batteryDevice.request():

main.js

    batteryDevice.request().then(function(device) {
      console.log('A bluetooth device has been found!');
      console.log('Device Name: ' + device.name);
      
      // Connect to the device and read battery level.
      var batteryLevel = batteryDevice.querySelector('platinum-bluetooth-characteristic');
      return batteryLevel.read().then(function(value) {
        console.log('Battery Level is ' + value.getUint8(0) + '%');
      });

    })
    .catch(function(error) {
      console.error('Argh! ', error);
    });

Lendo o nível da bateria

Selecione o arquivo index.html e pressione o botão no lado superior esquerdo para executar o App como já foi visto anteriormente. Certifique-se primeiro que seu smartphone Android ainda está com o serviço de nível de bateria ativado, então click no botão "Get Battery" na página e veja o console no Dev Tools:

Você pode mudar o valor do nível da bateria no aplicativo Android e clicar novamente no botão "Get Battery" para ver o quão rápido é fazer a leitura de uma característica que já está no cache.

Preenchendo um elemento data-bound em resposta a uma leitura

Usando a funcionalidade de data binding do Polymer é bem simples preencher um campo data-bound em resposta a leitura de uma característica bluetooth. Vamos ver como mostrar o nível de bateria em um elemento toast do Polymer.

No arquivo index.html, adicione um novo HTML import que carrega o paper-toast.html depois do paper-button.html. Note que você não precisa executar o Bower Update pois o paper-toast já foi adicionado como parte do paper-elements.

index.html

  <link rel="import" href="bower_components/paper-button/paper-button.html">
  <link rel="import" href="bower_components/paper-toast/paper-toast.html">

A seguir, adicione um binding annotation value ao elemento <platinum-bluetooth-characteristic>, adicione um elemento <paper-toast> com um atributo text, e encapsule tudo em um auto-binding template element:

index.html

<body>
  <template is="dom-bind">
    
  <platinum-bluetooth-device services-filter='["battery_service"]'>
    <platinum-bluetooth-characteristic
        service="battery_service"
        characteristic="battery_level"
        value={{batteryLevel}}>
    </platinum-bluetooth-characteristic>
  </platinum-bluetooth-device>
  
  <section>
    <paper-button raised>Get Battery</paper-button>
  </section>
  
  <paper-toast text="{{computeCharacteristic(batteryLevel)}}"></paper-toast>
  
  </template>
  
  <script src="main.js"></script>
</body>

A seguir, no arquivo main.js, vamos adicionar uma função computeCharacteristic ao elemento template e mostrar um elemento toast na resposta do batteryLevel.read():

main.js

      // Connect to the device and read battery level.
      var batteryLevel = batteryDevice.querySelector('platinum-bluetooth-characteristic');
      return batteryLevel.read().then(function() {
        document.querySelector('paper-toast').show();
      });

main.js

var template = document.querySelector('template');
template.computeCharacteristic = function(batteryLevel) {
  return ('Battery Level is ' + batteryLevel.getUint8(0) + '%');
};

Selecione o arquivo index.html e pressione o botão para executar o app. Certifique-se que o seu smartphone Android ainda está com o serviço de disponibilizar informações da bateria ativo, então click no botão "Get Battery" na página e você verá o elemento toast mostrando o nível da bateria:

Parabéns!

Você foi muito bem! Você criou uma aplicação web simples que mostra o nível da bateria informado pelo seu smartphone Android via bluetooth sem precisar ter muito conhecimento sobre Bluetooth.

Eu tenho certeza que você pode facilmente verificar o body sensor location de um sensor cardíaco falso apenas modificando alguns trechos do código existente. Confie em mim e siga os passos a seguir:

  1. Modifique o valor do atributo services-filter do elemento <platinum-bluetooth-device> para ["heart_rate"] no index.html.
  2. Altere o valor do atributo service do elemento <platinum-bluetooth-service> para "heart_rate" no index.html.
  3. Mude o valor do atributo characteristic do elemento <platinum-bluetooth-characteristic> para "body_sensor_location" no index.html.
  4. Renomeie o botão "Get Battery" para "Get Body Sensor" no index.html.
  5. Altere a função computeCharacteristic para mapear 6 para "foot", 5 para "ear lobe", etc no arquivo main.js.
  6. Selecione o Periférico "Heart Rate Monitor" no aplicativo BLE Peripheral Simulator e mude o valor do "Body Sensor Location".
  7. Execute seu app e click no novo botão "Get Body Sensor".

Próximo passo

Vamos resumir o que você aprendeu na próxima sessão e o que explorar a partir daqui.

Perguntas Frequentes

E aqui estamos! Agora você tem conhecimento total sobre o elemento platinum-bluetooth. Total? Ainda não, você ainda não modificou uma característica... Verifique os próximos passos logo abaixo.

O que aprendemos

Próximos passos