I have a Bot for That

Life is More Fun with Memes

Memes have become popular ways for us to communicate over social media and chat apps. We often search for ways to convey a story, a feeling, or a message and memes are the perfect ways to help us do just that. With the popularity of bots, I thought it would be super fun to create a bot for my team so that everyone can create their own memes with custom text within Slack.

How I Developed It

To quickly get my bots up and running, I decided to use memegen as my data source for getting a list of popular memes to my users.

this.memeUrl = url.format({ pathname: 'http://memegen.link/templates' })
...

getAvailableMemes () {
    return new Promise((resolve, reject) => {
      if (this.availableMemes) {
        resolve(this.availableMemes)
      } else {
        return fetch(this.memeUrl)
          .then((response) => response.json())
          .then((json) => {
            this.availableMemes = json
            resolve(json)
          })
          .catch((error) => console.log({error}))
      }
    })
}

Then I created a Node.js app and added the Open Source Microsoft Bot framework SDK so that I can write my bot once but expose it across different platforms, like Slack and Skype. To interact with users, the bot interprets user inputs, such as commands like “memes” to list all the available memes to use.

// Handle incoming message
server.post('/v1/messages', verifyBotFramework(credentials), (req, res) => {
  var msg = req.body
  const [name] = req.body.text.split(';')

  if (name === 'memes') {
    // get list of memes
    return memes.returnAvailableMemes(req, msg, res)
  } else {
    // generate a meme
    return memes.returnMeme(req, res)
  }
})

Then users can generate their own meme by providing a meme name, some text for the top of the image, and some text for the bottom. Then the bot will return the generated meme in a format that looks good in Slack.

returnMeme (req, res) {
    return this.getAvailableMemes()
      .then((availableMemes) => {
        const [name, topText, bottomText] = req.body.text.split(';')
        let memeRequestUrl
        let message
        let link = null
        let reply
        
        for (var key in availableMemes) {
          if (key.toUpperCase() === name.toUpperCase()) {
            memeRequestUrl = `${availableMemes[key]}/${topText}/${bottomText}`
            break
          }
        }

        if (memeRequestUrl) {
          // We found a meme, let's respond to it
          return fetch(memeRequestUrl)
            .then((memeResponse) => memeResponse.json())
            .then((meme) => {
              let memeLink = meme.direct.visible
              console.log(memeLink)
              message = `${topText} ${bottomText}`
              link = memeLink

              reply = {
                'type': 'Message',
                'language': 'en',
                'text': '',
                'channelData':
                {
                  'xattachments': [
                    {
                      'title': message,
                      'title_link': '',
                      'text': '',
                      'fields': [
                        {
                          'title': '',
                          'value': '',
                          'short': false
                        }
                      ],

                      'image_url': link,
                      'thumb_url': link
                    }
                  ],
                  'unfurl_links': false,
                  'unfurl_media': false
                }
              }
              res.send(reply)
            })

Once I was done developing the bot, I published it out to Azure web app. Then I registered the bot on Bot Framework website where it helped me setup a bot user on Slack.

How Users Use It Today

In Slack, users can chat with the textmeme bot user by typing memes to get a list of available memes.

Then users can generate their own meme by picking one of the names from the list of available memes, some text for the top of the image, and some text for the bottom. For example:

doge; This BOT is; AWESOME

Here is a quick demo of the bot on Slack:

Demoing the meme bot in Slack

Also checkout the entire source code of the bot on GitHub.

Keep on coding!

Leave a Reply

Your email address will not be published. Required fields are marked *