lectio

Bot living example: Gamification

Contents

• Gamification
  • Cards
  • LUIS
  • Deploy in local - Bot Channel Registration
  • Deploy in Azure - Web App Bot
• References

Gamification

This project is a Proof of Concept of a Bot using Microsoft Bot Framework v4. The aim of the project is to implement a Bot integrated with Teams, that demonstrates how the usage of complex cards and LUIS.

The bot is named after the practice of Gamification, i.e. the application of typical elements of game playing (e.g. point scoring, competition with others, rules of play) to other areas of activity.

When started the conversation the Bot will ask some questions to the user and collect the responses. At the end of the quiz, the bot will calculate the score for the user.

Cards

The questions are implemented via a complex type of Card, the Adaptive cards.

Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way. Card Authors describe their content as a simple JSON object. That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.

The goals for Adaptive Cards are:

• Portable - To any app, device, and UI framework
• Open - Libraries and schema are open source and shared
• Low cost - Easy to define, easy to consume
• Expressive - Targeted at the long tail of content that developers want to produce
• Purely declarative - No code is needed or allowed
• Automatically styled - To the Host application UX and brand guidelines

To help creating new Adaptive Cards, Microsoft developed an online designer.

LUIS

The bot makes use of LUIS to determine whether the user wants to stop the quiz.

We have created an App for the project Gamification and registered the two following Intents:

• None: represents nothing meaningful or of interest
• Stop: the user requested to stop

In this simple example we don’t need any Entity.

Deploy in local - Bot Channel Registration

To run the bot on your PC and integrate it with one or more of the messagging applications supported by the Azure Bot Channels, you can create a Bot Channels Registration. The Bot Channels Registration allows you to specifies the url where to contact the Bot, hence it is not automatically binded to a Web App.

To provide a valid URL to the Bot Channels Registration that points to the localhost we can use ngrok. With ngrok you can use one command to create an instant, secure URL to your localhost server through any NAT or firewall.

After you installed ngrok you can run the following command in a shell to open a tunnel to localhost:<PORT>.

$ ngrok http localhost:<PORT>

By default the bot is published to the port 3978, hence in a default setup you should use ngrok http localhost:3978

ngrok will create an address to use to tunnel the localhost similar to 616163af.ngrok.io. We can use this address to configure the endpoint of the Bot Channels Registration resource. To do this you have to open the details of the Bot Channels Registration and click on the Settings blade under the Bot Management section; then in the Configuration section you have to populate the Messaging endpoint field with the https URL ngrok created followed by /api/messages.

You have then to copy the value of the field Microsoft App ID (Manage) and you have to generate a new secret for it. To generate the secret you can click on the Manage link in the title of the field. The page Certificates & secret for the Application will be opened. You have to create a new Client Secret and copy its value.

Pay attention: the field will be available to copy only one, so ensure to have it copied immediately.

You need to provide this values to the Bot before executing it, otherwise it would not be authorized to use the Bot Channels Registration. For example, if you chose to implement the bot using the .NET sample you have to paste the values in the appsettings.json file.

Finally, you have to click on the Channels blade of the Bot Channels Registration and add the Teams featured channel, clicking on the Teams icon and completing the form. Once completed, you should be able to click on the Teams channel and open a chat with the bot directly in Teams.

Deploy in Azure - Web App Bot

Deploying in Azure is simple, a lot of stuff is configured by Azure itself. You’re primarly in charge of deploying the bot into the Web App.

To deploy a Bot into Azure, you can use the Web App Bot resource. It will create an App Service (with an App Service Plan if needed) and a Web App Bot.

In App Service, an app runs in an App Service plan. An App Service plan defines a set of compute resources for a web app to run.

The App Service is the running web app, while the Web App Bot is used to link it with the various Channel (Telegram, Teams, Skype, etc.), and works like the Bot Channels Registration, but you do not have to specify the endpoints and the secrets.

For a detailed getting started you can refer to the Microsoft documentation. Once created the bot, you can easily set up the CI/CD leveraging on Azure Repos, GitHub or Bitbucket. To learn more about the topic you can take a look to the linked documentation about Set up continuous deployment.

References

• Cards
  • https://docs.microsoft.com/en-us/adaptive-cards/
  • https://docs.microsoft.com/en-us/adaptive-cards/resources/principles
  • https://adaptivecards.io/
  • https://adaptivecards.io/designer/
• Deploy in Azure
  • https://docs.microsoft.com/en-us/azure/app-service/overview-hosting-plans
  • https://docs.microsoft.com/en-us/azure/bot-service/abs-quickstart?view=azure-bot-service-4.0
  • https://docs.microsoft.com/en-us/azure/bot-service/bot-service-build-continuous-deployment?view=azure-bot-service-4.0
• Deploy in local
  • https://ngrok.com/

Agenda

1. Presentation (00:00)
2. Introduction
3. Azure Bot Service (00:30)
4. Azure Cognitive Services (01:00)
5. LUIS: Language Understanding
6. Gamification (01:30)
7. Q&A (01:55)