Jozi.JS 2018, 22 Jan 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: A Web of Things - Gery Young

Description

Devices, smart devices everywhere. This is what our world is turning into. Your car tells you how to drive, your watch tells you when to exercise, and your phone tells you when you are hungry. OK, maybe that last bit is a little over the top, but I’m sure someone will make an app like that soon. All of this is controlled by applications which use Bluetooth and Wi-Fi to connect and communicate with each other. However, this is never enough for us as developers, we need to be in control.

The Chrome dev team started the Physical Web movement with the intention of making everything smarter. With Web Bluetooth we can control almost any Bluetooth Low Energy device from a website. No longer dependent on the platform we are using or on apps which require installation or updates. All we need is a browser which supports it.

This talk will cover some of the fundamental concepts of connecting to BLE devices using Chrome, including some privacy and security considerations. Using the Angular Web Bluetooth module we will create and deploy a website and show how anyone can easily connect to a bluetooth device just by opening their web browser.

Demo: http://heart-rate-hack.firebaseapp.com/

Jozi.JS exists to try and foster a community in Johannesburg, a meetup group dedicated to all things JavaScript!

The group meets on the third Thursday of the month from 18:30 to about 20:30. There are typically two speakers, on different topics: a ‘lightning talk’ of 15 minutes and a full presentation of 45 minutes.

https://www.meetup.com/jozi-js/

A

Hello, everybody, my name is Kiana, but I usually go by Jerry, because that's a little bit easier to pronounce and I work for BBD I work in the R&D department at beauty and a lot of people usually ask me what we do in the R&D department and the plain boring answer. Is we train the BBD developers? We do some specialized consulting and, of course we do a whole lot of research, but that's not all we do at BBD.

A

We also do some really cool stuff, like bolding Twitter, photo booths and racing cars with micro-services and, of course, programming, astromech droids, and that's why I'm here today, because I really, like speaking about things especially small things and everything, is smart right, but we can go further because we are living in the future. Sorry I'm, just gonna move my mouse because it's bothering me, but we are living in the future right think about how many smart devices you have on you right now.

A

I have at least three and that's not including all the stuff on that table over there, and we can go further than this. We can make absolutely everything smart. How with the physical web, what is the physical web? Well, the physical web is a movement created by Google towards moving to smarter things. It can be kind of broken down into three ideas, so the first one is sharing information.

A

Then there's making smarter things and connecting to those things I'm going to go into a bit of detail onto each on each of those in terms of sharing information. We have these things called beacons. They use Bluetooth, Low Energy, the ones in that picture of they are Eddystone beacons. They were created by Google, they are supported natively on Android and they require an app for iOS.

A

That's a whole political debate that I'm not going to go into right now, but they never used to require an app on iOS changed recently, but anyway, they use Bluetooth, low-energy to broadcast the URL over Bluetooth to you to your Android device, and you get a notification. That would look something like this as long as you are listening for that notification.

A

So what does listening me while listening means that your Bluetooth is turned on, that your location is turned on or your GPS, and also that your looking at your phone, so it will not, will push random notifications to your phone while your phone sitting in your pocket. It will only do it when your phone is actually awake.

A

So that notification day is to my github account it's an example: I used in a previous talk where I had a beacon broadcasting, it I, don't have it on right now, but other examples you could use this, for is things like a smart dog tag, so your dog gets lost and someone finds them.

A

They pull out the phone, see the URL, see your information and find you and return your dog free to a more practical example in terms of making things smarter is our vending machines here at BVD, so our vending machines work by our access cards. You walk up to the vending machine, swipe your access card and you get whatever you like now: I, don't know how people's brains work, but I tend to forget my access card at home, a lot at least once a week, which is probably good for my house, but I.

A

Think Mike and my other colleagues are getting quite irritated with me when I asked him for the access cards working it snacks, so I don't have this same problem with my phone I. Never forget my phone at home. If I had my phone, I could have a beacon on the vending machine that pushes a URL to my phone I opened the URL on my phone pick my coke, and that would push a notification back to a server somewhere. The server would then push a notification to the vending machine and I would get whatever I wanted.

A

Now. This is all really cool, but the one thing to note here is only that blue arrow. That first thing I'd spoke about is the physical web. Everything else is plain old web stuff. You know a server which requires the vending machine to know about a server to have some sort of connection to the server, and that's where the last bit of the physical web comes in was very connecting to smart things, and this is called web bluetooth with web Bluetooth.

