Chatbot integration for Twitch and GitHub is almost ready • Pair programming

After the success of our last pair programming stream, Brian and I decided to live stream our learning again.

Before we jump into what we did this week, check out the previous article and Part 1 of our chatbot live stream.

00:59

Making a Twitch bot to connect to GitHub • Pair Programming

Michelle Duke for GitHub ・ Feb 8 '21

#twitch #opensource #github

Tidying up your GitHub repo before moving on

Since we had already been doing some work on this chatbot, we already had the repo from Bdougie. The first thing we need to check, is that we're up to date with any changes Bdougie has done. We noticed immediately that Bdougie's repo was ahead of the version I had. So we need to make sure we have the latest version, without compromising the changes I already made.

This is something I encountered on my own stream this week. Check out this short article on how to update your main branch.

00:42

Using the GitHub CLI to update your repo

Michelle Duke ・ Feb 26 '21

#tutorial #cli

Now onto the chatbot

Okay, now we have our repo up to date, it's time to start making some changes. Last time we already got the webhooks working. Now we want to do some more fancy backend and front end happening.

For the backend, you need to decide what you actually want to do/show on your Twitch stream. We wanted an alert on our stream whenever someone starred the repo. So we have to do that in the backend.

Ensure your webhook is listening for an starred event (watch Part 1 if you don't remember how to do this), and then make sure you change your code to output what you want. For ours we had $username starred $repo, like we knew they would. You can change this to say anything you want or listen to any event you like.

Remember you can make alerts for any event that your webhook can listen to

Watch the stream recording at the end of this article to see all the changes we made and follow with us.

Front end

Once you've got the backend working, you'll want to make the output look pretty. Ie. let's make the front end look amazing with some CSS. After playing around with our file for a while, we discovered there were a few things missing. Hence, the CSS wasn't being used in our output. Some quick changes made our CSS show. This is now fixed in the repo and you should be able to modify the file to suit your preferences.

Make sure everything is working nicely on your localhost and then add this browser source to your OBS. Now we need to deploy it. We will deploy the project on our next live stream. Keep an eye out for it.

Improvements

As with all things code, our product can always be improved. One of the suggestions our chat made is to move all the configurable information into its own file. This would mean streamers could easily use the default code we made. If you didn't want to touch the code itself you could easily add in the setup information such as your Twitch handle and away you go.

We could also change the code to listen to multiple events, and have multiple different outputs. Ie. different gif, audio, and more. Bdougie and I will probably do this on a final stream where we'll package the product and deploy it. Keep an eye on our Virtual Meetup Group for an announcement.

Rewatch this fun pair programming stream on YouTube:

You can also tune in and code with us on our GitHub Twitch channel. Join our Virtual Meetup Group to find out when the next session is running. You can also take part in our Community Forums to engage with others from the chat and see all the links posted during the live stream.