{"id":6615,"date":"2021-08-17T14:46:37","date_gmt":"2021-08-17T21:46:37","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6615"},"modified":"2021-11-17T12:26:46","modified_gmt":"2021-11-17T20:26:46","slug":"build-and-run-your-microsoft-teams-app-in-10-minutes-with-the-teams-toolkit-for-vs-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/build-and-run-your-microsoft-teams-app-in-10-minutes-with-the-teams-toolkit-for-vs-code\/","title":{"rendered":"Build and run your Microsoft Teams app in 10 minutes with the Teams Toolkit for VS Code"},"content":{"rendered":"

Did you know that Microsoft Teams supports custom developed apps? More and more developers are building unique and custom apps in Teams to support a wide range of scenarios \u2013 from simple task management apps to complex virtual healthcare apps. To make the development experience frictionless, we are dedicated to providing you the tools and resources to help you build Teams apps faster and simpler. The Teams Toolkit for Visual Studio Code<\/a> is one of the many tools that make building these apps easier and we\u2019ll show you today exactly how to get started using it.<\/p>\n

The scenario: Creating a Todo List app<\/h4>\n

In this blog, we\u2019ll cover how to build and deploy a web-based collaborating Todo List app. This will demonstrate how easy it is to build a Teams app using the Teams Toolkit. The Todo List app enables teams to manage a shared to-do list and can be added to a channel for every team member to use. Each member can create items (with track history) and the item can be marked as done or deleted by other members upon completion. The Todo List app has a frontend interface hosting on Azure storage and a backend hosting on Azure Functions to respond to changes. It uses simple authentication offered by Teams Toolkit to get the user profile and know who is making changes and synchronizes data in Azure SQL Database. Now, let\u2019s show you how to build this by going through the steps below and see how you go from zero to wonderful in about 10 minutes!<\/p>\n

Setting up Teams Toolkit for Teams App development<\/h4>\n

Please make sure you install the VS Code<\/a> first.<\/p>\n

If you have VS Code installed, search `Teams Toolkit` from Extension View and select install, or\u00a0 install the Teams Toolkit<\/a> from marketplace.<\/p>\n

\"Image<\/em><\/p>\n

Download and install the latest v14 LTS release Node.js.<\/a><\/p>\n

Create Todo List App<\/h4>\n

Open the Teams Toolkit. From the left Tree View, in project section, click \u2018Create New Project\u2019. Select \u2018Start from a Sample\u2019 -> \u2018Todo List with backend on Azure\u2019.<\/p>\n

\"GIF<\/p>\n

Run and Preview<\/h4>\n

Now that you have the source code of the project, you can deploy and run the app to have a preview. From the left Tree View, in project section, click \u2018Provision in the cloud\u2019.<\/p>\n

\"Image<\/p>\n

The Teams Toolkit will create the required cloud resources for you. In this sample, it creates an Azure web app to hosting your web pages (Tabs in Teams) for Todo app frontend interfaces, an Azure Functions instance to host backend service, and an Azure SQL as your database. This may require you to log in to your Azure account and select an Azure subscription you would like to use for this sample app, as the Todo List app will be deployed to Azure resources and stores data on Azure. You will need an Azure subscription in which you have rights to provision cloud resources like Azure Function and Azure SQL and specify your SQL admin name and password before provision starts. Then the Toolkit can create the SQL DB accordingly. You can monitor the progress by the dialog in the bottom right corner:<\/p>\n

\"Image<\/p>\n

Once the provision is finished, you will get a prompt dialog in the bottom right corner of VS Code indicating the success of the provision. Then you can try to deploy the app by clicking \u2018Deploy to the cloud\u2019 from the left Tree View. The Teams Toolkit will copy your code to the cloud resources created by previous provision step, so that your code can run in the cloud. Both steps will take about 2-3 mins if it\u2019s the first run and you will see a completion message in the bottom right.<\/p>\n

Once deployment is done, you have a backend service running in the cloud in Azure Functions, and a frontend hosting and a database created for your sample app. One last step to run your app is creating the database schema for data storage. Open the `.fx\/env.default.json`<\/a> file and get the database name in `databaseName` parameter. Once you have the name, you can go to the Azure portal<\/a> to run the following scripts which creates DB schema for you (More instructions about running Azure SQL scripts can be found here).<\/a><\/p>\n

CREATE TABLE Todo\r\n\r\n(&nbsp;&nbsp;&nbsp;\r\n\r\nid INT IDENTITY PRIMARY KEY,&nbsp;&nbsp;&nbsp;\r\n\r\ndescription NVARCHAR(128) NOT NULL,&nbsp;&nbsp;&nbsp;\r\n\r\nobjectId NVARCHAR(36),&nbsp;&nbsp;&nbsp;\r\n\r\nchannelOrChatId NVARCHAR(128),&nbsp;&nbsp;&nbsp;\r\n\r\nisCompleted TinyInt NOT NULL default 0,\r\n\r\n)<\/pre>\n
Now you are ready to run and preview your first Teams app. Open the Teams Toolkit. From the left side bar, click \u2018Run and Debug\u2019 button.<\/p>\n
\"Image<\/p>\n
And select `Launch Remote (Edge)` or `Launch Remote (Chrome)` in the dropdown list and Press F5 or `green arrow button` to open a browser.<\/p>\n
\"Image<\/p>\n
Local Debug<\/h4>\n
The Teams Toolkit allows you to run your app locally.\u00a0You can easily achieve this by pressing `F5` from VS Code. When you run the app for the first time, all dependencies are downloaded, and the app is built. A browser window automatically opens when the build is complete. This can take about 3-5 minutes to complete. You will need to sign into Teams in the browser to have a preview of your App. Since the app is using an Azure SQL as database, you will need to create the database manually if you want to debug manually. While in remote debugging mode, you will not need to create database manually because the Teams Toolkit did that for you when it provisioned cloud resources.<\/p>\n
Simple Authentication \u2013 Single Sign-on<\/h4>\n
The Todo List app leverages the simple authentication capability to accomplish single sign-on using Teams account. With just 3 lines of code, you can enable this using Teams Toolkit and get the user profile from the `TeamsUserCredential` component. This component stores the user profile like the username, title, avatar and other information such as the SSO token to access Azure Functions API.<\/p>\n
import  TeamsUserCredential from\"@microsoft\/teamsfx\";\r\n \r\n   Const credential=new TeamsUserCredential();\r\n    \/\/ Get the user info from access token\r\n    Const userInfo=await credential.getUserInfo();\r\n<\/pre>\n
You can check out this piece of source code in \u2018~\/tabs\/src\/components\/Tab.js<\/a>\u2019, or check out the full code in our Todo List Github Repo<\/a>.<\/p>\n
Interacting with Azure Functions Backend<\/h4>\n
The Todo List frontend web app interacts with backend service by calling Azure Functions API with SSO token got from user credentials.<\/p>\n
import{\r\n  getResourceConfiguration,\r\n  ResourceType\r\n}from\"@microsoft\/teamsfx\";\r\n \r\n callFunction(command,method,options,params){\r\n      \/\/ Get SSO token for the user\r\n      Const accessToken=await this.credential.getToken(\"\");\r\n      \/\/ Gets configuration for API\r\n      Const apiConfig=getResourceConfiguration(ResourceType.API);\r\n      Const response=await axios.default.request({\r\n        method: method,\r\n        url: apiConfig.endpoint+\"\/api\/\"+command,\r\n        headers: {\r\n          authorization: \"Bearer \"+accessToken.token\r\n        },\r\n        data: options,\r\n        params\r\n      });\r\n      Return response.data;\r\n<\/pre>\n
Interacting with Azure SQL<\/h4>\n
The Azure Functions service has two key responsibilities, one is to process the http calls received from UI app and the other is to interact with Azure SQL to update and maintain data consistency. To make CRUD operations in SQL DB, you will need to set up a DB connection.<\/p>\n
async function getSQLConnection(){\r\n    const sqlConnectConfig=new DefaultTediousConnectionConfiguration();\r\n    const config=await sqlConnectConfig.getConfig();\r\n    const connection=new Connection(config);\r\n    return new Promise((resolve,reject)=>{\r\n        connection.on('connect',err=>{\r\n            if(err){\r\n                reject(err);\r\n            }\r\n            resolve(connection);\r\n        })\r\n        connection.on('debug',function(err){\r\n            console.log('debug:',err);\r\n        });\r\n    })\r\n}\r\n<\/pre>\n
Use the following method to query data:<\/p>\n
async function execQuery(query,connection){\r\n    return new Promise((resolve,reject)=>{\r\n        const res=[];\r\n        const request=new Request(query,(err)=>{\r\n            if(err){\r\n                reject(err);\r\n            }\r\n        });\r\n\r\n       request.on('row',columns=>{\r\n            const row={};\r\n            columns.forEach(column=>{\r\n                row[column.metadata.colName]=column.value;\r\n            });\r\n            res.push(row)\r\n        });\r\n \r\n        request.on('requestCompleted',()=>{\r\n            resolve(res)\r\n        });\r\n \r\n        request.on(\"error\",err=>{\r\n            reject(err);\r\n        });\r\n \r\n        connection.execSql(request);\r\n    })\r\n<\/pre>\n
You can check out this piece of source code in \u2018~\/api\/todo\/index.js<\/a>\u2019, or check out the full code in our Todo List Github Repo<\/a>.<\/p>\n
And that\u2019s it! Building and running an app with the Teams Toolkit is easy and we hope you found this tutorial valuable. We can\u2019t wait to see what Teams apps you build!<\/p>\n
More samples you can try<\/h4>\n
Explore more samples in our sample repository<\/a>.<\/p>\n
Get more information about Teams Toolkit<\/a> .<\/p>\n
Quick start<\/a> to Teams apps development.<\/p>\n
Contact us if you need help<\/h4>\n
We appreciate any questions or feedback you may have. You can get direct help from product experts in Microsoft by logging your issues or ideas in our Github repo issues<\/a> or by posting your questions using \u2018Teams-Toolkit\u2019 tag on StackOverflow.<\/a><\/p>\n
Also, don\u2019t forget to follow us on Twitter @Microsoft365Dev<\/a> and stay tuned with this community channel for the more upcoming features!<\/p>\n
 <\/p>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
More and more developers are building unique and custom apps in Microsoft Teams to support a wide range of scenarios. The Teams Toolkit for Visual Studio Code is one of the many tools that make building these apps easier.<\/p>\n","protected":false},"author":69083,"featured_media":6616,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[23,44],"class_list":["post-6615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-teams-toolkit","tag-visual-studio-code"],"acf":[],"blog_post_summary":"
More and more developers are building unique and custom apps in Microsoft Teams to support a wide range of scenarios. The Teams Toolkit for Visual Studio Code is one of the many tools that make building these apps easier.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69083"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6615"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6615\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/6616"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}