A

I could have the same vending machine that pushes a notification to my phone, but now my phone can't connect back to the vending machine to the Bluetooth, enabled vending machine and tell it directly what exactly I want and push back straight to the vending machine. Web Bluetooth is really cool, because most of us here are web developers. We are here because we like JavaScript and web Bluetooth is a JavaScript API which allows us to connect to bluetooth devices.

A

Now before we used to have to have a native app that we download from some sort of Play Store app store in order to connect to bluetooth. Now we can do it from a website and I'll show you. That example. Just now.

A

But before I show you an example, I need to tell you a little bit about the theory of Bluetooth and how Bluetooth devices actually connect and how they talk to each other, so Bluetooth, Low Energy, is what web Bluetooth uses it. The reason it uses low-energy is because well, firstly, it's low energy, so it means that those little beacons which have watch like batteries in them very small batteries can last for years, and you know you don't need to replace them, then the other reason they use.

A

It is because it's quite well supported most of the modern phones. These days support low energy bluetooth. Then the next thing is GATT or the generic generic attribute. The generic attributes are a hierarchical data structure for Bluetooth, flowing devices, they're specific and mandatory for all Bluetooth, Low, Energy and they're, based on the attribute protocol, which is a way for exchanging data between Bluetooth devices and.

A

So a generic attribute profile, every Bluetooth device has a generic attribute profile, and this profile consists of one or more services. The services are what define the behavior of the device. So, for example, a service would be a battery service or what we'll see in the demo is a heartrate service. Then these services contain references to other services on the same profile as well as one or more characteristics. The characteristics are what defined the functions of the device, so a battery service would have a battery level characteristic, so that is its type.

A

The battery level would be its type. Its value would be whatever the battery value level value is, and then the properties and permissions are what define what we can do with that value. So some values you can set some values. You can only read things like that and who can access those things.

A

The other important bit of theory, I need to talk to you about is something called bit wise, Matz who remembers bit wise Matz. Anyone not really anyone. Okay, have a few people. Okay, well, I, didn't remember it either until I started doing this research, but it's not it's not that hard. Okay, I will explain how we explain with an easy example.

A

So if we have the number 22 in base 10, we convert that to the number one zero one one zero in base two- and we add that with the number three in base 10, which is equivalent to one one in base two, we just pad it in the front with zeros, so we can do the whole number.

A

What we do is we start on the right hand, side. We work that way. So 0 + 1 is 0. 1 + 1 is 1. 1 + 0 is 0, so the all the way to the front. So we go get the number 1 0 in base 2, which is equivalent to the number 2 in base 10. So we're going to see some bitwise maths like this in the demo, there are a whole bunch of other operators.

A

You can do and it's just one of the simple ones we're going to use, but you can do or and shift and unshift and yeah those are the ones I know. Oh the ones I've used recently.

A

So enough talk, let's, let's get to this really cool demo. What I'm going to need for as soon as I've finished, my demo is a volunteer with either an Android device or one who is willing to download something called web Bluetooth browser on their iPhone device, I own, the Apple device iPhone device anyway. My demo is going to be on this heart rate monitor over here. So how many people here have fitness devices?

A

Okay, what kinds I have a Garmin? What? What kinds do we have any one? Fitbit cool? So how do you guys feel about the app that you got with your fitness device? Yeah? That's, usually the response I get when I ask that question yeah! So I really don't like my Garmin app. It has a lot of bugs in it. It doesn't always sink my watch and the biggest problem with it is. It doesn't always sync with vitality and that's important, because I need my free smoothies every week.

A

So what we're gonna do is use a library called angular web Bluetooth angular web Bluetooth was created by a guy called war simcha. He he pretty much took the web Bluetooth API and wrapped it for angular and wrapped all of the promises into observables. So we have a little bit less callback. How that you get with normal promises and it's quite a cool library, but and also we all know that javascript is really good at maths right.

A

So you can do all your or your vo2 max calculations and your average heart rates and your calories burnt once once you've connected it with your angular app. But anyway, let me stop talking and start showing you could.

A

Can you guys see, or should I zoom in a bit.

A

Okay, so I've created an app here with the angular CLI, the parts I'm not going to show. You is I've included a few images which you'll see and then the CSS, because Mike always shouts at me when I say this, but no one likes to talking about CSS.

