Nodebots / Hardware Updating a Remote Server with Device Data

[00:00:00]
>> Now, one thing that we've kind of been doing is we've all been, this is like a teasel on my local network. But I could be out about as I'm known to do and want to know what the weather in my basement is. Who amongst us has not had this situation?

[00:00:20] Is it just me? It's just me, okay. [LAUGH] Cool, so I could do some fancy routing to a device, and try to figure out how to make this device publicly available over the network. But again, we could also have a web server sitting somewhere in the cloud, if you will.

[00:00:41] And we could have this teasel send, right now we've been sending HT like sending issues for your request of the test like, give me a web page. But in the same way with WebSockets, we can also make POST request to a web server somewhere. Whether it's like in AWS or somewhere along those lines, we can have a web server, we can have this device, not necessarily running its own express server, but instead, simply getting the readings and making POST requests to a server that's, maybe, storing it in the database.

[00:01:07] Or maybe, just kind of keeping it in memory and allowing us to see it. So what we're gonna do is, I have a little web server ready to rock and roll. And we're just going to instead of sending WebSockets or console logging, what we'll do instead is have it send POST requests to that web server.

[00:01:24] And if you want this web server, you can have it as well. Has anyone ever played around with Glitch before? Glitch is one of my favorite projects. Glitch is a web UI and it allows you, if you hit like new project, it will give you a node server running in a container that you can effectively go ahead and edit in the browser.

[00:01:44] And every time you save or every time you make a change, it just redeploys your application. So you can just basically rapidly prototype the node server and you're good to go. The other really cool thing about Glitch is if somebody made an application that you need, so here's a with edit.

[00:02:00] You can go ahead. This one's called available-airbus. It's in the notes for this project, right, that generates a name for you. And normally I change it, but I actually really like this one I couldn't bring myself to do it. But you can see and go ahead, and change whatever you want and just like literally edit the code.

[00:02:21] And every time you make a change, it redeploys your web server. So this is available at available-airbus dot glitch dot me. And you, if you want it, you can actually just hit this Remix This button and you'll get a copy of this it's like forking. And all you need to do is login with GitHub so you don't even need to make an account.

[00:02:38] You go in, you sign in with GitHub, you hit Remix This, you have a copy of this server. To preview it, this is it right now. It's basically just storing the temperature, relative humidity, and pressure in memory. So like a Heroku app that they get shut down every once in a while if they're not using it, not being used, so you see they're currently blank.

[00:03:00] But I can simply send a POST request to the server and I will kind of see this. All right, this is available at available-airbus dot glitch dot me, so I can be out and about and I can get the temperature of my refrigerator or whatever. You gotta make sure the ice cream is not melting.

[00:03:16] You're out, it's a warm day out, you need some ice cream. You wanna make sure it's the proper temperature, so now you can check it on your phone, cool. And we're not gonna play with the sort of moisture sensors there, but you can hook up all these things.

[00:03:28] You basically have all sorts of information about your house being sent out, stuff like that, which is really cool. So we'll go ahead. I'm just gonna play with this in the playground, because that's mostly set up without a server. I don't need a server at this point, I just need to run the code, right?

[00:03:44] So before we were updating those graphs, how about instead, we just have it send a request every time, cool? So what I'll do is, another library that happen to have the packet JSON is a super agent which allows me to send HTTP request. Another library you could use is request, actually those, whatever your favorite HTTP library is.

[00:04:09] If you just wanna use the built-in node HTTP, that all works. I just happened to pick this one. There's not reason that you have to use this one in particular. So let's say const request equal require {"superagent"), cool. Now, I keep those graphs going, it's fine. We'll I actually say, request and we'll send a POST request.

[00:04:37] And OST request, a POST request to, if I go back to Glitch, I can look inside of the server JS. And you can see, I made a current weather endpoint. Cool, so we'll go ahead and say, let me just be really lazy and copy and paste that. Post that current weather.

[00:05:09] All right, neat. We'll, Send the temperature, pressure and relative humidity. And we'll accept JSON. I don't think my server sends anything. I think it might send something back, but in the header, cool. Now, in the request, notice we'll either get an error or a response. And we'll say, if error
>> Steve Kinney: Return console.error(error).

[00:06:03] So if there's an error, show me in the console. Otherwise, tell me everything went good. Show the data. All right, here's hoping.
>> Speaker 2: Error and error have to be the same?
>> Steve Kinney: Yep. Thank you. [LAUGH] You saved us all at least 60 seconds. [LAUGH]
>> Steve Kinney: And the major point here is that, again, like you start thinking about all the things that you can do with just JavaScript as a whole and then you start bringing in this hardware stuff, right?

[00:06:55] It's not just about, again, I am never going to speak ill of the glory that is turning on an LED into it, right? But the idea is, as you start to string together third-party API's, one of the things we talked about a little bit during the break was, in my home, I have hue bulbs.

[00:07:12] There's a node library for controlling hue bulbs and you can change the color with an API call. Now, you could literally have hardware that you could have a photo resistor which senses light, and have it very gradually adjust to your light based on the light in the room, right?

[00:07:26] You start to pull in some of these hardware and some of these sensors and then do stuff that you could do with code and kind of that overlap, becomes incredibly powerful. All right, the REPL is initialized and hopefully my handle change is happening. I ran the wrong one, I'm sorry.

[00:07:44] This isn't playground now. So there's like two vectors where you can start to come up with new projects. There is a kind of overlap of the different web technologies like third party APIs, running your own web server, sending POST request to another web server, WebSockets, right? And then, there is the kind of combining some of the different hardware components, right?

[00:08:07] So there's the ability to kind of like, okay, what happens if I do the photo resistor plus a weather sensor? No. As they say, the third time is a charm.
>> Speaker 2: I was surprised I caught the error, but not that one.
>> Steve Kinney: Yeah. [LAUGH]
>> Speaker 3: What's your most favorite thing that you've made combining all this together?

[00:08:36]
>> Steve Kinney: So one of my favorites is, as I was saying before like, taking a bunch of buttons and knobs and playing with the web audio APIs. So the way it worked is, when you press a button or turned a knob, you could turn the knob for the different node that you wanted and have a bunch of buttons and it would actually send WebSocket request that would trigger the web audio API.

[00:08:54] My plan for the next version of that is to create, just get a glove and put the button switches sewn into the glove. So I figured out, if you could press your fingers together in different orders until like make different nodes, I think would be really fun. So there's my giant response object, which shows that it is likely working.

[00:09:15] So I can go here, and now this is a real live web server. For those of you in the room, you could effectively go to available-airbus dot glitch dot me and you could, rather than the temperature sensor right in front of you, you could get the reading for the temperature sensor over here.

[00:09:34] [LAUGH] That's a thing that you could do. Those of you watching the live stream, I guess you can figure out exactly, if you haven't actually been watching the data on the screen, you could also get a real-time view into what the weather is in this room. I'll give you a hint, as I put my finger on the sensor, it's about to change.

[00:09:55] I'm not using WebSockets, in this case, I'm sending POST requests, so this is my other hand right now is hitting Command + R repeatedly. [LAUGH] But yeah, so now I'm sending a POST request to a server. This is a regular, old web server that happens to have a very physical presence as well, which I think is pretty cool.