Giphy and GitHub

README.md

Goals:

1. Learn how to set up Probot to create a GitHub App boilerplate
2. Learn what a GitHub Event is.
3. Learn how to tell Probot to react to Events by calling external APIs

Let's begin with a warmup. Imagine that we want to greet new visitors to our open source project, by sending them a gif when they open a new issue.

Part 1: Hello World

Begin by making a sandbox repository, to keep everything nice and contained. https://github.com/new

Next, we begin by remixing an existing app boilerplate on Glitch: https://glitch.com/edit/#!/remix/donbot

Follow the instructions in the Glitch app to get everything set up. Don’t forget to upload an avatar, or it uses yours and it might be confusing.

Can’t find the App dashboard? It’s here: https://github.com/settings/apps

Once you’re done, try creating an issue in your sandbox repository. Did you get a response that reads “Hello world!”? Awesome! If not, raise your hand, and someone will come by to help you troubleshoot.

Test it

Create a new issue!

Did the app respond? Yay! Otherwise, let's troubleshoot!

Part 2: Add Giphy to the mix

Let's welcome newcomers to our repo by sharing a GIF whenever someone opens a new issue. We're going to essentially replace "Hello World" with something more fun

1. Create an account https://developers.giphy.com/dashboard/

2. Create a new Giphy App, and snag the API key

3. add GIPHY_KEY=giphyapikey to .env

4. Add "giphy-js-sdk-core": "^1.0.6" to package.json DO THIS MANUALLY because for whatever reason the package selector in Glitch returns a package version that doesn't exist

5. Add the following to the top of index.js

const GphApiClient = require('giphy-js-sdk-core')

const giphy_client = GphApiClient(process.env.GIPHY_KEY)

6. in the issues.opened block add a call to the Giphy API, and a template for auto-responding, in place of the current code that send a "hello world" message

giphy_client.random('gifs', {
                "q": "welcome",
                "rating": "g"
            })
            .then((response) => {

                const body = `
Howdy! Thanks for opening an issue!

![](${response.data.images.original.gif_url})
`

                const gph_params = context.issue({
                    body: body
                })

                // Post a comment on the issue
                context.github.issues.createComment(gph_params)
            })
            .catch((err) => {
                app.log('******giphy error******')
                app.log(err)
})

Test it

Open a new issue on your repository. See if you get an animated GIF back!

BREAK TIME!