SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
Physical Web
Oder: Wenn der Browser mit dem Toaster….
Web Montag Kassel, 27. März 2017
Jens Siebert (@jens_siebert)
Der „smarte“ Toaster…
Physical Web
Physical Web
Physical Web
?
Eddystone-URL (Beacon)*
Web Bluetooth**
Physical Web
**Funktioniert zurzeit nur mit Chrome für Android, Mac, iOS und Linux. Windows ab Frühjahr 2017.
*Funktioniert mit Android (ab 4.4) und iOS.
Bluetooth LE Generic Access Profile (GAP)
- Eddystone-URL
- Services
Bluetooth LE Generic Attribute Profile (GATT)
- Characteristics
- Data
Bluetooth LE Generic Attribute Profile (GATT)
Profile
Service
Service
Characteristic
Characteristic
Characteristic
Characteristic
GATT
Environmental Sensing
Battery Service
Temperature
Pressure
Humidity
Battery Level
if (!navigator.bluetooth) {
return Promise.reject('Bluetooth API not available');
}
return navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['environmental_sensing']
})
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('environmental_sensing'))
.then(service => service.getCharacteristic('temperature'))
.then(characteristic => characteristic.addEventListener('characteristicvaluechanged',
handleTemperatureValueChanged))
.then(characteristic => characteristic.startNotifications())
.catch(error => console.log(error));
function handleTemperatureValueChanged(event) {
let characteristic = event.target;
console.log(characteristic.value.getInt16(0, true) / 100 + " °C");
}
Wichtig: https://...
Android:
System-Einstellungen → Google → Nearby
Chrome:
Einstellungen → Datenschutz → Physical Web
Demo Time!
Adafruit Feather 32u4 Bluefruit LE
- Arduino-kompatibel
- Bluetooth LE (nRF51)
BMP280 Sensor
- Temperatur
- Luftdruck
HTU21D Sensor
- Luftfeuchtigkeit
Weitere Infos
• Physical Web: https://google.github.io/physical-web/
• Web Bluetooth: https://webbluetoothcg.github.io/web-bluetooth/
• Web Bluetooth Examples: https://googlechrome.github.io/samples/web-bluetooth/
• Bluetooth LE GATT: https://www.bluetooth.com/specifications/generic-attributes-overview
• Code (Web & Arduino): https://bitbucket.org/jenssiebert/wmksphysicalweb
• Slides: http://www.slideshare.net/JensSiebert1/physical-web-73663054
Kleiner Hinweis
Puck.js – JavaScript + Bluetooth LE =
http://www.espruino.com/Puck.js

Más contenido relacionado

Similar a Physical Web

Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...Simon Guest
 
Assistive Technology_Research
Assistive Technology_ResearchAssistive Technology_Research
Assistive Technology_ResearchMeng Kry
 
Programming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioProgramming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioGünter Obiltschnig
 
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...Arne Bröring
 
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...Guido Schmutz
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioReal Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioMindfire Solutions
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Esri Nederland
 
Shindig in 2 hours
Shindig in 2 hoursShindig in 2 hours
Shindig in 2 hourshanhvi
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCJim Tochterman
 
Mastering the IoT With JavaScript and C++ - Günter Obiltschnig
Mastering the IoT With JavaScript and C++ - Günter ObiltschnigMastering the IoT With JavaScript and C++ - Günter Obiltschnig
Mastering the IoT With JavaScript and C++ - Günter ObiltschnigWithTheBest
 
Getting physical with web bluetooth in the browser
Getting physical with web bluetooth in the browserGetting physical with web bluetooth in the browser
Getting physical with web bluetooth in the browserDan Jenkins
 
Geosolutions FOSS4g 2009 Redux
Geosolutions FOSS4g 2009 ReduxGeosolutions FOSS4g 2009 Redux
Geosolutions FOSS4g 2009 ReduxGeoSolutions
 
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...MongoDB
 
Customizing the Document Library
Customizing the Document LibraryCustomizing the Document Library
Customizing the Document LibraryAlfresco Software
 
Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Moullet
 
Microsoft Azure Mobile Services
Microsoft Azure Mobile ServicesMicrosoft Azure Mobile Services
Microsoft Azure Mobile ServicesOlga Lavrentieva
 
Kotlin 在 Web 方面的应用
Kotlin 在 Web 方面的应用Kotlin 在 Web 方面的应用
Kotlin 在 Web 方面的应用Shengyou Fan
 

Similar a Physical Web (20)

Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...Building solutions on the Microsoft platform that target iPhone, iPad, and An...
Building solutions on the Microsoft platform that target iPhone, iPad, and An...
 
Assistive Technology_Research
Assistive Technology_ResearchAssistive Technology_Research
Assistive Technology_Research
 
Programming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.ioProgramming IoT Gateways in JavaScript with macchina.io
Programming IoT Gateways in JavaScript with macchina.io
 
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...
A Citizen Science Sensor Platform as a Live Link from GIS to the Internet ...
 
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...
IoT Architecture - Are Traditional Architectures Good Enough or do we Need Ne...
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioReal Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
 
Shindig in 2 hours
Shindig in 2 hoursShindig in 2 hours
Shindig in 2 hours
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
 
Mastering the IoT With JavaScript and C++ - Günter Obiltschnig
Mastering the IoT With JavaScript and C++ - Günter ObiltschnigMastering the IoT With JavaScript and C++ - Günter Obiltschnig
Mastering the IoT With JavaScript and C++ - Günter Obiltschnig
 
Getting physical with web bluetooth in the browser
Getting physical with web bluetooth in the browserGetting physical with web bluetooth in the browser
Getting physical with web bluetooth in the browser
 
