Skip to main content

Develop an intelligent Slack bot using Block UI for website administration


In conventional web site administration, web developers build an admin site to perform daily tasks such as query how many members register daily and block a user. The admin site development includes frontend and backend codes.

The slack developer can do the same thing without any frontend code. Starting from Feb 2019, Slack provides a very powerful and beautiful UI component (Block UI):

In this blog, we will develop a Slack bot to tell you how many users register today, or block a user. Take a look to below video:

What is Slack?

Slack is a collaboration hub where you and your team can work together. Like Whatsapp group, our team 50% of workers are working remotely and all communicate in Slack workspace.

Why Slack?

Slack provides SDK for developers to develop applications. Below sections will show you how to develop a Slack Bot (Chatbot application). It works like a colleague to perform backend tasks. The bot can recognize below messages:
  • How many users registered today?
  • Block user NNN

Flow Diagrams

The programming logic to handle “How many users register today”:

The programming logic to handle “Block user NNN”:

Prerequisite

To develop the App, we will use below languages, frameworks, and libraries:
  • NodeJS v8.10 or above
  • ExpressJS v4 or above
  • MongoDB v3 or above
  • Slack SDK for Nodejs
  • RiveScriptJS v2
Let’s start to develop the source codes step-by-step.

Create an Express app

Initialise the project
$ npm init -y
$ npm install express --save
Modify the package.json as below:

Create the application file app.js:

Load some dummy data

Install MongoDb driver for NodeJS:
$ npm install mongodb --save

Create an initdb.js file to insert some demo data:

Run the initdb to create the demo records:
$ npm run initdb

Define the conversations

We’ll use RiveScript for NLP. With rivescript, we can easily to develop a chatbot. Rivescript takes care of natural language processing. We just need to define the conversations as below brain/app.rive file:

Module for handling RiveScript

Install the RiveScript package:
$ npm install rivescript --save

Create a rivescripthandlers.js:

Develop the webhook for Slack

Install the Slack SDK for NodeJS:
$ npm install --save body-parser @slack/web-api

Run and Debug the App at local

I use Ngrok to make a HTTPS tunnel for Slack to call the local server directly. Run below commands:
$ npm start

Then open another command-line session, and run the Ngrok:
$ ngrok http 3000

Create and register the Slack App

We’re going to register our App in Slack (you’ll need a Slack account). Go to Slack API website https://api.slack.com/apps. Click Create New App:

Enter a new App name and select the workspace you’re working on. Click Create App button. Then the basic information page appears. Click Bots, as below:

Then click Add a Bot user, enter the Display name and default user name, as below:

Next step is to enable event subscription, click Event Subscriptions at the left side as below:

Switch on the Enable Events. Copy & paste the https address which is generated by Ngrok and append /slack/events to the URL, see below:

Slack calls to your App to verify the App immediately. It should be verified successfully as below:

Scroll down to Subscribe to Bot Events section and click Add Bot User Event, select the app_mention:

Click Save Changes:

Next is to enable Interactive Components, click the Interactive Components on the left side and enable it. Copy & paste the URL again but append /slack/actions to the path as below:

The last step is to install the App in the Slack workspace. Click Install App at the left side, then install Install App to Workspace:

Click the Authorize:

After that, we’ll need the token:

Paste the token into /config.json upper portion:
{
  "Slack": {
    "BotUserOAuthToken": "<Your Token>"
  }
}

Now the bot is ready to go!

Chat with the App

Open the Slack workspace, we’ll see the App appears. Thus, we can chat with it:

At the first time, you’ll need to invite the bot to the channel:

Say hello again to the App, it replies:

Conclusion

Slack announced Block UI in Feb 2019. It not only allows us to build robust frontend components (without any codes) such as button, combobox, dropdown, date picker… but also provides Block Kit builder online to build the UI visually. We just need to concentrate the backend logic in two webhooks to handle:
  • Messages from Slack
  • UI component actions (e.g. button clicked)
The source codes are hosting in this Github repo

Enjoy!

Comments

Post a Comment

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t...

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpag...

Progressive Web App Wordpress Theme (Part 1/2)

After I read two articles: Progressive Web Apps Are The Next Big Thing and More Surprising Statistics About WordPress Usage . I decided to build a Wordpress theme which integrated Progressive Web Apps (PWA) to see how cool it is when two “Big Thing” mix together. TL;DR To avoid Too Long; Didn’t Read. I break the whole procedure into two blogs. In part 1, I will build a Progressive Web App in the local server. What PWA features to be built here? According to PWA wiki , the PWA will be progressive enhancements. The final webapp will be: Responsive design: I choose Bootstrap 4 because it’s mobile-first design. Contents retrieve from Wordpress CMS via REST API . It’s a natural way the App is developed in Javascript. Offline support: The PWA still can run and display the contents when no Internet connection. Installable on Android home screen: I w...