Create the Ultimate Slack To-Do List [TUTORIAL]

Ever feel like your to-do list or reminder applications aren’t quite perfect or customizable? I was definitely feeling the pain recently. Finally, I decided to build a custom solution with Slack so I would always have access to my to-do list. This project couldn’t have come at a better time, because we recently launched the RapidAPI Webhooks feature — and Slack is one of the packages to have it!

RapidAPI webhooks are currently a beta feature, but have no fear! Just head over to the RapidAPI Webhooks website to signup for the beta.

Step 1: Find Slack Webhooks on RapidAPI

To find APIs that have webhooks, you can go to our Webhooks API Docs or look for the Webhooks tag on the API card on RapidAPI.

All of the webhook functions are listed in a separate Webhooks category so you can easily find exactly what you’re looking for. We’ll use the SlashCommand webhook. This means you’ll be able to run “/todo my todo item” in any channel and you’ll be able to add your todo item to your notes. RapidAPI also supports the outgoing command, which allows you to track all activity that happens in a specific channel.

Step 2: Setup Webhook Event

Once you’ve selected the slashCommand function, you’ll be taken to the documentation page of the function. The documentation page provides you with a lot of different information like the steps you need to setup the webhook, an input field for the required input parameters, what an example event payload looks like, and a code snippet written in your preferred programming language.

To get your app set up on the Slack side of things, follow these steps:

1. Go to Slack custom integration
2. Click ‘Add Configuration’ to create a new command you’d like to receive notifications for
3. Copy the URL from RapidAPI into the integration settings for your new custom command
4. Copy the Token and Command from the Slack integration settings page and paste them into the required parameters section on RapidAPI

Now, you are connected to Slack.

Step 3: Creating Your Application

By using RapidAPI, you get access to the quickest and easiest way to use webhooks in your application. All you have to do is copy the code snippet from the rightmost panel, paste it into your application, and run your program. Bam. That’s it. One of the best features of using RapidAPI for webhooks is that you can easily debug on localhost because you don’t need to set up a public IP for your program.

I’m going to be using NodeJS for my program, but you can use any of our SDKs for your project.You’ll need to install and require the SDK to use your favorite programming language, and you can learn more about all of the RapidAPI SDKs by going to our documentation page.

Here’s the code snippet I’m going to be starting with:

const RapidAPI = require('rapidapi-connect');
const rapid = new RapidAPI("************************", "*****************************");

rapid.listen('Slack', 'slashCommand', {
  'token': '***********************',
  'command': '/todo'
 })
.on('join', () => {

})
.on('message', (message) => {
  var channel = message.channel_id;
  console.log(message);
  console.log(message.text);
  console.log(message.channel);
})
.on('error', (error) => {
  console.log(error);
})
.on('close', (reason) => {

});

To get started on the project, I’ve copied the code snippet from RapidAPI into an index.js file and I’ve set my project up to use the command ‘/todo’, but you can make this command parameter whatever you would like. The desired functionality is to have ‘/todo item #1’, add ‘item #1’ to my todo list. I’m also printing out message, message.text, and message.channel this way I can see what all information the webhook event provides me, the specific content of the text field, and the channel the slash command was used in.

Once you run your application, click the TEST Event button on the RapidAPI website. This button will fire off a fake event so you can easily test your new integration. The beauty of this is that you don’t have to go into slack and type ‘/todo item #1’ every time you want to test your code! When you press TEST Event on the RapidAPI website your program should print:

 

{ user_name: 'Name',
  user_id: 'U12345',
  token: 'ABc123dEF456G',
  text: '12312',
  team_id: 'T123',
  team_domain: 'domain',
  response_url: 'https://hooks.slack.com/commands/1234/5678',
  command: '/command',
  channel_name: 'channel',
  channel_id: 'C123456' }
  
12312
channel

Congratulations! You’re now successfully listening for Slack webhooks using RapidAPI ????  Pretty cool, right?

Step 4: Parse Slack Text and Add To-Dos