A

But what we're going to do is start inside just close that, but the app module so first thing we're going to do is import and we're going to import the web. Bluetooth note: that's the wrong one.

A

A

That one with bluetooth module said some lucky: the right: Bluetooth module from the angular bluetooth module, so I've loaded the angular bluetooth module in here manually, because where simcha Graham has not updated it to angular 5, yet so I updated it for him. But I haven't been brave enough to submit a pull request. Yet so so it's just sitting sitting in my in.

A

Live pull requests to one of the famous GDS anyway, so we add the web Bluetooth module there and we also need to add it to our imports.

A

There then, the next thing we're going to do is create a new service using the angular CLI and we're going to call it heart rate.

A

This service is what's going to store pretty much all of our functions for the heart rate, monitor so connecting to it getting the data from it and streaming values from it as well. There we go heart rate service created.

A

We have to import in here.

A

Bluetooth score, which is also from that same way: Bluetooth module and I'm, going to delete the default constructor and just scaffold a new one.

A

Cool this constructor has injected into it. Bluetooth call, and it has two private variables now. One thing I forgot to tell you about was how those attributes in the get profile work. So the attributes in the get profile, the services and the characteristics you have to have a type and that type is defined by a universally unique identifier. So a UUID usually that you UID, is 128 bits long, but you have some standard ones that everything recognizes like in this case we're using heart rate and heart rate measurement.

A

Those are the standard ones that every Bluetooth device can recognize right and when you create so certain devices the reason I'm using this Bluetooth heart rate monitor instead of my watch, certain devices lock down their characteristics and services. So, for example, I tried looking at stuff and my Garmin watch and they have all their own custom attributes. So that way you can't really figure out and hack their device, but the planar ones, the the older ones actually usually have predefined ones or with some of them you can find them online.

A

You can define them, but Garmin has this lock down so I couldn't hack, my watch anyway. So once we have our service and our characteristic that we're going to look for, we can scaffold some methods.

A

Our service is going to have three methods, get BOE device stream values and get heart rate to get the bill II device. All we have to do is call one of the observables from the Bluetooth core module. Oh.

A

This is going to do. Is you see when we use it in the component? Just now, it's going to check whether our device is currently online or not.

A

There is a way to ask it to reconnect to a device if it loses a connection, but it actually hasn't been wrapped in the in the angular web bluetooth. So there's another poor request, then in the stream values. This is actually one really nice wrapper that that's in this module, because it's very easy to get the values using the normal JavaScript API.

A

It's a little bit more difficult to stream the values continuously from the device, but this one you just call stream values, and then you can map your value and we're going to create a private method. Now called this dot pause heart rate and pass that value.

A

So, let's add that private method at the bottom here.

A

Okay, so pass heart rate is where we're using that, but wise maths I, was showing you earlier, but the reason we need it is because we get these unsigned. Integer arrays returned to us from the Bluetooth device and in order to figure out what that value is, we need to do some but wise maths. So what you're, seeing there is we're getting the unsigned, integer 8-bit array and checking?

A

Is it actually an 8-bit array or not? If it is, then that's what this part here does with ends it with one and that would return one or zero. So that would tell us whether it's stored in the 8-bit one or the 16-bit one and return the value for us.

A

Then the last method we need to implement is the actual, get heart rate method. This is the complicated one, so I'm gonna add it in here and.

A

Then explain it. Let me close this okay, so this caused a whole bunch of observables and using rxjs eight and merge map it moves on to the next observable and then the next one and so on. So, firstly, it falters. So this is an important part which I'm going to cover a bit more in this security section, but you have to specify a filter for the devices you'll be searching for.

A

We are searching for any services that provide a heart heart rate, so any heart rate monitor in the room, we're going to scan for it and hopefully find it. Then we merge map with that service. We get the heart rate primary service as the primary service.

A

Once we get the primary service, we can get its characteristic, which is our heart rate characteristic. Then, once we have our characteristic, we can read the value from it and then using our map. We can pass it now, an important thing here and it's something that someone asked me previously is that certain characteristics like I said, can only be read or written to or either or both sometimes, but the heart rate characteristics can only be read, so you can't tell the heart rate monitor. This is what my heart rate is.

A

Someone asked me if you can do that, you can't cool. So that's our service.

