Slack Neon Sign

Posted: Reading Time:
I Built My Own Slack-Powered ¯\_(ツ)_/¯ Neon Sign And You Can Too

The Backstory of this Slack Bot

Two weeks ago or so, I was sitting in Boston Logan Airport waiting for my flight to Las Vegas to meet up for my good friend's 30th birthday party. Unfortunately, the Bomb Cyclone snowstorm 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 canceled.

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.

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.

    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.

    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.

    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).

    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 necessary 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:

    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.

    Go to the Home Page

    Hey there,

    I’m a creative designer, developer, and leader obsessed with solving complex problems

    Check this Nerd Out!

    Go to the Resume Page

    Résumé

    Experience & Accolades

    Over ten years and going strong

    Go to the About Page

    About Me

    Bios & Photos

    A story to rival the Star Wars universe

    Go to the Professional Work Page

    Pro Work

    Case Studies

    Go to the Blog Page

    Writing

    Articles

    Latest:

    Go to the Contact Page

    Contact

    Social & Contact Form

    Slide into my DMs :)

    Go to the Non-Profit Work Page

    Non-Profit Work

    Case Studies

    Go to the Activity Page

    Activity

    Updates

    Latest:

    Go to the For-Fun Page

    For Fun

    Case Studies