That’s all the set-up necessary to start listening for webhooks. Now, onto building the greatest to-do list that meets your exact needs. Once you’re receiving the webhooks from Slack, you can take the message.text field and parse that text however you want.

For my to-do app I want to allow the functionality of adding an item, printing the entire list, and marking items as done. I setup a simple parseText function that takes in message.text as message_text and returns a callback based on parsing the message. This is what my function looks like:

function parseText(message_text, cb) {
  if(message_text != undefined){
    var firstSpace = message_text.indexOf(' ');
    if(firstSpace == -1) {
      if(message_text.toLowerCase() == 'print'){
        cb(3);
      } else if(message_text.toLowerCase() == 'remove'){
        cb('need to use /todo remove [number]');
      } else {
        cb(4);
      }
    } else {
      if(message_text.substring(0,firstSpace).toLowerCase() == 'remove'){
        cb(2);
      } else if(message_text.substring(0,firstSpace).toLowerCase() == 'print'){
        cb(3);
      } else {
        cb(4);
      }
    } 
  }
}

The functionality of this is:

• “/todo item #1” — adds “item #1” to my list
• “/todo remove 3” — removes the 3rd item in my list
• “/todo print” — prints out the entire list

Now that the text is parsed, it’s time to start customizing the callback.

Step 5: Handling Callback from Parsing Text

Based on the callback of your parseText function, you’re going to want to do different actions. For mine, I’m using numbers to correlate to the different actions I want to do. It looks like this:

rapid.listen('Slack', 'slashCommand', { 
  'token': process.env.TOKEN,
  'command': process.env.CMD,
})
.on('join', () => {

})
.on('message', (message) => {
  var channel = message.channel_id;
  var firstSpace = message.text.indexOf(' ');
  var len = message.text.length;
  var text = message.text.substring(firstSpace+1, len);
  parseText(message.text, function(res) {
    // add [item]
    // action: adds [item] to todo list and prints updated todo list
    if(res == 1){
      addToDatabase(text).then(res => printNote(channel));
    // remove [number]
    // action: removes [number] and prints updated todo list
    } else if(res == 2){
      getNoteToPrint();
      var number = parseInt(text) - 1;
      markAsDone(number).then(res => printNote(channel)); 
    // print
    // action: prints todo list to the same channel slash command was called in
    } else if(res == 3){
      printNote(channel);
    // [item]
    // action: adds [item] to the db
    } else if(res == 4){
      addToDatabase(message.text).then(res => printNote(channel));
    //respond with callback if callback is set to a string
    } else {
      postToChannel(channel, res);
    }
  });
})
.on('error', (error) => {

})
.on('close', (reason) => {

});

You’ll notice that I’m using an addToDatabase() function. This is something I’m going to leave up to your discretion. I’ve opted to use MongoDB for my database and have a function that takes a string and adds it to the database using the schema I’ve defined, but you can implement whatever database you’d like.

Step 6: Using printNote Function to Print To-do List

The way I wanted my to-do list to work was to print the message after I do any function. So anytime I add, remove, or print, I wanted to have a new message posted with the updated to-do list. I’m going to be using another Slack API function called postMessage to do this. All I need to do to do this in my code is write a function that takes in a string for the channel I want to post to and a string of the content I want to post to the channel. This function will look like this:

function postToChannel(channel_name, payload){
  rapid.call('Slack', 'postMessage', { 
    'token': ***************************,
    'channel': channel_name,
    'text': payload,
    'parse': '',
    'linkNames': '',
    'attachments': '',
    'unfurlLinks': '',
    'unfurlMedia': '',
    'username': 'Rapid Todo List',
    'asUser': '',
    'iconUrl': '',
    'iconEmoji': ''

  }).on('success', (payload)=>{

  }).on('error', (payload)=>{
    console.log(payload);
  });
}

Conclusion

All done! Now it’s time to stop building a to-do list and actually…do the things on my to-do list.

Let me know what you think of the app and the new RapidAPI Webhooks feature. Check out the docs for how they work and more APIs for your future project inspiration

Check out The Ultimate To-Do List Part 2, where we add Twilio texting functionality!