A

Now, in our app module, we need to import the service that we created and then add it to our providers as well.

A

Now, let's write some code inside the component.

A

So our app component doesn't have anything in it. For now we're going to.

A

Import the Bluetooth core, as well as the heartrate service, sorry I, keep quiet every now and then I'm still not used to this whole typing and speaking at the same time, in getting there I'm getting better at it. Once we have our heart rate service and our Bluetooth call, we can scaffold some methods in our app component. Let's first define a few private variables and our constructor.

A

So our variables are heart rate, which is a number which is what's going to show the value of our heart rate on the screen, whether we're connected or not. So we know whether there is a heart rate and then we have a subscription. The subscription is there just because it's good practice to unsubscribe from your observables and now constructor. We just injecting the heart rate service, then we're going to add some methods.

A

So on in it we're going to call two methods, we're first going to get the device status and then we're going to update the heart rate value. So here are those two methods we haven't implemented them yet and then on destroyer, we're just going to unsubscribe from all about observables.

A

We get device status. Method looks like this, so we're calling that get ble device from the heart rate service we're subscribing if device is if the device exists. So if we have a device, it means we're connected. Otherwise we're not connected, and this is where you would implement the retrying to connect to a device.

A

The update heart rate, very valued.

A

Is going to call that stream values method in our service, the stream values will just subscribe and update the heart rate and also does a console dot log, because that's just good practice, no I'm lying that the reason that we does a console that log is because I had a lot of trouble when I first started this and it kept not updating the heart rate and I couldn't figure out. Why? But then I looked in the logs and it was updating it. Just my heart rate wasn't changing.

A

This is in production.

A

This is you eighty.

A

Okay, let's add some HTML so I have this welcome to a bluetooth here: I'm gonna get rid of it and just add some HTML HTML. Pretty much has a header at the top, with a heart rate and shifu. Our heart rate is zero or now and then a little image of a heart that we're going to use to connect to the device.

A

So when you click on the heart, it will scan start scanning for devices, and but you see it, you see it all right and then let's implement the connect to device method in the component.

A

Our connected device method cause.

A

Get heart rate from our service and subscribes and just Maps the first value of the heart rate that we first get and that's it. That's our that's all a pretty much done now. What I want to do is show you how to deploy this app to firebase and then show you how you can connect to my heart rate monitor so who here has used firebase before a few people.

A

Cool yeah firebase is pretty cool, especially if you're doing simple stuff like just hosting an app like a simple app like this, but you install firebase tools and then you can do something like this firebase init and firebase in it walks you through the process of setting up your app, so takes a little while, hopefully the Internet's not too slow today, but it gives you a few options. So all we're going to do is host our app, so we I'm gonna go down to hosting and select that so.

A

Firstly, it will ask me what project I want to associate this with. So I have a project that I've already created called heart rate hack. But the way you created is you log in to firebase with your Google credentials and you can just create a new project and then, after that, you'll be able to see it over here. So I'm just going to select that project. So then, what do we want, as our public directory I'm going to change this to dist? Because that's where, when we do ng bulb?

A

That's where it's going to build the project to and.

A

Yes, cool, so that's just setting the root of our alright and now we need to first ng both.

A

Hopefully we haven't made any mistakes in the code and the ng board is actually going to work.

A

And so who is going to volunteer to connect to the ha treatment there we go. We have a volunteer cool.

A

What what device do you have? Ok, cool? You can also do it. I see you have a computer of, but you'd need bluetooth if you were using your computer but yeah so the previous summer, did it at the desert just showed people from my computer, but I thought it would be more cool if I showed you how easy it is to do so, once our build is done, all we have to do is firebase.

A

Deploy, deploy and they'll. Take everything. That's in our distal end push it to that firebase app, and then it will tell us if it will even tell us where it's being hosted.

A

A

Do you wanna come up and show everyone cool? So if you just go to this euro heart rate at five days calm, so luckily these heart rate monitors are slightly more hackable and I. Don't have to actually put it on. I can just hold it.

A

Five, they sell calm, okay,.

A

A

Floating it's loading come this way come this way need to be not in the video, it's loaded, all right cool. So if you want to show everyone the little picture of the heart cool and now, if you just get hip the hot, oh and there's the polar h7, which is this device, yeah, okay and it should start showing a heart rate there we go cool.

A

