DEV Community: MEHMET ALI IZCI

🎬 Episode 3: Designing Database & le communication

MEHMET ALI IZCI — Sat, 02 Sep 2023 11:53:05 +0000

Database Design: How to structure tasks and assignees.
Code me some Back end: Connect MongoDB with your Node.js app.
Code me some Front end: Update Slash Commands to manage tasks and assignees.

System Design and Connection Architecture

I've designed a simple schema to illustrate the project's flow:

User interacts with Slack interface then slack sends these interactions via events to our plugin via .../slack/events
Our slack plugin handles these events which we created in Episodes 1-2, allowing us to filter out invalid requests or events from Slack then sends POST requests to BE
BE, which exclusively handles the connection to the database. This modular design provides the flexibility to switch the any BE if needed and feeds data back to the slack plugin

Some side note here: You could bypass the BE and connect directly to the database through the middleware, but I prefer a cleaner architecture and want to encourage good design patterns. This approach does require exposing two servers, which means a bit more setup work.

Why MongoDB and Vercel?

I've chosen MongoDB and Vercel for this project because the solution we need is relatively simple, and I'm interested in learning more about these technologies. Feel free to choose any database that suits your needs, but be aware of the differences between NoSQL and SQL databases, as well as their pros and cons.

Mongo shenanigans

Create a MongoDB cluster using their free tier, which should suffice for this project. Follow the instructions here.
Obtain your MongoDB connection URL. It should resemble:

mongodb+srv://<username>:<password>@cluster0.b71kbmb.mongodb.net/?retryWrites=true&w=majority

Backend Code Walkthrough

Get the code from here

Go to step-3. Here you can see that we've added two new folders. plugin and be.

After cloning the repository, run yarn, adjust the env variables, and start the server. You should now have a localhost connected to a public MongoDB instance.

The backend follows classic architecture with Models, Controllers, Routes, and Services.

Models: Examine the Tasks model to understand our data structure. Initially, I thought of creating both Person and Tasks models, but later realized that storing user IDs in Tasks is sufficient.
Controllers: These contain various operations to ensure the system functions as intended. While not entirely foolproof, they include common error-handling measures to ensure proper usage. These methods perform basic CRUD operations on MongoDB.
Routes: Look into the routes exposed via Express in the BE.
Services: This section includes the connector for MongoDB and JSON validation for our collections.

Plugin Code Walkthrough

Navigate to the step-3/plugin directory to see the updated code.
You'll find a new env file for specifying the BE URL.
Multiple files in the /src/api directory segregate each call to the BE, making the architecture more modular.
In index.ts, you'll see the logic for making calls to our exposed BE and handling the responses.

Lets spin up our plugin and connect to Slack.

Run yarn and yarn start:dev.

In another terminal, forward your localhost to HTTPS with:

   ssh -o ServerAliveInterval=60 -R kumbaya-my-lord-kumbaya:80:localhost:3000 serveo.net

See what you build

Now its for the best part. Lets see what we built.

Task creation and adding new people to task:

Rest of the commands:

If you've made this far, know that this is my first time being at this side (creator) side.

If you think about doing the same, take a look at what i've found good and the bad about writing an educational content on my next episode :)

🎬 Episode 2: Slash Commands and Conceptual Design

MEHMET ALI IZCI — Sat, 02 Sep 2023 11:52:50 +0000

What's the Deal?

Slash Commands: These quick commands are the express lane of Slack bots. Hold onto your hats!
Your First Slash Command: We're making a slash command. You in?
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

Task Shenanigans:

/tasky create UniqueTaskName
/tasky remove UniqueTaskName

Assignee Juggling:

/tasky add-assignee UniqueTaskName @user1 @user2
/tasky remove-assignee UniqueTaskName @user1 @user2

Next Up:

/tasky next UniqueTaskName

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.

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?

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.

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.

Also in slack:

/tasky failed with the error "operation_timeout"

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:

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:

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

🎬 Episode 1: Slack Bot & Server Setup

