Setting up the sample Azure bot to work locally with the bot emulator

In this article I will demonstrate how to configure your local development environment to work with the environmental variables set up within your Azure environment in the sample bot previously discussed,

Introduction 

In the previous article we looked at how to create a sample azure bot and then how to configure it in VSTS for continuous integration. If you want to develop with this sample locally you will need to set it up to work with the local bot emulator. (What is Bot Builder for Node.js and why should I use it?). To be able to do this you will have to configure your local development environment to use the process.env variables which are picked up within the azure runtime environment.

process.env

process.env is how environmental variables are passed into a node development environment. They are especially important when it comes to keeping secret keys secret. We have to make sure that they are not included in the git repository and are not available to the end user. You can learn more about process.env in the nodejs documentation.

Using dotenv

I like to use the dotenv nodejs package to handle local env variables to just read my variables locally from a .env file. If you look at the package.json for the example project, turns out so does microsoft 😉

...
  "dependencies": {
    "azure-storage": "^1.3.2",
    "botbuilder": "^3.4.2",
    "botbuilder-azure": "0.0.1",
    "dotenv": "^4.0.0"
  },

When I clone the VSTS repo locally and run it – nothing seems to happen…..and that’s because I do not have any local env variables….


var useEmulator = (process.env.NODE_ENV == 'development');

......
if (useEmulator) {
    var restify = require('restify');
    var server = restify.createServer();
    server.listen(3978, function() {
        console.log('test bot endpont at http://localhost:3978/api/messages');
    });
    server.post('/api/messages', connector.listen());    
} else {
    module.exports = { default: connector.listen() }
}

So we can use a .env file locally in the root of the project and then require it in my code. The .env file contains nothing more that NODE_ENV = ‘development’ right now.

NOTE: To make sure this is not pushed up to the repo – add *.env to your .gitignore file.

We now have a web server running (nice typo MS 😉 ).

Bot Emulator

Once you download and install the bot emulator you can configure it as per the instructions to run a simple bot without issue. This does not work once you have a bot running in Azure. The sample I created uses multiple Azure services and you can see them being called as the environmental variables in the code.

 

var connector = useEmulator ? new builder.ChatConnector() : new botbuilder_azure.BotServiceConnector({
    appId: process.env['MicrosoftAppId'],
    appPassword: process.env['MicrosoftAppPassword'],
    stateEndpoint: process.env['BotStateEndpoint'],
    openIdMetadata: process.env['BotOpenIdMetadata']
});

Unfortunately when I load up the emulator – as you can see above “new builder.ChatConnector” does not pass in any environmental variables. I then get the following error in the console

The appId is undefined as it is not being passed into the application.

The ApplicationId and secret key were given to you when you created the bot in the first place – if you didn’t write them down, you’re going to be regretting that decision right now….

We need to modify the ChatConnector request to pass in the necessary variables, and we also need to add those variables to the .env file.

 

var connector = useEmulator ? new builder.ChatConnector({
        appId: process.env['MicrosoftAppId'], //new param
        appPassword: process.env['MicrosoftAppPassword']  //new param
    }) : new botbuilder_azure.BotServiceConnector({
    appId: process.env['MicrosoftAppId'],
    appPassword: process.env['MicrosoftAppPassword'],
    stateEndpoint: process.env['BotStateEndpoint'],
    openIdMetadata: process.env['BotOpenIdMetadata']
});

Refreshing the bot emulator, we start to get somewhere

and then it dies when we try and talk to it (doh)

Azure Storage Credentials

The problem is that this chat example uses the Azure Storage Service (to make the Azure Function part of the example work). So we have to add the AzureWebJobsStorage environmental variable to our .env file.

 

var queueSvc = azure.createQueueService(process.env.AzureWebJobsStorage);

You can find this connection key in your Azure portal > Storage Service > Access Keys

The format for the .env file entry  is as follows (Running Azure Functions Locally with the CLI and VS Code): AzureWebJobsStorage=’DefaultEndpointsProtocol=https;AccountName=storagename;AccountKey=secretKey’

Once that is in place – we have a bot running locally talking to the bot framework – unfortunately we do not get a response back from the Azure Function….

Azure Function debugging…..

The problem quite simply is that the message sent to the azure function contains a serviceURL from which it should respond – and in this case it is ” serviceUrl: ‘http://localhost:63136′,” and of course it has no idea what that is.

For the sake of this blog post that is ok – we are at least up and running with the “bot” part of this emulator working, although somewhat disappointing it can’t be fully developed in this environment.

