Step 1 - Create Microsoft Teams App
In this section, we are going to create a Node.js project
- Open the Command Prompt and navigate to desired directory to create a project.
- Run the Yeomen Generator for Microsoft Teams
yo teams
- Yeomen generator will ask the following question
Step 2 - Add Channel Support to Conversational Bot
Type code in the command prompt. Nodejs scaffolding project opens in Visual Studio Code.
Locate and open the bot file /src/teamsChannelandGroupChatBot/teamsChannelandGroupChat.ts
Add import statement:
- import * as Util from "util";
- const TextEncoder = Util.TextEncoder;
Add Message Factory object reference to existing botbuilder package:
- import {
- StatePropertyAccessor,
- CardFactory,
- TurnContext,
- MemoryStorage,
- ConversationState,
- ActivityTypes,
- TeamsActivityHandler,
- MessageFactory,
- } from 'botbuilder';
Locate the handler onMessage() within the constructor().
Locate and replace the line (text.startsWith("hello")) { in the onMessage() handler with the following code:
- if (text.startsWith("mentionme")) {
-
- if (context.activity.conversation.conversationType == "personal") {
- await this.handleMessageMentionMeOneOnOne(context);
- } else if(context.activity.conversation.conversationType == "groupChat")
- {
- await this.handleMessageMentionMeGroupChatConversation(context);
- }
- else {
- await this.handleMessageMentionMeChannelConversation(context);
- }
- return;
- } else if (text.startsWith("hello")) {
Finally add the following method.
One on One Conversation:
- private async handleMessageMentionMeOneOnOne(context: TurnContext): Promise<void> {
- const mention = {
- mentioned: context.activity.from,
- text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
- type: "mention"
- };
-
- const replyActivity = MessageFactory.text(`Hi ${mention.text} from a one to one personal chat.`);
- replyActivity.entities = [mention];
- await context.sendActivity(replyActivity);
- }
Teams Channel Conversation:
- private async handleMessageMentionMeChannelConversation(context: TurnContext): Promise<void> {
- const mention = {
- mentioned: context.activity.from,
- text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
- type: "mention"
- };
-
- const replyActivity = MessageFactory.text(`Hi ${mention.text}!`);
- replyActivity.entities = [mention];
- const followupActivity = MessageFactory.text(`*We are in a channel conversation*`);
- await context.sendActivities([replyActivity, followupActivity]);
- }
Group Chat Conversation:
- private async handleMessageMentionMeGroupChatConversation(context: TurnContext): Promise<void> {
- const mention = {
- mentioned: context.activity.from,
- text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
- type: "mention"
- };
-
- const replyActivity = MessageFactory.text(`Hi ${mention.text}!`);
- replyActivity.entities = [mention];
- const followupActivity = MessageFactory.text(`*We are in a Group Chat conversation*`);
- await context.sendActivities([replyActivity, followupActivity]);
- }
Step 3 - Update Manifest Changes
- Browse manifest.json file ./src/maifest/manisfest.json
- Update below properties:-
- ID : Replace with azure bot id
- Version: 1.0.0
- PackageName : InteractiveBotBot
- Bot Property
- "bots": [
- {
- "botId": "b0edaf1f-0ded-4744-ba2c-113e50376be6",
- "needsChannelSelector": true,
- "isNotificationOnly": false,
- "scopes": [
- "team",
- "personal",
- "groupchat"
- ],
- "commandLists": [
- {
- "scopes": [
- "team",
- "personal",
- "groupchat"
- ],
- "commands": [
- {
- "title": "Help",
- "description": "Shows help information"
- }
- ]
- }
- ]
- }
- ]
Step 4 - Update Project Environemnt Variable
Locate and open the file. /.env.
Locate the following section in the file, and set the values of the two properties that you obtained when registering the bot:
- MICROSOFT_APP_ID=
- MICROSOFT_APP_PASSWORD=
Step 5 - Test and Run the Bot
From VSCode select View -> Terminal and Hit the below command
gulp ngrok-serve
Ngrok-serve builds your project and starts runing at local web server. Ngrok starts with a random subdomain and creates a secure url for local web server.
Microsoft Teams require all content to be displayed with HTTPS request. Local debugging requires local HTTP webserver. Ngrok creates a secure routable url to HTTP webserver to debug the HTTPS application securely.
- Browse https://Portal.Azure.com
- Navigate to created Bot
- Select Setting under Bot Management
- Update Messaging End Point with Ngrok url
- Click save to update.
Step 6 - Upload Manifest File
Navigate to manifest folder /src/manifest. Select both .png files and manifest.jon file and zip all three files. Give the name of zip file "manifest."
Login to https://teams.microsoft.com
- Navigate to App Studio
- Select Import an existing app
- Select the manifest.zip file and Bot name with icon will appear on screen.
Step 7 - Install Cusotm App to Teams Solution
Using the app bar navigation menu,
- Select the Mode added apps button.
- Select Browse all apps followed by Upload for me or my teams.
Select Add to Teams. It will prompt you to add to a specifc channel. Conversation bot will be added to the selected channel.
