<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Mayank Goyal</title>
    <description>The latest articles on Forem by Mayank Goyal (@kakashi).</description>
    <link>https://forem.com/kakashi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F276986%2F6126b9d3-5b58-41ac-9779-844612ecea7b.PNG</url>
      <title>Forem: Mayank Goyal</title>
      <link>https://forem.com/kakashi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kakashi"/>
    <language>en</language>
    <item>
      <title>Create your first GitHub Bot with Probot</title>
      <dc:creator>Mayank Goyal</dc:creator>
      <pubDate>Fri, 01 May 2020 14:12:09 +0000</pubDate>
      <link>https://forem.com/gh-campus-experts/create-your-first-github-bot-with-probot-e6o</link>
      <guid>https://forem.com/gh-campus-experts/create-your-first-github-bot-with-probot-e6o</guid>
      <description>&lt;p&gt;Ever wondered what if &lt;em&gt;GitHub&lt;/em&gt; could do this or that..... 🥺. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You might already have heard of some popular GitHub apps &lt;a href="https://imgbot.net/"&gt;ImgBot&lt;/a&gt;, &lt;a href="https://github.com/apps/stale"&gt;Stale&lt;/a&gt;, &lt;a href="https://github.com/apps/reminders"&gt;ReminderBot&lt;/a&gt;. After reading this article (and some practice), you will be able to create your own.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We are going to develop a GitHub bot app 🤖 using Probot. &lt;br&gt;
What is Probot?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://probot.github.io/"&gt;Probot&lt;/a&gt; is a framework for building GitHub Apps in Node.js. It takes care of receiving and validating &lt;em&gt;webhooks&lt;/em&gt;. We can watch for changes in the GitHub state and trigger an action in response. &lt;/p&gt;

&lt;p&gt;A Probot app is just a Node.js module that exports a function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//index.js&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;robot&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// robot is an Express App&lt;/span&gt;
  &lt;span class="c1"&gt;// our code here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The &lt;strong&gt;robot&lt;/strong&gt; parameter is an instance of Application and gives us access to all of the GitHub power💥.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;robot&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;robot&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;issues.opened&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// A new issue was opened, what should we do with it?&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The &lt;strong&gt;robot.on&lt;/strong&gt; will listen for any &lt;em&gt;webhook&lt;/em&gt; events triggered by GitHub, which will notify us 🙄 when anything interesting happens on GitHub that our app wants to know about.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developing the Bot
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://nodejs.org/"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Generating the Bot
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/probot/create-probot-app"&gt;create-probot-app&lt;/a&gt; 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:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npx&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;probot&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="nx"&gt;my&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;first&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;github&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;app&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This will ask a series of questions about our app, which should look something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Let&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;s create a Probot app!
? App name: my-first-github-app
? Description of app: A GitHub Bot built with Probot.
? Author&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt; &lt;span class="nx"&gt;full&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Kakashi&lt;/span&gt; &lt;span class="nx"&gt;Hatake&lt;/span&gt;
&lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;Author&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;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&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt; &lt;span class="nx"&gt;README&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nx"&gt;more&lt;/span&gt; &lt;span class="nx"&gt;usage&lt;/span&gt; &lt;span class="nx"&gt;instructions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;

&lt;span class="nx"&gt;Visit&lt;/span&gt; &lt;span class="nx"&gt;the&lt;/span&gt; &lt;span class="nx"&gt;Probot&lt;/span&gt; &lt;span class="nx"&gt;docs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
  &lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//probot.github.io/docs/&lt;/span&gt;

&lt;span class="nx"&gt;Get&lt;/span&gt; &lt;span class="nx"&gt;help&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="nx"&gt;the&lt;/span&gt; &lt;span class="nx"&gt;community&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
  &lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//probot.github.io/community/&lt;/span&gt;

&lt;span class="nx"&gt;Enjoy&lt;/span&gt; &lt;span class="nx"&gt;building&lt;/span&gt; &lt;span class="nx"&gt;your&lt;/span&gt; &lt;span class="nx"&gt;Probot&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The most important files created are index.js, which is where the code for your app will go, and package.json.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scripting the Bot
&lt;/h3&gt;

&lt;p&gt;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, &lt;em&gt;issues.opened&lt;/em&gt; 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. &lt;br&gt;
After writing the comment we will publish it using &lt;em&gt;createComment&lt;/em&gt; function. The &lt;em&gt;createComment&lt;/em&gt; function will add a new comment just below the issue's body.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;robot&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;robot&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;issues.opened&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;issue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// create a comment&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;comment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;issue&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Thanks&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;You are Welcome!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Thanks!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="c1"&gt;// publish it&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;github&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;issues&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createComment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;comment&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Running the Bot locally
&lt;/h3&gt;

&lt;p&gt;Now we're ready to run the app on our local machine. Run &lt;strong&gt;npm run dev&lt;/strong&gt; to start the server:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: If you're building a TypeScript app, be sure to run npm run build first!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The &lt;strong&gt;dev&lt;/strong&gt; script will start our app using nodemon, which will watch for any files changes in our local development environment and automatically restart the server.&lt;/p&gt;

&lt;p&gt;Now, visit localhost:3000, we should see something like this&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iNWnmGof--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/13410355/46052950-a19e2900-c10e-11e8-9e7e-0c803b8ca35c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iNWnmGof--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/13410355/46052950-a19e2900-c10e-11e8-9e7e-0c803b8ca35c.png" alt="Register GitHub App Button"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Register the Bot
&lt;/h3&gt;

&lt;p&gt;Let's put the bot into action⚡. Go ahead and click the &lt;strong&gt;Register a GitHub App&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;Go to that repository and create an issue, &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fSmXHXMr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://iiitkotabucket1.blob.core.windows.net/resources1/32380743903603193-Screenshot%2520%28117%29.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fSmXHXMr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://iiitkotabucket1.blob.core.windows.net/resources1/32380743903603193-Screenshot%2520%28117%29.png" alt="New Issue"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the instance that we receive a comment from our bot, it might look like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gfI8OTFS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://iiitkotabucket1.blob.core.windows.net/resources1/8433966657654839-Screenshot%2520%28118%29.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gfI8OTFS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://iiitkotabucket1.blob.core.windows.net/resources1/8433966657654839-Screenshot%2520%28118%29.png" alt="Bot-Comment"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There you go! You just built your first GitHub bot with probot.🙃&lt;/p&gt;

&lt;p&gt;Similarly, you can create bots like &lt;strong&gt;reminder bot&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;After all, this is an &lt;strong&gt;express&lt;/strong&gt; app you can write your own webhooks and APIs in any manner you want.&lt;/p&gt;

&lt;p&gt;Here's the link for &lt;a href="https://github.com/heromayank2/my-first-github-bot"&gt;GitHub Repo&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Tell me about your favorite bots in the comments.&lt;/p&gt;

&lt;p&gt;😄 Have a wonderful day!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>github</category>
      <category>beginners</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
