 Next, we have Suze Hinton, who is my awesome office mate talking all about IoT with Jeffritz. Let's take a look. So I'm totally going to dye the beard. It's going to go red, yellow. Oh, hi, Seth. Oh, hello. My name's Jeffritz, and this is... Suze Hinton. So why don't you introduce yourself to folks on Twitch who don't know who we are? I would be totally okay if people didn't know who I was on Twitch, yeah. I'm Suze Hinton, and I am a senior cloud developer advocate, and I focus on IoT at Microsoft. Now come on, let's do the TwitchCon thing. Where everybody is... You're not Suze Hinton. I'm not Jeffritz. We're our handles on Twitch, aren't we? Yes. So I'm no op cat. And I'm C sharp fritz. Yep. All right. So we want to talk about IoT. You know a thing or two about that. Just a little bit. Just a couple of things, yeah. And we made sure... I know the Nuke crew is going to appreciate this. We brought a mechanical keyboard. We did, although it's not really playing super nice with my computer, so I'm not sure if we're going to be able to use it today. We'll give it a shot. Do you want to just quickly say what switches you're using in this? So I'm using Cherry MX Blues, and these are DSA keycaps. So they're very clicky. They are. Can you hear that? Can you hear that? Can our audio guys hear that? If I just like lean in. Is that so good? But we're actually going to do live coding like we normally do. But this is a long time in coming here, right? I mean, I was talking to you about live streaming in November 2017. Yeah, it was last year. And we've both been streaming for a long time, and we've been meaning to do something together. And we finally are today. It's very exciting. So we've got the mechanical keyboard working. We're going to do IoT. We've got this really cool overhead camera that you're going to see in a little bit. It's way up there. And what do we want to talk about IoT today? Yeah, so we wanted to talk about how you start prototyping with IoT in the first place. I think what people get really scared about is, well, I don't understand how devices work, and I don't want to do wiring and things, and I don't understand how the cloud stuff sticks together. So I wanted to make an app like a normal web app and then show people how you can actually have fun with it and connect it to a real device. Okay, so and when I think IoT as the .NET guy, I think C sharp hat and all. Third hat I'm wearing today. Yeah, I noticed that. I'm like, it can happen. So I always think of a Raspberry Pi, but a Raspberry Pi is kind of like cheating with IoT, isn't it? It can be a really easy way to get started because it's running a full-blown operating system on it. So if you're familiar with Unix systems, you can run Linux on it, but you can also run Windows on it. So you're sort of writing the same code that you are from day to day, but you're just doing it on a smaller computer. So it's cheating. It doesn't feel as much like lower-level IoT, I guess. Yeah, but it's still a very valid way of prototyping things. But lower-level IoT, as we've seen on your stream, that's where the elite developers are. Well, I sort of don't like to differentiate between what is elite code and what is not elite code. That's the thing. And clearly JavaScript is elite code. Well, it's a very high-level language that you can use for hardware now, which blows my mind. I actually think it's really funny. So that's why a lot of my open-source hardware code is done in JavaScript because I think it's funny. Okay. All right. So if you've watched our streams before, you know we're going to be watching the chat room. We're going to be answering your questions, but you also know we're going to be writing code live. Yeah, we're going to be juggling a lot of things at once. So I sort of tried to optimize for that today. Again, we don't have much time to pull this up. We don't. And it's counting down in front of us. I can see it. You can't see this, but it's over there. Yeah, totally. The folks watching get these, but it's right there. And I've got the chat room in front of me. So let's go. What do we want to... What do we want to write? Yeah, so we're actually going to be using a device today called the MXChip, and we actually have one on the table. So if we can just cut to a shot of that, you'll actually see that it is a device that has a bunch of different things built in. So it has a lot of different sensors, such as a gyroscope, a magnetometer. I always struggle to pronounce that. It's got a temperature sensor, a humidity sensor. Lots of really cool stuff baked in. What's a magnetometer? It doesn't detect magnets. Well, it senses like magnetic fields. Yeah, so you could hold a magnet near it, and then that would actually trigger that sensor to have a different reading. Okay, okay. Yeah, so it's really cool. There are a few buttons built in. There's a bunch of LEDs as well. A and B here. And then there's an audio jack and a microphone too. So this thing packs quite a punch when it comes to... Let's say you've got an idea and you want to glue a bunch of different sensors together. You can pretty much just start programming this board immediately without having to get stressed out over lots of wires and electrocuting yourself and things like that. It's pretty cool. What's this thing here in the middle? Yeah, that's a really good question. So we're going to use that today. And that's called an OLED screen, an OLED screen. It's got a display on it. It's got a display on it, which is really helpful. And I'm not going to lie. You know when you do console logs and things like that to debug, you can use the screen to print out variables sometimes. If you're struggling to get the serial connection going, or if you just don't want to use the serial connection, then you can also just print variable names to make sure that your code is running, which is really fun. That's the way we used to write webpages. Yeah, but the legit use for the screen is to be able to display things like sensor readings, or maybe you want to display some fun stuff like an animated GIF. Okay, that's absolutely fun. So all right, let's get started. Let's put some really good GIFs on those. Yeah, let's get started. So we have a bunch of different pieces that we need to glue together today. Okay. But what I want to do is something fun. So the project that I have in mind, which is fully open source as well, which we're going to share the link to, is basically a way to upload a GIF to a website, preview what it's going to look like on the MX chip, and then you can choose which device to send it to, and then pretty much send it. And we should be able to see a GIF playing on the device today by the end of the session. So we're not going to look at the device anymore, and we're going to stay focused on your PC for a little bit here. That's right, yeah. So we'll come back to the device in a little bit, because we're going to write some code to get that up and running. That's right. I'm not sure that I'm going to be able to use this keyboard today just because a lot of my shortcuts were kind of tuned for the Apple keyboard. Okay. I hope that's okay. But it was very cool. It was very, very cool to play with this. I kind of want to buy it for myself. So I'm going to put this to the side. But for those who do watch my stream, they know that I'm like a super big mechanical keyboard. You've only got three, four. I've got, I think I counted them. I think I have seven at this point. And I really want to buy that one. So like this is problematic. My gimmick is the hats and yours is the keyboard. Yes, yes. So I'm going to cross into VS Code. So like those who watch my, yeah. Yeah, the VimWitch has exited the building. Yeah. So normally I use Vim so you can kind of see, I usually have this kind of setup right on my screen. So if we cross over to that now, you can see that I have Vim loading. However, I'm going to be good and I'm going to use VS Code today. And part of that is because we have really, really good built-in tools for the MX chip. Okay. But also when you're live coding, like on a live stream, you can use all the help you can get with the IntelliSense and things like that. Absolutely. So that's what I'm going to do today. So I actually have this project on GitHub. If you wanted to pull it down, my online handle for Twitch is noupcat and that's the same on GitHub as well. So you can go to github.com slash noupcat and I have a project there called mxchip-gifs. And I actually have all the instructions to get up and running and so I'm pretty much going to be following through them today. Okay. Hey, moderators, do us a favor and grab that link and paste it into the chat room for all of our viewers. Yeah, just so that they can have a look at the source code while I'm actually developing it. Absolutely. I also went ahead and I put this project on Glitch as well. And what's Glitch for some of the folks that are here? Yeah. So Glitch is a really cool platform where you can basically host your code and you can actually host the entire app as well. And so people can do what's called remixing your application, which is very similar to forking on GitHub, but on here you remix it and then you can host your own version. So if you didn't want to have to figure out where to host it, because Azure's a really good place for it, but if you're sort of confused about that, you can also put it on Glitch, which is really, really cool as well. So that should be all up and running for you to use there too. And if you don't have the mxchip yourself today, you can still play with the code and have a look at kind of how this thing would work by going to a really cool tool we have in our Azure Samples repo called the mxchip IoT DevKit Simulator. Oh, okay. So this is very cool. It's not necessarily a code editor. We just have a couple of samples that you can have a look at and then you can plug your own IoT Hub connection strings in, which is really fun. And then you can actually kind of simulate shaking the device and things like that. And then you can actually see the code running and what would happen on the device. So this gives you a little teaser of what kind of code you would be writing to do some sort of basic level stuff, mostly because the C++ code that I wrote for the device today is a little bit more advanced than this. So there's also that. So we have a link to that DevKit Simulator as well. So if people wanted to follow along at home with that, they can as well. So I have that repo that I just showed on GitHub pulled down on my local machine, which is where I developed this. And I made this just for this stream. So I'm very excited to debut it today. Just for Connect. Just for Connect. Okay. So the first thing that we have here is this is a Node.js back end. So I know that, yeah, I know it's not C sharp. I'm sorry about that. Okay. All right. We'll work on that for Thursday. Yeah. Thursday we're going to be doing little bits and pieces. So I do actually have the device code in here, which is written in C++. And the front end is written in JavaScript, HTML, CSS. But the back end server is written in Node.js, and that's because we're going to be using the IoT Hub Node.js SDK today. Right. So... Azure isn't just .NET. It's not just .NET. JavaScript, Python, all the good stuff. Java, lots of different things. It's really exciting. So Node.js is something that I'm super comfortable with, so that's why I wanted to show you that today. But also because web developers, again, like I mentioned before, they think that, well, I can write this Express app, or I can write this front end site, but I have no idea how to connect it to a device. So that's kind of what I wanted to show today, is like an example of a real-world app with an API and things like that, and how you actually connect it in the end to IoT Hub and to the device. Okay. So I have an Express server here, which has a couple of routes. There's not really much to look at yet, but I wanted to start this up in my terminal just so that you can see, and I'm going to use Node.mon, which means that every time I make a change, it reboots. So I'm going to just start my server and cross my fingers that this first step works fine. And I actually have this branch checked out, which is not master, called Nodecheat. And what that means is, I've removed all of the IoT Hub code from here, so this is the part that we're going to be coding live today. Okay. And then you have master that has it all in it, so that we can... Ta-da! It's working. Yes. So we can cheat and fast forward in time, but we're going to actually like... We're going to start Nodecheating. We're going to start Nodecheating. So if I start up my server, that's actually going to be on port 3000. So if I go to my browser and go to port 3000, it looks like our app's working, right? Sure, looks like it... Oops, looks like you... Yeah, but we have a warning. So it says, Oops, it looks like you need to set your IoT Hub connection string as a process variable. Okay. So that's something that we need to do immediately, but I wanted to give you a quick preview of what the app actually does. So I have a bunch of pre-saved gifts here to share. I'm actually going to pick Nick Jonas because he's been in the news recently because he got married this week. He got married. It was very glitzy. Right in India, was that? Yes, to Priyanka. Yeah. Look at us. We are pop culture aware. So we're going to load this gift and this is his mind-blowing gift, right? Yeah. And so you can see here that we actually have like some pretty low memory resources to work with on this device. Okay. So this app will automatically truncate your GIF if it's too long. So I wanted to show that feature. But you can see here that it gives you a preview more or less of what it's going to look like on the screen. And I really liked that it picked sort of the main mind-blowing part of the GIF, which is pretty cool. Okay. And then once we've actually hooked it up to IoT Hub, we're going to have a device list here that we can choose to send a GIF to one of the devices, which spoiler alert is going to be this one over here. Okay. So what you've built is a way for us to literally take our pictures and publish it to a screen that could be anywhere. Could be anywhere. Yeah. I accidentally sent this GIF to the office this morning in Redmond. So someone, if anyone goes to my desk today, they're going to see like Nick Jonas' mind exploding on a, because I have a bunch of MX chips bracketed to my wall behind my desk. So yeah. So they're going to see that. And it's all through relaying through the cloud using the IoT Hub. That's right. So that's kind of the glue that sticks these together. And that's what makes this so magical. Like I literally accidentally sent a GIF to Redmond today, and we're in Las Vegas right now. Yeah. And that to me is pretty magical that I didn't have to even be at my desk to do that. So. And I don't know if I'd use magical in Nick Jonas in the same way. Okay. And I just automatically went back to BIM because I wasn't even thinking. But I'm going to use, I'm going to use, and you'll notice that I actually have BIM mode enabled in. Yeah. Right. So all right. Let's, let's explain that real quick. VS Code has a tremendous extension model. It does. And there's an extension that'll turn it into being able to handle VIM shortcuts. Yeah. That's right. So that's what I have installed now. And then I have a bunch of other stuff installed too. So if you have a look along the bottom of my screen right now, I have, you'll see a bunch of stuff that says MX chip and like a serial port and things like that. And like device.ino. That's actually the IoT workbench extension that's designed specifically for the MX chip. So we're also going to be making this to that today. And I have the Arduino extension installed as well. So that's actually pretty neat. And that is why it makes sense to use this as an IDE today. Okay. Can I use that Arduino extension to work with our friends, the dual bots? Yes, you can. I've got to check that out. Yeah, you absolutely can. So it uses the same board manager and the same library manager as like the Arduino ID itself. Okay. So as long as you've picked, you've chosen the right device in the corner here, then you can do all your dual bots development right in the ID. Yeah. Okay. Yeah. Which is pretty cool. It is. All right. And friends out there in the chat room, make sure you send in some questions our way so that we can get to the nitty gritty of what's going on here. That's right. Yeah. Answer your questions. All right. What do we got? Yeah. So what we have to do is we have to be able to connect this device to this website. Right. Okay. And at this point, you just have that library that's stripping down the gift to a couple frames converting it to monochrome. That's literally all I have. So I have no code running on this device either. Okay. So the first thing I need to do is to upload some codes so that the device is listening for those messages to come from the website, right, via IoT Hub. So I'm actually going to plug this in and I'm going to start uploading that. And because of the way that I have everything arranged in this file, this file sort of directory here, I can't use the IoT Workbench, but I can use the Arduino extension underneath. So normally you would use the IoT Workbench thing, but I just don't want to have to open multiple workspaces today. So just bear that in mind. But the instructions in my read me actually show you how to use IoT Workbench. So should we take a look at the next trick just to show... Okay. It's lit up a couple of things here. I see Wi-Fi is green, Azure is blue, and then user has a little amber light next to it. Yep. Version numbers. Okay. Yeah. So this is all in test mode right now. So when you first turn on the device and you set it up to connect to the Wi-Fi, which again is documented, it will just show this kind of like demo script. And you can kind of play around with it and click the buttons and see sensor readings. But we want to actually put our own code that we wrote to be able to handle GIFs coming through the wire down to it. So that's what I'm going to upload now. And so the... So we'll go back to your machine. Yep. So let's go back to my machine. And I have written all of the code here to take care of that. But the one thing that I want to show people immediately is that I have a method name called showGIF. And so we're going to be using that method name in our code later on. So I want you to just try and burn that into your memory, at least your short-term memory. But we're going to be using that. But feel free to go through the rest of the code at your leisure, especially if you're watching on the stream. There's not a lot of lines of code. And it's really just taking a JSON payload, taking the GIF data out of that. And then just like on every single loop of the script, it just kind of figures out whether it needs to play the next free one up. That's pretty much all it does. Okay. And this is the code that's going to run on the chip. And it's written in C++. Yes, C++. And it's making use of a lot of different libraries, such as IoT Hub and the MXChip libraries, as well as just the general Arduino libraries too. So it feels very, very abstracted. It's even easy to use than regular C++, in my opinion, which is pretty cool. That's, now I don't feel that it has elite coding. Yeah, right. It's cheating. It's just cheating. I mean, I wrote this this week, and it only took a couple of days for me to write all of this, like the website, the C++. It's really not a lot. It's just like lots of tiny pieces, but they're all quite small. So I'm going to make sure that I've selected the correct serial port in order to connect to my device. And then I'm going to use just the command, regular command palette in VS Code. Okay. And this is a recently used command of mine, because I use it a lot. So you would normally go to IoT Workbench Device, and then there's a device upload command. But today I'm going to use Arduino Upload just because I wanted my folder structure in a very specific way. So it just doesn't sort of recognize it as an IoT Workbench project. And I'm going to hit Upload, and then we're going to cross our fingers and watch the output. And I'm familiar with your Arduino tool, so it just bootstrapping it? Yeah. So it's pretty much just starting up the Arduino app. But what's cool about the Arduino app is you can access it as like a command line tool in a certain sense. So what it's doing is it's invoking the app that's existing on my machine, but it's giving it a bunch of flags saying, like, upload this file, and I want you to upload it to this device on this serial port. Yeah, the text editor in that tool is... It's no VS code. Exactly. So that's what's really nice about this is you don't necessarily have to stick with that anymore. So this is super convenient, and then we also have a bunch of built-in nice things that the Arduino ID doesn't have like IntelliSense and things like that. Oh, yeah. Oh, yeah. So you can see here that that's uploading right now, and... Programming started? All right. Yep, looks like it finished, and it says uploaded the sketch. So... So if we go over to the video to camera over this, it says connecting. I just saw the Wi-Fi light come up. That's a plus. Send me a GIF. Cool. So it looks like it's waiting for a GIF. The Azure light is lit up, too. So it looks like it's successfully connected to Azure. So for now, we're good. Okay. We'll see. We'll see. We'll see. So now it's waiting for a GIF, but we have no way to send it the GIF yet, right? Okay. So let's go back to our server, and we're actually going to require like a brand new package, and it's the IoT Hub SDK for nodes. So I'm going to go to require, and it should auto-complete. There we go. See, that's amazing. So good. And people think that's cheating. It's not cheating. It's not cheating. It's productivity, right? It's coding faster. Yeah. I mean, I'm not going to lie. It's been kind of nice to be working in this. I've actually been a bit more productive than ever, but I'm not going to lie. No comment. Okay. So let's move on. Let's move on. So I actually have a .EMV file, which you will see in my file list on the left, and that contains a very private connection string to my IoT Hub. And again, I have instructions in my readme on where to find that in IoT Hub and things like that. So first, I need to actually extract that connection string. Then if it actually finds it, we want to start connecting to IoT Hub, right? So I'm going to have a conditional that says if connection string. Then I'm going to need two different things from the IoT Hub SDK. I'm going to need a registry so that I can read the list of devices. And then I'm going to need a client so that I can then tell a device to do something. So there's a couple of things that we need. So I've already, on line six, created a couple of temporary variables code, sorry, some undefined variables code client and registry. So I'm going to make use of them. So the registry will just be IoT Hub.Registry. And this intelligence is amazing. And then I'm going to do from connection string. I'm sorry, I'm just not used to this in Vimital. Wait to see in telecode. Yeah, I actually saw the demos for that today. Scott made it look amazing. Very excited about it. So the SDK access to create that registry is simply just .fromConnectionString. The client is actually exactly the same except for IoT Hub.Registry. It would be IoT Hub.Client. Yeah, that was not a trick question. So we're going to do connection string again. Okay, whoops. People have watched me stream. They know how smart I am about this. All right, so I use my good old Vim command colon W to save. I have no idea if that saved or not. It looked like it did. All right, so if we have a connection string, we're going to start up our registry and our client. But then we have these two routes that I've set up. So one of them is API devices list. So that sounds like it's going to list the devices that are registered under IoT Hub. And then we have slash API slash GIF and that's a post request. So that's what we're going to be sending the GIF from the front end. And you're going to want to receive and transmit it to IoT Hub, I guess. Yep, that's correct. So at the moment I put in these kind of placeholders to say, you know, if there's no registry or no client, then just send back something so that it doesn't blow up. But underneath, we can do something like, let's see if we can get at least the devices listed first, right? Because we have like 18 minutes. So like we've got to get over to one. You noticed the clock too. All right, so I'm going to do, all right. So if there's no registry, then just return out with an empty list of devices. But if there is a registry, we can do registry.list, that's the actual command. And then what that takes is it takes a callback. So it'll be function and it'll either be an error trying to list them, or we'll actually get a list. Makes sense? Sure. So then we're going to go to inside of this callback and we're going to say, okay, so list. Oh, actually, if error. So let's be good and check for an error first. Wait, error handling? Come on. Yeah, we are. Res. Res.sense says, well, I'm not that responsible because have a look at what I'm going to do. I'm just going to send a 500. But if there isn't, then we're going to do a registry. Oh, no, no, no, list. So we already have the list. So we're going to do list.map. And then we're going to get some devices, right? Sure. And I'm going to make this fat error function. So we want to create an array with just the names of the devices, right? Sure, sure. So we're going to return the device.device ID. That's what it should be, I think. Yeah, I think that's right. The device ID will be the name that you've assigned to this device. Yep, that's right. So I'm going to just do a name list. Name list equals list.map. And then it's just going to have an array with like a bunch of strings in it. And then we're going to do res.send. And then we're just going to send, I called it name list, didn't I? We're just going to send that array. And then I've set up express to just be able to like send JSON back and forth. So I'm pretty sure we should be good from there. Okay. So we can go back to our terminal and make sure that our code didn't blow up. It looks like it just restarted okay. And I'm just going to give it one quick look to make sure I've done this right. It looks like I have. So let's see what happens. So let's refresh our page. Let's just choose a gift just so we can get that list up again. And it says no devices found. So let's have a look to see if there was an error. There wasn't. That was weird. So let's see if there was an error. Oh, no, no, no, no. It is there. Oh, cool. Okay. It just took a second. Cool. So you'll see that I have a device called BIMWIT. And I have a bunch of other devices. So you can see I have some in my office. I have some at home. So that's pretty cool. So that's actually working. I thought it wasn't for a sec, but I just didn't trust my own abilities. So confidence is important. Oh, yeah. So Skull Crusher for Life, great nickname. In the chatroom is asking, any recommendations for making the MX chip more portable with a power source? That's a really good question. So because this takes a micro USB, this has a micro USB port, which is how you power it. What a lot of people do if a device has something like that is they use like a USB cable, and then one of those mobile phone, like battery, portable battery things to have as a backup to charge your mobile phone with, that works really, really well, because that's going to give you the five volts to be able to kind of power this. So that's usually what I recommend for people because you can just throw it in your pocket. You can use a lithium battery, but you have to have a pretty powerful one. So like those mobile phone ones already have the right kind of power for that. But you're going to have an IoT device in your pocket walking around doing this Skull Crusher? Yeah, you should tell us what you actually want to do with it. That would be really fun. I'm going to do another GIF file, too, just to show you, like, if you have the right amount of frames, it doesn't actually show you that message. Oh, look at the egg. Yeah, the little egg's really cute. I spent a lot of time on Giffy this week trying to find the cute ones. Wait, I thought I found a decent one earlier in the week. Did you grab, we found Joey from Friends. Oh, yeah, yeah. So that one is showing still at my desk, because when we were on it, I think we had like a team's call, and then I was like, send me a GIF, and then you sent me Joey saying how you doing. It was great. Oh, man. Okay, so the other one is this. So as soon as you click send GIF, that actually does do a post request, right? So I'm going to go into my network tab, and you'll actually see that happen, and it's going to error out because we haven't hooked it up to anything, right? So I'm going to click send, and you can see here it's pending, but it's not actually going to do anything, right, because we haven't hooked it up to do anything. So we have to actually fix that. And so I am going to just close this back down again, and then we'll refresh it just to reset it back. And here's what we're going to do. We're going to, first of all, we have to, what we're going to do is we're going to invoke a method on this device. That's what it's called, method invocation. Okay. So this device right now is listening for a method name. Now, do you remember what that method name was? So it's like a trick question. Yeah. Following all this other code. Sorry, yeah. There's been a lot of details today. So I'm going to put you out of your misery. The method name is showgif. That's it. Yeah. Okay. So I'm going to do method name. That's one of my params that I have to send IoT Hub. Okay. And it's called showgif. So this feels, right, as a .NET developer, this feels like some very similar to SignalR, where I'm specifying, I'm sending a package to my clients that says, here's the method name to call, and here's the array of arguments to pass into that. It is actually very similar to that. So whoop. So if I actually learn how to use Vim properly, oh, I need a comma too. Okay. Not so much the VimWish today. So the next thing we need is a payload, right? Yeah. And so what you don't see is that when I choose the GIF file and I choose to send it, the payload is actually this compressed GIF. So again, if I go to send GIF, and we have a look at that payload really quickly, you'll see here that there's a data. There is a device ID. Okay. And then there's a data. There's an array of bits. Yeah. So we have frames and then just like the size of the GIF as it will be on the screen, right? So we need to get that to the MX chip so that it knows what size to do it and like what the frames are and everything. So we're simply just going to send, I think, request.body.data, I think. I think that's what we do in Express. So we want this data here and we want the body that's coming back from the request. So we're going to take that frames object and the other stuff that was in that data collection and pass that call to data, not data. I'm sorry. No, it's so good. I always flip up between the two because I'm not from this country. So there's that. The next thing we need is the device ID, right? So that is actually on rec.body.deviceid, I think, unless I got that wrong. So let's double check that real quick. Yep. So request.body.deviceid. So that's how we understand from the front-ends, you know, which device we need to send this to in the first place. And then it just comes down to using the client. Autocorrect got a little. Gets aggressive. Gets a little aggressive, yeah. So client.invoke. I wonder why it's not autocompleting. Invoke.device.method, I think. But I'm going to look that up. Oh, it is. Okay. So I got that right. All right. So the first argument it's telling me is the device ID. So I already have that signed it to a variable before. Method params is next. So I have my method params, right? And the next thing is a callback, right? And so it's going to tell me like, you know, was there an error or not? So I believe that it should just be error and result. And then we can do fancy things in here, like, you know, send a 500 back to or 200 back, depending on like what happened. So I'm going to do that real quick. If we're going to be responsible. Yeah. If error. So I'm going to do return res.send status 500. And if we were really like nice, we would actually send back the error that came back with it, but we're going to shortcut that. Otherwise. Because we're not cheating. Yeah. Because we're not cheating. I got that figured out. All right. And I'm just going to send a simple 200 if that was okay, right? Sure. 200 okay. Yeah. So I'm doing this from memory and also on the spot. So I'm not sure if this is correct, but it seems like IntelliSense was telling me it was okay. We never do it. Never. All right. So why don't we just like, it looks like the server restarted. So I guess we just need to test it out. And now I'm scared because like, what if we end up waiting forever and it never happens? But let's see. So why don't we slide? Remember, let's snap that to the left because they're going to do some fun things here. Oh yeah. That's right. That's right. Yes, yes, yes. With our friends, the video director, are going to put the chip on the screen now as well. They are. Yeah. Which is pretty cool. All right. It's there now. Cool. So I'm going to, again, I'm going to choose my Nick Jonas because I really want to get this going on the chip because I think it actually came out really cool. So this actually is called Vemwitch. So I, yeah. So I've already set the connection string on this device in the EEPROM. So it's storing that connection string in the EEPROM along with the Wi-Fi credentials so that it can connect. I have no idea if it's hopped off the network or not. Sometimes it's hard to tell. Well, the Wi-Fi light is green. But it looks like it's still okay. But in my own IoT Hub, I just wanted to really quickly show that here are all my devices and here it is Vemwitch here. So this was the SAS token that I used in order to connect. I use this connection string here. Okay. So I have actually blanked all them out just so that I'm not spoiling on my keys. But that's just a quick overview of where I got that from in order to connect. So let's try sending the GIF and let's see what happens. Come on, Nick. Get over there. You can do it. I think the Wi-Fi might be a bit fretsy. So we'll see if it's going to come through. It might be a little what? Oh, unintentional time. I can't believe you just did that. Yeah. So it's still sending. It does take a while because that's a pretty big payload. So it looks like our GIF works. It's yellow and blue. It is yellow and blue. So the first eight pixels sort of like row across the top of the MX chip is yellow. And that just means that you can have kind of like different colored text if you want. Which is pretty cool. But it looks like our GIF is looting awesome. There's Nick. Do you want to try another one? Yeah, let's ask him. All right. I got, I like the egg actually. Oh wait. No, laser cat. So I got one with like a cat with lasers which is always cool. So let's try sending that. This went a little too well. I know, right? I'm not going to lie. I was not expecting that. All right. Let's see if we can get a VimWitch to show up the laser cat. It does take a while because it is quite large. There we go. There it is. Now that one's a little bit harder. It's a little harder to see. What if we, I really like the can't sleep because it's pretty clear. So let's try and send that one. And this one is only a couple of frames. So it's going to send a tiny bit quicker. Yeah, but honestly, like this is a normal website which is just HTML, CSS. There you go. Yeah, it calls it back. And the yellow split there looks really good. Yeah, it looks really awesome. Yeah. Okay, so to recap, it's just a website that's sending a command to IoT Hub that relays it to the device that's already registered with IoT Hub. That's right. Yeah, I did cheat ahead of time and do that. I wasn't sure if we're going to get done in time. So, and you're just sending it through Azure and because this is connected to Azure and we see the blue light indicating that it is connected, it's able to receive that command and execute the payload. Yeah. And even though this device is connected via USB and powered using my laptop, like if we were to just plug this into another laptop, this is literally just a power source. Okay. So it really is going up to the cloud and back down again. Like there's no USB activity happening other than when we uploaded the script to the device in the first place earlier. Okay, okay. So we could plug this into a phone, you know, mobile juice pack. Yeah, exactly. Yeah, you totally could. Run it right there. Yeah. And so that's kind of how the ones at my desk are. I have like a powered USB Hub that's not connected to a computer. It's just got like a DC power support. And they're all plugged in. And then I have these 3D printed brackets and stuff. I should have gotten a photo because it's really funny. But yeah, it's really fun because now people like, I have like this little private URL you can go to when you visit my desk and people can upload gifts to me. Effectively make a little bit of wallpaper behind you. Yeah. Yeah, it's kind of fun. So like, so I'm not sure what kind of gifts I'm going to come back to when I come back to my desk, but I think people are going to have fun with it. So that's pretty much it. We have a few minutes left. So do we have questions or did you want to look at any of this code in more detail? So how can you show us how you register the device with the IoT Hub? Because I... Yeah, that's a really good idea. Where we can order an MX chip on the one page and certainly through the GitHub repository is that information. So how do I register when I get my chip home and I take it out of the box and I want to make it an Azure chip? Ah, that makes a lot of sense. So you can actually use the... I'm actually going to just open this workspace now. I think that's... Wait, I'm going to reopen this project but as the actual workspace just so that you can see how cool this tool is. I'm going to go here, open. It should ask me if I want to open it as a workspace. It did not. Let me try that one more time. Again, I use BIM for most of my stuff so I'm not as used to doing this but... Okay, so here's where I was asking... Well, sorry, you didn't see that but it was asking me to... If I wanted to open it as the Azure IoT Workbench project which is where you really get the power of this. So if you go to IoT Workbench device for example after plugging it in and it actually... Plug it into your PC. Now, and you're using a Mac so it works PC or Mac. Works perfectly. And as soon as you plug the MX chip in you do actually get this really cool like tab that opens and it actually walks you through doing all of these really cool sample projects. So even though I'm showing you how to do this now these tutorials are actually going to show you how to do it. So again, if I go to my IoT Workbench device see how I have config device settings, device compile, device upload, install SDK and generate CRC and that's for like over-the-air updates but I also have other IoT Workbench stuff. So let me see if I can bring up the top level IoT Workbench. So I've created a project. I have cloud, set workbench path and examples. So if I go to cloud I can actually provision all my services here. Okay, okay. And then you can also create the device identity and do all of that through the workbench. And that's under that. Yep, and that's under the workbench. If you wanted to do it manually I mean I can show you that on the portal as well which is something that I tend to do just because like I don't really need to use that. Elite developer. It's not elite development. I just want, I know that some people have used like IoT Hub before and they just want to know how that relates to like what workbench is doing for them I guess. And there's some discussion right now in the chat room that I'm seeing where there's a client on the chip. The chip's connected to Azure. You're sending your commands to that Azure IoT Hub and then Azure redirects them to the chip because the chip's registered. Perfect, that's exactly what's what's happening. So the device has the IoT Hub SDK for C. It has the C IoT SDK which is packaged up and connecting to Azure when it as soon as it gets on the Wi-Fi. That's where it's waiting for those like method invocations. And my C++ just has a callback that basically says like whenever I get a method invocation I'm going to check what that method name is. And so this is where I have device method callback. And then if it's showgif then I want to pull down the payload and then I want to call loadgif which is my special function up here that loads that into memory. Very cool. Okay. So it's literally doing that. It's just kind of like starting up a client connection or sorry device connection and saying, all right anything you send me I'm just going to like perform whatever I need to do on it. Just listen and then listen for a command coming from the other side. Yeah and our Express app is essentially a service client rather than a device client. It's a service that can basically send commands to any device that connected to the same IoT hub that the service is running with. So that's how it works in a nutshell. I'm really glad that that came up. Oh yeah. No it's it how do we connect all the lines and make sure that all of the pieces work. Yeah there's a lot of moving parts. So you actually have a private website running somewhere out in the cloud. I do I'm not going to share the URL today. No no. But you can actually go and glitch and host your own which is really cool. So I do actually have that hosted on Glitch as you can see here and you can view the source. So that's chip-gif.glitch.me. If you click view source that's where you can remix your own from there. You really just have to add your connection string and then it's actually up and running. So it's actually easier than what we did today. Okay. Skull crusher for life. Good to see a skull crusher. Yes it is. Can you use IoT Hub to track statistics for when your devices are connected for when a device comes back within range of the network and can access. So that's an excellent question. So you can do that and we have this thing called operations monitoring and you you are able to monitor all of the different things that happen such as log events with the device registry, log events with device to cloud, cloud to device, log events when a device connects or disconnects from the IoT Hub. So I think that's what you wanted Skull Crusher. So you can actually log those things. And then also if you go to activity I don't think it's activity log. I think it might actually be yes. So we if you go to the overview of your IoT Hub you can actually kind of see a bunch of telemetry and you can choose what kind of telemetry you want to look at as well which is actually pretty cool. So we have a lot of neat stuff built in that you can listen to. And there are also events in which right now allows you to listen for things like did a device get registered with the IoT Hub? That's something that you can act on as well. Cool. And are these devices secured with SSH? They're all like secure methods of transportation. So it's either AMQP, MQTT or HTTPS. All of them are on the secure ports. Fantastic. Yeah. All right. And we are just about out of time. Thanks so much for joining us. This was so cool. What is that? We have a cool GIF but I don't know where it came from. So it's really cool. Okay. Thanks so much for joining us. Thank you, Suze, for coming out and joining us here for Connect. Thanks for having me. This was super fun. This is my last session. Oh. But this isn't where today ends for me because I'm actually taking off from here to our virtual attendee party. Wow. Over at the Golden Knights Arena. Okay. Now I'm jealous. So if you stay tuned here. Okay. After we get done at the end of the day, we're going to have a virtual attendee party live from T-Mobile Arena, home of the Las Vegas Golden Knights. Wow. We're going to have questions. We're going to have trivia. We're going to have prizes all from our sponsors.