Skip to content

Latest commit

 

History

History
 
 

07.using-adaptive-cards

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
deploymentTemplates
deploymentTemplates
 
 
src
src
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
pom.xml
pom.xml
 
 

README.md

Using Adaptive Cards

Bot Framework v4 using adaptive cards bot sample

This bot has been created using Bot Framework, is shows how to send an Adaptive Card from the bot to the user.

This sample is a Spring Boot app and uses the Azure CLI and azure-webapp Maven plugin to deploy to Azure.

Prerequisites

  • Java 1.8+
  • Install Maven
  • An account on Azure if you want to deploy to Azure.

To try this sample

  • From the root of this project folder:
    • Build the sample using mvn package
    • Run it by using java -jar .\target\adaptive-cards-sample.jar

Testing the bot using Bot Framework Emulator

Bot Framework Emulator is a desktop application that allows bot developers to test and debug their bots on localhost or running remotely through a tunnel.

  • Install the latest Bot Framework Emulator from here

Connect to the bot using Bot Framework Emulator

  • Launch Bot Framework Emulator
  • File -> Open Bot
  • Enter a Bot URL of http://localhost:3978/api/messages

Interacting with the bot

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. For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Cortana, it will look and feel like a Cortana card. When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app. Users win because everything feels familiar. Host apps win because they control the user experience. Card authors win because their content gets broader reach without any additional work.

The Bot Framework provides support for Adaptive Cards. See the following to learn more about Adaptive Cards.

Adding media to messages

A message exchange between user and bot can contain media attachments, such as cards, images, video, audio, and files.

Deploy the bot to Azure

As described on Deploy your bot, you will perform the first 4 steps to setup the Azure app, then deploy the code using the azure-webapp Maven plugin.

1. Login to Azure

From a command (or PowerShell) prompt in the root of the bot folder, execute:
az login

2. Set the subscription

az account set --subscription "<azure-subscription>"

If you aren't sure which subscription to use for deploying the bot, you can view the list of subscriptions for your account by using az account list command.

3. Create an App registration

az ad app create --display-name "<botname>" --password "<appsecret>" --available-to-other-tenants

Replace <botname> and <appsecret> with your own values.

<botname> is the unique name of your bot.
<appsecret> is a minimum 16 character password for your bot.

Record the appid from the returned JSON

4. Create the Azure resources

Replace the values for <appid>, <appsecret>, <botname>, and <groupname> in the following commands:

To a new Resource Group

az deployment sub create --name "adaptiveCardsBotDeploy" --location "westus" --template-file ".\deploymentTemplates\template-with-new-rg.json" --parameters appId="<appid>" appSecret="<appsecret>" botId="<botname>" botSku=S1 newAppServicePlanName="adaptiveCardsBotPlan" newWebAppName="adaptiveCardsBot" groupLocation="westus" newAppServicePlanLocation="westus"

To an existing Resource Group

az deployment group create --resource-group "<groupname>" --template-file ".\deploymentTemplates\template-with-preexisting-rg.json" --parameters appId="<appid>" appSecret="<appsecret>" botId="<botname>" newWebAppName="adaptiveCardsBotBot" newAppServicePlanName="adaptiveCardsBotPlan" appServicePlanLocation="westus" --name "adaptiveCardsBotBot"

5. Update app id and password

In src/main/resources/application.properties update

  • MicrosoftAppPassword with the botsecret value
  • MicrosoftAppId with the appid from the first step

6. Deploy the code

  • Execute mvn clean package
  • Execute mvn azure-webapp:deploy -Dgroupname="<groupname>" -Dbotname="<bot-app-service-name>"

If the deployment is successful, you will be able to test it via "Test in Web Chat" from the Azure Portal using the "Bot Channel Registration" for the bot.

After the bot is deployed, you only need to execute #6 if you make changes to the bot.

Further reading