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

This is the 3rd part of the series, where we build an awesome app, all by ourselves.

In part 1 and part 2, we’ve successfully set up our Slack app, wrote a message sending code via Slack’s API, using node.js, push it to GitHub through Git, and run the app from the Heroku server🥳.

In this part you will:

1. Install cron npm package
2. Using Slack’s message building tool, customize the message format to be sent via API
3. Set up an AWS account and create a new bucket to store images

Let’s begin with the timing of our message

Currently, our command is fired once the code is loaded to the server. What we’d like to do is to set a function to run once a week on Tuesday, at 11:30 AM and send the message. For that, we’d need something that’s called a “cron job”. Cron is a tool that allows you to execute something on a schedule. It has a freaky syntax so get ready:)

First, we’d need to add a node.js npm package that will allow us to use the cron functionality in our code. To do so, we’d need to do the following:

(4 steps)

1. Install the package using the following command in VSCode terminal

npm install cron

and hit the return key. You should see the success message and a bunch of files added to the version control tab:

2. Now let’s include this functionality in our code by adding the following line to the top of our code, and saving the file:

//Requere the Cron package
var CronJob = require('cron').CronJob;

Note that since we’ve installed the cron package, it modified the code in these files to indicate the addition of dependencies in our code

3. Now we’ll utilize the cron functionality by wrapping our code in the following way:

var job = new CronJob('* * * * *', function() {
 //OUR CODE FOR SENDING A MESSAGE
});
job.start();

Now let’s save our file and then commit and push our project to GitHub (if you forgot how to do it, see the previous part).

Check the Heroku logs and Slack.

Sign that our server app is up and running

The success message response from Slack, about the successful message sent (the same response we saw in the terminal of VSCode when we sent the message from our local environment)

You’ll notice that you are getting the Slack message every minute

And this is due to the freaky syntax of our cron job setup here:

4. Over here you can see the specification on how to set up your timing right with the syntax. In our case, if we’d like to send a message once a week, on Tuesday at 11:30 AM, this is how the syntax should look like:

So our code will look like this

var job = new CronJob('30 11 * * TUE', function() {
//OUR CODE FOR SENDING A MESSAGE
});
job.start();

Most of the chances are that by the time you got here it’s not a few minutes before 11:30 on a Tuesday. So what we’d do is to set the timing for 5 minutes from now, run it, and see if the timing works. Assuming that today is Friday, and the time is 12:55 AM. We’ll make the following adjustment to our app.js file in VSCode (timing and a different message, to track the change), save it, commit and push it to our server (clicking the checkmark on the top right, adding “Cron” as a comment, the from the menu selecting “Push to” and selecting our repository)

Note: Your server’s timezone on Heroku probably differs from your time zone, you can see your server time in the logs. It’s probably UTC. So when adding 5 minutes to the current time, also add the timezone difference as well. I have 3 hours difference from my server time, so I’ve set the cron job to 10:00

Save the file and then commit and push our project to GitHub (if you forgot how to do it, see the previous part).

And now we wait…

Success!

So, what we’ve actually done? 🤔

We’ve set up a process (node.js app) on a server (Heroku) that executes a message sending function (API call) once a week (cron job).

And that is AMAZING!🥳

Now, let’s make a fancy message styling, by utilizing the Slack API options

Check this message-building tool by Slack. You can start fresh by deleting the content and adding 2 “Section/mrkdwn” blocks and 1 “Image/title” block.

Now note the code created on the right side. This is the code we’d need to add if we’d want to get the message styled in the way it’s shown in the message preview.

Basically, we can see there is an array under “blocks”, consisting of 3items (2 for the markdown text, and the other for the image). Each item has several parameters (e.g. “type”).

Adjust the right side to the following

Note that the 2 asterisks that we’ve added to our text here made the text bold. This is the unique behavior for Slack’s platform when the block type is “mrkdwn”.

You can test the message styling by sending it to yourself using this button and selecting your own channel in the popup

And sure enough, you’ll be able to see the result in your own channel

OK, everything is looking good and we can now add that piece of code to our own code and test it.

We got the style, now let’s use it in our code

(3 steps)

1. Copy the entire right side code from the Block Kit Builder, without the curly brackets ({})at the beginning and the end of the code:

2. Add a comma at the end of line 18 in our code, make a new line and paste the copied code

Note that the text in the “text” parameter on line 18 (“Testing end-to-end with custom timing”) will be the fallback text for the message in case there will be an issue with the “blocks” section

3. To test our code, let’s change the cron job settings to be on today's day of the week, 5 minutes from now in the UTC timezone (in my case it’s Tuesday 13:50). Save, commit and push it to see it in our Slack.

And on the time we’ve specified, we should get the message from our app on the Heroku server to the app channel in our Slack

That is amazing!

It’s time to make our message content dynamic

So far, the content we were sending was hardcoded into our code. In order for our app to send new content for every message, our app will need to retrieve the message content from a database each time it plans to send a message.

Our logic will be:

• Once a week, check the database for the latest joke to send
• Get the content from the database for the latest joke
• Send the joke to Slack
• Update the next joke in the database to be the latest one to send

Let’s assume you’ve already collected your list of jokes and the images to match them.

Our images will go to AWS S3 — Amazon’s image storage service — Let’s set it up

(7 steps)

1. Go to the AWS website to set up an account

2. Sign in as a Root user

3. Click on Services and select S3 under Storage

4. Now let's create a public “Bucket”. Which is similar to a public folder. We’d need to have a place to store our images, and then get a public link to them, so we’ll be able to add them to our slack messages

5. Time to upload our images (we’ll use 3 images, corresponding to 3 jokes — for simplicity)

6. Now let’s mark all the uploaded files and make them public

7. Congratulations! Now you can get the public link to every file in your bucket, by selecting the file and clicking “Copy URL”. We’ll use it for our messages setup in MongoDB.

To summarize this part so far

• We’ve set a cron job to run our app once a week and send a message to Slack
• Then we added some style to our message
• Finally, our hand-picked images for the jokes are now stored on an AWS S3 server

In the next part you will:

1. Open a new account in Mongo DB
2. Create a new database and a collection to store the messages in it
3. Install Mongo DB’s npm package
4. Store credentials in the config vars on the server (avoiding hardcoded credentials)
5. Retrieve the “next up” message from Mongo DB and send it using our app
6. Once successfully sent, mark the message as sent in Mongo DB and set the “next up” message

Let’s go to part 4>>