{"id":8934,"date":"2021-11-18T13:59:09","date_gmt":"2021-11-18T21:59:09","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=8934"},"modified":"2022-10-13T21:10:46","modified_gmt":"2022-10-14T04:10:46","slug":"microsoft-teams-development-all-you-need-to-know","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-teams-development-all-you-need-to-know\/","title":{"rendered":"Microsoft Teams development: All you need to know"},"content":{"rendered":"<p>Microsoft Teams is the ultimate messaging app for your organization\u2014a workspace for real-time collaboration, communication, meetings, and file sharing.\u00a0You can extend your Teams app in multiple ways. To be able to extend your app, it\u2019s helpful to understand all the core capabilities and entry points that work in a collaborative space.<\/p>\n<p>You can learn more and get started with the <a href=\"https:\/\/aka.ms\/TeamsDevDoc\" target=\"_blank\" rel=\"noopener\">Microsoft Teams developer documentation<\/a>.<\/p>\n<p>But, first,\u00a0Cloud Advocates Bob German and Rabia Williams are here with another video deep diving into the core concepts of Microsoft Teams application development.<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/EQuB8l4sccg\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Keep reading for an in-depth guide to developing apps for Teams.<\/p>\n<h3>Microsoft Teams app capabilities<\/h3>\n<p>There are multiple ways to extend Teams. Some apps only have one capability, such as a webhook, while others have more than one feature to give users various options. To display data in a central location, use a <strong>tab. To <\/strong>present that same information through a conversational interface, use a\u00a0<strong>bot<\/strong>.<\/p>\n<p><a href=\"https:\/\/aka.ms\/teams-app-capabilities\" target=\"_blank\" rel=\"noopener\">Read more about app capabilities.<\/a><\/p>\n<p>There are more app capabilities than just tabs and bots. <strong>Messaging extensions<\/strong> allow users to interact with your web service through buttons and forms in the Microsoft Teams client. They can search or initiate actions in an external system from the compose message area, the command box, or directly from a message.<\/p>\n<p><a href=\"https:\/\/aka.ms\/teams-messaging-extensions\" target=\"_blank\" rel=\"noopener\">Read more about messaging extensions.<\/a><\/p>\n<p><strong>Apps for Teams meetings<\/strong> can deliver a user experience for each stage of the meeting lifecycle. Meeting lifecycle includes pre-meeting, in-meeting, and post-meeting app experience, depending on the attendee&#8217;s status.<\/p>\n<p><a href=\"https:\/\/aka.ms\/teams-meeting-apps\" target=\"_blank\" rel=\"noopener\">Read more about Apps for meetings.<\/a><\/p>\n<h3>Microsoft Teams architecture<\/h3>\n<p>Once you understand the various app capabilities, it\u2019s helpful to review the architecture behind Microsoft Teams. This diagram explains it well \ud83d\ude0a<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/Microsoft-Teams-architecture.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8936 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/Microsoft-Teams-architecture.png\" alt=\"Diagram explaining Microsoft Teams architecture\" width=\"864\" height=\"505\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/Microsoft-Teams-architecture.png 864w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/Microsoft-Teams-architecture-300x175.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/Microsoft-Teams-architecture-768x449.png 768w\" sizes=\"(max-width: 864px) 100vw, 864px\" \/><\/a><\/p>\n<h3>Microsoft Teams manifest<\/h3>\n<p>A Teams application is a zip file with tree files packaged in it, essentially two icons and a manifest file. Your app can be hosted anywhere, and the Teams manifest file simply describes your application to the Microsoft Teams client.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/types-of-teams-apps.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8939 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/types-of-teams-apps.png\" alt=\"Example of how the Microsoft Teams manifest file functions\" width=\"898\" height=\"510\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/types-of-teams-apps.png 898w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/types-of-teams-apps-300x170.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/types-of-teams-apps-768x436.png 768w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/aka.ms\/teams-manifest-schema\" target=\"_blank\" rel=\"noopener\">Read more about this manifest file.<\/a><\/p>\n<h3>Teams Application Scopes<\/h3>\n<p>There are three scopes with which Teams can use your app.<\/p>\n<ol>\n<li><strong>Teams <\/strong>\u2013 Your app is accessed by all members of a Teams channel.<\/li>\n<li><strong>Group\/Meeting<\/strong> \u2013 Your app can be used to show contents for a group of users or in a 1:1 chat.<\/li>\n<li><strong>Personal <\/strong>\u2013 Your app is for personal use or an individual user, i.e. an app to display \u201cMy pending tasks for the day\u201d or \u201cMy unread emails\u201d<\/li>\n<\/ol>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/teams-application-scopes.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8938 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/teams-application-scopes.png\" alt=\"Types of Microsoft Teams application scopes\" width=\"898\" height=\"507\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/teams-application-scopes.png 898w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/teams-application-scopes-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/teams-application-scopes-768x434.png 768w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<h3>SDKs (Software Development Kits) and APIs (Application Programming Interfaces) used in Teams applications<\/h3>\n<p>SDKs make it easier to integrate your apps with Teams. Read more about <a href=\"https:\/\/aka.ms\/teams-js-sdk\" target=\"_blank\" rel=\"noopener\">Microsoft Teams JavaScript client SDK<\/a>.<\/p>\n<h3>Adaptive Cards<\/h3>\n<p><strong>Adaptive Cards<\/strong> are actionable snippets of content that you can add to a conversation through a bot or messaging extension. Using text, graphics, and buttons, these cards provide rich communication to your audience.<\/p>\n<p>Read more about them <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/task-modules-and-cards\/cards\/design-effective-cards?tabs=design&amp;%3FWT.mc_id=m365-38318-cxa\">Designing Adaptive Cards for your app &#8211; Teams | Microsoft Docs<\/a><\/p>\n<p>Also, check out <a href=\"https:\/\/adaptivecards.io\">https:\/\/adaptivecards.io<\/a><\/p>\n<h3>Packaging and installing Teams apps<\/h3>\n<p>Once you have developed an application, you will need to package and install it in Teams.<\/p>\n<ul>\n<li>Learn more about <a href=\"https:\/\/aka.ms\/upload-teams-apps\">uploading the app<\/a><\/li>\n<li>Learn more about <a href=\"https:\/\/aka.ms\/submit-approve-teams-apps\">the app lifecycle<\/a><\/li>\n<\/ul>\n<h3>Developer tools and app generators<\/h3>\n<p>There are a few options to create a Teams application from scratch.<\/p>\n<p>Microsoft Teams Toolkit for Visual Studio Code helps developers create and deploy Teams apps with integrated Identity, access to cloud storage, data from\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/teams-concept-overview\">Microsoft Graph<\/a>, and other services in\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/build-your-first-app\/build-bot\">Azure<\/a>\u00a0and\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/build-and-test\/prepare-your-o365-tenant\">Microsoft 365<\/a> with a &#8220;zero-configuration&#8221; approach to the developer experience.\n<a href=\"https:\/\/aka.ms\/teams-toolkit\" target=\"_blank\" rel=\"noopener\">Check out the toolkit.<\/a><\/p>\n<p>There is also an open source, community-built generator based on Yeoman called <a href=\"https:\/\/github.com\/pnp\/generator-teams\" target=\"_blank\" rel=\"noopener\">Yo Teams<\/a>.\u00a0Yo Teams allows you to build Microsoft Teams applications based on TypeScript and node.js on your terms, in your editor of choice, without any external or online dependencies.<\/p>\n<h3>Leverage what you\u2019ve already built<\/h3>\n<p>You don\u2019t have to start your app from scratch if you have already built one.<\/p>\n<ul>\n<li>If you have a web page or SPA, it can be a tab<\/li>\n<li>If you have a webhook, it can be a connector<\/li>\n<li>If you have a web service, it can be a bot or messaging extension<\/li>\n<\/ul>\n<p>If you want to just build a bot, you can check out <a href=\"https:\/\/aka.ms\/bot-builder-generator\" target=\"_blank\" rel=\"noopener\">Bot builder generator<\/a> which is another yeoman-based generator to build bots.<\/p>\n<h3>Where is the data stored?<\/h3>\n<p>Look at this cheat sheet to see where the Microsoft 365 data in your Teams client gets stored.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/where-is-the-data.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8937 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/where-is-the-data.png\" alt=\"Cheat sheet to see where the Microsoft 365 data in your Teams client gets stored\" width=\"832\" height=\"484\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/where-is-the-data.png 832w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/where-is-the-data-300x175.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/11\/where-is-the-data-768x447.png 768w\" sizes=\"(max-width: 832px) 100vw, 832px\" \/><\/a><\/p>\n<p>If you want to retrieve Microsoft 365 data, use the <a href=\"https:\/\/aka.ms\/GraphFromTeamsApp\" target=\"_blank\" rel=\"noopener\">Microsoft Graph API.<\/a> And, if you have your own application data, it will remain wherever you have chosen to store it.<\/p>\n<h3>Samples used in the video<\/h3>\n<p>Here are the sample we showed in the video<\/p>\n<ul>\n<li><a href=\"http:\/\/aka.ms\/httpstatuscats\" target=\"_blank\" rel=\"noopener\">HTTP Status Cats<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/consulting-bot\" target=\"_blank\" rel=\"noopener\">Consulting bot<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/teams-hr-app\" target=\"_blank\" rel=\"noopener\">Teams HR App\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/feedback-bot\" target=\"_blank\" rel=\"noopener\">Feedback bot<\/a><\/li>\n<\/ul>\n<h3>Cheat sheet for Teams development<\/h3>\n<table style=\"width: 90.5079%;\" width=\"1280\">\n<tbody>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\"><strong>To build<\/strong><\/td>\n<td style=\"width: 31.0057%;\" width=\"178\"><strong>What you need to know<\/strong><\/td>\n<td style=\"width: 47.2798%;\" width=\"996\"><strong>Where to start<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\">Tabs\nTask modules\nConfiguration pages<\/td>\n<td style=\"width: 31.0057%;\" width=\"178\">SPA development<\/p>\n<p>Teams JavaScript SDK\nTeams Framework\n(\u201cTeamsFx\u201d)<\/td>\n<td style=\"width: 47.2798%;\" width=\"996\">Any framework is fine, react is easiest<\/p>\n<p><a href=\"https:\/\/aka.ms\/TeamsDevDoc\">https:\/\/aka.ms\/TeamsDevDoc<\/a><\/p>\n<p><a href=\"https:\/\/aka.ms\/teams-fx\">https:\/\/aka.ms\/teams-fx<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\">Bots\nMessaging extensions<\/td>\n<td style=\"width: 31.0057%;\" width=\"178\">Azure Bot Framework,\nBot Builder SDKAdaptive Cards<\/td>\n<td style=\"width: 47.2798%;\" width=\"996\"><a href=\"https:\/\/dev.botframework.com\/\">https:\/\/dev.botframework.com\/<\/a><\/p>\n<p><a href=\"https:\/\/adaptivecards.io\/\">https:\/\/adaptivecards.io<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\">Bots<\/td>\n<td style=\"width: 31.0057%;\" width=\"178\">LUIS\nQnA MakerBot Framework Composer<\/td>\n<td style=\"width: 47.2798%;\" width=\"996\"><a href=\"https:\/\/aka.ms\/LUIS-Overview\">https:\/\/aka.ms\/LUIS-Overview<\/a>\n<a href=\"https:\/\/www.qnamaker.ai\/\">https:\/\/www.qnamaker.ai<\/a><a href=\"https:\/\/aka.ms\/BotFwkComposer\">https:\/\/aka.ms\/BotFwkComposer<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\">Access Microsoft 365 content and services<\/td>\n<td style=\"width: 31.0057%;\" width=\"178\">Microsoft Graph API\nMicrosoft Graph SDK\nMicrosoft Graph Toolkit\nAzure Active Directory<\/td>\n<td style=\"width: 47.2798%;\" width=\"996\"><a href=\"https:\/\/aka.ms\/graph-docs\">https:\/\/aka.ms\/graph-docs<\/a>\n<a href=\"https:\/\/aka.ms\/Graph-SDK\">https:\/\/aka.ms\/Graph-SDK<\/a>\n<a href=\"https:\/\/aka.ms\/learn-graph-toolkit\">https:\/\/aka.ms\/learn-graph-toolkit<\/a>\n<a href=\"https:\/\/aka.ms\/AzureAD\">https:\/\/aka.ms\/AzureAD<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 21.6359%;\" width=\"106\">Advanced scenarios<\/td>\n<td style=\"width: 31.0057%;\" width=\"178\">Meeting apps<\/p>\n<p>Azure Communication Services<\/td>\n<td style=\"width: 47.2798%;\" width=\"996\"><a href=\"https:\/\/aka.ms\/TeamsMeetingApps\">https:\/\/aka.ms\/TeamsMeetingApps<\/a><\/p>\n<p><a href=\"https:\/\/aka.ms\/ACS\">https:\/\/aka.ms\/ACS<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>About our community<\/h3>\n<p>Don\u2019t think you are alone in this. We have a huge community at <a href=\"https:\/\/pnp.github.io\/\">PnP | Microsoft 365<\/a> to help out with your journey in Teams app development.<\/p>\n<p>To keep your finger on the pulse on all things new in Microsoft Teams, go to<strong>\u00a0<a href=\"https:\/\/nam06.safelinks.protection.outlook.com\/?url=https%3A%2F%2Faka.ms%2Fwhatsupteams&amp;data=04%7C01%7Cv-danawikan%40microsoft.com%7C3393fa46b4444e8a5c7008d9aae6845a%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637728729319895246%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&amp;sdata=LOW1QQu%2Bqiz2IILzmz%2B2hpIWXyhPJOGwY4kHTo1SzeA%3D&amp;reserved=0\">https:\/\/aka.ms\/whatsupteams<\/a><\/strong><\/p>\n<p>We can&#8217;t wait to see what you build for Teams! Happy coding!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microsoft Teams is the ultimate messaging app for your organization\u2014a workspace for real-time collaboration, communication, meetings, and file sharing.\u00a0You can extend your Teams app in multiple ways. This blog post explains how.<\/p>\n","protected":false},"author":71938,"featured_media":8956,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,3,128],"tags":[154,119,58,37,23,198],"class_list":["post-8934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-graph","category-microsoft-teams","tag-apps-for-meetings","tag-azure-communication-services","tag-messaging-extensions","tag-bot-framework","tag-teams-toolkit","tag-teamwork-and-communications"],"acf":[],"blog_post_summary":"<p>Microsoft Teams is the ultimate messaging app for your organization\u2014a workspace for real-time collaboration, communication, meetings, and file sharing.\u00a0You can extend your Teams app in multiple ways. This blog post explains how.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/8934","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\/71938"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=8934"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/8934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/8956"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=8934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=8934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=8934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}