Unleashing the Power of Video: A Technical Guide to VideoWiki Integration on Microsoft Teams

Hello everyone! My name is Ritik Mahajan, and I am a front-end developer at VideoWiki, a part of GetBoarded. I am excited to share with you all the knowledge that I have gained through my experience building chatbots for MS Teams.

If you are like me, you may have struggled with the idea of MS Teams app integration, especially if you are new to the Teams toolkit. But fear not, in this guide, we will walk you through the steps required to build your first chatbot for Teams.

By the end of this blog, you’ll possess the power to develop a bot similar to our VideoWiki MS-Teams bot that uses AI to produce captivating videos with ease. All you need to do is share a link or upload a document, PDF, or PowerPoint presentation onto our VideoWiki platform. Get ready to unleash your inner video-making prowess!

Prerequisites

1. VS-Code
2. Nodejs
3. M365 developer Account

So Let's begin

First, let's talk about getting a M365 account.

Step 1:- Go to the M365 developer program and create an account or sign in with an existing one.

Step 2: After logging in, it should direct you to your profile page. If not, just click on this link: Profile-Page

Step 3: Fill in the details and create an administrator tenant/account.

Now, after setting up the M365 dev account, open VS-Code and get ready for some development. To build a command bot, follow the given steps.

Step 1: Open VS-Code and click on extensions.

Step 2: Search for the Teams Toolkit and install the one made by Microsoft. You will see the team's logo on your left toolbar once the installation is complete.

Step 3: Click on the team logo, and you’ll see a bunch of buttons. Click Create a new app.

Step 4: Click on Create a New Teams-app

Step 5: Click on the command bot.

Step 6: Select the language you prefer for development. I'm choosing Javascript for now.

Step 7: Select a desired folder and give it a cool name.

Step 8 Open the folder we just created in another VS-Code window and click on the team logo. You will see a new set of instructions.

Step 9: Log in to the administrative account you created from your M365 dev.

Step 10: Click on “Preview your Teams app” or press F5.

Step 11: Congratulations! You are now a Teams chatbot owner!

Now you must be wondering, "Okay, I have a chatbot; now what?" It only knows one command. Don’t worry; we will also learn how to create new commands in a few moments.

Step 1:To add new commands, you must first register the command in./bot/src/internal/initialize.js in the commands array by adding an element like new MyCommandHandler().

const { BotBuilderCloudAdapter } = require("@microsoft/teamsfx");
const ConversationBot = BotBuilderCloudAdapter.ConversationBot;
const { HelloWorldCommandHandler } = require("../helloworldCommandHandler");
const { MyCommandHandler }  = require("../myCommandHandler")
const config = require("./config");

// Create the command bot and register the command handlers for your app.
// You can also use the commandBot.command.registerCommands to register other commands
// if you don't want to register all of them in the constructor
const commandBot = new ConversationBot({
  // The bot id and password to create CloudAdapter.
  // See https://aka.ms/about-bot-adapter to learn more about adapters.
  adapterConfig: {
    MicrosoftAppId: config.botId,
    MicrosoftAppPassword: config.botPassword,
    MicrosoftAppType: "MultiTenant",
  },
  command: {
    enabled: true,
    commands: [new HelloWorldCommandHandler(), new MyCommandHandler()],
  },
});

module.exports = {
  commandBot,
};

Step 2: After registering your command, you need to design the card that the bot will send you after getting the command by making a MyCommand.json.

Here

the type defines the type of card

the body contains the styling of the card

action is an array that will show buttons and etc

{
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "size": "Medium",
        "weight": "Bolder",
        "text": "${title}"
      },
      {
        "type": "TextBlock",
        "text": "${body}",
        "wrap": true
      }
    ],
    "actions": [
      {
        "type": "Action.OpenUrl",
        "title": "Bot Framework Docs",
        "url": "https://docs.microsoft.com/en-us/azure/bot-service/?view=azure-bot-service-4.0"
      },
      {
        "type": "Action.OpenUrl",
        "title": "Teams Toolkit Docs",
        "url": "https://aka.ms/teamsfx-docs"
      }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4"
  }

Step 3: Now that will pass data to your MyCommand.json you have to create the MyCommandHandler class in a MyCommandHandler.js

const myCommandCard = require("./adaptiveCards/MyCommand.json");
const { AdaptiveCards } = require("@microsoft/adaptivecards-tools");
const { CardFactory, MessageFactory } = require("botbuilder");

class HelloWorldCommandHandler {
  triggerPatterns = "my command";

  async handleCommandReceived(context, message) {
    // Verify the command arguments which are received from the client if needed.
    console.log(`Bot received message: ${message.text}`);

    // do something to process your command and return message activity as the response

    // render your adaptive card for reply message
    const cardData = {
      title: "Hurrah!!! You have created your first command",
      body: "Congratulations! Your hello world bot is running. Click the documentation below to learn more about Bots and the Teams Toolkit.",
    };

    const cardJson = AdaptiveCards.declare(myCommandCard).render(cardData);
    return MessageFactory.attachment(CardFactory.adaptiveCard(cardJson));
  }
}

module.exports = {
  MyCommandHandler,
};

Step 4: Restart your chatbot and see the new command at work.

We can create an array of custom commands that are tailored to your specific needs, and design the bot to match your preferred aesthetic. To make it even more awesome, we can draw inspiration from our very own VideoWiki bot, available on MS Teams, and take cues from its sleek design and intuitive interface.

Congratulations! We have learned how to create a chatbot for Teams and add new commands! With this skill, you can now create custom chatbots that can automate tasks, provide information, and streamline communication for your team or organization. The possibilities are endless; the limit is the sky, and I wish you the best of luck in your chatbot development journey!

Conclusion

Creating a chatbot for Microsoft Teams can be a powerful way to automate tasks and enhance communication within your organization. With the help of the Teams Toolkit and some basic coding skills, you can quickly build a functional bot that can respond to user commands and even interact with external services.

While the process of building a chatbot may seem daunting at first, the steps outlined in this blog post can help simplify the process and get you up and running in no time. Remember to keep testing and refining your bot to ensure it meets the needs of your users and continues to provide value over time. With a little creativity and effort, you can build a chatbot that streamlines workflows, improves communication, and enhances the overall productivity of your organization.

Also, I would like to express my gratitude to Aman Bishnoi for his invaluable guidance and support throughout the integration process.

I would also like to thank the team at VideoWiki for providing me with this opportunity and for their support.

The documentation from Microsoft was also a great help, and I’d recommend following it since I followed it too, and found it to be on point and super precise. For your convenience, we are attaching the link below:
Teams Toolkit Overview

Lastly, for further updates and discussions about VideoWiki, please feel free to join our Telegram group at https://t.me/VideoWiki. We look forward to connect with you.