Kassian's IoT Hour

Good afternoon, everybody. Thank you for joining me here on Cloudflare TV. I am Kassian Wren, and today we're going to be doing the IoT hour. So we did this last week where we worked on Raspberry Pi, and what we got it to do was we got it to put temperature data to Worker's KV, and everything like that. And anyways, sorry about that. So what we're gonna be doing this week is we're going to be taking that temperature data and using Worker's sites, we're going to create a dashboard that shows us the temperature in the lab. So the first thing we're going to do is we're going to SSH into my Raspberry Pi here. Okay, and we have here is a few different folders, we're going to go into the IoT hour folder. And then we've got in here is Pi code and Worker code. Hang on a second. Okay. So, XGS and package reduce. Sorry about that. I was muted for a bit there by the Internet blip. Okay. All right, so we've got that. Now, what the Pi code does is we're gonna take a look at index.js here. Is it creates a REST server and uses Johnny five and the bent library to call a worker whenever it changes. And also we can turn the lamp on and off. And it sends the humidity. And on change sends the humidity to the worker. So that's every three seconds right now. All right, so we've got that. What we're going to do is we're going to run this. But first, we're going to just making sure I have my is B. We're going to do index.js. And we're going to sudo node index.js. All right. So, we're going to go over to my browser here. I'm going to have a new tab. And so, right here we've got is the temperature from last time, which was 617. And now we've got temperatures. We should have temperatures added that are from 629. So, let's hit refresh. 617. Back to the worker and see what's going on here. Hmm. It says it's being added. Hmm. I think I know what's going on here. Okay. So, I think our slice for the worker is not working correctly. I'm in here. Okay. So, CD. Let me clear this out. Oops. I can type. All right. There we go. So, we're going to run a worker code. And we're going to go show temp. And we're going to open code. Okay. Close this. All right. Yeah. I think it's okay. So, it's only slicing the first 50. What we want to do is we want to say current length minus 50. Save that over to the command line. And say Wrangler. Oops. If it's Wrangler publish, which is the correct X. Okay. So, it's published. So, now we can go here and refresh. It should start showing up. Hmm. Still only slicing from 617. Let's see what happens if we get rid of the slice. See if that works. Save this. Wrangler publish it. Okay. Now, we'll go back to the browser and refresh. Okay. Yeah. It's slicing off the 629s. We don't want it to. So, we need to fix that. So, it's this slice function that we need to work with. Okay. Now, we're back to 617s. Huh. Okay. That shouldn't slice off the last ones. That's so strange. All right. We're going to do some investigation. Oh, start and end. Okay. So, what we want to do is get rid of that end. We can still have the minus 50 here. Okay. Now, we do Wrangler publish again. And okay. Okay. Published. Let's go check out here. Okay. Perfect. And we're getting 629s. Okay. Perfect. So, now we've got the last 50 times 100 or 50 times 3. So, it's 150 seconds of data. So, we should save that information. Oh, you know what? Oh, I know what's going on here. Because I was in a Wrangler folder. And fix slicer. Okay. So, now it's back up. Awesome. So, what we've got now is the last 50 temperature sensor readings from this lab. And humidity. So, we've got a temperature around 23 degrees Celsius. Did not set it to Fahrenheit. So, it's not freezing in here. Okay. So, what we're going to do is we're going to create a dashboard with worker sites and chart JS. So, I'm going to open up the worker's documentation here. I already have an account. Oops. And open up my password on my desktop. Get that password. Okay. Okay. Workers. Oh, this is the wrong account. Hang on. I should take this one. Okay. Workers. This is not the one either, is it? All right. That's fine. Let me try one more time with this one. Goodness. Oh, goodness. Okay. Sorry about this, y 'all. There we go. Okay. Cool. Show temp. We got all that. All right. So, now that we've got all this, what we're going to do is go back to the documentation. Which way did it make me log in, actually? Cool. So, now we're going to go to worker sites. Start from scratch. Okay. And okay. Let's do tutorials. Actually, let's just do it that way, yeah. Let's just do start from scratch here. So, we're going to go back to terminal. And we're going to go up. Actually, we're going to go into worker code. Because we're going to create it in worker code. You're going to have my Wrangler to update it. Because it said there was an update. And I want to be updated. It helps if I use the right package. Okay. So, we've got our Wrangler version. Sweet. All right. Now we're going to say Wrangler generates sites IoT dashboard. Back on chat. Make sure there's no questions. No questions so far. Awesome. Okay. So, all right. Okay. So, we'll need to go into IoT dashboard. We're going to open this up in code. Okay. Worker site. Next.js. Oh, it's public. That's the one we're looking for. Okay. So, we've got a public. And I'm going to edit that off screen real quick. Come on. That's not what I wanted to do. So, for the route, I'm going to say IoT dashboard.newbotnest. Worker's dev. Save it. Okay. Okay. So, we don't need to define the route. So, just in case, let's look at this route. We don't need a zone ID. We'll do my account ID here in a moment. So, what we're going to do is we want to add a chart. And we're going to use chart .js to do that. Create our little dashboard here. We're going to create a chart for the humidity. And we're going to create a chart for the temperature. So, what I'm going to do is create a new tab. Copy. Okay. So, then we're going to go into our HTML. We're going to add this script. Oops. It's wrapped in a script tag. So, we're going to say... Okay. Save that. And we'll leave the rest alone here now. Actually, we're going to create a... Route. Source equals straight up app.js. And find my home row. Create a new file in public. .js. And just have it run. Make sure everything's where it should be. Save it. We'll go to our console. Our log. Or console, rather. And we'll say Wrangler. Install. Oh. Authenticate. Okay. Oh, I see. Got it. So, we're going to do... Here. Now we have authentication. So, let's try that again. There we go. And we should see... Hmm. We should see... Hmm. Let's see it loading our script. Oh, you know what? I think it didn't. Why? Okay. Still not coming up. It's just not working correctly. I'm going to actually make this a little smaller. I see what's going on here. Testing. No, we don't need that. All right. So, we're going to change our index .html. And create an IoT dashboard. And then make sure this is deploying correctly. Okay. So, that does work. Awesome. We need to figure out why the JavaScript isn't loading here in a second. So, what we'll do for now is underneath IoT dashboard, we're going to create a canvas with 400, 800, 300, and actually we're going to create... ID equals temp graph. And then app.js. I'm going to say document .getElements .id.temp.graph.innerHTML equals... This should let us know this is running. Console. Okay. Now it's not showing anything, which might be a good sign, actually. So, let's try deploying this and seeing what we get. This dev is set to true. Oh, maybe because I included a route. Okay. IoT dashboard. Inspect. Elements. It's got the canvas. Okay. Console. Okay. That's good. That's a much clearer preview of what's going on in here. So, let's get rid of... Oh, that is why it's yelling at me. Okay. Okay. So, back here. Okay. It's got high and that's sweet. Okay. So, it's running everything. Awesome. So, what we're going to do is we're going to start setting up our chart here. Okay. So, this is how we get set up. We're going to do this. Get rid of this console.log. And we can say temp graph. And we're going to use the var to keep it ES6. Okay. Okay. First, we're going to populate it with bogus data just to make sure this all works. 22, 23, 23.1. Two. Then check. Chart is not defined. Okay. Right. New chart comes from... All right. So, we're going to go to sources. That's blank. Okay. So, I think I copied the wrong CDN. Ah-ha. Here. Index. This. Give it. All right. Terminal. Deploy it. And go over to the browser. Okay. That's better. Okay. All right. So, now we've got that. Let's take a look at line charts. Right. What does data look like? Ah, okay. So, it needs an X and a Y. Um, we need to not be up here. Sorry, my cat's decided that my desk is his domain. And I had to move him. All right. Okay. Let's add some extra data in here. Let's do that. And then, these. And have the close bracket now. Let's look at. Here. Awesome. All right. Publish it. Publish it. Go to here. So. To my sister, you have a function. Okay. I guess it's two string. You can change all these as well. Do that. Wait for it to finish. It really doesn't like this. Ah, goodness. At least because they're all the same, let's see what it does with just one data point. Try just an empty data. My first time with Chart.js, and I did a little bit of practice for the research. I decided to fly by live here. Okay. So, I'm going to say, I'm going to say, I'm going to say, I'm going to say, I'm going to say. This is super not helpful. Okay. more about the chart. Oh, that's not what I was gonna do. That's not what I was gonna do. We're gonna say, let's do the weight edge. Publish. Here. Oh, right. Okay. It is an async function. Okay. There's an old version of the app. Yes, there it goes. Okay. Access to has been blocked by course policy. Okay. Okay. Not the right. Oh, show temp. That's why. Okay. So back here. I don't have an extra period hanging there. Okay. Here. No. Via course, but it's a get request. Set the request mode to no course to fetch your request resource records disabled. Okay. I see. Okay. All right. So we're back in here. Good. Wars. No. Save. Boy. Where it. Okay. Is it using a new one? Nope. No, it's using it. Okay. But I did do that. Of mode of course. Let's see now. Okay. Here. Okay. Cool. Response. Okay. Hang on. Didn't work. Okay. Okay. It did do it. Awesome. Awesome. Awesome. Awesome. Awesome. All right, cool. So we've got the data here. Yeah. Data. To. Yes. That's a method. Oh, my worker's documentation went away somewhere. Okay. I did a JSON. Okay. Not to JSON, but just JSON. We publish. We go back over here and test it. Right. I put constant in there. No, that data. Oh, right. Not using Rust right now. I'm using ChatList Scripts. Let's check the end of input at app.js. Really? Oh, you know what? It's because it's text. It's not. Okay. Okay. I see the problem here. Okay. I'm pretty sure that's the problem. Okay. So that's not a body. I'll do something. Let's just do it in a JSON. Okay. So we're going to go here. We're going to publish again. Let's get ahead of it and put it. Okay, it shouldn't be a problem. Why is it a problem? Okay. Preview. Preview. I expected an input. Okay. Okay. Okay. Okay. Why is this going blank? Cool. Let's try refreshing this, see what it is, just an empty string, okay, we're going to do that. That doesn't quite work, awesome, all right, let's see what I do, okay, that was what I did, okay, console.login doesn't seem to work there, network, oh, probably because it's paused, so, oh, no, nothing there, all right. Okay, five minutes left, okay, so we're going to be working on this again next week. All this is on GitHub, so, yeah, we're going to keep working on this for the next few minutes, and then we'll be done for this week. Okay, I think I might have a problem with the wait here, maybe that's the problem. Okay, let's try this. Okay, it keeps saying body null, which is strange, what I'm going to do is I'm going to say I'm going to turn this off, this function. Okay, doesn't work. I expected an input again. Okay, so, we're going to stop here, because it's about two o'clock. Yeah, what we've done so far today is got an IoT dashboard starting to run, we're going to create a chart next time, we have pulled in the data, but something's going on with the actual data, and it's not coming through, so, it's going through on the network tab, it's not coming through on the console.logs and things. So, we're going to have to figure that out. I'm sure it's a JavaScript synchronicity issue. Other than that, we'll be working more on this next time, and I'll be back next week, Monday at 11 a.m. Pacific, 1 p.m. Central, and also at the call center. Thanks so much, y'all.