Crash course on backend programming for Product Managers//Building a Slack app from scratch — Part 1

Maxim Bassin
8 min readNov 13, 2021

--

Welcome to the first part of the series of Crash course on backend programming for Product Managers, where we will build a Slack app, step-by-step.

In this part you will:

  1. Create and set up a new app in Slack
  2. Install the app to your Slack account
  3. Download and install Xcode (Mac users) and VSCode
  4. Install NodeJS
  5. Install Slack’s npm package for sending messages
  6. Using the app token from Slack and your Slack user ID, send a text message from your computer to Slack, using Slack’s chat.postMessage method

Let’s go to Slack and set up a new app

(10 steps)

We’ll create an app and install it into our workspace. Then we’ll test our setup using Slack’s documentation tools.

Note: This is only an app setup in terms of name, permissions, and tokens. We’ll build the actual app logic in the later steps.

  1. Go to the Slack API website and create a new app from scratch.

2. Under Add features and functionality, click the Permissions card. You’ll be redirected to OAuth & Permissions sections

3. Under Scopes, click Add an OAuth Scope to add chat:write scope — this is the scope we’ll need for our app to post messages

4. Under the Install App tab, click the “Install to Workspace” button, allow the permissions and copy the bot token.

Note: If your app is monitored by an admin, you should request to install the app, by clicking the Request to Install button under the Install App tab and wait for the admin approval (send your admin a Slack to speed up the process)

Bonus note: You can create an additional workspace in Slack to toally isolate your side project from work. Just go to the slack website and click on “Create a New Workspace”

If you have a Gmail address, you can use a “+text” as a suffix to keep recieving emails to the same inbox, but having a different user

Then, when you’ll create your app, just select your new workspace, in the workspace dropdown in Step 1.

5. Now let’s test our app manually. In the documentation, search for the post message method, and click the Test tab.

6. Paste the copied token

7. For the “channel” field we’d need the ID of the channel we’d like our app to post to. Since we kept our permissions to the minimum, we can paste to the channel of the app directly.

According to the Slack documentation, if we’ll provide the member ID in the channel field, it will send the message to the app channel. Let’s copy our member ID:

Just click the field, and it will copy the value

8. Now let’s paste the member ID in the channel field of our test:

9. Add some text for the message and click “Test method”

10. If all went well, on the right side you should get a result similar to this:

To recap so far:

We’ve created and installed a Slack app that has permission and credentials to send messages to the app channel on slack.

Now let’s try to test the message post method directly from our local computer

We’d need to set up our code environment and then test Slack’s message posting method.

Setting up the code environment

(4 steps)

  1. For Mac users, we’d need to download and install the Xcode by Apple to — we’ll need it for the command line tool (Windows users can skip this step). Keep in mind that it's an 11GB download, so this can be a great coffee break opportunity ☕️. After the installation, you don’t need to set up anything for Xcode, you can just close the window. Note: MAC users, do not skip this step, you must complete it before moving to the next steps.
  2. Download and install VScode — this will be our local code editor

3. Let’s set up our project folder to keep the project files in

4. Download and install Node.js (use installer download for simplest installation). Basically, this is the javascript-based code platform for development — relatively intuitive and pretty popular.

So far we were just setting up our environment, now let’s start coding by building the simplest NodeJS app that will send a message to Slack

(7 steps)

This is the perfect time to take another deep breath 🤓

1. Initiate npm in your working folder, by opening the terminal in the VSCode and typing npm init. npm is a package manager for the JavaScript programming language and it will help us download the package for slack interaction.

Note: The first word for terminal commands is the app, and after it come the commands related to that app, along with parameters (if applicable). So in this case the program is npm, and the command is init (to initialize the service)

2. You’ll be asked several questions, if you are not too picky, you can go ahead and click the return key for all the questions

3. Install the @slack/web-api npm package to your app project, by typing npm install @slack/web-api and then clicking the return key

Note: There were some config files added to your folder

4. Create a javascript file called app.js file in your folder, through the VSCode

5. Paste the following code into the app.js file:

// Require the Node Slack SDK package (github.com/slackapi/node-slack-sdk)
const { WebClient, LogLevel } = require("@slack/web-api");

// WebClient insantiates a client that can call API methods
const client = new WebClient("YOUR-Bot-User-OAuth-Token");
// ID of the channel you want to send the message to
const channelId = "YOUR-MEMBER-ID";
(async () => {
try {
// Call the chat.postMessage method using the WebClient
const result = await client.chat.postMessage({
channel: channelId,
text: "Hello world from my computer"
});

console.log(result);
}
catch (error) {
console.error(error);
}
})();

Note: The lines starting with // are comment lines in the code, and they are not executed.

Replace the token and the channel with your own data

6. Save the app.js file

7. Now let's run our app.js file by using the following command in the terminal: node app.js (click the return key to execute)

If all goes well, you’ll get a result in the terminal, similar to this:

Yay! You’ve just programmatically sent a message to Slack 🎉

In the next part you will:

  1. Set up Git versioning control
  2. Open a GitHub project and sync your project to it
  3. Set up a worker on the Heroku server
  4. Link Heroku to be in sync with the GitHub account

Let’s go to part 2>>

--

--