Button with Web Server

[00:00:00]
>> So now I think it's time to bring in a web server. Cuz now it's cool to have this LED tell me if the button is pressed or not pressed, but rather Chrome tell me, right? And so there's another example in there that kinda gives us the basic setup and by navigating to folder called button with web server, which I think is a good name for what I seek to do at this point.

[00:00:24]
So I'm just going to navigate into there. And I've got a slightly different setup in there for us. All right, so let's talk a little bit about the code that's in here. It shouldn't be anything too fancy. We've got just the bare bones Express app. I use Express cuz I feel like that's possibly things people are most familiar with.

[00:00:52]
If you wanna use whatever, the heapster, HTTP server as of the day, or if you wanna go real artisanal and just pulling Node's, HTTP library, you can do that as well. I just chose to use Express. And so essentially use an Express app, but then we also set up Johnny-Five.

[00:01:10]
I'm setting repl to false simply because Express is gonna start up, and that's gonna take over most of the console and I don't want them fighting. I just wanna see the Express logs in this case. So this will not send you into the repl. And all I have right now is not a lot happening in here, right?

[00:01:32]
I have that button that I had wired up before, and we start up a server. What I wanna do is I wanna bridge the gap here. What I wanna do is when I go to a given endpoint, I should get a response back, is this button presently pressed or not pressed, right?

[00:01:47]
And yeah, so we're gonna build on it. There will be WebSockets. We will start pushing that information to the browser, but baby steps here. What we wanna do is just basically see, can we, cuz one, we theoretically could see whether the button is there, or we could theoretically go ahead and trigger the LED from the browser, right?

[00:02:09]
But let's start by just saying, is our button pressed, is our button not pressed at this moment? And then we'll kinda build on it from there. And so whatever endpoint you try to use is fine. I'm gonna do app.get request to just slash at this point. So we'll go ahead and we'll just have a get request.

[00:02:28]
And right now, no, wrong cursor, we'll say just res.send Hello World. Basically, make sure our server works, first and foremost, and then after that, then we'll get a little fancier with our lives, right? So it was just a quick little get endpoint. If you wanna make an API, do whatever you want.

[00:02:47]
In my case, we've got a slash. We're just gonna say Hello World, and we'll kinda build on it in a second. You can make an API or whatever. Cool, cool, cool, so I've got that. Let's fire up the server and take a look at what we've got. So we'll say node just index.js.

[00:03:05]
You can see it spins up Johnny-Five cuz the server doesn't start up until board's ready. And now my server is running on port 3000. I see Hello World. So I have a web server. That's cool, I guess. But now let's actually hook it up to the button. And whether or not a button is pressed, that's cool, but we've also got some sensors that we can play around with a little bit later to then have a web server which is like, tell me the current temperature.

[00:03:38]
Tell me the light in this room or something along those lines is pretty easy once we have some of these foundational concepts. All right, so one of the things we're probably gonna do is we do need to, as far as I know, and I'm pretty sure I checked, the LED, you can figure out if it's on or off.

[00:03:57]
The button, I think we've gotta set ourselves. So we'll say that the button is not pressed when the button is down. We'll say that isPressed is true. And when the button is up, We'll say that isPressed is false, right? Great, so same as down up, we have to return the LED on and off.

[00:04:27]
You can even steal that code from yourself if you want. We'll just change the boolean at this point. And then Hello World, or we could say, Yeah, I like that ternary, right? I'll say, Pressed, Or not pressed. Period. All right, so let's try that out and see what we've got.

[00:05:16]
Now I've gotta kill everything off again. So I should refresh, the button is not pressed, moment of truth, hold down button, the button is pressed. So I've now started to bridge the gap between browser to Node, Node to the Arduino, right? So we've got the foundational pieces here of what can hopefully begin to bridge these three things together.

[00:05:53]
Now, this is where it gets interesting, right? We've got a lot of options here. We can also go the other direction, right? We can send post requests to the server, which have access to Johnny-Five, right? That can then control stuff on the board, right? So we can have various, either other things in our house, our browser itself, send things to the board.

[00:06:13]
Or if there are other sensors in this packet, I think there's a temperature sensor, a light sensor, a tilt sensor, few other sensors. And when we talk about sensors a little bit, most sensors are super cheap. They're three bucks, right? And so this one didn't come with one of these soil moisture sensors, but you can see a world that one could theoretically either push a WebSocket, use something with something like this.

[00:06:40]
And I think these costs $4, right? The same concepts will apply to literally anything that we're doing. We're just gonna stick to the things in the kit for now.