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

Backend programming is a huuuuuuge domain that is usually less intuitive for product managers (and other humans) who don’t have a programming background. Have you ever tried to read about Oauth2 on your own, just to find yourself drifting away to look at funny cats’ gifs?

This article will simplify the backend domain, having product managers in mind. Through a step-by-step (384 screenshots and 16 gifs) hands-on backend programming experience, you (yes you!) will build an app (yes, an actual working app!) that will occasionally send to Slack an inspirational photo and a few words of wisdom (or a knock-knock joke).

The result will work similarly to this Product Snippets app that sends bite-size product management insights to your work Slack:

productsnippets.com

🏆 You will get:

• Hands-on experience with technologies your team uses
• Familiarize yourself better with backend related terms and flows
• Have the confidence to start your own side hustle

🔎 We’ll touch on the following topics:

• GitHub + Git
• NodeJS + npm packages + cron jobs
• MongoDB
• Amazon S3
• API + GET + Oauth2

💪 This is what you’ll need to build the Slack app with this article:

• Passion about technology and how things work
• Basic understanding of programming. You don’t need to know how to program, just to be familiar with the basics (not being scared by things such as “for”, “variable” and “function”)

🥱 These will not be covered:

• Best practices — the programming methods chosen in the article may not align with production-grade, real-world applications. The main goal here is to make it work in the simplest explainable manner.
• Optimization — some methods presented here might not be the most optimum ones for runtime, memory usage, and code size. But we don’t care (right?), because we are after getting the sense of the basics by building a non-mission-critical Slack app in the simplest manner.
• Detailed platforms capabilities — we’ll cover only what we need from the platforms we’ll use.
• Advanced tools — we’ll use the minimum amount of tools to reach our goal.

Ready? Let’s go!

First, let’s define the “need”

As a product manager, I’d like to learn a lot of work-appropriate jokes, at a pace that I will be able to remember, so I will have the best presentation starters/endings in the company.

The “solution”

Hand-picked jokes accompanied with an image, sent to user’s Slack, once a week, before lunchtime.

The flow

Once a week, the app will:

• Pull the info of the users who installed the app
• Pull the message of the week from the database for each user
• Using the tokens of each user we’ll use the Slack API to send the messages

The architecture

App installation

• A simple website with an “Add to Slack” button
• Once installed, all relevant user info will be saved to the MongoDB database

Let’s get this done! Deep breath, diving in.

Part 1 — Setting the basics

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

Part 1 hands-on — Let’s go!

Part 2 — Git, GitHub, and Heroku

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

Part 2 hands-on — Let’s go!

Part 3 — Cron job, Message styling, and AWS

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

Part 3 hands-on — Let’s go!

Part 4 — Storing, retrieving, and updating messages in Mongo DB

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

Part 4 hands-on — Let’s go!

Part 5 — Create a website with an “Add to Slack” button

You will:

1. Create a new server app on Heroku that will serve as a website
2. Set the server application to respond to GET messages
3. Create a simple HTML page with an “Add to Slack” button
4. Built an Oauth2 authentication process: Get from Slack a temporary authorization code and exchange it for an access token

Part 5 hands-on — Let’s go!

Part 6 — Storing info of all the users who installed the app in Mongo DB and send them a cool message once a week

You will:

1. Create a new collection in Mongo DB to store user credentials
2. Using the website app, upon every app installation, store the user credentials in Mongo DB
3. Using the worker app and the for loop, set the app to go over all the user info and send them a message once a week

Part 6 — FINAL PART — hands-on — Let’s go!

Easy Peasy:)

Now that you had the hands-on experience of building an end-to-end app, you should be more comfortable with technical discussions with your team and be able to create awesome side projects on your own. Finally, the StackOverflow answers and the API documentations will become much clearer now.

🦄