{"id":4745,"date":"2020-06-09T07:08:50","date_gmt":"2020-06-09T14:08:50","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4745"},"modified":"2020-06-09T07:08:50","modified_gmt":"2020-06-09T14:08:50","slug":"building-teams-apps-with-visual-studio-and-visual-studio-code-extensions","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/building-teams-apps-with-visual-studio-and-visual-studio-code-extensions\/","title":{"rendered":"Building Microsoft Teams Apps with Visual Studio and Visual Studio Code Extensions"},"content":{"rendered":"<p>A<span data-contrast=\"auto\">t\u00a0<\/span><span data-contrast=\"auto\">this year\u2019s\u00a0<\/span><span data-contrast=\"auto\">Build<\/span><span data-contrast=\"auto\">\u00a0conference<\/span><span data-contrast=\"auto\">,\u00a0<\/span><span data-contrast=\"auto\">we\u00a0<\/span><a href=\"https:\/\/mybuild.microsoft.com\/sessions\/5cbe16a7-dab5-49bd-aa7e-fba02a7baf2c?source=sessions\"><span data-ccp-charstyle=\"Hyperlink\">announced<\/span><\/a><span data-contrast=\"auto\">\u00a0the new<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Microsoft Teams Toolkit for Visual Studio and Visual Studio Code<\/span><span data-contrast=\"auto\">\u00a0\u2013\u00a0<\/span><span data-contrast=\"auto\">new extensions\u00a0<\/span><span data-contrast=\"auto\">providing you everything you need to<\/span><span data-contrast=\"auto\">\u00a0get up and running\u00a0<\/span><span data-contrast=\"auto\">for<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">build<\/span><span data-contrast=\"auto\">ing<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Teams app<\/span><span data-contrast=\"auto\">s<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">all\u00a0<\/span><span data-contrast=\"auto\">in one place\u00a0<\/span><span data-contrast=\"auto\">within\u00a0<\/span><span data-contrast=\"auto\">these tools.\u00a0<\/span><span data-contrast=\"auto\">Teams apps\u00a0<\/span><span data-contrast=\"auto\">focus on increasing collaboration and improving productivity<\/span><span data-contrast=\"auto\">\u00a0and this\u00a0<\/span><span data-contrast=\"auto\">new toolkit will empower developers to build solutions\u00a0<\/span><span data-contrast=\"auto\">with the power of\u00a0<\/span><span data-contrast=\"auto\">Vi<\/span><span data-contrast=\"auto\">s<\/span><span data-contrast=\"auto\">ual Studio and V<\/span><span data-contrast=\"auto\">isual Studio Code.\u00a0<\/span>The Microsoft Teams Toolkit for Visual Studio Code is now generally available and can be installed from the the Visual Studio Marketplace\u00a0<a title=\"https:\/\/aka.ms\/teams-toolkit\" href=\"https:\/\/aka.ms\/teams-toolkit\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. We&#8217;re also excited to announce that the\u00a0toolkit for Visual Studio is available for public preview and can be installed <a title=\"https:\/\/marketplace.visualstudio.com\/items?itemname=teamsdevapp.vsteamstemplate\" href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.vsteamstemplate\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n<p>We\u2019re very excited about these new extensions and how they\u2019ll help streamline the Teams app development lifecycle and enhance the overall app development experience. We\u2019ll recap some of the great features and capabilities you\u2019ll have available to you!<\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4756\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Teams-and-Visual-Studio-and-Visual-Studio-Code-product-logos-1-1024x577.png\" alt=\"Teams and Visual Studio and Visual Studio Code product logos\" width=\"350\" height=\"197\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Teams-and-Visual-Studio-and-Visual-Studio-Code-product-logos-1-1024x577.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Teams-and-Visual-Studio-and-Visual-Studio-Code-product-logos-1-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Teams-and-Visual-Studio-and-Visual-Studio-Code-product-logos-1-768x433.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Teams-and-Visual-Studio-and-Visual-Studio-Code-product-logos-1.png 1081w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/p>\n<h3>Everything you need to build amazing Teams apps, all in one place<\/h3>\n<p>Having the right documentation and set of tools available from the start can either make or break the app development experience. Understanding this, we\u2019ve built these new extensions with the intent of reducing the friction and barriers that can get in your way. We\u2019ve brough together tools across 5-key components:<\/p>\n<ul>\n<li>Documentation<\/li>\n<li>Project Setup<\/li>\n<li>Configuration<\/li>\n<li>Validation<\/li>\n<li>Publishing<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4749\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Documentation\u2019-pane-and-resources-inside-the-Virtual-Studio-Code-extension-1024x656.png\" alt=\"Documentation\u2019 pane and resources inside the Virtual Studio Code extension\" width=\"650\" height=\"417\" \/><\/p>\n<p><strong>Onboard with ease<\/strong><\/p>\n<p>Access relevant Teams technical documentation from inside your Visual Studio or Visual Studio code instance. In addition to links back to our Teams developer documentation, based on the type of Teams app you\u2019re developing (e.g., tab, bot, messaging extension), you\u2019ll have a tailored set of instructions generated to help guide you through the process from end-to-end.<\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4746\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/\u2018Get-Started\u2019-window-generated-for-bots-and-tabs-apps-1024x912.png\" alt=\"\u2018Get Started\u2019 window generated for bots and tabs apps\" width=\"650\" height=\"579\" \/><\/p>\n<p><strong>Getting your project set up and ready to go<\/strong><\/p>\n<p>Setting up your project is simple and easy to get started. If you need to get started from scratch, you can generate scaffolding easily from within the tool by selecting which types of apps you\u2019d like to build. Whether you\u2019re creating a tab, bot, messaging extension or a combination of the three \u2013 the project scaffolding will be automatically generated. If you already have an existing Teams project, we\u2019ve built in the ability to import those file folders directly into the workspace where it will be picked up by the tool and ready for your use.<\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4747\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/\u2018Project-Setup\u2019-window-with-toggles-for-tabs-bots-and-messaging-extension-selections-1024x655.png\" alt=\"\u2018Project Setup\u2019 window with toggles for tabs, bots, and messaging extension selections\" width=\"650\" height=\"416\" \/><\/p>\n<p><strong>Configuring your Teams application<\/strong><\/p>\n<p>As you you\u2019re building your app, you\u2019ll want to configure different items such as the name of the app, description inside the Teams app store, registration of bot and tab end points, etc. Within the toolkit, we\u2019ve simplified the process by providing a configuration tab where you\u2019ll be able to easily edit each of those items. We\u2019ve also provided the ability to easily manage your app across multiple environments \u2013 giving you the ability to switch between environments from this configuration view rather than juggling multiple manifest files.<\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4748\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Configuration\u2019-tab-where-users-can-configure-different-items-in-their-app-and-toggle-between-environments-1024x656.png\" alt=\"Configuration\u2019 tab where users can configure different items in their app and toggle between environments\" width=\"650\" height=\"417\" \/><\/p>\n<p><strong>Pre-validating your app before submitting to Microsoft Partner Center<\/strong><\/p>\n<p>Before your can publish your app to the Teams public store, it needs to go through a series of validation checks and approvals in the Microsoft Partner Center portal. This is a very meticulous process and provides a level of quality assurance over app performance and user experience. With that said, it can be a lengthy process if issues are identified \u2013 necessitating investigation and remediation. To mitigate this, we\u2019ve frontloaded a number of those validation checks within the extension, so that you can perform those checks prior to submission for official review and approval.<\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4754\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-1024x655.png\" alt=\"Validation screen where developers can pre-validate their app prior to submission to Partner Center\" width=\"650\" height=\"416\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-1024x655.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-300x192.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-768x492.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-1536x983.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Validation-screen-where-developers-can-pre-validate-their-app-prior-to-submission-to-Partner-Center-2048x1311.png 2048w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p><strong>Publishing your app<\/strong><\/p>\n<p>Congrats! You\u2019re now at the point where you\u2019ve finished building your app, configuration is completed, and you\u2019ve gone through the pre-validation steps \u2013 so what\u2019s next? Now it\u2019s time to decide where to publish your app \u2013 where we\u2019ve provided a couple options:<\/p>\n<ul>\n<li>Publish to your <strong>organization\u2019s app catalog<\/strong> so that it\u2019s only available to the people in your company \u2013 where you\u2019ll soon be able to submit directly from the toolkit to your IT admin for review and approval<\/li>\n<li>Publish to the <strong>Teams public app store <\/strong>for anyone who has a Teams client can install \u2013 where you\u2019ll be linked to the Partner Center for official submission and review.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4752\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/Publish\u2019-window-providing-the-2-options-for-developers-to-publish-their-apps-1024x576.png\" alt=\"\" width=\"650\" height=\"366\" \/><\/p>\n<h3>Thank you<\/h3>\n<div>We hope you that you\u2019ve enjoyed learning about the Microsoft Teams Toolkit for Visual Studio and Visual Studio Code. Please go and try out the these new\u00a0Microsoft Teams\u00a0toolkits and provide back feedback!<\/div>\n<p>Happy coding!<\/p>\n<p>Microsoft 365 Team<\/p>\n","protected":false},"excerpt":{"rendered":"<p> Learn how to build Teams apps for collaboration and productivity in VS Code and VS with the new #MicrosoftTeams Toolkit! Available now in preview for @Code with @VisualStudio coming soon!<\/p>\n","protected":false},"author":69076,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[55],"class_list":["post-4745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-visual-studio"],"acf":[],"blog_post_summary":"<p> Learn how to build Teams apps for collaboration and productivity in VS Code and VS with the new #MicrosoftTeams Toolkit! Available now in preview for @Code with @VisualStudio coming soon!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4745","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\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4745"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}