Adding 😺 cats to Slack

A cat app to brighten your day with /catme. Using Slack, thecatapi, a tiny bit of JS, and Google Firebase Functions

Welcome to the first post from fungineering! Basically I like to create and I like to build stupidly fun things; hence the name “fun-gineering”.

*Disclaimer* I’m quite crass and don’t care for sticking to ‘polite’ language so if that offends you feel free to quit reading now 🙂

Cool now that we’re done with the intro and politeness we can be fucking real my friends. Today I’m going to walk you through the build and adding of an (cat) app to your slack workspace - inspired by my own cat TC (which stands for Tiny Cunt, named by one of my dear friends and favourite Australians). Adding customized apps into your workspace is really straightword and can save a ton of time through low level basic automation and simplification of recurring behavior. Things like:

• Checking to see if a server is still responding, if not notify me immediately

• Sending out a weekly reminder for 15 minute code review sessions to colleagues

• Fetching a random cat photo and an incredibly stupid accompanying pun

etc. the possibilities go on and on. You can even easily set up the app for public distribution and have it featured in Slack’s ever-growing app store. If you’d like to see the end result for the app - this button👇 will link you to its landing page.

The Slack App we’ll make is set up with the following steps

1. Have a lightweight Firebase backend to expose a single URL endpoint I can hit

2. Code that’s run for that endpoint will fetch a single cat photo + terrible cat pun and format to return in as a JSON, structured to match Slack Block structure

3. A Slack App living in my workspace that responds to a Slash Command like /catme to invoke the new endpoint and post our cat photo + pun into channels

Let’s dive into the fun.

Step 1) Create a Google Firebase Project to make a URL endpoint.

Don’t worry it’s free https://console.firebase.google.com/. Click add (+) a new project and give your project a name. You can connect the project to an existing Google Cloud project but it’s not necessary. Adding Google Analytics is optional and not needed for this. When you’re on the Firebase Console home, head over to the Functions section and click to “upgrade project” if prompted - you will need to enable billing for functions to work. Don’t worry, you won’t be charged unless you exceed 2M/month calls to the cat bot. Even then it’s $.40 per 1M additional calls so… worth it. Feel free to even set up a budget alert so you can be notified when your bill is approaching $1.

Long story short: Google Functions allow you to set up an endpoint and interact with a backend. They’re “serverless” so you don’t worry about anything (DNS configs, scaling, HTTPS, ect. fun backend shit) other than what the endpoint actually does.

Now some code

Step 2) Create a Google Firebase Functions repo to build an endpoint.

Using npm or yarn, set up a working folder (I like yarn more and so do cats 😻 but Google’s example gives npm).

$ mkdir slack-app-backend
$ cd slack-app-backend
$ npm install -g firebase-tools
$ firebase init

Select the Functions option using arrow keys and <space bar>. Next use the existing project option as we just set up the Firebase Project and configured online. Next option, I prefer Javascript over Typescript but it’s your choice. A ‘no’ or ‘yes’ option to setting up ESLint to catch bugs and enforce style - I chose ‘no’ as it causes me more headache than it’s worth, and last ‘yes’ to install dependencies. All done and set up! If you fuck up, delete the directory you made and start over.

Otherwise you should now have a firebase.json file and functions/ folder - open the index.js file that lives in the functions/ folder with your favorite IDE (I prefer Webstorm). You’ll see an example helloWorld function - uncomment this as a good template and example to try if you’re new to Firebase Functions. To see the helloWorld function in action - after uncommenting run the command

$ firebase deploy

from inside the functions/ directory (ie same level as the index.js file). To see the new GET endpoint you’ve created, pop back over to https://console.firebase.google.com/u/0/project/ and click into your project and then Functions; you’ll see the helloWorld endpoint listed when the deploy command finishes. If you copy + paste that into your browser you’ll see the result of the function - saying “Hello from Firebase”.

Now deploying before testing is never a good idea. So to start test the endpoint locally you’ll need to run

$ firebase emulators:start

and head to the URL http://localhost:4000/functions (your ports might be slightly different). You can open up your favorite API client like Insomnia (mine) or Postman and send a GET request to the URL http://localhost:5001/<<your-firebase-project-name>>/<<server-location>>/helloWorld for example my URL is http://localhost:5001/catme-f243a/us-central1/helloWorld.

To make the magic work and serve cat images, change the helloWorld function to whatever name you’d like as the endpoint and we’ll need to use JS fetch to GET thecatapi, structure the data, then forward everything to return in our URL endpoint. When done building your function, use the emulator and copy + paste the local dev endpoint into your browser - you should see an image url from thecatapi being returned. Code images below, terrible cat pun function not included (source code file on Github). Full structure for the format Slack needs is listed on their Block Kit page.

When you’re done the code for the function, it’s tested, and it’s working - don’t forget to deploy! You’ll need the endpoint for the last step. Just run the firebase deploy command.

Step 3) Creating a Slack App local to your workspace.

Go to https://api.slack.com/apps?new_app=1. Enter a name and add to workspace - some workspaces have app restrictions so you may need to set up a dummy space or your own personal workspace. You should now be on the “Basic Information” page where you can set up the permissions, customize the look and feel of the bot, and add any extra functionality (See further expansion at the end)¹. For this example, you’ll need to add a Slash Command so click that choice and create the new command with whatever syntax you want, a short description, and the request URL endpoint that we created in Step 1.

Next, install the app into your workspace. When installed you should be able to open the Slack client and type your new Slash Command!

---

If you are interested in sharing your slack app with other workspaces, you’ll need to go through the `V2 OAuth2.0` flow that slack has laid out. Yes. It’s really called the V2 OAuth2.0 flow. You’ll also need to make sure the distribution is set up correctly.

If you’d like to add this lovely lil cat app to slack - here’s the website where it lives. Side note, I love free shit. So in the future expect me to gush more about Firebase, Heroku, etc. technologies that are FREE and give you a fuck ton of AMAZING capabilities when starting out or even integrating with something that already exists (👀👀 looking at you Segment, Branch, Amplitude, Mixpanel, Mailchimp, Expo, Sentry, fullstory, Asana, Google Analytics).

If you aren’t a big fan of cats don’t worry only a few posts will be cat-themed. I’m not cat crazy I just have one because I’m not wealthy, responsible, and/or free enough to take care of a dog so I got the next best thing. Also fuck you - (most) cats are great.

Full Cat App Firebase Function repo: https://github.com/travis-white-6/CatMe

CatMe Heroku landing page: https://github.com/travis-white-6/catme-web

1. Further functionality for Slack Apps. There are a ton of possibilities that you can see if you’ve ever tried Apps like the Google Drive app, Asana app, Trello app, and many many more. The Slackbot will even ping you to add apps if a link posted in a channel has a recommended app. The interactivity that the Block Kit enables means that you can build simple interactions and mini-interfaces that respond to your backend.

One of the other great things about a Slack App - unlike Google and Apple which charge a developer fee to be on their App store, Slack is entirely free to host on.

For a full list of featured Slack Apps visit https://slack.com/apps/category/At0EFWTR6D-featured