Conectando hardware à web via Bluetooth e USB

WEB BLUETOOTH / WEB USB
CONECTANDO SEU HARDWARE A WEB
Alvaro Viebrantz
aviebrantz.com.br
@alvaroviebrantz
1

Alvaro Viebrantz
Google Developer Expert em Internet das Coisas
Cuiabá - MT
2
aviebrantz.com.br
@alvaroviebrantz

3
Como interagir com um objeto ﬁsico ?

4
!Obtendo mais informações
QR Codes e links curtos

5
!Obtendo mais informações
QR Codes e links curtos

6
Você tem a idéia genial de produto
Mas como seu usuário vai conﬁgurar ele ?

7
Mas como seu usuário vai conﬁgurar ele ?
Ele não vai baixar a IDE do Arduino !!!

8
!Comunicação serial via cabo
Precisa de drivers e as vezes um software a ser instalado

9
!Comunicação sem fio
Via rede com Wifi
ESP8266 👑
+ Ecossistema Arduino
+ Wifi embutido

10
! “Como eu acesso ?”
“Só digitar essa url aqui:
192.168.0.1 ou minhalampada.local,
mas precisa estar na mesma rede”
“Baixa meu app aqui.
Mas só funciona com meu projeto.”

11
!Comunicação sem ﬁo
Bluetooth Classic e Low Energy
• Bluetooth classic utiliza pareamento
• Pior experiência possível
• Até então só funciona em apps nativos
• Mobile
• Desktop
• “Baixe na Store”

13
🚀A vantagem da web é que ela é mais acessível
O santo Graal dos dias atuais
4.7
bilhões de
página
Era do
Zetabyte*
* 1000 Exabytes
36.000
anos
de video em
hd
Últimos
20anos
http://www.livescience.com/54094-how-big-is-the-internet.html

14
🚀A partir da web você tem alcance muito grande
Engajamento muito alto
• Todo celular tem um navegador
• Sem impedimentos de acesso
• “Baixe na Store”
• Muitos usuários não vão fazer isso!
• Usuários Android acessam mais website do que usam
aplicativos

15
”Mas aplicativos nativos são melhores”
Realmente tem algumas vantagens em se tratando de User Experience
O F F L I N E
P E R F O R
M A N C E
FA M I L I A R
H O M E  
S C R E E N
R Á P I D O
A P I S
N AT I VA S

!16
• Progressive Web Apps
• Linda performance de UI
• Instalável
• Ofﬂine
• Compartilhável
• Responsivo
• Appy-like
Progressive Web Apps
Seus problemas acabaram !!!

!17
“ S i t e s q u e t o m a ra m a s
v i t a m i n a s c e r t a s ”
Progressive Apps: Escaping Tabs Without Losing Our Soul
Seus problemas acabaram !!!

!18
Exemplos hoje

19
Mas o foco aqui não são PWAs
Mas agora a Web tem mais poderes
• Chamadas nativas
• Bluetooth 4.0 e comunicação USB Serial
• Câmera
• Microfone
• Localização
• Etc…

20
Web Bluetooth
Comunicação sem ﬁo direto com o browser

21
Web Bluetooth
Compatibilidade

22
Web Bluetooth API
Comunicação sem ﬁo direto com o browser
• Baseado em Bluetooth 4.0 (BLE)
• Você pode construir um dispositivo cross-platform
• Sem drivers nativos
• Baixo custo e baixo consumo de energia
• Segurança
• Apenas via HTTPS

23
Web Bluetooth API
Arquitetura basica BLE
Browser Atua como Central
Pilha de um dispositivo BLE
Device > Services > Characteristic > Value
https://learn.adafruit.com/introduction-to-bluetooth-low-energy/gatt

24
Web Bluetooth API
Services BLE
• Existem alguns perﬁs padrões
• Batimentos cardiacos
• Estado da bateria
• Pressão sangüínea
• Notiﬁcações
• Muitos outros

25
Web Bluetooth
Demo - Sensor de Batimentos Cardiacos
https://webbluetoothcg.github.io/demos/heart-rate-sensor/

26
Web Bluetooth
Demos e examples oﬁciais
• Device Info
• Battery Level
• Reset Energy
• Characteristic Properties
• Notiﬁcations
• Device Disconnect
• Get Characteristics
• Get Descriptors
https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web

27
Como fazer o seu próprio [1]
Arduino + Módulo Bluetooth 4.0
• Qualquer placa Arduino e um módulo
bluetooth de comunicação serial
• O mais conhecido é o HM-10
• Apenas um Service ﬁxo, não há possibilidade
de implementar seu próprios Services e
Characteristics
• No lado do Arduino é como se fosse uma
porta Serial
2$

28
Braço Robótico controlado via Web Bluetooth
Arduino + Módulo Bluetooth 4.0
https://github.com/alvarowolfx/mearm-web-bluetooth
• Arduino Uno
• Módulo HM-10
• 4 servo motores
• Braço robótico MeArm
• Controlado via WebBluetooth

