Skip to content

Instantly share code, notes, and snippets.

@jonahgeek
Created June 9, 2023 18:23
Show Gist options
  • Save jonahgeek/f11959e9beb6e892e9e17c14bd6c58c7 to your computer and use it in GitHub Desktop.
Save jonahgeek/f11959e9beb6e892e9e17c14bd6c58c7 to your computer and use it in GitHub Desktop.

To create a simple to-do list app on Slack, you can use Slack's built-in features and combine them with custom slash commands and a dedicated channel for task management. Here's a step-by-step guide:

  1. Create a dedicated channel: Start by creating a channel specifically for your to-do list. You can name it something like "#todo-list" or any other name that suits your preference.

  2. Enable custom slash commands: In your Slack workspace, go to the "Settings & administration" section, then select "Manage apps." Look for "Custom Integrations" and click on "Slash Commands." Create a new command, like "/todo", and configure it to point to the endpoint where you'll handle the command's logic.

  3. Set up a backend server: You'll need a server to handle the slash command requests and store the to-do list data. You can use any server-side technology you're comfortable with, such as Node.js, Python, or Ruby.

  4. Implement the slash command logic: In your backend server, listen for incoming requests from Slack for the "/todo" command. Extract the necessary parameters, such as the task description, and store them in your preferred data structure (e.g., a database or file). Remember to associate the tasks with the dedicated channel you created.

  5. List and manage tasks: Create additional slash commands to handle various task management operations, such as marking a task as complete ("/complete"), deleting a task ("/delete"), or listing all tasks ("/list"). Implement the logic for these commands in your server, updating the data accordingly.

  6. Interact with the app in Slack: Now that you have the backend logic in place, you can interact with your to-do list app in the dedicated channel. Use the slash commands you created to add, manage, and view tasks. For example, type "/todo Buy groceries" to add a task, "/list" to see all tasks, or "/complete 1" to mark the first task as complete.

  7. Add additional features (optional): Depending on your requirements, you can enhance your to-do list app by adding due dates, reminders, task assignments, or even integration with other tools like Google Calendar.

Remember to test your app thoroughly and iterate on it based on user feedback. Slack's documentation provides detailed instructions and examples for implementing slash commands, so make sure to consult their resources for more specific information.

To set up a backend server using Node.js for your to-do list app on Slack, follow these steps:

  1. Install Node.js: Ensure you have Node.js installed on your development machine. You can download it from the official website (https://nodejs.org) and follow the installation instructions.

  2. Create a new directory: Create a new directory for your project. Open your terminal or command prompt, navigate to the desired location, and run the following command:

    mkdir todo-list-app
    cd todo-list-app
    
  3. Initialize a new Node.js project: Initialize a new Node.js project by running the following command in your project directory:

    npm init -y
    

    This command creates a package.json file that will store project dependencies and configurations.

  4. Install required dependencies: Install the necessary dependencies for your backend server using the following command:

    npm install express body-parser --save
    

    This command installs the Express.js framework for handling HTTP requests and the Body Parser middleware for parsing request bodies.

  5. Create an entry point file: Create a file called index.js in your project directory. This file will serve as the entry point for your Node.js server.

    touch index.js
    
  6. Open index.js in a text editor and add the following code to set up a basic Express.js server:

    const express = require('express');
    const bodyParser = require('body-parser');
    
    const app = express();
    const port = 3000; // Use any port number you prefer
    
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    
    // Routes will be added here
    
    app.listen(port, () => {
      console.log(`Server is running on port ${port}`);
    });

    This code imports Express and Body Parser, creates an Express app, sets up middleware for parsing request bodies, and starts the server listening on the specified port.

  7. Implement your slash command logic: Within the index.js file, add the logic for handling the slash commands and managing the to-do list. This includes extracting data from the request, storing tasks, retrieving tasks, marking tasks as complete, and deleting tasks. You can use libraries like axios or node-fetch to make requests to the Slack API.

    For example, to handle the "/todo" command and add a task, you can add the following code inside the route section in index.js:

    app.post('/todo', (req, res) => {
      const task = req.body.text; // Extract the task from the request body
      // Store the task in your data structure (e.g., database, file)
    
      res.json({ text: `Task "${task}" added to the to-do list.` });
    });

    Customize this code to fit your specific task management requirements.

  8. Run the server: To start your Node.js server, run the following command in your project directory:

    node index.js
    

    You should see a message indicating that the server is running on the specified port.

Congratulations! You have set up a basic backend server using Node.js. You can now continue developing your to-do list app's logic, adding additional routes, integrating with Slack, and connecting to a database or file storage for task persistence.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment