shrug bot in action

This post will cover the story about how this project came to be, as well as the source code and details for how to build your own. No worries if you want to skip the former and go straight to the code.

The backstory

Two weeks ago or so, I was sitting in Boston Logan Airport waiting for my flight to Las Vegas to meetup for my good friend's 30th birthday party. Unfortunately, the Bomb Cyclone snow storm struck the day before, and my chances of getting out were pretty slim. On my fourth IPA at the Cisco Brewery in my terminal, I get that dreaded push notification on my phone. Your flight has been cancelled.

All I could do was ¯\_(ツ)_/¯

As if by almost a miraculous miracle, my co-worker and friend Wes sent me the following slack message linking me to this neon sign. wes convinces me to buy a neon sign instantly

To which I instantly purchased and sent her my confirmation receipt. I vowed to do something cool with it.

Fast forward to this weekend; I stumbled on Jenn Schiffer's Slackbot tutorial on Glitch. At this moment, it hit me, I could hijack the /shrug command on Slack and have it control my recent vagrant purchase.

Get to the codez

The project comes to life in three parts (which seems like overkill for something so silly, but stick with me here):

  1. A smart plug of some kind (I used a WeMo mini-smart plug)
  2. An IFTTT (If this, then that) webhook to trigger the On/Off of the smart plug)
  3. The Slackbot to listen for the incoming call and send a request to the webhook

1. Smart Plug

I concede that there are other ways to pull this off, but this was the easiest way for me to get up and running.

2. IFTTT WebHook

Webhooks within the IFTTT platform are fairly new. They're also only available privately, so sharing them becomes a little complicated. They are however, easy enough to build yourself.

  1. Visit the New Applet screen https://platform.ifttt.com/maker/{yourIFTTTusername}/applets/new. Select Webhook, receive a web request, and add in "shrug" as the field label and default value. new applet screen within IFTTT
  2. Skip the filter code. We don't need that noise.
  3. Setup a "Then" Action. Search for WeMo smart plug and the action to "Toggle on/off". Ignore the label, we can't change any of that. set up new action

Go ahead and give your Webhook a title and a description and hit "Save".

  1. On the next page, scroll down to the "Display Preview" and Click on your new Applet card. This will let you install the Applet on your IFTTT account.
  2. Go ahead and turn it on, and finish setting it up to select your WeMo plug that your device you want to toggle in to.
  3. Let's get your actual Webhook URL now that we'll use in the next Slackbot step. Go ahead and visit https://ifttt.com/services/maker_webhooks/settings. You should see your webhook URL. Go ahead and visit that URL (but don't share it out! Otherwise other people will be able to ping your device).
  4. On this page, enter in "shrug" as your default value for the web hook event. Copy the full URL it uses down below in the curl and save it for later. Save your webhook

3. Set up your Slackbot

This is without a doubt the funnest part of this whole exercise (except for when your team spam sends /shrugs to general).

oh shrug bot. you spam me

  1. Remix Jenn's Parrot Slackbot on Glitch: https://glitch.com/~slack-parrot
  2. Follow all of the documentation that she has filled out in setup.md. This will get your Node app hooked up to Slack with all the neccessary permissions.
  3. Here's where we start to hack her app a bit. You can check out my source code below, but essentially what we want to do is remove her parrot logic, and add in an http.get request to our Webhook that we completed earlier. Around line ~25 is where we start to add in our own code:
  // 2. Create our message
const messageText = '¯\\_(ツ)_/¯'; // notice the escaped right shoulder. very swanky.

// 3. generate the postmessage object - you probably don't want to edit this, but you can 
// read these docs to see what else you can send: https://api.slack.com/methods/chat.postMessage :)
const message = {
token: value,
channel: payload.event.channel,
text: messageText,
}

// 4. check to see if someone said /shrug
const string = payload.event.text,
  substring = "ツ)_/¯";
string.includes(substring);

// 4. send the postmessage object - UNLESS the message came from a bot!
if ( !payload.event.bot_id ) {
if( string.includes(substring) ) { // if the incoming message contains the shrug
   shrugBot.send('chat.postMessage', message).then(res => {
     request.post('https://maker.ifttt.com/trigger/shrug/with/key/xxxx', function (error, response, body) { // send the initial request to turn the light on
       setTimeout(function(){
         request.post('https://maker.ifttt.com/trigger/shrug/with/key/xxxx');
         console.log('Shrug done!', res.data);
       },10000); // send another request to turn the light off
     });
  }, error => {
    // on failure
    console.log('An error occurred when parroting message: ' + error);
  });
}
} else {
// don't parrot a bot or it may parrot itself into infinity and beyond!
console.log('last message was from a bot :)');
}

request.post('https://maker.ifttt.com/trigger/shrug/with/key/xxxx'); Is the true MVP of the story. Our Shrugbot slackbot pings this endpoint, using the IFTTT webhook to turn our WeMo on and off.

Conclusion

So I realize that this is a totally asinine exercise in Internet-of-Things (IOT), however it was a fun idea that certainly got the creative juices flowing. I learned how to manipulate IFTTT hooks to do my bidding, learned how to make a Slackbot, and got a cool gimmicky sign out of the process. What's not to love ¯\_(ツ)_/¯?

Really though, this has ignited some real-world potential opportunities with my team. What if we setup a similar lighting scheme for our integration build processes? What if we set this up to glow a green light whenever one of client's KPIs surpasses expectations? What a fun way to bring some character and charm into what we do every day.

I for one, welcome our Shrugbot overlords.