29
Braço Robótico controlado via Web Bluetooth
Demo video

30
Como fazer o seu próprio [2]
Arduino e ESP32 ao resgate
• ESP32 tem Bluetooth 4.0
• Suporte ao ecossistema Arduino
• Possibilidade de implementar seu próprios Services e
Characteristics
• Biblioteca: 
https://github.com/nkolban/ESP32_BLE_Arduino
ESP32 👑
+ Ecossistema Arduino
+ Wiﬁ embutido
+ Bluetooth
+ Dual Core!!!
7$

31
Cubo Led Fisico, IMU e Web Bluetooth
ESP32 + Acc e Gyro + 3D no browser
https://github.com/alvarowolfx/
physical-cube-imu-web-bluetooth-esp32
• ESP32 + Ecossistema Arduino
• MPU6050 - Accelerometro + Giroscopio
• Anel de 16 Neopixels
• Case Impressa em 3d
• Bateria 240 mAh
• Interface em 3D rodando no Browser
• React e ThreeJS

32
Demo

33
Como foi feito [Hardware]
• Deﬁnição de services e characteristics
• IMU - Inertial measurement unit
• Color
• UUIDs
• Ids únicos

34
Cubo Led Fisico, IMU e Web
Bluetooth
• Servidor GATT com biblioteca
ESP32 BLE Arduino
• Leitura manual dos sensores e
consolidada com algoritmo
MadgwickAHRS

35
Bluetooth
• Lida com callbacks quando
forem recebidas novas
informações
• Mais fácil que ﬁcar fazendo
parse de comunicação Serial

36
Bluetooth
Como foi feito [Web]
• navigator.bluetooth.requestDevice
• Filtra os UUIDs e nomes do
dispositivo
• Mostra UI para seleção do
dispositivo

37

38
• Seleciona os services e
characteristics por UUID

39
• Le os valores das
characteristics em um
intervalo ﬁxo de tempo

40
• Escreve na Characteristic quando necessita envio de dados

42
Web USB
Comunicação serial direto com o Browser

43
Web USB
• Disponível no Android, macOS, Windows e Linux
• Funciona sem instalação de drivers adicionais na maioria deles
• Diferentes usos
• Upgrade de ﬁrmware (DFU)
• Comunicação Serial
• Bastante simples de se utilizar
• Padrão Web
• https://github.com/wicg/webusb

44
Já tem produto usando WebUSB
Para atualização de ﬁrmware e conﬁguração
• Calculadora da NumWorks
https://blog.adafruit.com/2018/02/09/writing-a-device-updater-seriously-consider-webusb-numworks/

45
Web USB
• WebUSB ❤ Arduino
• Arduino Leonardo
• Arduino/Genuino Micro
• Arduino/Genuino Zero
• Arduino MKR1000
• Arduino MKRZero
• Arduino MKRFox1200
• Adafruit Feather 32u4
• https://github.com/webusb/arduino/
• Necessita de modelo com suporte  
a USB Nativo

46
Demo - Luminária LED WebUSB
Arduino Micro e alguns Neopixels
• Arduino Micro ou equivalente
• Case impressa em 3D
• Anel de 16 Neopixels
https://github.com/alvarowolfx/ 
physical-led-ring-webusb-arduino

47
Luminária LED WebUSB
• Biblioteca WebUSB Arduino
• Conﬁgura o site associado
• Comunicação serial padrão do
Arduino
https://github.com/alvarowolfx/ 
physical-led-ring-webusb-arduino

48
• navigator.usb.requestDevice()
• Podemos ﬁltrar os
identiﬁcadores de fabricantes
conhecidos

49
• navigator.usb.getDevices()
• Obtém conexões USB de sessões anteriores

50
• Interface de seleção dos dispositivos e notiﬁcações

52
Passador de Slides Bluetooth com gestos
Arduino + Bluetooth HID
• LightBlue Bean
• Arduino AtMega328p
• Módulo ADPS9660
• Gestos
• Cores
• Bateria 240ma
• Case impressa em 3D

53
Futuro
Existem outras API para a Web a serem exploradas
• Physical Web e Beacons
• WebMIDI
• WebNFC
• Payment Request API

“Nada neste mundo te faz aprender mais
do que a sua própria curiosidade.”
 
Abrace o espirito maker e 
Faça você mesmo !
54

OBRIGADO
ISSO É TUDO PESSOAL
55
Alvaro Viebrantz
aviebrantz.com.br
@alvaroviebrantz

Conectando hardware à web via Bluetooth e USB

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Conectando hardware à web via Bluetooth e USB

Semelhante a Conectando hardware à web via Bluetooth e USB (20)

Mais de Alvaro Viebrantz

Mais de Alvaro Viebrantz (20)

Conectando hardware à web via Bluetooth e USB