Building a Chat Bot - Part 2: using Slack App and Ngrok

AnaplanOEG
edited December 2022 in Best Practices

In our part 1 (for AWS or for GCP), we set up the foundations to build our grand project: having a chatbot interacting with Anaplan.
By getting a new token at will, we will then be able to authenticate to Anaplan as many times as we need.
We are still far from our main goal though. So, let’s continue!

 

In today’s series, we put AWS/GCP aside for a while and are going to see how to create a bot that will execute any Anaplan action for you.

We will use Slack for our example but the same principles can be applied to any other platform.
It’s just that we are more comfortable with that solution today, especially since you can develop and use it for free.

Note: if you are not a Slack administrator in your organization, you have to ask for the permission to create apps from them.

Below are the main steps to follow:

  1. Create an app in Slack and associate a bot.
  2. Develop the code locally.
  3. Deploy it on AWS or GCP.

Create an app in Slack and associate a bot

What you’ll need:

  • A Slack Workspace with developer access

We’ll assume here that you already have a Slack workspace and that you have full rights to it. You can easily create one for free and for test purposes.
I have created my own workspace and this is where we start.

Create an app in your workspace

Go to the Workspace settings:

annejulie_0-1636580211406.png

Select “Configure apps” in the left menu:

annejulie_1-1636580211427.png

And in the next page, click on “Build” on the top right:

annejulie_2-1636580211430.png

Choose to build a simple app:

annejulie_3-1636580211436.png

Enter the basicdetails for your new app and pick up the workspace you can develop your app in

annejulie_4-1636580211442.png

You now have a Slack application.

annejulie_5-1636580211447.png

Now, let's build a bot

It is now the canvas where you will be able to develop various interactions and features like bots or slash commands.

annejulie_6-1636580211467.png

Our objective is to build a bot so click on “Bots”.
The next screen indicates that we need to set up bot’s permissions first before actually creating the bot.

annejulie_7-1636580211479.png

To do that, in the “Scopes/Bot Token Scopes” section, add the 2 following permissions:

annejulie_8-1636580211487.png

You can add more permissions. Once they are added, your bot will be created as you can see if you go back to the Basic Information screen:

annejulie_9-1636580211501.png

Before clicking on “Install to Workspace”, go the App Home tab and tick those 2 options:

annejulie_10-1636580211517.png

Go back to “OAuth & Permissions” tab, click on “Install to Workspace” and click “Allow” in the next page: 

Note: if you are not a Slack administrator, the “Install to Workspace” button will send a request to your Slack admin team to install the application.

annejulie_11-1636580211526.png

If you go back to the Slack application, you can see your application added to your workspace (if not, click on the “+” sign on the right of “Apps” and look for your application).

annejulie_12-1636580211539.png

Congratulations!

You now have an app coupled with a bot ready for your future interactions!

Generate the App token

Now, let's generate the app token (we will be using it in order to interact with the application).

Go back to the App’s Basic Information page and select “Oauth & Permissions”

annejulie_13-1636580211550.png

Copy it and store it in a warm place for later.

 

Do the same thing with the Signing Secret value (it’s in the App Credentials section of the same Basic Information page): keep it at hand. You will need that information very soon.

annejulie_14-1636580211554.png

Interact with the bot (locally)

What you’ll need:

  • A developer access to a Slack workspace (see above)
  • A python environment (here, we’ll use IntelliJ)
  • Ngrok utility

We can write messages to the bot but for the time being, you will notice that there will be no reactions. Indeed, we need to tell the bot how to react to some events.

And if you’ve followed us this far, this is where things are getting more exciting!

Generate a Python project

The python code will define how the bot will react after being contacted by a message sent to him in Slack.

To start that exercise, we are going to use Intellij as IDE to code but all steps can be easily reproduced with any other platform or via the console.

Create a new Project, select Python and in the Project SDK, select “Add Python SDK...”

Choose New environment (so you don’t mess around with existing ones) and create a folder in an appropriate location.

annejulie_15-1636580211560.png

And click on OK

annejulie_16-1636580211564.png

This will simply create a new Virtual Environment.

In the following screen, the tool asks a project location. You can specify the same folder than just before.

annejulie_17-1636580211567.png

At the bottom of the page, you will find a button called “Python Packages”. Click on it and look for “slack-bolt”.

It’s a recent package that will help a lot in our coding. Install it by clicking on the top right button.

annejulie_18-1636580211575.png

Create a simple app.py at the root of your project and write the following code:

annejulie_19-1636580211578.png

Use both pieces of information (the App token and the signing secret) you’ve got from the previous point.

When the python program is launched (click on “Run”), it will be in a waiting mode.

annejulie_20-1636580211580.pngWhenever a message that contains “👋” will popup in a direct message to the bot, it is supposed to answer back by writing “Hi there, $username”.

If you've been testing and reading at the same time, you'll notice that even after triggering the python program with the correct token values, the bot remains silent despite the trigger containing “👋”.

It is because we are missing one piece: how do you tell your app to listen all the messages you’ve written to the bot?

To achieve that, your app can subscribe to be notified of events in Slack by using a URL. When you run your application locally, it generates a service accessible via the IP of your machine.

But your machine, most likely, cannot be easily accessible directly from the outside world (it will be behind a firewall or behind a router IP).

Here comes the utility of solutions like ngrok. It will expose your local app to the rest of the world by giving you a valid IP and domain!

Let’s see how this works

Download the ngrok solution for your environment and install it following the instructions on the website.

When you execute it on a command prompt screen, you’ll get the following:

annejulie_21-1636580211583.png

You can see that now, for any application that runs on the port used in the command to launch ngrok, it will be accessible from any part of the web.

This is very convenient and useful when creating apps for tests purposes.

Now, your app needs to subscribe to events from Slack.

Go to Basic Information and click on “Event Subscriptions”.

annejulie_22-1636580211630.png

Activate the toggle.

Copy the https url address generated by ngrok:

annejulie_23-1636580211635.png

Paste it to the textbox with “/slack/events” concatenated at the end of your ngrok url. The URL will be checked instantly and if everything is fine, you’ll get the mention “Verified” like below:

annejulie_24-1636580211650.png

If you check on your local IDE, you’ll see that your app has been contacted.

annejulie_25-1636580211652.png

One last piece is to ensure we activate the subscription to bot events.

Just add the following events as shown below:

annejulie_26-1636580211700.png

You’ll probably get a mention to reinstall your app in order to take into account the last changes. Do as advised.

annejulie_27-1636580211724.png

Now, if you go back to Slack and try to send a message with a waiving hand, you should get an answer from your app:

annejulie_28-1636580211725.png

Neat, heh? I think it is enough for that part.

 

To recap, we have built a Slack App which we linked to code that runs locally on our machine. We also built the bridge between Slack and your code by using ngrok.

Now we have everything in place to interact with Anaplan on a conversational mode. That’ll be the next chapter of that series. Stay tuned!

 

Got feedback on this content? Let us know in the comments below.

Contributing authors: Christophe Keomanivong and Joey Morisette.