Conclusion

As part of this process we have seen how to connect the local bot emulator to a service running in Azure and how to incorporate a connection to Azure Functions.

 

 

Advertisements

Adding your bot code to VSTS for source control and configuring continuous integration

In this article I will walk through the steps to enable source control and continuous integration for your bot

Introduction

In previous articles we have seen how to create a sample bot and how to link it into Skype. In this article we are going to look at how to use Visual Services Team Studio (VSTS) to manage source control and eventually continuous integration. We are going to set up is an environment such that when you check your code into the repository a code deployment is triggered to the nodejs server (our bot in this case) which then finally restarts. In short: code checks in and everything refreshes automagically.

What is going to happen is that we are taking the code out of the Azure sample development web based IDE environment and move it to something a little more robust.

Selecting your Source Control

From your bot interface select settings and scroll down to the continuous integration section.

Note: it is really important to read the instructions – if you do NOT download the zip file of your bot first you will end up with a blank look on your face and a need to rebuild your bot from scratch – take it from this idiot (facepalm).

bot1

Download your zip file and then head over to your favorite source control repo and create one.

In my case I used Visual Studio Team Services (VSTS) to set up a git repo.

bot2I unzipped the file locally and associated it with my new project in VSTS. I use JetBrains Webstorm as my JavaScript development environment but this would work just as well in Visual Studio or VS Code.

bot3

 

Setting up continuous integration

Back within the Azure bot development website click the Continuous Integration button. This will then cause you to move through a number of screens configuring the CI. For this to work you have to have configured your Azure environment to be linked with your VSTS environment. Here’s a great blog post describing how to do just that (Linking your VSTS Account to Azure)

So “Setup”

bot4Select VSTS

bot5

and then your project within VSTS

bot6

Which branch (master just to keep things simple for now)

bot7

et voila

bot8

Configuring a performance test

Following the prompts you can set up the perf test (for once the CI is complete)

bot9

bot10

 

and we now have your Azure bot being deployed from code sitting within VSTS. Cool 🙂

Example

I have my bot hooked up in Skype

bot12

I make a quick change to the message in WebStorm (my JavaScript IDE)

bot11

Commit and push

bot13

bot14

Head back to Skype and within about 60 seconds (it has to restart after all) we have a new message

bot15

What’s really interesting though is that I started my conversation before the restart was ready – but the message was queued and when the server woke up it finally responded – that was very cool

Conclusion

In this article we have looked at how to set up a VSTS source control repo of our new test bot and then configured continuous integration through the bot framework. I check in my new code and within seconds the new functionality is posted out to the live bot.

 

 

 

Adding your Azure bot framework bot into Skype

In this article I will show how simple it is to add your newly created bot into your Skype contacts.

Introduction

In the previous article we looked at how to create your first sample Azure bot which uses Azure Functions in the background. This article will continue from where that left off.

Channels

The bot framework has a number of pre-configured “Channels” which allow your bot to be easily added to other chat mediums.

If you aren’t already there, go into your bot and select Channels. Conveniently there is an “Add to Skype” button right there….(can’t imagine what that does)

bot1

Adding to Skype

You click on the link to Add to Contacts

bot2

you then “Add to contacts” – having to log in during the process (I need to get a better logo for my bot)

bot3

about 30 seconds later my bot appeared in my Skype client as a contact (bonus if you recognize the song lyrics)

bot4

Once it appeared in my contacts, I could talk to it – and while this is pretty simple stupid, this is VERY cool 🙂

bot5

I have to say though, the “response” from the Azure functions seems very slow for what should be a trivial task. I have no idea why or how it is even working right now – I’ll get to that 🙂

Conclusion

Adding your bot to the pre-configured channels is as easy as following the instructions and we now have a bot running in Skype! It’s not quite getting me a beer from the fridge yet, but we’ll work on that 🙂


How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes

In this article I will demonstrate how to create a nodejs bot hosted in Azure. The bot will be created from a sample provided from Microsoft. The example bot will use Azure Functions as the trigger for it’s communication. You will need a Microsoft Azure account to be able to follow this process for yourself. This is only an introduction on how to get up and running, more steps in the process will come later.

Introduction 

Looking at the documentation on how to create a test a nodejs bot within the Microsoft Bot Framework can be found in the Microsoft documentation (What is Bot Builder for Node.js and why should I use it?).

I found another more interesting (less CLI) way to do it through Azure portal. As I work my way through figuring out how all this works I expect there will be a number of blog posts as there is a lot to talk about. This post is focused on getting us up and running.

