DEV Community

Cover image for 🎬 Episode 2: Slash Commands and Conceptual Design
MEHMET ALI IZCI
MEHMET ALI IZCI

Posted on

🎬 Episode 2: Slash Commands and Conceptual Design

What's the Deal?

  1. Slash Commands: These quick commands are the express lane of Slack bots. Hold onto your hats!
  2. Your First Slash Command: We're making a slash command. You in?
  3. Coding Time: We'll toss in a casual "Hi" to get the ball rolling.

1. Slash Commands: The How and Why

Previously we've built a system where we listen for a particular message and respond with a cat picture. Lets delve into something slightly more practical.

Interacting with users on Slack can be a total carnival, and that's what makes this gig so fun. Sure, you could make some fancy interactive window asking for names and such, but let's keep it simple. I don't want to click through endless modals when you could do everything with a one-liner. The fewer clicks, the better.

So, we're rolling with slash commands.

  • Help, Please:
/tasky help
Enter fullscreen mode Exit fullscreen mode
  • Task Shenanigans:
/tasky create UniqueTaskName
/tasky remove UniqueTaskName
Enter fullscreen mode Exit fullscreen mode
  • Assignee Juggling:
/tasky add-assignee UniqueTaskName @user1 @user2
/tasky remove-assignee UniqueTaskName @user1 @user2
Enter fullscreen mode Exit fullscreen mode
  • Next Up:
/tasky next UniqueTaskName
Enter fullscreen mode Exit fullscreen mode

2. Your First Slash Command

Take a minute, head back to Slack's settings, and whip up a slash command for your bot. It's like making an omelette but with less mess.

Slash command

The Specs:

  • Command: Ours is gonna be /tasky.
  • Request URL: The same URL you already have up and running. https://kumbaya-my-lord-kumbaya.serveo.net/slack/events
  • Description: It's optional, but don't you want people to know your bot's purpose?

Configuration

Make sure to tick to 'escape the channels and users' to interpret channels and users properly.

Testing and Debugging

After reinstalling the app with the new settings, test the command /tasky.

error

If you see a timeout error, don't fret; it’s expected since we haven't set up the backend to handle this yet.

[ERROR]   An incoming event was not acknowledged within 3 seconds. Ensure that the ack() argument is called in a listener.
Enter fullscreen mode Exit fullscreen mode

Also in slack:

/tasky failed with the error "operation_timeout"
Enter fullscreen mode Exit fullscreen mode

3. Code Time

Now for the hands-on part. [Retrieve the codebase from].(https://github.com/mmehmetAliIzci/Tasky)

Checkout to particular commit via git checkout 924262c and cd step-2.

At this stage, we've created a new parseCommand function that helps translate the slash commands to actionable logic. Right now, it's limited to a simple replies.

At this point, if you would run the bot and try to interact, you will have something similar like this:

ugly response

We are one step closer but obviously this is quite ugly. To make the bot's replies more appealing, Slack provides a good guide to 'beautifying' your text output. You can go nuts. Check out slack block kit building.

Make it a beauty

I still want to keep things simple but also help the users. Thus I’ve did some alterations to the responses. They are all stored in blocks. You can find the latest version from here:

If you run this code it should look something like this:

beautey


So there you have it, folks. You're one episode closer to becoming the office Slack bot guru. Stay tuned.

Top comments (0)