For this app the key compontents are:
- Slash Commands
- Message attachments & payloads
- Interactive Buttons
First, you'll need a request URL that slack can use to post to. Remember, that all request URLs must point to a TLS-enabled HTTPS URL located on a publicly accessible server with a valid SSL certificate. If you don't have an SSL certificate yet but want to test your app, Slack recommends that you use an HTTP proxy tool such as ngrok. This allows you to set up a secure tunnel on your localhost. I used ngrok for this particualr integration. You can find the downloading instructions here.
To process HTTP requests you'll need to set up a a web server, I did this using express.
- Once you've set up your server make sure you create a slack app if you don't already have one.
- The app will provide you with a client id and client secret these are important for slack oAuth process. Keep this information safe! I created envoirment variables that store that information for me. I found this tutorial helpful for that.
- Create a new slash command and activate interactive messaging.
- Provide it with a request url from your ngrok server.
- Assign your response url to a varible you can use throughout the app.
- You will need this variable to decode the JSON message you send and recieve.
- Your post request will have a message with attachments. This is what will display in the slack GUI for the user to interact with.
- Slack offer thorough documentation on the capabilities of messages and message attachments. When using interactive features make sure to include the "actions" key this will track the user's behaviour and allow you to respond to it.
- This interactive meassage features a joke of the day, when the button is clicked, the "confirm" key is triggered and a pop-up window appears with the answer to the joke. Clicking the "no" button triggers a follow-up response from the /slack/actions endpoint.