All right, let me show you how it works on here as well, if you can just close your browser, otherwise you can't connect to this, but let's go to.

A

Oh so this is what it looks like and if I start searching for the heart rate monitor, it should show up if my blue T's is actually on. No, it's not.

A

A

So ever since meltdown happened, this has been happening to my Bluetooth, so okay, as I explained earlier, let me explain to you why it's not working, so this is a good opportunity for learning so.

A

So this this is an older Mac, so it doesn't have Bluetooth Low Energy. That's why I have to use a little USB stick that has Bluetooth Low Energy, but in order to do that, I had to run a script and every now and then, when my Mac restarts it doesn't actually load the new Bluetooth device. So then my Bluetooth Low Energy it reverts to the internal bluetooth which isn't low energy and therefore can't scan for the device yeah.

A

So that's why it's not working but feel free to come up later, our once we are done and I'll show you it working on your phone, but yeah that was my demo cool. Let's move on.

A

So, just like all of us, web Bluetooth is Miyamoto and it has some limitations. The first thing is, as I said only low-energy, so you can only connect to low energy devices and some some cause and other things use old-school Bluetooth which isn't Low Energy, and you can't so. You can't hack your car. Although I haven't been able to talk my car yet I need in your car, then the other thing is: it only allows central connections. What does that mean? So we have Bluetooth devices can be either central or peripheral.

A

So a central device is something like your computer or your phone, one that can connect to multiple devices at the time. A peripheral device is something like a heartrate monitor or a smart light bulb, or some something like that. That can only be connected to once. Some phones can act as peripherals. They have apps that can do that. But it's it's a hardware feature. So only the newest I think it's only the newest Nexus that can currently do it, and connections are only allowed from central to peripheral.

A

You can't have central to central or peripheral to peripheral, because a peripheral device can't actually initiate a connection to a Bluetooth device. So what this means is web Bluetooth only allows central connections, which means a web page can't talk to another web page, yet they still working on it. Then there's a few security concerns and a few support concerns, as you saw the support concerns, but the security concerns all right. So, if you think about it, it's kind of scary, you can.

A

You can push your house to people walking past you, you can control their Bluetooth devices with a website. There is actually a really good article which I'm have on my github, which compares the security of web Bluetooth to native apps bluetooth, and it's actually it's. It's really interesting that how many security issues they're, always native app spirit as well, but some of the things they've done to make sure that we're Bluetooth is a bit more secure is that everything has to be accessed over HTTPS.

A

Only so I had to deploy it to firebase because that's HTTPS or you can also use github pages, because I think there's also HTTPS. You can't just scan for any devices many Bluetooth devices near you. You have to provide some sort of filter, so I was filtering by the heart heart rate monitors, but you have to provide a filter. Now there are ways to get around that because you can filter by name prefix. So technically you could filter by anything starting with ABCD. But you know you can't just scan for people's devices.

A

You can only connect once so. It's a peripheral device that you're connecting to so you only can only connect the one time it.

A

So what that means is when, when he was connected to the heart rate, monitor I wouldn't be able to connect to it at the same time until he closes his browser. So if your watch is connected to your heart rate, monitor don't worry. No one else can connect to your heart rate, monitor and watch your and see your heart rate and then the last one is that a user interaction is required. So we had to have that little heart there that initial initiates the scan for devices.

A

You can't just go to a website and suddenly it connects to all of your devices and starts controlling everything. That's Bluetooth in your house, so that's also good and then the support okay. So when Bluetooth is only supported on a Linux kernel, 3.19 or with Blues 5.41 installed, Mac OS has you have to have Yosemite or later Windows. You have to have 8.1 or later, but there are certain of the web Bluetooth features that aren't supported on 8.1 either.

A

So it's just better to if, if you're, using Windows, to try with 10 Android, you have to have six or later and then iOS has no official support yet, but I've put a little asterisk there, because the key words there are official and yet so official, because it doesn't, it isn't supported in Safari and in Chrome on iOS, but it is supported in a little app called web Bluetooth browser which you can download from the App Store and then yet, because when I started all of this research in September last year, it wasn't supported in Windows either, and now it is so they busy working on it.

A

They are actively working on it, so we're hoping that they were eventually supported.

A

That's it! If you want to have a look at the code that I wrote and all of my references and things you can go to my github account otherwise find me on Twitter. Thank you.