 Today we're going to be using the Mozilla Westing workshop and first I'm going to introduce the team of the man security consultant and working project and then we're going to be doing the model book and he works with Mozilla's IT staff and with the Mozilla tech speaker and community development. So first the Mozilla Westing is a software that provides a useful framework for creating and open source web things and privacy use. So the agenda for today is we're going to talk about the IoT and the web of things and you can visit the website iot.mozilla.org so that you can know a little bit more about it We have the flyers here that explain more about it and then we're going to go for the micropart with that and model it with the product. So as part of Mozilla's mission to keep the web open and safe they created the web thing gateway which is a framework and software that provides a useful open source web things and it respects the privacy and security of the internet. You can use a lot the IoT and the smart world and can someone give us examples about the smart case that they usually use within their work? Like a thermostat? Yeah, others? You can use it in the smart world if anyone is working on the IoT. So here we're going to give some examples about the smart homes and especially for the LED lights, the sensors that are for monitoring the distance sensors and that you can use every day to make your home smarter. And this is the example we're going to give today. And what's different about Mozilla's smart home is that the typical vendor has your IoT, the data on an IoT cloud whereas for Mozilla for us there is no data and you create your own user name and password. So your data is basically what you need is a Raspberry Pi and your data is stored locally so there's nothing that's stored on the cloud. So all you need for this, you need the Raspberry Pi which you will have here. For us in this workshop we're not going to ask everyone to create their own username and password. So you will have passwords that are here preset on the tables but later you can use your own and you can download it from the website. You go to iot.mozilla.org and you can download and you have the microSD card where you can use it to create your own gateway. And for the web domain you can create your own but now we're going to use this one again. And the web thing's operability is with everything for the ZigBee Wave and Bluetooth and then you can also, it's an open source community development. You can go to GitHub and you can join the conversation, you can join the code and you can work with us on the Mozilla IoT. And now Mel is going to explain about the things gateway and what type of sensors we can use and how we can work on the... It's cute. Okay. So hi again, I'm Mel. So this is basically what you will see after you configure your Raspberry Pi. The first picture shows the different sensors that you have configured. We will do this hands-on today. There's also an option to upload a floor plan if you have it in your home so you can see which room has what sensors. You can create rules so when it's 6 a.m. turn the lights on, when it's 6 p.m. turn the lights off. And this little fox is an experiment so far, it's a voice command. So you can either type, turn the lights off, or you can tell him to turn the lights off and it will respond. So as we said, it's without a middleman, you own your own data. It's pretty cheap to set up. All you need is a Raspberry Pi for the gateway and then sensors you can either buy sensors. There are plenty of add-ons for interoperability or you can create your own sensors. Okay. So these are two examples of MCU boards that you can buy. I have them here. This is the Circuit Playground Express and this is a microbit. Has anyone worked on this before? Yeah. Okay. So they're pretty useful for educational purposes because so this one has a LED matrix that can be used as a screen. It has a motion sensor. This one has a temperature sensor, Neoleds. And they can be programmed using microblocks and I'll show you how. So this is how microblocks work. So it's an IDE. If anyone is familiar with scratch coding, it's just a block. It's really simple. Practically anyone can learn to use it. It's transformed into bytecode and each MCU has its own small virtual machine that runs on it and it can run the code that is created with microblocks. So now I'll show you the gateway and microblocks. Okay. That's fine. So we have five Raspberry Pis scattered. Each one has a subdomain. One is jss2.mosella-iot.org. Each one has a paper next to it so you can check which one it is. So this one was created beforehand but if you buy your own Raspberry Pi, you can flash the SD card with the gateway image that you can download and then you create your own credentials. So I'll just go here, jss2. You can also join. Okay. You can allow notifications because you're the one who's going to create the notifications so there's nothing that's coming from outside. So this is the menu. This is where your things show up. These are where you make the rules, the floor plan, the settings. And this is the smart assistant. Okay. So let's add our first device. So this is microblocks. I did a small circuit here. It's just NodeMCU and the LED. And NodeMCU has anyone worked on these before? Yeah, one person. So NodeMCU is a Wi-Fi module. So you can turn pretty much anything into an IoT-enabled device because this connects to the Wi-Fi and it gets assigned an IP address. So what I'm going to do now is I'm going to connect this LED to my IoT gateway. I'm not going to do that. So I'm going to open an example. And what I'm going to do is I'm just going to add... So it's 14 to on. So when I click connect, I can see the port. So I connect this to my USB. And I can see the port. I connect to com3. So here I'm going to write the network name. So the thing that I'm programming should be on the same network as the gateway. So the gateway is connected to a Wi-Fi called Mozilla. It's not the same Wi-Fi as your laptop's Wi-Fi. So I'm going to write the credentials and I'm going to start. So as you see, I get an IP address that's assigned to me. So what I'm going to do is go back here and add a device. So I will add my URL and I will write the IP here. What's happening? The dream... So don't connect them just yet. Just follow along with me and then we'll have plenty of time to do hands-on. So I added the IP address and then I'm going to call it the red LED. So now I have the red LED. Hopefully you can see it. It's off and I can turn it on. So now I can... I'm only connecting it for power. So I can disconnect this completely and it will still work. So all you need is just to click start on microblocks and it's permanently stored on your device. So basically you have a central control center for all the smart things in your apartment. But you're not limited to all the smart things. You can buy a shop, you can build your own. It's just a few clicks and a few microblocks. You connect them up. You set them up. At that point when you set them up, they actually connect to your whole Wi-Fi and connect to the same central server that connects to all your rest of your whole automation. So you're completely in control of that. So just a little bit more about microblocks. You don't have to just use it for IoT. You can use it to program, as we said, the other MCUs. So I'm going to connect. I'm going to open an example. I'm going to put Harry Potter to change something here. To download this, you can go to microblocks.com. So that you can use this. And you can connect to the Wi-Fi. So does everyone have internet access? Yeah. So just go to microblocks.com and go to download links. Everyone download links. Okay. So now I want you to take the NodeMCU and try to connect it to microblocks. And let me know if there are problems. What's that? Do you have none of those MCUs? No. Do you think you can connect them? This one's not working. This one's not working. Does it have microblocks? Oh no, you have to flush it. It doesn't have it installed. No. Can you share? We had 11. This one? Yeah. We're using the other one, but I think it's fine. This is ESP32. This is the 32. Okay. I don't know if you can use that. Let me try to flush it. Oh yeah, I'm going to connect. I'm actually sure that this is flashing. This one? I have the one that you gave me, but I also have this one. It's superb actually. This one has muddable. A lot of it. I mean like you can just flush it. I'll keep it. I'll try this. Okay. You can test with this. You need a wire. We're going to cut it. Okay, but how do we do this? We're going to show you an example. But let me first make sure that we're going to cut it. How do we cut it? Any example. Hello. Where are you from? Are you from or what? We also have this era. We also have speakers. We also come up with the order. So for the ones who connected, just go on IOT. He's going to give the example? Yeah, he does. Yeah, so just open HelloLeds. So after you open HelloLed, just write in the Wi-Fi Mozilla and password Mozilla WebThings. So that's the password? Mozilla WebThings. Yeah, so here Mozilla WebThings. Okay, but have you connected? So you have a driver problem. Did it light up when you connected it? I saw a red light coming up. Okay, so you have to download a driver. Can you go to Microsoft Fun? So download the app. Can you download this? Is it working? No, it doesn't show up. Yeah, Mac needs drivers. Okay, what's the driver? Just go know them, see you driver. No. So you don't have any? That's fine. Oh, you have one? Yeah. So open HelloLed and connect it and start. Yeah, so this one actually doesn't... So this is an older one. So you won't see it unless you go to... Oh, what did I also store? I opened another one. So write Mozilla. Mozilla WebThings. Just WebThings. Mozilla WebThings. Could you ask the driver? Did you download the driver or did it work? It just worked. It worked by itself, okay. It's usually Mac. Oh, okay. Something was happening. No, it happened. So you're not talking serial or talking through Wi-Fi? Now we're talking serial, but I need to get an IP address. Yeah, it's not working. Yeah. We can't see... Where do we get the driver for the Mac? You just Google NodeMCU driver Mac. Oh, okay. Maybe you're too far from the Wi-Fi. For this, I think it's not... Okay. Do you want to join the switch play? Yeah. Should it be okay? Or should I go closer? I don't know. It depends on this one, so... Is this what we did? Yeah. I think you can find it in a Mac installation. In brew? Yeah. I mean, that'll work too, won't it? What do you type in brew? Do you have the command? Do you know the brew command? No, but it should... There we go. We don't know the driver for Mac. What's his name? I don't know. It doesn't work yet. Can you show me the... Could we do step by step? Yeah. Did you download the driver? Driver? Let's do the driver. So, just... Know the MCU? MCU? Driver Mac. Yeah, yeah, this one. What? Mac installation? Where's brew? Oh, here it is. Oh, here it is. Did it work? Did it work? How did it work? Yeah, so don't go to the last page. Just go and try Mozilla and Mozilla web things. And click on stop, then start. Okay, so now you have this IP address. Go to your browser. Go to js3.mozilla.io2. Okay, yeah, plus. And add by URL. And write the IP address. Now you can copy it. You can click here. Okay. 4317. 4317. Okay. Submit. Okay, so here you can name it. Change the name, just name it something you would recognize. Okay. Yeah, save. And done. So this is your LED. So it doesn't have a LED, so it's not going to do anything. Okay. Do you have something? So yeah, I have actually one other breadboard and a LED, so we can connect to it. But can you let the others try? So what does it do then? So now it's connected to the... Do you have a breadboard on LED so we can... Yeah, so now we can see anything. Yeah, I'll bring the breadboard and the LED. But it's successful, so now it's... So you can even access it from your mobile. Right, the same thing. Yeah, same... So you can even... You can even... Oh, no, no, you can't because you're not on the same network. But if you're connected to the same network, you can write the IP address of this and you can see the JSON. Oh, okay. But... What's the web thing? Oh, yeah. We're getting a problem doing the programming because it has a mismatch. Oh. What do you call them, the checksum thing? Oh. Yeah. By guessing it's a university network, I don't know. Okay. Do you want to have a look at somebody who's got that problem instead of you? Yeah, I mean we can try using the Mozilla Wi-Fi. Yeah. They can get each network? Yeah. Yeah. We'll give it a go to somebody. Do you have any questions when you're connected? When you're connected to the Wi-Fi network? On the laptop, of course. But on the whole, Mozilla... If you want to connect to the laptop, it's not right. What do you want to do? If you want to connect to the laptop, you can open the Wi-Fi network. Not really. Not really. You can go in here even if you're connected to the laptop. How do you open the laptop? Online. On the internet. Yeah. But they're using it as a password, the login. Yeah. They were actually on their own for a game, so... Oh. That's strange. Yeah. Yeah. So no one was able to download the driver? Well, some people are trying to install it anyway, but then we smash the dash. Did it work? Yeah. Does it work? I don't know, I haven't seen it. Oh, blinking red light. Is that a good thing? Yeah. But it doesn't necessarily work. So can you still not see it? So it shows the signal again? Mm-hmm. Are you going to open it still? Yeah. Did the brew work? Or did you get an error? Brew failed. Brew failed? It's failing for everyone. No. Which one was it? Yeah, this one. Yeah. I think you can manually download the zip and run it. Okay. All right. So, Mike, they're downloading without the brew, just the silicon labs. Yeah. You can download it without the brew command. Yeah. And there's a damage file. Yeah. Just SI labs. I don't know what that's called. Let me mark one. Just one thing. For people using Mac, if you are not able to see the COM port, you probably need to download the silicon labs driver. Okay. Sorry. So this is too large, so I'm going to keep the port outside. The ground is here? Yeah, you need a wire. So, G5 is actually GPIO 14. 14, okay. Yeah. So if you go here, okay, go to pins and set digital pin. You drag it and you put it under, no, yeah, here. So digital pin 14. Two variables. On. Just drag it over the green thing. Okay. Yeah, just let me get a wire for you. I don't think so. Did you rerun the code? Because we changed it. Yeah, so start. Can we use this? No. No? No, because the gateway is connected to the Mozilla network. So we cannot use this to directly connect to the... No, so the sensors and the gateway should be on the same submit. Oh, okay. But you can access... Yeah, so this one should be on Mozilla because this one is on Mozilla. But you can access the page from any network. Because it's a public page. Yeah. The URL actually goes to that page. Yeah. That's why it's JS3.mozilla. Actually, this one posted in here. Okay. But this one, you can access it from any network. It's posted publicly. Did it work? No one, I can't see anyone getting working. This micro-bit LED's like... Is there an array of LED's like that on this device? What is it? The LED's. Yeah. Isn't this device different? This one? Yeah. No. It has an array like that? No, the micro-bit LED's is different. Oh, we're only running the left-hand side. Yeah, so if the device is a micro-bit LED, it will do this. If it's a CPX, it will do this. It can just light up the integrated network. Yeah, okay. But... I can't see anyone getting it working, so... Yeah, so some of them are actually getting it working. Oh, okay. But I just want to check if the people with the driver problem sorted it out. Yeah, the one that showed them didn't seem to work, so... It didn't work. It didn't seem to. Yeah. Yeah. So... Save. Yeah. How are we? Yeah, this is perfect. Is it because it's already added? Yeah. Is it the same IP address? Yeah. Okay, so you probably need to... They did it. Yeah. Okay. So... Here... And... Oh. Very good. Yeah. Yeah, add by URL. So there's two models of these. Yes. The larger one is the one that's working without a driver. Oh. And it's the smaller one that people are having trouble with. Really? It seems to be. That's strange. Because it's the older one, is it? Yeah, this is the older one. Have you tried giving the larger one to the people who are having trouble? Yeah, I think so. Let me confirm. Yeah. Okay. Right. Yay. Sorry? How do I disconnect? So others can try. Yeah, so just stop. So if I upload to this one, how do I... It just... Like curious, how do we upload it? But we don't need to upload because they want to try. It's already uploaded. So now I'm disconnected. Oh, as long as we start... Then it is uploaded. Yeah, yeah. So now it's completely disconnected. It's just connected for the power. And it still works. So you can disconnect it and connect it to a power outlet. Yeah, to send the data here. Okay, so now it's disconnected. Okay, okay. Yeah. I just confirmed it, yeah. It's working? The larger one works. The larger one works. Okay, that's good. No, actually we have more large ones than small ones. No, okay. So we can, yeah, we can switch them up. But also it would be nice to get them connected. Yeah. So, did it work? It did not work. It didn't work? It was connected, Wi-Fi connected, but LEDs didn't turn on. Which one? She's using this one, yeah. Yeah, because yeah, it's... Yeah, so this one doesn't have an LED to turn on. Oh, okay, that's why. Okay, so it's working. Yeah, it's working. As long as you can connect it to the Wi-Fi, we can... So these guys are trying with the LED. So when they're done I can... Because I only have a couple of breadboards. Okay. So what was that? It was over there. Sorry? What were you saying about this one? This one doesn't have an LED. So if they try to turn it on... So the cord was running out? Yeah. Yeah. But if you want you can connect to my LED. It's on... Let me check on which one. Yeah. Can you give me your MCU? Yeah. Yeah, he's gonna try. So if you go to jss2.muzela.ioT. Oh, okay. Yeah, muzela-ioT.org. The demo... Yeah, same. Dot com. Workshop. What was the password? Workshop. A workshop? Yeah. No. No, muzela-ioT. It's okay. So they just... Yeah, they just disconnected it. Oh, okay. So if you want you can... Sure. Just give it a moment to connect to the... No, we'll try with that. Is it visible? It says... Oh, okay. Is it grayed out? No, it's... Okay, can you click? Yeah. Oh, now, now... How? Oh, definitely. Okay. Yes. Oh, it's not... Yeah, I think it's not connected to the Internet yet. But we can actually do it with you. Yeah. Okay. Okay, but you need to add pins. Go to pins. Set digital pin. The third one. No, set. The third one. Yeah. Put it here. Here? Yeah. Digital pin is 14. And then go to variables. And take on. And put it instead of the green pin, yeah. Okay, now connect. Okay, start. You should pop up with the IP address, right? Yeah. No. Sometimes it takes a while. What's... Can you try again? Stop. Yeah, this one worked. Yeah. Quickly. I'm not sure why it's still working. Yeah, but... Yeah. Maybe there's too many connections. Only AG voices. Replug maybe. Mm-hmm. It's correct, too. Okay, finally. Okay. Two, two, eight. Oh, it's okay. So let's go to the browser again. You can do this. Yeah, light on. I have to get it right now. Cool. No. So this only connects to your local network. And you don't, like, only the, like, this Raspberry Pi or whatever what this is on connects to the open internet. Yeah, so the Raspberry Pi is configured on your home network. Mm-hmm. And all the sensors are also on your home network. Uh-huh. But this page you can access it from anywhere. Okay. Oh, so, uh, okay. So the software on the Raspberry Pi allows it to talk to, um... Disconnect? Disconnect. Okay, and even when you're disconnected, the code is already on the device. So it still works. So flashing once and then after. So it still works. Still works. I don't know what happened. It's supposed to still work. All right. I'm going to take this. Is this working? No, it doesn't. You want to... This is a recognized device. You want to try this? You can try. Sure. I don't know. Someone is holding the microphone. What does it do? All we need to do is hold the microphone. Yeah. If you hold the microphone, it doesn't work anymore. Oh. Oh, but... What does it do? That's why it's working. This one's working, yeah. Yeah. Apparently the oldest device is working. This is like the really 0.1... Okay. But... We got that one out of line. And they had to actually... They had to brute force the driver to install it basically. No, the other one. The one that I got out of line. That's their life. So the small one's working? This guy can get it working. So I might get him to help me with some other people. Okay. Cool. And what does he help? Yeah, but it's 8266, so it should work. Yeah. 8266. But there are two 8266s. So this one, the small one, is not working without the driver, but this one's working without the driver. This one? Yeah, the older one. Yeah, it's working. Is it? It's the same one. This one is the same one. No, but it didn't work before. This one or this one? Maybe it's like... Wait, wait, wait. So this one works? Yeah, this one works. Yeah, okay. So this... This one works. Yeah. So this is the same. No, no, no. Okay. Okay. Yeah. Okay, so it's the cable. But I mean, the cable works for me. No, wait, wait, wait, wait. No, it's... I think it's this one. This is a bad cable, but... That one? No, this one. No, no, no, but we also tried this one. This one is fine for me. Yeah. Wait, what? Yeah, so maybe we're using another NoteMCU, the smaller one. Wasn't this the same one that you tried before? No, this one was with the mic. Okay. So where did the one go from here? Where is it? I don't know. But you can use either. Okay, can I take this? Yeah, sure. Is there anyone having... Okay. Oh, okay, so it's working. But you're not getting an IP. So this is a natural problem. I think I have a problem. I think it... Oh, here it is. This is your IP. Okay. But I don't see anything. No, you don't see anything because it doesn't have a light. But you can see it. Can... Did you go to JS? Which one? Oh, yeah. Yeah. Which one is it? JS4? Okay. So now you go to add by URL. And you write the IP address. Yeah, you can copy it. Just a second. She's going to pass these so that you can see them. Okay. So this is the device. So you're not actually going to see anything because it doesn't have a light. But it's now connected to the... Wow. But I do want to try this model. You have the same, right? This is the same. Same board? Yeah, but I connected a light to it. So you can try with this. Okay. Yeah, just go to... Yeah, just connect it and go to microblocks. Okay. So we need to change the code a bit. So this is connected to pin 14. It's... It's... Okay, 43, 228. Okay. 192, and 68. 43, 228. Two? To my private cloud. Yeah. What do you want? My private cloud. Your private cloud? Okay, my private cloud. Cloud? Yeah. This is some of these... Oh, I see the... Connector thing. No. Yeah, but you can try the code. Try the code. So... We need an output. So there's no additional breadboard, I guess. No, there's no additional... I have two breadboards. Actually, where's the second one? So... What you're asking is... Can you put it on a private cloud instead of... Yeah, so it's connected to the internet, right? Yeah, so it's connected to the... So right now, no. But it's connected to the internet, but it's not storing your data outside. So your data is on the Raspberry Pi. Oh. Okay. Okay, stop. Can you click stop? Stop. Okay. So go to... Pins. Okay, the third one. Set digital pin. Yeah, close it. It doesn't matter. So drive set digital pin to here. So I'm so touched. Yeah. Yeah, above, above. Yeah. Okay. Set digital pin 14. 14? Mm-hmm. Then go to variables. Variables? Yeah. Yeah, here. Oh. And drag on. On? Yeah, drag it over the green thing. Yeah. No, no, no. Where you were first. Yeah, here, yeah. Okay. Now start. Okay. Connect. Close this. Yeah. Start. Okay. Yeah. So this is your IP. You go to... You can click here to say IP address. Okay. You can't copy it. Just... I have to type it? Yeah. So go to the gateway to your browser. Yeah, this one. Yeah, the one that you're dragging. It's on. It's on already. Yeah, that's fine. Yeah. So this is the red light. Click on it. Off. It's off. Right. Okay. Okay, thank you. What is it? Everyone works for you. Do you have any problems? Does anyone have problems? Anyone is having problems? Is everyone done? Is it... What's that? Is anyone not done? Is anyone not done? Is anyone not done? Is anyone not done? Is anyone not done? Is anyone not done? Is anyone done? Who's done? Yeah. Yeah, can you just check if everyone's okay so we can start with multiple? Yeah. Yeah, what's up? So trying this example right now but we are trying to connect to the Wi-Fi. This is the Wi-Fi. Oh, no. But you don't have to connect. You just need to connect it here. Yeah. I think it's like... There's a lot of people that are connecting to my hotspot. Oh, your password as well. Okay. Do I stop it again? Yeah, stop it. Maybe... I think my hotspot's getting overwhelmed. Next step is to add this device. Does this need to be on... Yeah. Since the game is on the same network as this, I can just enter a local. Is it difficult to tell whether it's working or not? No, it should be fast. So if it's working... And here you can click and you can see if it's getting an IP address or not. There's a big one up in there, mate. So this guy knows how to install the driver, the works for the small one, but the big one doesn't have a problem. So what was the secret? He knows how to hack it, basically. Why wasn't it working? It's the check sum. So basically if you install it in your home room, the check sum is actually outdated. So you can just edit the cache file and then install it. Oh, okay. By the way, is the password for the Mozilla network correct? Because I can't seem to connect using this password. Yeah, it's correct. I'm having a lot of devices connecting to it. Let's see if I can kick someone out. Okay. Oh, so it's a hotspot on your mobile. So that might be the problem because a lot of people are trying to hack it. How can I kick someone out? I can't. Kick someone out? Yeah, you can't really. You can turn it off and off. It's gonna mess everything up. I think I can disconnect the Raspberry Pi. I don't need to open it. Oh, okay. So you have an IP now. Oh, yeah. One, I want to see. Okay. So now you go to... This? No. Did you open the JS? Yeah. Yeah. Yeah, I know. Is everyone okay? Not yet. Where's the battery? She's not getting the IP. The model is like 10 minutes. Yeah. So it's not gonna light on because it doesn't have a light. Yeah, it sometimes doesn't have. Yeah. You can try this. Okay. Actually, this is already programmed. So we don't need to pre-program it. We just need to go to... JS S2. Oh. I don't need to pre-program it. No. It's the same demo at... What's that? I don't know who's led that is. So what's... I think it's... She's not connected. Yeah. Yeah. It's supposed to work. Oh. So you already... Yeah. I don't know what you're gonna say. Okay. Really? Okay. Yeah. What? Yeah. Yeah. Yeah. Yeah. Oh. Oh. Wow. Oh, you know what? Yeah. Okay. What? Yeah. You want to try one? Yeah. Okay. So what? That was... Yeah. Yeah. I think it's okay. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. So now you kind of feel that... that IoT development is mostly about, like, trying to figure out how to get your things working and set up and drivers installed. And that's pretty much the hardest part. And you saw that with microblocks, you can just use this kind of scratch kind of interface that just pull together some basic IoT applications, connect to a Wi-Fi, and even use that device to serve as like a makeshift home automation device. You know, make it a light switch or something like that. But, like, we are just in Asia, right? So it's kind of a JavaScript conference. And so far, you haven't really seen too much JavaScript, which is, like, if... you want to make more complicated things. A modable... makeblocks is really... microblocks is really good if you want to get started, if you want to get something quick out. But as soon as you, you know, imagine a thousand lines of code how that translates into a thousand blocks, it gets really out of hand. And obviously, like, flexibility is limited by what kind of blocks you have access to and all of that. So you also want to use your skills that you learned in other languages for programming IoT devices. And there are many ways, there are many ways to program microcontrollers. Arduino is the most known one, which you probably use something like the Arduino ID and C++ usually to program your microcontrollers. There are other solutions there are MicroPyton, TinyGo and all kinds of other languages that have their tiny versions. And even JavaScript, if you want to use JavaScript or microcontrollers, there are plenty of ways to do that like Aspirino or Jerascript, all kinds of other languages. There's also a language a JavaScript runtime called XS, like extra small created by the modable team that Mozilla cooperates with. And the cool thing about XS is that they actually created a JavaScript engine that is able to provide you almost perfect compatibility with the JavaScript standard. That means the latest tradition like ES6 and further async functions and all the coolest bells and whistles that you can imagine you can still use them on a microcontroller and still fit your code onto a microcontroller which is pretty cool. So this XS engine modable actually what they do is they actually focus on microcontroller devices and that means they actually provide you with a bunch of APIs that may not even make sense on the web that doesn't really make sense on a microcontroller in the same form it makes sense on a web. So on the web you use like WebGL or Canvas to create graphics and animations on the DOM to create UIs on microcontrollers that have a few hundred pixels size displays or even don't have even displays in the first place or have to have low level access battery to be conscious about consuming the battery, you need different APIs than a fetch API or something like WebSockets so they actually provide you access to low level sockets they actually provide you access to Bluetooth connectivity because some chips come with Bluetooth and they actually provide you a kind of interface for interacting with graphical displays all of this in an open source library that that you can use and oh, there we go so whatever blame the German customs we wanted to get some more devices to use so you can actually not just play with the tiny microcontrollers that we have there but also get some connected devices as well you've seen Mel demoed how you can just use your microcontroller and use a breadboard or like build attach other devices to some of the pins and use LEDs or even more complex devices that you can or sensors that you could communicate with I have a device with me and let me see if this is done oh, there we go so I have this device with me so if you look at this I'm going to disconnect just for a moment if you look at this device this is nothing really it's not very different than the devices you have been using because it has the same microcontroller chip on it it just like kind of plugs into like this hardware which is like just a glorified breadboard with a screen on top so this actually has like a screen built into the hardware itself to make it a bit easier to get an out-of-the-box prototyping experience so let me try oh god I just messed up all the pins that was probably a bad idea to take it off there we go so when I plug this back in you can see that this is a device that comes so the same microchip the same Wi-Fi connectivity also this the ESP32 device chip is actually Bluetooth compatible so you also get Bluetooth out of the same package and what you can see here let me see if I can show you is actually a small color screen the cool thing about it is they touch screen wow this is harder than I expected it to be so there you go I got it so you can actually you can actually have interactions on the screen as well and control the interactions as well as put graphics on it so it's pretty cool but how do you program it right the easy way is supposed to be an online IDE very similar to what you just saw with microblocks let me see if I can open it up nope there we go so there is a work in progress online IDE it kind of sort that looks like Visual Studio Code if you look at it it's a quick little bit though but there is an online IDE in progress the problem with the online IDE is it actually uses WebUSB WebUSB is currently only supported by Chrome and even by Chrome it's barely supported I couldn't get it working on my Linux machine for half a day so I kind of give it up but it's still going to show you so ideally the online IDE when it gets to a bit more stable will get you like a kind of easy startup that can be used if you compile it to like an electron app you can use it as like a local device but also you can just write the JavaScript and use the modable SDK which is what I'm going to be using to flash the device with the JavaScript code that you want to see on the device so this is a very simple example that I put in here just so that you can kind of have an idea for how do you put code on the device it's very easy you just use the same exact JavaScript that you would be using online it has import statements it has a few built-in modules that you can get some network connectivity and some APIs that you wouldn't normally find on the web or Node.js like a network socket or something like that that you can actually use to make network connectivity on the device and the rest is just plain JavaScript as you would as you would use it normally so I already shown you like the oops no no no where is the where is the demo so make my face a bit bigger so I already shown you the like the draggable demo so what I'm going to do I'm actually going to put some more interesting UI on here not here and I'm going to flash this with the miniveter example so if you actually go to the modable open source repo you will actually find a tons of examples that it's super easy to get started so it is flashing yeah it's loading under here loading loading if you have Wi-Fi this is going to work eventually we might not have Wi-Fi so at that point it's not going to work oh come on today is not a big the demo gods are not really honest oh yes because this is the better without the Wi-Fi connection this is better okay so compiling again yeah it's flashing the device so it's going to restart in a moment the glare is not helping us a lot so did it work did it work come on are they loading ah there we go so are you not going to see because of the glare is that we have this fancy user interface for like a better kind of thing so you can have like a better display that you know you can connect to it connects to the internet pulls in the data and like shows you an umbrella today another interesting thing I wanted to show you is showcase a bit more of the Wi-Fi more of the you know you can use these small devices scattered around your home as like kind of like a home automation or home control device and it's flashing again and this is another application that was also like a few hundred lines of JavaScript only and what you're going to see is it actually shows a much nicer interface for your Wi-Fi connection so I'm going to click on one of those or not I'm going to click on it but you're not going to see what I'm going to click on ah there we go and you're going to see it shows like a little like keyboard so I can input like the Wi-Fi password or something so you can build self-contained applications right into the UI of this device and just one more last one last more demo to kind of wrap it all up that one you can also have applications that tie straight into the Missile of AppThings gateway so when you have all kinds of other devices scattered in your home you have lights and whatever you can also and this is what I just mentioned you can also build your own oops so what you're going to see is like a switch that you can just you know turn on and off like just like you did with other devices but instead of you know obviously you would want to do this like from a central location for your phone but maybe you want to have like control panels you know in your house as well so people who don't have access to the gateway directly you can expose functionality of your smart home via these tiny small displays one of the biggest appeal of the ESP devices so this microcontroller the powers this whole build up is their inexpensiveness the ESP8266 some of the devices you have been using is literally a few dollars if you're ordered quantity and the ESP32 one that has bluetooth support which is a bit faster and newer is just a few more dollars this whole screen assembly is being sold for about $20 US dollars that is so you could imagine that it wouldn't break the bank if you wanted to scatter some of the smart controllers of devices around your home and you could you could program them whatever you would like to do again just as with anything else in the missile of f things thing this is not, you're not bound by the crappy software and apps that ships with all the devices that you have at home you can do, you can make your own and you can make sure it's open source you can use somebody else's to customize your own experiences instead of having to pull your hair out trying to set up a smart camera that you just paid $200 for so yeah, so just to wrap, yeah you don't really want to see my face too much just to wrap this all up you can use the missile of gateway as kind of like a private source for or like a private center of your home automation devices and you can use like all kinds of devices, proprietary ones that you bought there is a lot of add-ons so you can dye those into your smart net but also build your own devices whether you want to do some simple like switches and stuff that you just want to kind of just put together quickly or if you want to build more elaborate like control devices and sensors writing to the rooms or the space itself you can also do that with JavaScript without having to learn or worry about C++ and memory segmentation faults and all kind of other problems as soon as you can set up your computer to kind of accept the USB connection which seems to be probably the hardest part of the whole thing but I think we are done, right? Yeah, if anyone has any questions Yeah, if you have any questions we are here still, we are going to be starting to set up for the next group but feel free to ask us and thank you for joining