Guest blog by Wang (Leonard) Ge Microsoft Student Partner at Imperial College London

About me

Hello! My name is Leonard I’m a 2nd year student, studying Computer Science Engineering at Imperial College London My interest areas mainly include front end development, Here is my LinkedIn profile https://www.linkedin.com/in/wang-ge and my GitHub: https://github.com/524119574

Introduction

With the advancement of the artificial intelligence, bot is becoming more and more important in our life, even Mark Zuckerberg built his own bot in 2016 called Jarvis (https://www.facebook.com/notes/mark-zuckerberg/building-jarvis/10154361492931634 /) to manage his home (which is super cool!). While Mark’s Jarvis can only interact with the users in Facebook Messenger, we can create a bot that can interact with the users in multiple channels including: Facebook Messenger, Slack, Telegram and more. To do that we will be using the Microsoft Bot Framework.

So the Challenge

As university students we have a lot of assignments that we need to hand in on time, so building a bot to record all these assignments and their corresponding deadlines seem to be a great choice. So our bot will be having the following functionalities:

1. Add names of the assignments and deadlines to the bot

2. Show all the assignments that are in our record

3. Remind the user when the deadline is close(we will remind the user one hour before the deadline in our tutorial, we can change it to other arbitrary time if we want)

As above, we want our bot to be able to add the assignment to its record.

And the bot will also remind us when the deadline is near.

The bot will also be able to show us all the deadline when we tell the bot to ‘show all’. OK, now let’s start to implement it.

The full bot logic can be found on GitHub: https://github.com/524119574/assignment_bot but I will show you how I went about building the bot and making it available on various channels below

Setup the Development Environment

We’ll be using Node.js as our programming language in the development of this bot, so firstly we need to create a folder, add some skeleton files and download the bot framework emulator(https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v3.5.31, download the .exe file if you are using windows) for local testing.

mkdir assignment_bot && cd assignment_bot

So first let’s create a folder called ‘assignment_bot’ and open this folder. We can do this in command line by:

Or you can right click and create a new folder and called it ‘assignment_bot’. And enter the folder.

Run the following command:

npm init

And follow the prompt from the screen to create our ‘package.json’ which is a generic file for any Node.js application.

Then type in the following command:

npm install --save restify botbuilder

This command let us install two packages: Restify and Bot-Builder from the npm and save these dependencies on package.json. Restify is a package that used to build REST API and in our case, the bot framework will be in the form of a REST API which different channels (Facebook Messenger, Slack, etc.) can talk to. Bot-builder package is the Bot framework Node.js SDK which encapsulates the lower level logic.

In the ‘assignment_bot’ folder we create a file called ‘app.js’ which will be storing our bot logic(as this is just our first bot, we’ll only use one file for the bot logic).

Bot Logic

In the bot framework we type in our basic logic:

And the bot will just send “Hello! My name is assignment bot” when you say something to him, use:

node app.js

To run our bot locally, and open the bot emulator to test our bot

Type in the http://localhost:3978/api/messages and leave the other fields blank. And if you test it, the following result should appear:

In order to manage the conversation more easily, we introduce the concept of dialogs, which are simply reusable chunks of interactions between the bot and the users. The following code will create a dialog called “addAssignment” for our user:

The above 4 steps corresponding to the following flow chart.

First step, we are going to prompt our user for the name of the assignment as follows:

The above code is the first step in our dialog, after the user responds, the answer will be passed to the second function as the ‘result’ parameter. Then we ask our user for the due date of the assignment:

After that, we ask the user to confirm their result:

Finally, we confirm the user that all the details have been properly stored and the notification is set:

OK, so now the dialog ‘add assignment’ is done, we will start to work on the other feature of the bot, namely show the user all the assignments that are in our record. And We’ll create a new dialog for this feature:

Good! We have built our bot and all the desired functionality, now it’s the time to deploy it and connect it to the channels.

Deploy the Bot

In order for others to use our bot we need to deploy it to the cloud, and in our case we will be using the Azure Cloud Service. Our first step is to go to azure [portal](https://portal.azure.com) to register our bot. You might be asked to login to the portal, and you can simply use your Microsoft account to log in. And after login, below interface should appear:

In the left-hand menu bar, select the ‘new’ button

In the new pop-up menu, select ‘Data + Analytics’ and you will see the ‘Bot Service’ and click it.

Click ‘Sign up for a new subscription’ and fill in the information in the newly-open tab.

After providing the necessary information, let’s go back to the Azure Portal and choose the bot service again and this time we are prompted to enter the app name, hosting plan, etc.

We will call our bot ‘assignmentBot’, tick the ‘pin to dashboard’ and hit create.

Then we are asked to select our bot template:

Choose “NodeJS” and Basic to start our template.

Then you will be asked to create an appID and an appSecret, copy the appID and appSecret to the Azure and start the template. And you will see a screen like this:

And we click the big “open online code editor button”, we can develop locally as well, but as we have already implemented the logic locally, we will just use the online code editor.

The online editor looks like above which is somewhat similar to the Visual Studio Code that I used locally.

Copy and paste our bot logic to the online editor and we are done. Then we go to the bot portal (https://dev.botframework.com/bots):

And we click:

to test our bot online to see if everything works as expected:

After some testing we find that our bot does work as we expected, so now it’s time to connect our bot to different channels. We can see different channels in the “add a channel” part of the bot portal, we can choose the channel that we want to add our bot to.(The icons of Facebook, Slack, email are not shown because I have already added the bot to these channels, but you should see them if you haven’t)

If we want to add our bot to the slack channel, we should fill in the following credentials:

If you don’t know how to get these credentials, you can click the “Where do I find my Slack access credentials” and there is a detailed guide on how to do that in the slack website. After our bot is connected to Slack, we can interact with the bot in the slack:

We can do the same things for Facebook Messenger, Email and all the other channels. We are required to enter some credentials such as appID and appSecret, other details such as how the channel is actually connected to our bot and how does the bot actually communicate with different channels has been encapsulated by the bot framework.

Final thoughts

Bot framework is a very useful framework that enables us to reuse the same logic in different channels, and if you want to build a bot and haven’t try the bot framework, I’d highly recommend you to give it a try.

The assignment bot that we built in this tutorial is very basic, there are many more logic that can be added to the app.js to make it much more user friendly and robust. For example, we can check the user input due date to see if the due date is later than the current time, we can only display the due date that haven’t passed in our ‘show all command’, we can also implement the ‘delete’ command to delete certain record.

Give the bot a try

If you want to try the live assignment bot you can go to the following link:

The full bot logic can be found on Github: https://github.com/524119574/assignment_bot

Telegram: https://telegram.me/assignments_bot

Facebook: https://www.messenger.com/t/330226437441804

Slack: https://slack.com/oauth/authorize?scope=bot&client_id=204082547206.254714261845&redirect_uri=https%3a%2f%2fslack.botframework.com%2fHome%2fauth&state=assignmentBot