MEHMET ALI IZCI — Sat, 02 Sep 2023 11:52:36 +0000

What You're In For

Bot Creation & Permissions: Quick stroll through Slack's settings. We'll be in and out like a fiddler's elbow.
Bare Minimum Server: A light server to make Slack and your bot play nice.
Event Subscriptions: Mandatory.
Test Drive: Invite the bot, chat a bit.

Step 1: Bot Creation & Permissions

Creating a bot in Slack isn't a trust fall; it's more like a firm handshake. Here's how to do it:

Workspace & App: Create a Slack workspace, if you don't have one. Then, fashion your app via Slack Apps.
Keys & Secrets: Every good spy movie has a secret code. In this saga, it's called the "Signing Secret". Remember it.
OAuth & Permissions: Head over there in your Slack settings. Add some scopes like app_mentions:read, channels:read, and chat:write. These scopes give your bot some social skills.
Install & Token: Finally, install your app to the workspace to snag that OAuth token.

Step 2: Bare Minimum Server

Our server's not going to solve world hunger, but it'll do its job. Get the starter code from here.

Yarn Install: Fire up your terminal and let yarn do its magic.
Environment: In the .env file, place those two secret tokens from earlier.
Run Server: A simple yarn start:dev will bring your server to life.

SSH your way into reality with this:

ssh -o ServerAliveInterval=60 -R kumbaya-my-lord-kumbaya:80:localhost:8888 serveo.net

Voila, https://kumbaya-my-lord-kumbaya.serveo.net is your server's alter ego.

Step 3: Event Subscriptions

Back to Slack settings. Enable "Event Subscriptions" and paste this URL: https://kumbaya-my-lord-kumbaya.serveo.net/slack/events. Then, subscribe to message.channels.

Take It for a Spin

Invite your new bot to a Slack channel. Type "gimmeCat", and your bot becomes your personal feline photographer. Just don't expect it to feed the cat for you.

And that's Episode 1. More thrilling than a cup of decaf, wouldn't you agree? Stay tuned.

Feel free to copy, paste, and bask in your newfound bot glory. 🤖

Cook me a Slack bot

MEHMET ALI IZCI — Sat, 02 Sep 2023 11:51:57 +0000

Build a Round-Table Task Manager Slack Bot 🤖

Ever been tired of wasting time deciding who will be sharing their screen this time on a standup ? Are you sad because you are always the one who does all the dirty work ? Well, today's your lucky day! We're building a Slack bot to manage unwanted task using round-table. 🔄

Aint got no time for reading tutorial ?

Here is the repository. Go nuts.

📚 What's Inside?

Episode 1: Set up your Slack Bot and a Node.js TypeScript server.
Episode 2: Learn about Slash Commands and think up cool features.
Episode 3: Get nerdy with MongoDB and design a database and communicate with the bot.
Episode 4: Deploy it for world domination! 🌍

🎬 Episode 1: Setting up the Slack Bot and Node.js TypeScript Server

Introduction: Slack bots. Node.js. TypeScript. It's not sci-fi; it's your workspace in a few minutes.
Bot Configuration: Quick stroll through Slack's settings. We'll be in and out like a fiddler's elbow.
Server, but Make it Minimal: A light server to make Slack and your bot play nice.
Test Drive: Invite the bot, chat a bit.

🎬 Episode 2: Slash Command and Conceptual Design

Slash Commands: What are these? Why use them?
Your First Slash Command: Create a Slash Command for your bot.
Design Ideas: What should the bot do? Manage tasks? Assign people? 🤷‍♀️
Coding Time: Make your bot say "Hi" when you use the Slash Command.

🎬 Episode 3: Designing the Database Schema

Database Design: How to structure tasks and assignees.
Code Time: Connect MongoDB with your Node.js app.
Coding Spree: Update Slash Commands to manage tasks and assignees.

🎬 Episode 4: SHIP IT

Deploy BE to Vercel: What's Vercel? How to implement it?
Last touches: Test and polish your bot. Take over the world!