Developing a bot for Microsoft Teams, rather than a traditional web application, is a great way to implement this type of workflow inside Microsoft Teams through a conversational interface.<\/p>\n
In this tutorial, I walk you through the steps of how to use Teams Toolkit for Visual Studio Code<\/a> to create a Microsoft Teams app that contains a bot employees can use to place orders with the restaurant.<\/p>\n If you want to see the finished version, checkout the sample in the gallery, or the\u00a0final source code<\/a>\u00a0on the TeamsFx GitHub repository.<\/p>\n \ud83c\udfa5 A recording from the weekly\u00a0Microsoft 365 Platform Community<\/a>\u00a0call is available,\u00a0Build your first Workflow bot for Microsoft Teams with Teams Toolkit for Visual Studio Code<\/a>, which covers the steps discussed in this tutorial.<\/p><\/blockquote>\n Teams Toolkit for Visual Studio Code<\/a>\u00a0enables you to create, debug and deploy Microsoft Teams apps to a Microsoft 365 tenant fast using a no configuration approach.<\/p>\n In a recent release of Teams Toolkit for Visual Studio Code, a new scenario-based app capability has been released called\u00a0Initiate sequential workflows<\/em>.<\/p>\n This new capability makes it easy for developers to respond to actions invoked from Adaptive Cards, which is ideal for our restaurant order scenario.<\/p>\n Using this new capability, we will create a bot that uses the below workflow.<\/p>\n To follow this guide successfully you will need.<\/p>\n With the prerequisites done, let\u2019s begin!<\/p>\n Our first step is to install Teams Toolkit into Visual Studio Code, you can do this several ways, however the easiest is way is to search for and install the extension using the Extensions panel from the Side Bar within Visual Studio Code.<\/p>\n Once the extension has been successfully installed, you will see a Microsoft Teams icon in the Side Bar.<\/p>\n After installing the extension, let\u2019s create our project.<\/p>\n When you complete the last step, Teams Toolkit will create a project in a folder with the same name in the Workspace folder location you selected in the previous step.<\/p>\n After the project scaffolding is complete, Teams Toolkit will re-open Visual Studio Code in the project folder and open a Readme file for the project.<\/p>\n The scaffolded project contains some boilerplate code which provides some basic workflow functionality, containing a command and action.<\/p>\n You can run the bot to see how it works by opening the debug side panel, select your browser of choice in the dropdown, and start debugging by either clicking the green play icon or by pressing F5 on your keyboard.<\/p>\n If this is the first time you have used Teams Toolkit for Visual Studio Code, when you first launch your app using Debug, you will be prompted to sign into your Microsoft 365 tenant.<\/p>\n Click the\u00a0Sign In<\/em>\u00a0button in the prompt, this will open your primary browser and navigate you to a Microsoft 365 login screen. Enter your account details to complete the authentication flow, once successful you can close the browser window and return to Visual Studio Code.<\/p>\n Teams Toolkit will setup all the required resources and services for your bot to run locally inside Microsoft Teams, and also provide debugging and hot reload functionality.<\/p>\n The first time you run your app, Teams Toolkit will perform a npm install<\/em>\u00a0to install all the required packages, so it might take a few moments depending on your network and machine resources.<\/p>\n This would be a good time to grab a \u2615\ufe0f<\/p><\/blockquote>\n When complete, a browser window will launch, and you will be navigated to the web version of Microsoft Teams. You may be prompted for authentication again. If you are, complete the steps using the same account as you signed in previously.<\/p>\n When Microsoft Teams loads, a dialog box will appear which enables you to side load your app. Click the Add button to add the app as a personal app and open the bot chat.<\/p>\n Type\u00a0 Selecting the button will update the Adaptive Card with confirmation of that action.<\/p>\n This is entirely optional, but to help follow along with the rest of this tutorial, I recommend that you remove the default code, so it doesn’t get in the way and we can start from a clean slate.<\/p>\n Don’t worry about what we are removing for now, I’ll explain all this as we go through the steps.<\/p>\n If your debug session is still running, just close down the browser window or stop the debugging session in Visual Studio Code.<\/p>\n To remove the default code, you can\u00a0use a script<\/a>\u00a0or do it manually.<\/p>\n To manually remove the code<\/p>\n To use the script to remove the code<\/p>\n Now that we have a clean project, let’s start building out our scenario.<\/p>\n The first thing we will do is implement Adaptive Cards templates, these cards represent our user interface that employees will interact with.<\/p>\n![\"Order](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--4KBtnQ4_--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/k27a1jkdwl57k6cgkp04.png\")
<\/a><\/p>\n<\/a>Table of contents<\/h2>\n
\n
\ud83d\udee0 Teams Toolkit for Visual Studio Code<\/h2>\n
\n
![\"Contoso](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--_H1f3CP8--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/n5somg2qiv7fmff6dm2w.png\")
<\/a><\/p>\n\ud83c\udfc1 Prerequisites<\/h2>\n
\n
\ud83d\udee0 Install Teams Toolkit for Visual Studio Code<\/h2>\n
\n
\ud83d\udc77 Scaffold and run the project<\/h2>\n
\n
helloWorld<\/code> into the chat box and send your message. This will invoke the bot command which returns an Adaptive Card with a button.<\/p>\n\ud83d\udc77 Clean the project<\/h2>\n
\n
\n
bot\\src\\AdaptiveCards<\/code><\/li>\nbot\\src\\cardActions<\/code><\/li>\nbot\\src\\commands<\/code><\/li>\n<\/ul>\n<\/li>\nbot\\src\\cardModels.ts<\/code><\/li>\n\/bot\/src\/internal\/initialize.ts<\/code>\n\n
commands<\/code>\u00a0array \ud83d\udc49\u00a0commands: []<\/code><\/li>\nactions<\/code>\u00a0array \ud83d\udc49\u00a0actions: []<\/code><\/li>\nimports<\/code><\/li>\n<\/ul>\n<\/li>\ntemplates\/appPackage\/manifest.template.json<\/code>\n\n
commands<\/code>\u00a0array \ud83d\udc49\u00a0commands: []<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
scripts<\/code>\u00a0folder in the root<\/li>\nscripts<\/code>\u00a0folder<\/li>\nnode scripts\\ttk_workflowbot_clean.js<\/code><\/li>\n<\/ul>\n\ud83e\uddd1\u200d\ud83d\udcbb Create the Adaptive Card templates<\/h2>\n