Create your first GitHub Bot with Probot

#showdev #github #beginners #javascript

Ever wondered what if GitHub could do this or that..... 🥺.

Well let me just stop you right there, most features can actually be added via Github Apps, which extend GitHub and can be installed directly on organizations and user accounts and granted access to specific repositories.

You might already have heard of some popular GitHub apps ImgBot, Stale, ReminderBot. After reading this article (and some practice), you will be able to create your own.

We are going to develop a GitHub bot app 🤖 using Probot.
What is Probot?

Probot is a framework for building GitHub Apps in Node.js. It takes care of receiving and validating webhooks. We can watch for changes in the GitHub state and trigger an action in response.

A Probot app is just a Node.js module that exports a function:

//index.js
module.exports = robot => {
  // robot is an Express App
  // our code here
}

The robot parameter is an instance of Application and gives us access to all of the GitHub power💥.

module.exports = robot => {
  robot.on('issues.opened', async context => {
    // A new issue was opened, what should we do with it?
  })
}

The robot.on will listen for any webhook events triggered by GitHub, which will notify us 🙄 when anything interesting happens on GitHub that our app wants to know about.

Developing the Bot

To develop a Probot app, we will first need a recent version of Node.js installed. If it is installed and is at least 8.3.0 or later then it's fine, otherwise, install the latest version here.

Generating the Bot

create-probot-app is the best way to start building a new app with everything we need to get started and run our app in production. For now, we run the command in our terminal:

npx create-probot-app my-first-github-app

This will ask a series of questions about our app, which should look something like this:

Let's create a Probot app!
? App name: my-first-github-app
? Description of app: A GitHub Bot built with Probot.
? Author's full name: Kakashi Hatake
? Author's email address: kakashi@uchiha.com
? GitHub user or org name: Kakashi.hatake
? Repository name: my-first-github-app
? Which template would you like to use? (Use arrow keys)
❯ basic-js
  basic-ts (use this one for TypeScript support)
  checks-js
  git-data-js
  deploy-js
Finished scaffolding files!

Installing dependencies. This may take a few minutes...

Successfully created my-first-github-app.

Begin using your app with:
  cd my-first-github-app
  npm start

View your app's README for more usage instructions.

Visit the Probot docs:
  https://probot.github.io/docs/

Get help from the community:
  https://probot.github.io/community/

Enjoy building your Probot app!

The most important files created are index.js, which is where the code for your app will go, and package.json.

Scripting the Bot

Let's code a bot that will track if a new issue is opened, and will comment on a simple greeting message to that user. Now, issues.opened is the trigger which will be triggered when any new issue is opened, and on which we will extract the body of the issue and create a comment to be posted below.
After writing the comment we will publish it using createComment function. The createComment function will add a new comment just below the issue's body.

module.exports = (robot) => {
  robot.on("issues.opened", async (context) => {
    const { body } = context.payload.issue;

    // create a comment
    const comment = context.issue({
      body: body.includes("Thanks") ? "You are Welcome!" : "Thanks!",
    });
    // publish it
    return context.github.issues.createComment(comment);
  });
};

Running the Bot locally

Now we're ready to run the app on our local machine. Run npm run dev to start the server:

Note: If you're building a TypeScript app, be sure to run npm run build first!

The dev script will start our app using nodemon, which will watch for any files changes in our local development environment and automatically restart the server.

Now, visit localhost:3000, we should see something like this

Register the Bot

Let's put the bot into action⚡. Go ahead and click the Register a GitHub App button. Next, we'll get to decide on an app name. After registering our GitHub App, we'll be redirected to a page where we can install the app on any of our repositories. Try installing it on any repository.

Go to that repository and create an issue,

In the instance that we receive a comment from our bot, it might look like:

There you go! You just built your first GitHub bot with probot.🙃

Similarly, you can create bots like reminder bot which will review every comment, and the one with special characters, such as //, will be added to a reminder list, might be a DB table.

After all, this is an express app you can write your own webhooks and APIs in any manner you want.

Here's the link for GitHub Repo.

Tell me about your favorite bots in the comments.

😄 Have a wonderful day!