![Hardware with Arduino & JavaScript](https://static.frontendmasters.com/assets/courses/2023-09-26-arduino-javascript/thumb.webp)
Check out a free preview of the full Hardware with Arduino & JavaScript course
The "Displaying Messages from GitHub" Lesson is part of the full, Hardware with Arduino & JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Steve connects the Arduino with a GitHub webhook. An Express server is created, and ngrok is used to expose the server and the port to be called from the webhook when the repo is starred.
Transcript from the "Displaying Messages from GitHub" Lesson
[00:00:00]
>> So we've got a bit of read system information and expose it as well. That's cool, I guess. But there's some other things that we can do, which is again, we have the full power of Node.js, we have the full power of the web. The other interesting thing we can do is if we go into, if you don't have, and the README is install ngrok, if you don't have that installed, just do a brew install ngrok right now.
[00:00:26]
You might have to make an account, unclear, but we'll kinda walk through it a little bit as well, too. And so, what we can do is also theoretically, one of the examples I have here is just using it. You might wanna have a more robust setup than what I'm gonna do, but theoretically you could have it listen for webhooks from GitHub repos.
[00:00:49]
New PR or new star on the repo, you could have it display that information as well, right? And there's a bunch of options you can do there. And really, that's just exposing the Express server, setting the webhook link. You might choose to do something a little bit more robust, but we could try it out.
[00:01:04]
So let's actually pull that in. I'll do the same file just to keep life easy for us. And so what we can do in this case is, I'm just going to pull in some of that Express stuff that we used earlier, as well. And so let's go ahead and open all that up.
[00:01:28]
So what we'll do is we'll say that we want to pull in Express, import express from 'express'. They all spell express, right? I don't know. So pull in express, and then we'll say make an express app. And we'll say, we'll pull on port 3000. Or if you have an environment variable set to another port obviously that's all that code is doing.
[00:02:02]
If not, default to 3000 cuz that seems reasonable to me. And then just like we had in all the examples earlier, we'll just say, app.post, and I'm just gonna make an endpoint /api/update. And that will take a request and a response, as we've seen before. And we'll start out with just res.sendStatus.
[00:02:32]
Cuz we're gonna use an external service, so we wanna be able to say that everything is okay. Cool, and let's also console.log that. And see what we have in this case. So now we have the ability to have a webhook in this case. And what we'll do is I will comment out this code cuz we might need it later.
[00:03:01]
We'll say when that comes in. I don't remember exactly what the payload is, so we'll start with console logging it, but we'll start with the app. And just put that all in place. I don't really need a callback, we'll just say, console.log, Web Server is up and running!
[00:03:31]
All right, and we'll start that up. Let that web server start. And then I'm gonna go over to terminal. So we've got ngrok here, what we can bind it to, we'll do to HTTP and we're just gonna go to 3000. So I'll do ngrok http 3000 and, That's gonna forward from this domain over to my local web server.
[00:04:19]
And so I could theoretically do something like go onto GitHub, let's go into this repo right here. We'll do Settings, Just set up a webhook. And then all we wanna do is, and we said API, did I call it update, what did I call it? Update, update, we'll have it send some JSON.
[00:04:42]
I should secure it, eh, send everything. Looks like something came in, I didn't, req.body. I didn't set up that bodyParser. Good thing I did this on just a random thing at first. Cool, let's just steal that from one of the other ones. BodyParser. Pull that in. We want, import bodyParser for 'bodyparser'.
[00:05:21]
Let's kill that server and restart it. And let's go ahead and let's, I don't know, star the repo. Not that I'm looking for stars or anything like that.
>> I don't know if you had selected push everything. It looked like the box above it was-
>> We got, just send me everything.
[00:05:57]
Now it should send an, I didn't put the full endpoint in here. So that'll do it. Cool, I don't know that. All right, one more time with feeling. So yeah, we did send a post to 404. It didn't send anything when I updated it. So I'm gonna delete this one more time.
[00:06:26]
Cuz it sends an initial event for you to validate everything works, which is good because it helps me validate that everything works. And I'll just make sure that that's still the right address. Yep, looks like it is. Cool, cool, cool. Send me everything at that webhook, and I should see a brand new event in here.
[00:06:49]
There it is, we got everything. So now every time that something happens, I should get a full payload of everything that happened from GitHub. And then what I wanna do is I would like to forward that over to this LCD screen over there. So let's go ahead and I'm gonna star my own repo.
[00:07:11]
And so I should get, as you can see, all that data is coming in, maybe not the most easiest to read way possible. But we've got starred on what repository, it'll tell you everything from the name and everything along those lines. Well, that's the started one, not starred.
[00:07:25]
But yeah, you can clearly see that it was me that did the starring because I get all that information based on it. I've got other people starring it now. Wee, so cool. We can actually say that when these come in we can go, the repo was starred and who starred it, and something along those lines as well.
[00:07:43]
So if I grab this real quick, I can grab one of these. You get the full notification's URL, something along those lines. We know that we get an action in there, that was the webhook was created. But anything that kinda comes in we can play around with here.
[00:08:18]
I can totally play around with this all the way, but let's just do payload action, right? Cuz we know that comes in. So when something comes in, we'll go ahead and we're going to take the, lcd.clear. We'll print the payload.action. We should see whatever that is kind of come in and play around at the same time.
[00:08:53]
So I'm gonna kill this server, and we can now hook it up so it receives stuff. So it' like you can actually have a little red light go off when a new PR comes in that you should have code reviewed while you're doing something else. Whatever it is, any of those stuff, your Arduino can now get messages from the outside world and be able to show you any of these things along the way.
[00:09:13]
Cool, so that clears, and then I'm gonna go ahead and star and unstar, undefined. Well, I'm getting messages pushed, so that's kind of cool. Cuz it should be the payload, if you get the full payload. I'll grab one of these in a second. But the general idea here is that we've got stuff coming from the outside world that kind of comes in and we can display it on the screen, and we've got that full loop happening there.
[00:09:39]
All right, moment of truth, we've got just a message saying your repository was starred. We could do a bunch of stuff with the payload. The little problems with actually parsing it are slightly outside of this. So we're gonna post a star, so right now if we look at the LCD screen, it says waiting, the GitHub repository triggers a webhook.
[00:09:57]
It says your repository was starred.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops