Build a NewsBot with Azure Bot Services, NodeJS, and the Bing News API

Aaron Osher
Major League Hacking
12 min readAug 21, 2019

--

Microsoft Azure Header
Microsoft Azure

There are dozens of services and platforms that you can use to create your next awesome chatbot project. We’ll be building a chatbot that gets news headlines for your favorite news categories. To make the bot we’ll be using Microsoft’s Azure Bot Services with NodeJS and the Bing News API. I’ll be going over how to use and what sets them apart from alternatives.

Prerequisites

For this project, you will need a Microsoft Azure account. If you already have a Microsoft account, you’ll need to enable Azure when logging into portal.azure.com. Otherwise, you can create an account at azure.microsoft.com. Additionally, you can use Azure for Students to get $100 in credit for your azure account.

Azure Bot Services can use NodeJS or C# with .NET. To use it with Node.JS we’ll need to install a few packages before getting started.

If you don’t already have node installed, you can download and install it from nodejs.org. I personally would recommend downloading either the 8.15 Carbon or 10.15 Dubnium Long Term Support (LTS) releases.

If you’re a MacOS or Linux user you can install Node.JS using the Node Version Manager (NVM) which simplifies the management of using different versions in your projects.

Windows Prerequisite

If you’re on windows, you’ll need to install the Windows Build Tools; this can take a while as it has to install Python. You can install it with the following command:

$ npm install -g windows-build-tools

Your terminal should look something like this:

Downloading python-2.7.15.amd64.msi
[============================================>] 100.0% of 20.25 MB (7.36 MB/s)
Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\Aaron\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
[============================================>] 100.0% of 1.12 MB (1.12 MB/s)
Downloaded vs_BuildTools.exe. Saved to C:\Users\Aaron\.windows-build-tools\vs_BuildTools.exe.
Starting installation...
Launched installers, now waiting for them to finish.
This will likely take some time - please be patient!
---------- Visual Studio Build Tools ----------
Successfully installed Visual Studio Build Tools.
------------------- Python --------------------
Successfully installed Python 2.7
Now configuring the Visual Studio Build Tools and Python...All done!

If you already have Python 2.7 installed on your PC, the installation may hang on the Python Installation. You can use Ctrl+C to halt execution, and Windows Build Tools should be installed.

Installing the Yeoman Generator

To create our bot, we’ll use Azure the Azure Bot Services Yeoman Generator.

The Yeoman generator is a Command Line Interface (CLI) similar to create-react-app or ng/ng2 if you've worked with React or Angular 2+, just more generic. It's an easy way for developers to create really powerful project generators. Azure Bot Services' one is called botbuilder.

First, we have to install the Yeoman Generator and the botbuilder generator, we can do this with the following command:

$ npm install -g yo generator-botbuilder

Once that’s done we need to create a directory to develop in and generate the project, we can do that with the following three commands:

$ yo botbuilder

Follow the prompts, and you’ll end up with a pre-configured project in your directory

You’ll get asked if you want to use JavaScript or TypeScript, select JavaScript, and then for sample project, select empty bot.

Once the generator is complete, you’ll need to enter the directory where the bot has been created.

$ cd my-chat-bot/

Bot Framework Emulator

We’re almost ready to start looking at code, I promise. But we’ve got one last thing before we’re done setting up. You’ll want to grab the Azure Bot Framework Emulator. This tool is one of the nicest parts of developing using Azure Bot Framework.

The emulator lets you simulate the environment that your bot will use when running on Azure’s servers, along with a handful of useful tools to aid in developing your bot.

You can get the emulator from Microsoft’s GitHub. Make sure to download the correct version for your operating system. macOS, Windows, and Linux are all supported.

Once you’ve got the emulator installed, start the bot with:

$ npm run start

Your bot is now running on your computer. You’re almost ready to start interacting with it. Note the port that your bot is running on, it is the numbers at the end of the output. The default is 3978

Open the emulator and click Open a bot. Enter http://localhost:3978/api/messages as the URL. Change the port to your if it’s different.

Now you can use the emulator. Just click connect, and if you’re feeling up to it, even send you bot a “Hello World” message.

Pro tip: You can create a .bot configuration file by clicking create a new bot configuration and saving the .bot file it generates.

Getting Started

Now that we’ve got all of the pre-requisites installed, we’re ready to start playing around with some code.

The bot has two core features

  1. Showing you the latest news when you request it
  2. Adding/Removing News Categories

Intro to the code

Let’s start by opening your my-news-bot folder in your favourite editor, Visual Studio Code is my editor of choice.

Below is the contents of bot.js in the empty bot boilerplate.

At the top of the file you’ll see we’re importing a class called ActivityHandler from the botbuilderpackage. The MyBot class that controls your bot extends this class to take advantage of the bot functionality.

At the very bottom of the file, you can see that the MyBot class is being assigned to the module.exports.MyBot variable. This syntax means that the MyBot class can be accessed from other JavaScript files in the project that load the file using import or require syntax.

Open the index.js file and if you look from line 34, you will see an instance of MyBot created and is being passed data from a web event:

In this project, most of the code we write will be in the onTurnasynchronous function. It doesn’t exist in your code yet, but we’ll add to the MyBot class found in bot.js in just a sec.

Receiving a Message

Let’s start by removing the default code from the constructor and adding the onTurn function in the myBot class in bot.js. We’ll also add the ActivityTypes object from botbuilder. Your code should look like this now:

onTurn has a parameter called turnContext . This parameter contains an instance of the turnContext object, which lets us access data about the message received, as well as interact with it.

In Microsoft’s Bot Framework, messages are called activities. An activity is a property of the turnContext method which contains the received message. We can leverage this method to access the text the bot receives.

To get the message text, we would need to retrieve the text property; let’s create it in a constant so we can use it later.

There are a lot of things we can do with the text, but for now, let’s use Regular Expressions (RegEx) to test for commands that we can pass to our bot.

Regular Expressions are out of the scope of this guide, but in summary, they are a powerful way to pattern match strings. You can play with and learn more about them on regexr.

Will will add a block of if/else statements that will check for five different commands our bot can accept:

At the moment it doesn’t do anything but we can get the bot to acknowledge the commands.

Sending a Message

Another method we can use within the turnContext object is sendActivity , which allows our bot to send an activity based on a message that is being received.

We can now test the bot again by restarting the server. That can be done by pressing Ctrl+C in the terminal window where you ran npm run start previously. Go ahead and restart the server by entering npm run start

Once the server starts you can test the bot again in the Bot Framework Emulator. You should get an output similar to the one below:

Linking the Bot to an API

What we’ve got so far is all great and dandy, but it’s not particularly useful, so let’s hook it up to an API that can fetch the news we want.

We’ll be using Microsoft’s Bing News Search API. It’s simple to use and well documented. As you already have an Azure account, all you need to do is activate the API and create an API key.

Head to the try-it page for Bing Search APIs v7 and click add .

You’ll now see a couple of API keys at the bottom of the page. You should save and keep these safe somewhere as they are unique to you.

Now that you’ve got an API key, we need to install the SDK for the API. Before continuing, you should stop your server.

We can get the SDK with the following command whilst in our project folder:

npm install azure-cognitiveservices-newssearch

Then at the top of our bot.js file, we need to load in the SDK, we can do that with the following four lines of code:

const CognitiveServicesCredentials = require('ms-rest-azure').CognitiveServicesCredentials;const NewsSearchAPIClient = require('azure-cognitiveservices-newssearch');let credentials = new CognitiveServicesCredentials('<your API key>');let client = new NewsSearchAPIClient(credentials);

Make sure to replace <your API key> with one of the keys you received above.

Next, we’re going to add an array (line 9below) containing a non-exhaustive list of valid categories for the en-GB locale that the user can subscribe to:

You can find a full list of categories in the News Search API Documentation.

In the interest of readability, we’ll put the logic for each command in its own function inside the MyBot class in bot.js. Here’s the code for adding, removing, and clearing categories:

Once we’ve done that we’re able to add and remove categories seamlessly from the chatbot, but we still need to add a way to get the news that the user requests. We can do that with two additional helper functions that allow for us to extract images and attach them to the messages.

Add the following two functions to your MyBot class. The order of the functions in the class doesn’t matter, but I’d recommend putting them before the onTurn function :

We’ve now added all of the logic required to interact with the API and store news categories, but the bot hasn’t been set up to interact with the functions. The functions have been written so that you can just pass the output of the function as the activity content.

You may also note that some of the functions expect parameters, we have to extract these from the message text, we can do that use RegEx capture groups, and JavaScript array destructuring. Both of these concepts are a tad bit out of the scope of this article, but you can read about capture groups on regexr, and destructuring in this mozilla blog post.

We can now update the onTurn function to get the parameters and then call the helper functions we created previously, and then pass the results to sendActivity . Your onTurn functions should look like this.

Now that we’ve linked the API to the bot, we now have a functioning newsbot! You can go ahead and restart the server and open up the emulator to test it out.

Deployment

We’ve got a working bot now! But no one can use it. The way we solve this is by deploying it to Microsoft Azure.

Deploying your bot to Azure Bot Services will allow for it to be connected to over a dozen services, including Slack, Facebook, Twillio, and more!

Preparing a Web App Bot

In order to deploy our bot we need to create somewhere for it to run, this is called a Web App Bot.

Login to the Azure Portal and create a new resource in Create a resource > AI + Machine Learning > Web App Bot

Then, fill out the required fields, here’s how I configured mine:

  • Bot Name: dev-osher-MyNewsBot
  • Subscription: Free Trial
  • Resource Group: MyFirstResourceGroup
  • Location: Central US
  • Pricing tier: S1 (1K Premium Msgs/Unit)
  • App Name: dev-osher-MyNewsBot
  • Bot Template: Basic Bot (NodeJS)
  • LUIS App Location: West US
  • App Service Plan/Location: Default Generated One
  • Azure Storage: Create new

Azure will take a few minutes to provision the resources. Once it’s done you should get a notification in the Azure portal. We’ll then need to download the source code so we can get the service references for deploying our bot.

You can download the source code from the build section of bot management.

After downloading the source you’ll want to copy the entries.env or appsettings.json from the downloaded source to your project’s .env or appsettings.json file.

We’ll then need to update the index.js file on line 21 to use the keys we downloaded.

Next we’ll have to copy the deploy.cmd file from the downloaded files to the root of your project.

Once you’ve done that you’ll need to commit your project to a remote Git Repository. We’ll use GitHub for this.

You can create a new remote repository at github.com/new

Once created, open your terminal and enter the following commands to commit and push the code:

$ git init
$ git add .
$ git commit -m "Intial Commit"
$ git remote add origin <your git repo url>
$ git push -u origin master

Continuous Deployment

You’ll then need to go to the App Services section of the Azure portal and then select your bot and Deployment Center, we'll then click on GitHub to authorise the setup.

Once you’ve authorised GitHub we’ll need to select a build provider. Select App Service Kudo build server. You'll then want to select your GitHub Username as the organisation, the repository name for repository and master for branch.

Once you’ve finished that, Azure will attempt to deploy your bot, and we’ll automatically re-deploy when you push to master in the future.

You can now test your bot by going to the bot service and selecting Test in Web Chat. It should work the same as it did in the emulator.

Connecting the Bot to a Channel

We’ve now got a working bot running in the cloud. However, unless users have access to your Azure Portal (they shouldn’t) they have no way of interacting with the bot. Fortunately, Azure has given us a simple solution to this, we can use channels to connect the bot to other platforms.

I’m going to use Telegram as an example.

First, go ahead and use bot father to create a bot on telegram, you can read how to do that in the bot service documentation.

Then go to the Web App Bot and select the Channels section, and then choose Telegram

You’ll then get presented with a screen to add the bot token you got from bot father on telegram, this is the only piece of configuration.

Finally, go ahead and add your bot on Telegram, you should then be able to interact with it the same way you had before.

Congratulations! You’ve now created a simple but powerful bot using Azure Bot Services. Here’s a recap of what we learned:

  • How to start a Microsoft Bot Framework Project
  • How to use the Microsoft Bot Framework Editor to streamline development,
  • How to set up continuous deployment using GitHub,
  • How to link the bot to other services such as Telegram.

This guide has taken you through the basics of creating your first Bot with Azure Bot Services, hopefully, you’re walking away with enough knowledge to be able to take this service further and create a really cool and power bot hack!

Where to go next

The bot you created is fairly generic in the way it functions. You can replace helper functions that we created to interact with a different API or the rest of an application you’ve created.

If you’re not already familiar with some of the JavaScript techniques or Regular Expressions that I used, I would urge you to look into attaining a better understanding of what they are. I have always found myself being able to learn really well from video content, here is a great guide from the YouTube channel DevTips on RegEx and JavaScript.

Happy Hacking 👋

--

--