Technically, it was four days, but we were working on it in between taking customer calls and fixing bugs so, let’s call it three ;) OneBar Day 1 Idea Slack has recently released the — a new view within the Slack app where you can create advanced UIs. You can use blocks from the , show , maintain the state, etc. We were tinkering with it, trying to design an admin dashboard for OneBar. App Home Tab block-kit modals A few days before, I was telling Andrew, my co-founder, how I like how Apple products seamlessly integrate together. It’s magical to be able to draw a note on the iPad and then see it next second on my Mac. It’s so unfortunate not to be able to use Apple notes on an Android phone or a Linux PC. One app that works consistently across all my devices is Slack, and I find myself using it as a simple notetaker more and more often. When in a rush, I just DM myself stuff I want to access elsewhere and then move it into a more appropriate app later. My DM also serves as a mini-TODO list. What if it was just a little bit more convenient? What if I could mix it up with the Home Tab? - Hey, Andrew, wanna build a mini-app? We’ll make it free, make it go viral, and maybe it’ll help us drive some traffic to OneBar too! - Sure, let’s do it! Block-kit builder Slack has a beautiful tool for prototyping interfaces — it’s called the . After 20-minutes of tinkering, we had an idea of what the TODO app in the Home Tab would look like. Block Kit Builder A classic app like this would have checkboxes to the left of the todo items. Unfortunately, Slack only allows us to put buttons on the right, and there can be exactly one button combined with a text caption. We wanted the user to be able to perform multiple actions so, we had to resort to the “overflow” element. It’s a “…” button that hides several menu-items underneath. Overflow adds an unnecessary click to the workflow, but there’s no other way around it. We faked checkboxes with an ◽️ emoji for now, hoping that Slack would one day implement them and we’ll make our app behave like a proper todo ;) Choosing a name This is arguably the hardest part of building anything. ? Nope, already exists. ? ? ? ? ? Todobot!? Todobot sounds pretty good! Let’s see if there are any domain names available! Ughh… all s are taken, there’s something ugly in and , there’s also an odd … It seems like we have to go with a prefix... Todoist Checker Chckr Todo-ninja Todo-panda Todofu .com .org .net todOObot.com or ? thetodobot.com gettodobot.com Let’s get both of them! Infrastructure It’s not worth it setting up Kubernetes for a small project like this, but… we already have it behind OneBar. Also, seems to be meant for the apps like ToDoBot, but… we already know and use Django, no time to learn NodeJS! The stack has been chosen. Slack Bolt The rest of the Day 1 we spent setting up webhooks, configuring SSL, defining database schema, and putting together the rest of the bot plumbing. Day 2 Coding We spent the entire Day 2 coding the bot logic. We’re going through an acceleration program with OneBar right now, and it’s pretty intense. ToDoBot was an experimental side-project, so we worked on it in between meetings, customer calls, on a commute, and late in the evening. I didn’t mean this to be a deeply technical article or a tutorial, so I’m going to mention a few Slack API features that we used only briefly: — Slack sends this event every time someone opens the ToDoBot’s App Home. We react to it by sending back a bunch of JSON that represents the current state of a person’s todo list. app_home_opened — This is how you actually update the App Home. We do it reactively when someone opens the Home Tab or proactively when we know on the backend that the state has changed for a given user. views.update — We receive this event every time someone sends a DM message to the ToDoBot. We then simply add every message to the list and acknowledge it with an emoji. messages.im — This is how you react with an emoji. reactions.add We’ve also registered a , “Add to my TODO” , and implemented a few simple for adding and editing items. /todo slash-command message action dialogs Somewhere during Day 2 came up the idea of shared TODOs. We tag each other in messages all the time, hoping that the other person will not forget to do what we asked them. This naturally translated into tagging people in TODOs. A shared TODO would appear in each person’s Home Tab, and anyone mentioned would be able to close it. We started using shared TODOs for our own needs way before the rest of the ToDoBot was completed, and quickly got hooked on the feature. Day 3 Debugging By Day 3, most of the bot mechanics were completed, although we still had a few issues. I spent several hours debugging . Even though ToDoBot is super light-weight and there was no load on the server whatsoever, our gunicorn workers were dying left and right, and the bot behaved very unpredictably. It turned out that the AWS ELB that we had in front of the app tried to maintain and re-use the same connection when possible, and this didn’t play well with that we used by default. It took me time to understand what’s going on, but simply tweaking the timeouts seems to have helped. this one sync workers An interesting observation came up while debugging the gunicorn issue. Our servers were getting quite a bit of traffic already, even though the domain was brand new and nobody knew about us yet. It turned out our ELB happened to get an IP address which has constantly been poked by a bunch of security scanners somewhere in Russia, check this out: Website We wanted to submit our bot to the Slack App Directory, so we needed a website. We didn’t intend to spend much time on, though. Our designer helped us put a few stock pictures together and crafted a standard single-page layout. Andrew has then implemented everything in . Webflow Day 4 App Directory review There was a little bit back-n-forth with the review team. First, they pointed out that we’ve requested the OAuth scope but did not actually use it. It turned out that I forgot to include it in the OAuth link. Then they asked us to add a reaction to /todo help because it’s the default way how people learn about Slack commands usage. We tried to react to comments as soon as they came back so, by lunchtime, ToDoBot was live in the . commands App Directory Final touches Before launching it publicly, we shared the app with some of our friends, and, of course, they immediately found bugs and inconsistencies. For example, Joe from pointed out that the bot keeps saying but he didn’t know what the he** the was. We decided to work around this by adding a short welcome message that our bot would send to any user on their first interaction. Unmeeting “Home Tab,” “Something has been added to your Home Tab,” “Home Tab” Product Hunt launch By the late evening, everything was ready for a public launch. We asked our friend to hunt us, scheduled the launch for midnight, and sat down waiting. As soon as it got to the front page, people started checking it out. We didn’t get a super crazy amount of traffic, but signups kept coming consistently. , and this was a great result for us, considering how small the product was and how little effort we put into the launch. Three days later, and we’re still getting a signup every hour or so. I personally call it a success! :) Michael We finished 6th Finale We’ve got a bit under a hundred signups so far, and about 300 TODOs created. People keep coming, and we’re yet to see it the bot sticks.At least one team is using it very actively, and it’s the OneBar team! Of course, we’re biased as makers, but we found ToDoBot naturally fitting into our workflow, and my own list is already multiple screens long. At least one person has discovered through the ToDoBot launch. We started a conversation with them that we hope to continue. We also expect more people to come :) our main product We consider doing a little codebase makeover and open-sourcing the ToDoBot eventually. Would you be interested in contributing? It was exciting for us to be able to do something from start to finish in such a short timeframe, and we wanted to share the experience. It feels very refreshing, especially after being bogged down in the never-ending backlog of bugs and features of a bigger product. It’s a great way to relax without pausing the big work, and get a good shot of dopamine. If you’re feeling burned down, definitely consider completing a small project for yourself. Slack is going to host an , and I’d highly recommend everyone applying! online hackathon in March Thanks for reading this clunky story! Previously published at https://blog.onebar.io/how-weve-built-todobot-for-slack-in-3-days-bc42324dce14
