image

 

I’ve been using the Azure Portal more and more these days and one thing is for sure, I still have a lot to learn. There is soooo much to do in Azure. This presents a problem with clutter. Since I don’t use all of the features, I find the “menu” of options to be pretty noisy. But the good news is, that is an easy problem to solve.

 

To the left I’ve pasted a screenshot of the Azure Portal’s side menu (actually, that is only part of it). You’ll note that the items on that list are shown as “favorites”. But I didn’t favorite them! With a few clicks I can clean this up.

 

 

 

 

 

 

 

 

 

Just click “All services” and you can see the complete list. The list is pretty long but I’ve included a screenshot of some of it below:

image

From this screen you can easily select which items really are your favorites. That will immediately reduce the size of the side menu. In addition, you will find a TON of other options that were not displayed on the favorites list originally. That’s a little depressing because it shows that there is even more to learn in Azure than I first thought. But I guess that is a good problem to have.

But wait, there’s more!

 

imageimage

Next, notice that as you hover over each item in the favorite list, you will see an icon indicating that you can grab it. If you do, you can drag the item up or down in the list.

 

 

 

 

 

 

image

When I am done selecting favorites and moving them around, I am left with a menu that makes it really easy for me to find what I need. No noise. Only the items I want in the order I want them. Now I can get to work!

 

The Microsoft Bot Framework makes it pretty easy to get started creating Chat Bots. If you haven’t gotten started yet, I recommend checking out this site: Bot Framework.

For a recent Bot that I created, we had the need for the Bot to expand. What I mean is, I want my bot chat UI to start out collapsed like a search box but then expand once a user starts talking to my bot.

7F9021F8-69F8-40A0-A26B-8EEC0CD32A1B

 

There are lots of examples for getting started with the Bot Framework. For this post, I will assume you already know how to do that. Hopefully you already know how to hook up the Web Chat control to communicate with your bot – here are some details about that.

I’ll start with the client-side code for this feature

For this feature, we will utilize the Web Chat’s backchannel using the DirectLine connection to the Bot. Then we can respond to events sent to the Web Chat from the bot. Here is the JavaScript needed to do this.

First, create a connection to the Bot with DirectLine:

        var directLine = new BotChat.DirectLine({ secret: "YOUR KEY GOES HERE" })

Next, subscribe to the event. All I am doing is listening for the event named “init” and when it occurs, add a class “fullSize” to the HTML element that hosts the bot.

        directLine.activity$
            .filter(isInitEvent)
            .subscribe(changeSize);

        function isInitEvent(activity) {
            return activity.type === "event" && activity.name === "init";
        }

        function changeSize(activity) {
            console.log("here")
            var container = document.getElementById("bot-chat-container");
            container.classList.add("fullSize");
        }

Lastly, create the Web Chat:

        BotChat.App({
            botConnection: this.directLine,
            user: { id: 'user' },
            bot: { id: 'bot' },
        }, document.getElementById("bot-chat-container"));

I’m just using a little CSS to hide and show the rest of the Web Chat UI. Feel free to enhance this part a little, it could be better. Hopefully you get the idea.

        #bot-chat-container {
            border: 1px solid #333;
            height: 50px;
        }

        #bot-chat-container.fullSize {
            height: 300px;
        }

        .wc-header {
            display: none;
        }

        .fullSize .wc-header {
            display: block;
        }

        .wc-console svg {
            fill: black;
            margin: 11px;
        }

        /* These styles are used to hide the upload button...*/

        .wc-console label {
            display: none;
        }

        .wc-console .wc-textbox {
            left: 10px;
        }

All that is left to show of the UI is this DIV. But this isn’t too exciting:

<div id="bot-chat-container" />

Here is the Server-Side Code

This whole thing is based on an event coming to the Web Chat UI from the Bot on the server. I’m using C# and it is pretty simple stuff. When you create a Bot, the MessagesController is stubbed out for you to handle various Activity Types. In this case, I am concerned with ActivityType.ConversationUpdate. Check to see if the a new member is added to the conversation and if so, send event named “init”.

private async Task&lt;Activity&gt; HandleSystemMessage(Activity message)
        {
            if (message.Type == ActivityTypes.DeleteUserData)
            {
		// ...
            }
            else if (message.Type == ActivityTypes.ConversationUpdate)
            {
                using (var scope = Microsoft.Bot.Builder.Dialogs.Internals.DialogModule.BeginLifetimeScope(Conversation.Container, message))
                {
                    var client = scope.Resolve&lt;IConnectorClient&gt;();
                    if (message.MembersAdded.Any())
                    {
                        foreach (var newMember in message.MembersAdded)
                        {
                            if (newMember.Id != message.Recipient.Id)
                            {
                                var reply = message.CreateReply();
                                reply.Type = ActivityTypes.Event;
                                reply.Name = &quot;init&quot;;
                                await client.Conversations.ReplyToActivityAsync(reply);

                            }
                        }
                    }
                }
            }
		// ... etc. etc.

That’s all.

I wanted to point out one difference between ConfigurationManager and WebConfigurationManager. I know there are other differences but here’s an issue I ran into recently.

I’ve been working on some Bot Framework stuff (really cool and fun, by the way). The Bot uses a QnAMakerService and QnAMakerDialog which worked great when I ran the Bot locally (debugging in Visual Studio) but it didn’t work when I deployed it to Azure. I knew that a lot of features of my bot were working but when it needed to use the QnA features it was just bombing out. A coworker helping out said he fixed my problem by putting settings in for the QnaSubscriptionKey and QnaKnowledgebaseId via the Azure Portal (navigate to your App Service, then Settings > Application Settings)

image

 

Yeah, I knew those were needed of course, but I had already added them. The settings were in my web.config file:

image

I was glad the Bot was working and I had a major clue to my issue. I wasn’t going to let it end there. Why weren’t the web.config settings being used? I took a close look at my code:

[Serializable]
public class QnADialog : QnAMakerDialog
{
public QnADialog() : base(new QnAMakerService(
new QnAMakerAttribute(
ConfigurationManager.AppSettings[“QnaSubscriptionKey“],
ConfigurationManager.AppSettings[“QnaKnowledgebaseId“],
Sorry, I couldn’t find an answer for that“,
0.5)))
{
}
}

The code seemed pretty straightforward. As a matter of fact, I recalled copying it from a sample on the web! Then I noticed that the code was using “ConfigurationManager” which was not the normal thing for me. I usually create web applications and I therefor use “WebConfigurationManager” to read from web.config files. And since my bot runs as an App Service in Azure, it IS a web application. I proceeded to make the major refactor of adding the text “Web” to the word “ConfigurationManager”. I then removed the Application Settings from the Azure Portal, leaving the values I had previously entered into the web.config file. And it worked perfectly.

As developers we have a variety of options to access configuration data and that data can be stored in several places. In addition to the two previously mentioned, there is also the CloudConfigurationManager class. My understanding is that this would have worked similarly to WebConfigurationManager. And, in fact, good old plain ConfigurationManager would have worked fine for this Azure App Service if I used the Portal to set my app settings instead of the web.config file. So, choose carefully and get to know the differences between the ConfigurationManager classes

Well, this was one of those bugs that took a while to figure out and of course the solution was pretty simple.

It turns out that this:

[EnableCors(origins: “http://MyWebsite.com”, headers: “*”, methods: “*”)]

is not the same as this:

[EnableCors(origins:”http://mywebsite.com”, headers: “*”, methods: “*”)]

I have some JavaScript that calls an ASP.NET web API method on another domain. Let’s pretend that the API is on myservice.com and the website is on mywebsite.com. As you can guess, I was having some issues and getting an error similar to this:

Failed to load http://myservice.com/api/SomeController/SomeMethod: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://mywebsite.com is therefore not allowed access.

I tried a lot of things to figure out what was going on. I knew that I had the CORS attribute on my controller and I had config.EnableCors(); set up in my Web API configuration. This is one of the first times I’m using CORS on Azure so I thought it had something to do with Azure, but that was not correct. After trying many, many hacks with no success and staring at my EnableCors Attribute, I had the “crazy” idea to change “http://MyWebsite.com” to ”http://mywebsite.com” and of course, everything worked fine. From now on, I’ll use all lowercase!

I hope you won’t get stuck wasting as much time as I did trying to figure this one out!

What? You haven’t registered for the best developer conference in the Northeastern U.S. yet? Well don’t worry, there is still time. First, let me tell you why you need to attend.

Full disclosure: I am a founding board member of the TechBash Foundation. Myself and a few other people run this event for the community. We make no money from the event. All fees and revenue generated by TechBash are put directly into the event to cover costs.

OK, on to it…

What is TechBash?

TechBash is a 3 day developer conference. If you are interested in topics like .NET, Web, Cloud, JavaScript, DevOps, Architecture, Patterns, Mobile, Frameworks and more, you should be at TechBash.

Why should you be at TechBash 2017?

I’ll summarize and you can read on below for more details:

1. Content – TechBash has got great content. Want to learn about the latest frameworks and patterns from industry experts? We’ve got them. Want to hear directly from Microsoft employees and MVPs? We’ve got plenty of them. TechBash is bringing in the best speakers from top tech companies to deliver content to you. read more…

2. Location TechBash is organized by a small group of developers who were tired of traveling across the country for good content. So now they are bringing the content to you. TechBash is in the Poconos in Pennsylvania. That’s less than a 2 hour drive from NYC or Philly. Plus, the short drive time means you won’t need to ask your boss for two extra travel days. read more…

3. Price. Book now and you can register for TechBash plus 3 nights in the hotel for less than $1000. That’s a great price for a conference of this caliber. Plus, no airfare needed so TechBash fits into your budget!  After 9/8 hotel rates may vary. read more…

4. Venue  The Kalahari Resort. This is the largest indoor water park in the country. So while you are coming to learn and network with tech leaders from around the country and meet up with old friends and new, you can have a little fun and hit the water slides. read more…

5. Fun for the Family – Yes, it’s a huge water park. But there are a ton of other activities at the Kalahari Resort and nearby. Plus, Friday afternoon we have Sara Chipps hosting a Jewelbots build event for kids 8 and up. They can learn to code too. read more…

 

Plus, if you want to bring the whole team, contact us regarding group discounts: info@techbash.com

 

Great Content – Learn from the best

We’ve got great speakers from top tech firms around the country coming in to speak to you. And you may notice these are some of the same speakers that you’ll see at much more expensive conferences. Here are a just few of our featured speakers:

image

 

And if you are interested in content direct from Microsoft, we’ve got that too:

image

OK, here is a full list of our speakers. You can see our current schedule on our website.

Alon Fliess, Ambrose Little, Anne Bougie, Anoop Kumar, Ashley Grant, Bill Wolff, Cameron Presley, Chris Houdeshell, Damian Brady, Danny Brown, Dave Voyles, Donovan Brown, Eran Stiller, Erika Carlson, Gajan Pathmanathan, Jason van Brackel, Jeffrey Fritz, Jeremy Clark, Jim Wooley, Joseph Guadagno, Joshua Garverick, Ken Dale, Kevin Griffin, Lee Brandt, Nate Barbettini, Nick Landry, Ondrej Balas, Oren Novotny, Paul Hacker, Richard Taylor, Sam Basu, Sara Chipps, Scott Allen, Scott Kay, Stephanie Herr, Stephen Bohlen, Steve Michelotti

Location – If you are in the Northeast, we are close by

Just check out the map below. We are about 2 hours from NYC, NJ, and Philly. We are close by to Delaware, Central and Western PA, NY State, Maryland, DC and much more. The best part is that you don’t need to sit on long flights or ask the boss for extra travel days just to attend TechBash! Oh, and that means travel costs are lower too.

image

Price – The Price is Right!

TechBash fits your budget! An all access ticket to TechBash is only $349. That includes 3 days of content plus breakfast, lunch and coffee/snacks too. Compare that price to some other conferences and see what you think. Of course, you’ll need to stay over for a few nights. We’ve got great prices reserved at the Kalahari Resort (use group id 1145) and if you book quickly you can still get the conference registration and 3 nights in the hotel for under $1000. That is an incredible deal for the content we provide. If you need help convincing your boss, check this out.

Venue – The Kalahari Resort is AWESOME!

To start, The Kalahari is a first class conference center with plenty of Wi-Fi to go around! The place was brand new last year and this year they expanded to add another 500 hotel rooms. Plus, it is now the largest indoor waterpark in the country! So after you are done learning from the best, hit the slides and have some fun!

imageimageimageimageimageimageimageimage

Family Fun – There is plenty to do!

Bring the whole family to TechBash! The kids will love the waterpark but that isn’t all there is for families. This year TechBash is very proud to announce that Sara Chipps will be offering a hands-on event for kids ages 8 and up to learn to code and work with Jewelbots. Kids will learn entry level coding and Arduino. Plus there is face painting, crafts, and more! There is a $10 ticket required to cover costs for this. Check out all of the great stuff to do while at TechBash on our site. We’ve got a ton of ideas.

I hope I’ve shown you why TechBash is the best conference for you. Contact me via my blog if you have any questions.

Thanks,

Andy