 Hwyl eich cyfnod ydych chi'n gweithio ar gyfer y cyfrifiad gyda'r corffau. Mae'n gwybod â'i gwaith oedd ar gael o'r llef. Mae'n ymwneud. Fy enw i'r ddod, mae'n gweithio. Yn ystod mwy ffordd, mae'n gweithio ar gyfer Samsung Research yn dweud i West London, oedd ymwneud. ac yw'n gwybod i'r pergysigwyr i'w gwneud i'r IOT. Ac rwy'n gwybod i'r cwmhio'r aspect yw'r grwp hwnnw. Rwy'n gwybod i'w gwybod i'w grwp hwnnw, ac mae'r cyfrifio'r llwyddoedd o'r rhan. Mae'r gwybod i'w grwp hwnnw, ac mae'r cwmhio'r pergysigwyr i'w IOT i'w gwneud i'w grwp hwnnw. Ac rwy'n gwybod i'w gwybod i'w grwp hwnnw. Mae'r problemau i'w gwneud i'w grwp hwnnw, I have a pdf, I can use but we tried this last night and it worked fine. I want to use FOSDM Wi-Fi. Right, I think I might go to my pdf. I'll get a pdf up. Wow. Yeah, that's me. Right, so the URL for this, the code we've got here is there. You can get, there's a link in the FOSDM website and you can just go and have a look at it. It's not even alpha. It's just raw and I'll tell you about it later. So yeah, that's me. I'm going to rush along a little bit. So my slides usually have a little icon to the top and you can see at the top right, top left, top right, or you'll see what I'm talking about so you can understand if I'm talking about the overall fine. I'm talking about how the thing works and so on. Right, so something unbelievable. The average web page is about three meg in size now. So that's huge. To put it in perspective, Doom was 2.9 meg when it came out again. And this thing here, the launch vehicle digital computer weighs 32 kilograms. It's triple redundancy and that took man to the moon. That was on the Saturn V space rocket and you could fit the memory footprint of that 100 times, I worked this out yesterday. 97 times you could fit that, the memory of that machine into your standard web page. So you can see that over time web pages have become, or the web has just become power hungry. So what kind of problems have you got with IoT web? So for me, IoT is all about small, tiny, connected devices. I've got one right there, the light. And that's got our Raspberry Pi zero in it. And it's how you connect to those devices. The terms that could be an IoT device, anything around you, the speakers. They could all be IoT devices and they could all be connected. And they're usually low power, low bandwidth. They don't have much resources at hand. And if you look at the web, this kind of went the other way. These phones are so powerful now. The rendering on them is incredible. Some of the phones here, that phone there, has got more graphical processing than your large screen telepages. So that's incredible. So the Samsung TVs, the big ones, have got a less powerful graphical processing than your modern phone. So we're talking about PWA and IoT. So I can't go into lots of detail. All the slides are there and you can talk or email me if you want to go and detail about some things. We're going to talk about PWA and you guys probably mean more about that. But we're going to talk about, in respect with IoT, PWA and why it's so cool. And the demo, if it works, I was working on it last night and I broke it. And controlling an IoT thing with Bluetooth low energy and a breakdown of how you control these IoT things. So PWA, you guys have probably seen this. What makes it a progressive web app? There's three things you'll see. There's more than that. But these are the three core ones that I've seen. And they're talking about you need HTTPS. It's got a web manifest file and there's, I think, all the service worker. Well, that's great. Why are those things there? What do they actually mean? And it's quite important when you talk about IoT. So I was wondering why do they need this HTTPS thing? Is it still to do with the service worker? The service worker is taking information from your web page. It can be any web page. And it's manipulating it. It's changing it before you get to the outside world. So you're back in service worker can be there. And this service worker can route and do quite a lot of stuff. I'll go through that in a minute or two. So the main point is if I'm going to put something here that's a progressive web app and it's going to control something, a Samsung thing, when someone else puts another Samsung-like web page with a look and feel of Samsung thing, and you download that and you're given the application the power to do almost anything. So you need to be damn sure that when you run that progressive web app it's coming from the right place. That makes sense. And the web manifest file, again, this is the key point, is how you describe that progressive web app. And there's a real good link here that I encourage you guys to go and look at and find more about how you construct your manifest file. My manifest file was really small. And it's meant that way deliberately. And the service worker. So this is the key thing for me that defines a very progressive web app. It's how you're going to try and do more than just several web pages. So obviously it's a JavaScript in the browser. It's separate from the web page, just working with that single page that's there. And you can do things like push notifications and background synchronisation. So again, you're acting more like an application than you're a typical web site. So it's become more of an application environment. And you've got your client-side programming network proxy. So that's the guts of it. You can actually route requests coming from that browser to that web page and go anywhere. So in your web page you can say go to X but you're actually going to Y or not going anywhere at all. And you have access to a database that's key as well so you can put state in this thing. So when you launch it again, you've got a state control mechanism there too. This is a Wikipedia, so you guys might know this already. So this is the definition of the intent of things. So physical object connected to the internet that can be discovered, monitored, controlled or interacted with. It's quite succinct, it's quite exact. But there's a whole load of interpretation there because you can have a thing that's connected by a cellular, Wi-Fi, LoRa, CygFox, nothing at all, Bluetooth. So there's a whole vast array of different IoT things that you talk about. And the challenge we had in building IoT things so in the lab we'll build stuff and the typical thing we have that's the problem is trying to get connectivity to it. So you take that thing out, you get it configured and you move somewhere else and it doesn't work because you need to get a Wi-Fi address to it or you need to somehow get the configuration details onto that device. So configuration is the main crux that we see in IoT because you can move them anywhere unless it's screwed on at all. And that doesn't have a screen, doesn't have a keyboard, it's just a thing sitting there and somehow you need to get connectivity to that device. So the way to do that now, if you can buy one, if you only got these web connected speakers or anything that has this kind of IoT work and feel, usually what you do is you press a button on it and it will come up in a standard default mode and you download an app and then the app will configure the device. So how that works is the device will switch to an access point mode on the Wi-Fi system on the device. So it's an access point and the app you've downloaded will then push the details of your router to the device. That's great, that's fantastic. I saw my wife throw one in the bin because two years later we changed the router and it never worked, in case you can figure out why it didn't work. When you turn upside down, you press a reset button and you get back in default mode. So this whole thing is really clunky. If you want to try and configure something, it's a real clunky way you've got to go about this. Right, in the demo. Right, I made a vocal last night with the thing I'm going to see. I've got a free Raspberry Pi Zero. Does anyone want a free Raspberry Pi Zero? And come up and do a bit of a demo. So someone got a phone. Yeah, what's your name? Peter, are you on the list? Have you got your phone? Ah, okay, here's mine. I typically want to... I was wanting some of that on the phone, but it doesn't matter. Yeah, you can come up, why not? Right, so pretend this is Peter's phone. This one is tested already. Yeah. I'm like Richard Stallman and I do mobile phones. Right, so what I wanted to do... Anyone can do this in the room, actually. If I could get it. If I could get it selling and working. Right, so can you see that? So you go over there when the spinal comes up. So what we're going to do is, I want you to imagine you've got this connected device, your light, which, please let it work, we're going to get a Wi-Fi connectivity to that device, and then hopefully get an SSH on to improve that it actually works. One of the key things of demos is that they always go wrong. Right, so this webpage at the top here, Peter's going to click a button, is thethingsdemo.samsunginter.net. Yes, right. So there's the same thing, right? So if that took that long, that's going to get a problem as well, right? Okay, so Peter, can you connect the device? So right away. So first of all, before you click anything, it's displaying an IoT gateway. So it's found the device. Yeah, that's a really poor signal as well. So it's found the device, we're going to pair with it, and then hopefully the device is going to report back all the Wi-Fi points it can find. Remember that device doesn't actually, it's not connected to anything yet. We've got this default device. We haven't downloaded an app. There's no way you saw me download any application there. We just went to a webpage. Do you want to pair it? Yeah, pair. And then... Right. Yeah, yeah. Okay. My demo's not working. It's a demo. Oh, here we go. So right, select. Right, select there. Right, okay, right. So now we've got our list of Wi-Fi access points. And click next, next. It's because I know that there's only me on that one. So that's a... Right, I was going to get you to this. So, and then the password is test1234. Okay. Test1234? Yeah. So this isn't working anybody's phone, but don't do it yet. Okay. Yeah. So... Right, so now if it comes up with a success, I know that that thing is connected. Yes, it worked. Right. So this, the whole demo is just showing you that we didn't download any app. We just went straight to a web page, connected to that, and then we'll provision it with Wi-Fi access points. And the key point is it's seamless. The user didn't go away to some Bluetooth thing. They didn't go away and download an app. They just went to the Samsung web page and it found that thing there and it connected. So... And I'm going to give you a ratchet pie. You need to give me your naming address and I'm going to send you one. I will do it afterwards. Thank you, Peter. So if you actually do continue, what it's going to try and do, it's going to take you to the application web page and that's part of another demo which usually connects to a gateway. The game is not here, so it's going to fail. But that's what would have happened if we had the gateway there. Thank you for helping me with my demo. And I'm hopefully out of time. So that's the demo. But how did I make that work? So that's... I like to do demo to start because then it goes wrong. You can go forward a minute. And if it goes wrong at the end, it's crap. So the demo worked just about. But now you're all interested to hope in how this thing actually worked. So again, there's a nice little diagram here. I've got showing the website here. You're downloading your progressive web app. And then you're getting this default page up that she saw already. And then you paired it with your device. This is a Raspberry Pi Zero, but Peter's going to get free. And then you went to your settings page. And remember, that was all of Bluetooth Low Energy. And I'll hopefully show some of the code as well. And we're not going to go through that. That's how the actual light works. And we're not going to do that or that. This is all about deep IoT stuff. But how? What did I use? And there's another key point here. I didn't use Angular or React to view. I used Svelte and Sapper. So there's key differences between these frameworks to what you get with React and view in Angular. So Sapper is the kind of server side part of it where you can build your service. And the key points you're using Sapper as opposed to Angular or React to these other frameworks is you've got server side rendering. You don't download a runnable block of JavaScript. You're not downloading the whole framework. You're just downloading the raw JavaScript to your page. It gets rendered server side. You're code splitting. So you only download the piece of code you need at that page, you download the bit of code that you want, not the whole thing. Scope styling, decorative routine, live reloading as well. That's problematic. So I think there may be a problem so that's very fresh, this framework. But the key point is it was really quick even on an edge network. So I have a little bit of edge here and I've got five minutes. It's 10 times faster. And it's felt as the UI part. It's felt as the thing that gave us a UI rendering. And I'm not going to get time to do that. It's a UI engine. It's faster than React, Uangler, Embraerwriot. It's got a cool widget system built into it as well and go there. There's really good guides and really good explanations of how you can use this system. It's really quick to set up and I was hoping I was going to do that. And then the other part of the system is the part that's in the light. So the light's actually got a little IoT JavaScript, soul JavaScript thing that's doing that. So the parts that we've done, we're using these libraries, the PiWiFi library, no JS underneath the hood. We use BlueZ to get the Bluetooth on that. And then we use Bleno over BlueZ and we use PiWiFi, controller, which we put that in there so we've got a layer that we can swap out. So if we put this on to another bit of hardware, we can just change this bit here, the Wi-Fi controller and it still works hopefully. It's bleeding edge so there's bugs in it. But if anyone wants to contribute and think it's a good idea, please do. In the sequence diagrams I'll put these all on and get hub as well if they're not there yet. So we've actually done a proper design of the system and how it would work. So again you've got your client device, the website that you're going to put your web, progress a web app on and then your Bluetooth Wi-Fi manager which is on your embedded system. We're using the Raspberry Pi because it's cheap and easy and anyone can try it out. So you download your web app, you've got your HEATY response from there. Then this is where your loop comes in and you're scanning and you're using GAT attributes for Bluetooth if anyone knows Bluetooth, low energy, have a look. Then we get your Wi-Fi setup page which you saw already in the demo and I'm going to miss that one as well. It says more details of all of the network flow that you've got from here to here. So even though you only saw two or three pages there's quite a lot going on underneath the hood to get that to work. You just saw two of your dialogue boxes and again at the end up we had the password character sitting across over the Bluetooth interface and hopefully we'll get questions and security at the end and then we had the dialogue box at the end showing you the connect page and then finally we missed that piece out because it would fail. We're getting the response back with our redirect so you can design this how you like. So we're just doing a we do a redirect to a gateway which I don't have here and how much time we've got left. Right shall I try and get one to the light and just prove that it really is working? Shall I do that? Okay. So I'm going to get one to my minutes well left. I didn't even join the code unfortunately but the code is on the GitHub repo two sections to it was the web app thing which isn't the web app and then the Bluetooth language stuff which goes in the Raspberry Pi reading files are fairly okay but I'm going to expand on them and make them better it's bleeding edge, there's bugs in it but it's something that may happen in the future it doesn't work in old browsers yet so you don't expect this to come up on your next Samsung product it may be one or two years down the line before this kind of thing happens and have you got any questions for me? Stuff questions just outside of the room so you can spell all the time you need but for all those questions