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 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 we've got Pi code, Worker code, Worker code, and Worker code. And then we've got in here is Pi code, Worker code, Worker code, Worker code, and Worker code. And then we've got in here is Pi code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code, Worker code. 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 going to take a look at index.js here. Is it 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 gonna do is we're gonna run this, but first we're going to... I'm just making sure I have my... It is B. Okay. We're gonna copy this. And we're going to sudo node-index.js. All right, so then we're gonna go over to my browser here. I would have a new tab and... So right here, we've got is the temperatures 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. 617. 617, let's go back to the worker and see what's going on here. It says it's being added. I think I know what's going on here. Okay, so I think our slice for the worker is... I'm... Not working correctly. In here. And in there. Okay, so cd... This yellow, let me clear this out. There, so y'all can see. Okay. Oops, well, I can type. All right, there we go. So we're gonna run a worker code. And we're gonna go into show temp and we're going to open some code. Okay, close this. All right. Yeah, I think it's... Okay, so it's only slicing the first 50. And what we wanna 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. Refresh. It should start showing... Still only slicing from 617. Let's see what happens if we get rid of the slice. See if that works. Save this. Terminal, wrangler publish it. Okay. Now we'll go back to the browser and refresh. Okay. Okay, yeah. It's slicing off the 629s. We don't want it to. So we need to fix that. So it's the slice function that we need to work with. Let's try this. Now we're back to 617s. Okay. It shouldn't slice off the last ones. That's so strange. All right. We're gonna do some investigation. Okay. Oh, start and end. Okay. So what we wanna do is get rid of that end. We can still have the minus 50 here. Okay. Okay. Now we do wrangler publish again. And 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 three, so it's 150 seconds of data. So we should save that information. Oh, you know what? Stash. Oh, I know what's going on here. Because I was in a wrangler folder. And fix slicer. And, get poll original name. So 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, it's not set 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. I'm going to do it. And then open up my password on my desktop, get that password. Okay. Workers. This is the wrong account. I should take this one. Okay. Workers. It's not the one either, is it? All right, that's fine. Let me try one more. I'm 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 you've got all this. What we're going to do is go back to the documentation, which probably didn't make me long, actually. Cool. So now we're going to go to worker sites, start from scratch. Okay. Okay. Let's do tutorials. Actually, let's just do it that way. Yeah, let's just start from scratch here. So what we're going to do is we're going to go back to terminal, and we're going to go up. Well, actually, we're going to go into worker code, because we're going to create it in worker code. We are going to use 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. Type. Okay, so we've got our Wrangler version. Sweet. All right, so now we're going to say Wrangler generates sites IoT dashboard. Check on the chat, make sure there's no questions. No questions so far. Awesome. Okay. So, all right. Your account ID, there's an ID. Okay, so we'll need to go into IoT dashboard. We're going to open this up. Open code. Okay. Your site. Index.js. Needle that. So. Oh, it's public. That's what we're looking for. Okay, so we've got a public. And. Okay, I'm going to edit that off screen real quick. Come on. That is not what I wanted to do. So for the route, I'm going to say. IoT dashboard. Botanist. Save it. Here. Okay, we do workers dev Wrangler. Don't tell me it's up to true. Okay, so we don't need to define the route. Just in case this route. Don't need his own ID. Will be 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. Yes, do that. We are a little dashboard here. We're going to create a chart for the humidity and we're going to create a chart for the temperature. We do. Copy. Okay, so then we're going to go into our HTML. We're going to add this script in the body. Oh, it's wrapped in a script tag. So we're going to say. So see. The. That. And we'll leave the rest alone here now. Actually, we're going to create a. Script. Source. Straight up. And find my home. Create a new file in public. JS. And just have it run. I'm sure everything's where it should be. It will go to our console, our log or console rather, and we'll say Wrangler. Stall. Authenticate. Okay. Oh, I see. Got it. So we're going to do. Here. Authentication. We have authentication. So let's try that again. There we go. We should see. Should see. Hmm. Let's see it loading our scripts. Oh, you know, I think it didn't work. Okay. Okay. So I'm not coming up. It's just not working correctly. Yes. I'm going to actually make this a little smaller. I see what's going on here. Testing. No, you don't need that. All right. So we're going to change. Our. Index HTML. You create an IOT dashboard. Make sure this is going correctly. Okay. So that does work. Awesome. We need to figure out why the JavaScript isn't loading. Here in a second. So we'll do for now. Is underneath IOT dashboard. We're going to create a canvas. With. 400. Eight. 100. Give it. And actually we're going to create. Maybe. All those. Address. That's a document. I get elements. ID. Graph. Inner HTML. Equals. It should listen. This is running. On. And now it's not showing anything, which might be this line, actually. Let's try deploying this and seeing what we get. This job is set to true. Maybe because I included a route. Dashboard inspect. Elements. It's got the canvas. Okay. One small. There are identified. 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. Back here. It's got high in there. 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. Okay. So this is how we get set up. We're going to. This. Get rid of this console. And we can say. Graph. And we're going to. Use. The bar. To keep it. Yes, six. Okay. Okay. First, we're going to populate it with bogus data, just to make sure this all works. 23 .3 point. One. Two. Check. Okay. Chart is not defined. Okay. Right. The chart comes from. Alright, so we're going to go to sources. That's blank. Okay. So I think I copied the wrong. CDN. Index. This. Terminal. And go over to the browser. Okay. Okay, that's. Better. Okay. Alright, so now we've got that let's take a look at. Line chart. Right, what is data look at look like. Okay, so it needs an X and a Y. Okay. My best piece is domain. Had to move him. Right. Okay. Let's add some extra data in here. Are these close bracket now. Like it. Here. Awesome. All right. Publish it. Publish it. Here. Function. Okay. Okay. Change all these as well. Paper to finish. Really doesn't like this. Because they're all the same. Let's see what it does with just one data point. Okay. Just an empty data. My first time which are just and I did a little bit of practice where there's for the research I decided to fly by live here. Okay. Files. Super not helpful. Okay, no, let's try getting the data in there and then we'll worry more about the chart. So let's do We're going to say let's do the Let's do Wait. Publish. Here. Oh, right. Okay. It is anything function. Okay. Is an old version of Yes, there it goes. Okay. Okay. Access to Walk by course policy. Okay. The rate Showtime. That's why. Okay. Here. I don't have an extra period hanging there. Okay. Here. No. No cores, but it's a get request. So the request mode to no cores to fetch your question. Okay. Okay, I see. Alright, so here. Good. Wars. No. No. You. Right. Okay. No, it's using it. Okay. But I did that. Mode, of course. Okay. We see now. Okay. Here. Okay, cool. Response. Okay. Okay, I did to do it. Awesome. Awesome. Awesome. Awesome. Alright, cool. So we got the data here. Yeah. Data. To Yes, that's a method. Only workers documentation went away somewhere. Okay. Jason. Jason. We publish. Here, you test it. Right. No, but they are right. Not using rest right now. I'm using chat with script. Let's check it in and put up. Yes. Really. Oh, you know what, because it's text. It's not. Okay. Okay. I see the problem here. You should have some problem. Okay. Okay. It's my body. I'll do something. Just do something. Okay. Publish again. And input. It shouldn't be a problem. Why is it a problem on preview. Okay. Okay. Let's put the end of input. Hey. Okay. Why this blank. Cool. Okay. So what it is just an empty string. Okay, we're gonna go here. Rush console. Okay. Some writing some debugging statements here. Okay. That doesn't quite work. Awesome. All right. Thank you. Okay, that was what I already did. From us. Okay, console.login to work there. Network. Oh, probably because it's paused. Oh, no, nothing. Nothing there. Let's check the docs here. Okay. So we're gonna be working on this again next week. All this is on GitHub. So, yeah. We're gonna keep working on this the next few minutes. And then we'll be done. For this week. That's JSON. Okay. Okay. Okay, I think I might have a problem with the weight here. Maybe that's the problem. Okay. Let's try this. Okay. It keeps saying body no. Which is strange. What I'm gonna do is... I'm gonna say... I'm gonna turn this off. Okay. Okay. I expected an input again. Okay. So, we're gonna stop here because it's about 2 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 gonna 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 conference. Thanks so much, y'all. Thank you. Thank you.