Geosolutions FOSS4g 2009 Redux
Geosolutions FOSS4g 2009 ReduxGeosolutions FOSS4g 2009 Redux
Geosolutions FOSS4g 2009 Redux
 
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...
MongoDB.local Atlanta: MongoDB Mobile: Bringing the Power of MongoDB to Your ...
 
Customizing the Document Library
Customizing the Document LibraryCustomizing the Document Library
Customizing the Document Library
 
Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012
 
Swiss FSDI goes mobile
Swiss FSDI goes mobileSwiss FSDI goes mobile
Swiss FSDI goes mobile
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
Internet of Things and Big Data
Internet of Things and Big DataInternet of Things and Big Data
Internet of Things and Big Data
 
Microsoft Azure Mobile Services
Microsoft Azure Mobile ServicesMicrosoft Azure Mobile Services
Microsoft Azure Mobile Services
 
Kotlin 在 Web 方面的应用
Kotlin 在 Web 方面的应用Kotlin 在 Web 方面的应用
Kotlin 在 Web 方面的应用
 

Más de Jens Siebert

Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit RustJens Siebert
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit RustJens Siebert
 
TinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeTinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeJens Siebert
 
Deep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsDeep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsJens Siebert
 
Chatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkChatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkJens Siebert
 
Integrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesIntegrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesJens Siebert
 
Embedded JavaScript
Embedded JavaScriptEmbedded JavaScript
Embedded JavaScriptJens Siebert
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT CoreJens Siebert
 
Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Jens Siebert
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Jens Siebert
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT CoreJens Siebert
 

Más de Jens Siebert (18)

WebAssembly
WebAssemblyWebAssembly
WebAssembly
 
Embedded Rust
Embedded RustEmbedded Rust
Embedded Rust
 
Embedded Rust
Embedded RustEmbedded Rust
Embedded Rust
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
 
TinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete SystemeTinyML – Machine Learning für eingebettete Systeme
TinyML – Machine Learning für eingebettete Systeme
 
Deep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.jsDeep Learning mit TensorFlow.js
Deep Learning mit TensorFlow.js
 
Chatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot FrameworkChatbots bauen mit dem Microsoft Bot Framework
Chatbots bauen mit dem Microsoft Bot Framework
 
Integrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT ServicesIntegrating The Things Network Applications with Azure IoT Services
Integrating The Things Network Applications with Azure IoT Services
 
GraphQL
GraphQLGraphQL
GraphQL
 
Embedded JavaScript
Embedded JavaScriptEmbedded JavaScript
Embedded JavaScript
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
 
Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)Microsoft Bot Framework (Node.js Edition)
Microsoft Bot Framework (Node.js Edition)
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)
 
Electron
ElectronElectron
Electron
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
 
TypeScript
TypeScriptTypeScript
TypeScript
 
TypeScript
TypeScriptTypeScript
TypeScript
 

Último

Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 

Último (20)

Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Program with GUTs
Program with GUTsProgram with GUTs
Program with GUTs
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 

Physical Web

  • 1. Physical Web Oder: Wenn der Browser mit dem Toaster…. Web Montag Kassel, 27. März 2017 Jens Siebert (@jens_siebert)
  • 6. ?
  • 7. Eddystone-URL (Beacon)* Web Bluetooth** Physical Web **Funktioniert zurzeit nur mit Chrome für Android, Mac, iOS und Linux. Windows ab Frühjahr 2017. *Funktioniert mit Android (ab 4.4) und iOS.
  • 8. Bluetooth LE Generic Access Profile (GAP) - Eddystone-URL - Services
  • 9. Bluetooth LE Generic Attribute Profile (GATT) - Characteristics - Data
  • 10. Bluetooth LE Generic Attribute Profile (GATT) Profile Service Service Characteristic Characteristic Characteristic Characteristic GATT Environmental Sensing Battery Service Temperature Pressure Humidity Battery Level
  • 11. if (!navigator.bluetooth) { return Promise.reject('Bluetooth API not available'); } return navigator.bluetooth.requestDevice({ acceptAllDevices: true, optionalServices: ['environmental_sensing'] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('environmental_sensing')) .then(service => service.getCharacteristic('temperature')) .then(characteristic => characteristic.addEventListener('characteristicvaluechanged', handleTemperatureValueChanged)) .then(characteristic => characteristic.startNotifications()) .catch(error => console.log(error)); function handleTemperatureValueChanged(event) { let characteristic = event.target; console.log(characteristic.value.getInt16(0, true) / 100 + " °C"); } Wichtig: https://...
  • 12. Android: System-Einstellungen → Google → Nearby Chrome: Einstellungen → Datenschutz → Physical Web
  • 13. Demo Time! Adafruit Feather 32u4 Bluefruit LE - Arduino-kompatibel - Bluetooth LE (nRF51) BMP280 Sensor - Temperatur - Luftdruck HTU21D Sensor - Luftfeuchtigkeit
  • 14. Weitere Infos • Physical Web: https://google.github.io/physical-web/ • Web Bluetooth: https://webbluetoothcg.github.io/web-bluetooth/ • Web Bluetooth Examples: https://googlechrome.github.io/samples/web-bluetooth/ • Bluetooth LE GATT: https://www.bluetooth.com/specifications/generic-attributes-overview • Code (Web & Arduino): https://bitbucket.org/jenssiebert/wmksphysicalweb • Slides: http://www.slideshare.net/JensSiebert1/physical-web-73663054
  • 15. Kleiner Hinweis Puck.js – JavaScript + Bluetooth LE = http://www.espruino.com/Puck.js