As of February 2017 this Bot Service is in Preview and the process may change before it goes GA later in the year !

Creating a bot service in Azure

Within your Azure portal create a new instance of a bot service from within Intelligence and Analytics.

bot1

Give it a name and resource group

bot2

and create.

Once created you will be able to access your bot from your portal resources pane.

Setting up your service

Opening your new service for the first time, you’ll be presented with the form to create an AppId and secret password for your bot. Follow the prompts and get back to the screen to create a sample bot.

bot3

We are going to select NodeJS and create an azure function bot for the sake of demo

bot4

and then we wait……Ho hum, I wonder what’s going on in the background – probably magic….

bot5

Developer interface

Once the bot has been created you will be presented with a web based IDE showing you the node code and a chat window on the right.


bot6

You can talk to yourself!! Something I like to do all the time…..apparently….

bot9

Back in Azure Portal

In setting up all this up, Azure auto-magically created a number of new services have been created in the Azure Portal to manage this functionality(which is why we had to wait for the background magic earlier). We can now see the following services making all this happen.

bot8

How it works and how it is happening will come in future blog posts. For the moment we are up and running……and this blog post is getting long enough already.

Conclusion

This entire process took no more than about 15 minutes to complete. There is a lot more to explore around the deployment of the bot and the further development thereof, but for the moment we are up and running with a bot and Azure Functions (at least in development).

PS

I now have a nagging feeling that this is cool and all, but I really should check and understand how much those new magic services are going to cost…….

NWCJS meetup – Angular 2 for beginners

Next week, PSC is hosting the 6th meeting of the Northwest Chicago JavaScript meetup group – seems very quickly that we have got to 6 months and we’re stall having fun and blowing some minds 🙂

This time around we are very honored to have David Giard, the regional Microsoft Technical Evangelist coming and talk to us. TypeScript is being used by the Angular development team at Google and it is amazing to see collaboration between the two companies who in other ways are always competing against each other.

Come and see what all the noise is about Angular 2 – Pizza and “refreshments” will be provided 🙂

http://bit.ly/2kLMS1w

 

Angular 2 for Beginners by David Giard .

Angular 2 is a JavaScript framework that helps you build rich, interactive Single Page Applications.

This presentation will cover the basics of Angular 2 and the advantages of TypeScript – a language that adds features to JavaScript, including strong typing. You will learn about data binding, event binding, routing, and observables.

David Giard is a Technical Evangelist at Microsoft .  

 

 

 

What do Apple Airpods and Spongebob Squarepants have in common?

So in an uncommonly, just for the hell of it, post I wanted to share something techie but just for the sake of amusement. When my family was looking at the new AirPods online we noticed something rather amusing……for those of you who don’t watch Spongebob Squarepants you won’t get this, but we are talking about this guy – Mr Krabs

Mr Krabs looking angry when he realized these are earphones $159.00 

cr4

Mr Krabs scared back into his AirPod shell

cr2

Mr Crabs wide eyed stare

cr3

Mr Krabs spying on his customers

cr1

and Finally you’re never going to look at this the same way again….

iPhone, iPhone, Angry and Scared Mr Krabs

cr5

Five years of blogging and personal growth

So it’s been just over five years since my first blog post – I’d just been to an IBM conference and been inspired to do something about my career in a way I wasn’t expecting. To the day, it is five years since I registered xomino.com. My reasoning was to make myself more employable than I had ever been before. I wanted to get involved in the XPages community, express myself and see what happened……So a quick summary and time for self reflection. Five years ago I made the best decision of my professional career, and I had no idea what I was doing at the time 🙂

  • 388 published blog posts (including this one)
  • 380,000 page views
  • Got a job at PSC Group
  • Spoke 3 times at IBM’s global ICS conference
  • Spoke at InterConnect IBM’s global cloud conference
  • Spoke at Dreamforce, Salesforce’s global conference
  • Spoke remotely at a conference in Australia (that was weird but cool)
  • Spoke at a conference in the Netherlands
  • Spoke at a SharePoint conference
  • Spoke at multiple other events online and on stage
  • 3 times IBM ICS Champion
  • 1 time IBM Cloud Champion
  • 1 time Microsoft MVP

All in it’s worked out rather well actually. I’ve made some lifelong friends along the way, and got to work with some incredible people. It has been a blast and all because I stood up in front of several hundred people and made an ass of myself back in 2012….I wholeheartedly recommend it to anyone 🙂