{"id":1431,"date":"2018-01-12T21:55:17","date_gmt":"2018-01-13T04:55:17","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=1431"},"modified":"2018-01-12T21:55:17","modified_gmt":"2018-01-13T04:55:17","slug":"microsoft-teams-sample-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-teams-sample-app\/","title":{"rendered":"Microsoft Teams C# Sample App"},"content":{"rendered":"<p>We\u2019ve heard you and we\u2019ve delivered, the\u00a0<a href=\"https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-csharp\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Teams C# sample app<\/a>\u00a0is here! This sample app will give you all the tools you need to start developing for Microsoft Teams.<\/p>\n<p>The sample app has two goals:<\/p>\n<ol>\n<li>To show you different examples of how an app can integrate into Teams.<\/li>\n<li>To give you a starting point of patterns, examples, and tools that can be used as a template for creating a larger, scalable, enterprise-level bot to work within Teams.<\/li>\n<\/ol>\n<p>To get the sample app up and running, follow the directions below or in the\u00a0<a href=\"https:\/\/github.com\/OfficeDev\/microsoft-teams-template-bot-CSharp\/blob\/master\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">readme.md<\/a>\u00a0file in Github.<\/p>\n<p><strong>Prerequisites<\/strong><\/p>\n<ol>\n<li>Install Git for windows:\u00a0<a href=\"https:\/\/git-for-windows.github.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/git-for-windows.github.io<\/a><\/li>\n<li>Clone this repo:<\/li>\n<\/ol>\n<p>git clone\u00a0<a href=\"https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-csharp.git\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-csharp.git<\/a><\/p>\n<ol start=\"3\">\n<li>Install Visual Studio and launch it as an administrator.<\/li>\n<li>Build the solution to download all configured NuGet packages.<\/li>\n<li>Install some sort of tunneling service. These instructions assume you are using ngrok, which you can download from\u00a0<a href=\"https:\/\/ngrok.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/ngrok.com<\/a><\/li>\n<li>Install the Bot Emulator &#8211; click on &#8220;Bot Framework Emulator (Mac and Windows)&#8221;:\u00a0<a href=\"https:\/\/docs.botframework.com\/en-us\/downloads\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/docs.botframework.com\/en-us\/downloads<\/a><\/li>\n<\/ol>\n<p><strong>Steps to see the bot running in Bot Emulator<\/strong><\/p>\n<p>NOTE: Teams does not work nor render things exactly like the Bot Emulator, but it is a quick way to see if your bot is running and functioning correctly.<\/p>\n<ol>\n<li>Open the template-bot-master-csharp.sln solution with Visual Studio.<\/li>\n<li>In Visual Studio click the \u201cStart Debugging\u201d button (typically defaulted to running the Microsoft Edge configuration).<\/li>\n<li>Once the code is running, connect with the Bot Emulator to the default endpoint, &#8220;<a href=\"http:\/\/localhost:3979\/api\/messages\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">http:\/\/localhost:3979\/api\/messages<\/a>,&#8221; leaving &#8220;Microsoft App ID&#8221; and &#8220;Microsoft App Password&#8221; blank.<\/li>\n<\/ol>\n<p>Congratulations! You can now chat with the bot in the Bot Emulator!<\/p>\n<p><strong>Steps to see the full app in Microsoft Teams<\/strong><\/p>\n<ul>\n<li>Begin your tunneling service to get an https endpoint.\n<ul>\n<li>Open a new\u00a0<strong>Command Prompt<\/strong><\/li>\n<li>Change to the directory that contains the ngrok.exe application.<\/li>\n<li>Run the command\u00a0ngrok http [port] &#8211;host-header=localhost(you&#8217;ll need the https endpoint for the bot registration) e.g.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>ngrok http 3979 &#8211;host-header=localhost<\/p>\n<ul>\n<li>The ngrok application will fill the entire prompt window. Make note of the \u201cForwarding\u201d address that is using https. This address is required in the next step.<\/li>\n<li>Minimize the Command Prompt window that\u2019s running ngrok. It\u2019s no longer referenced in this article, but it must remain running.<\/li>\n<li>Register a bot in the Microsoft Bot Framework.<\/li>\n<\/ul>\n<p>Bots in Teams must be built upon the Microsoft Bot Framework. For this sample, as part of the package download process, you\u2019ll get the Bot Framework SDK and the Microsoft Teams extensions to Bot Framework.<\/p>\n<p>In addition, every bot must be registered in the Bot Framework, so it is accessible by the services it uses like Microsoft Teams. Our samples are designed for you to run yourself, so you\u2019ll need to create your own bot, which also includes a Microsoft App ID and password. Here\u2019s how:<\/p>\n<ul>\n<li>Using your work or school account, sign in to the Microsoft Bot Framework site\u00a0<a href=\"https:\/\/dev.botframework.com\/bots\/new\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/dev.botframework.com\/bots\/new<\/a>.<\/li>\n<li><strong>Display name<\/strong>\u00a0\u2013 Give your app a name. This does not have to be unique. This will be the name displayed in Teams. We recommend that you make this the same name as your app name in the manifest (this sample uses Sample-App-csharp).\n<ul>\n<li>Note: If you decide to change the Display Name or icon after your bot is registered, it may take some time before your new name or icon will show up in your Teams client; logging out and logging back in will usually accelerate this.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Bot handle<\/strong>\u00a0\u2013 Create a unique identifier for your bot.\n<ul>\n<li>Note: This cannot be changed and is not visible to users. If you change the Display name of your bot, your Bot handle will remain the same.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Long description<\/strong>\u00a0\u2013 Enter a long description which may appear in channels or directories.<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Note: In Microsoft Teams, the Store information will come from the Seller Dashboard.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Next, you need to configure your bot\u2019s service endpoint so Microsoft Teams knows how to connect to your bot:<\/p>\n<ul>\n<li><strong>Messaging endpoint<\/strong>\u00a0\u2013 Paste the ngrok URL that you copied to the clipboard and append the appropriate endpoint to it. For our samples, again, our code is listening for messages on &#8220;\/api\/messages\u201d, so for example you\u2019d enter \u201c<a href=\"https:\/\/2d1224fb.ngrok.io\/api\/messages\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/2d1224fb.ngrok.io\/api\/messages\u201d<\/a><\/li>\n<li><strong>Create Microsoft App ID and password<\/strong>\u00a0\u2013 This button will take you to the Application Registration Portal, where you will create a unique Microsoft App ID and password.\n<ul>\n<li><strong>App name<\/strong>\u00a0\u2013 This will be filled in from what you entered in the previous step<\/li>\n<li><strong>App ID<\/strong>\u00a0\u2013 This is a unique GUID created for your app, e.g. 93fed3d5-6782-462e-8a58-6a3e83ca6eab<\/li>\n<li><strong>Generate an app password to continue\u00a0<\/strong>\u2013 Click this button to generate an app password (you\u2019ll sometimes see this called an app secret), e.g. qgSctpqT89ZdfAymt66Ukgf\n<ul>\n<li>Note: You\u2019ll need to copy and save this in a secure location as you will need this, and the App ID later. The app password will only be shown once.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Click the \u201cFinish and go back to Bot Framework\u201d button.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>On the new page that opens once your app is done being created, click on the Microsoft Teams icon under &#8220;Add a featured channel&#8221; in order to allow your bot to use this channel.\u00a0You\u2019ll return to the Registration page, with the App ID filled in, that matches the one created above. Check the box at the bottom to agree to the terms of use, and click \u201cRegister\u201d to create your new accessible Bot Framework bot\n<ul>\n<li>Click on the Microsoft Teams icon under \u201cAdd a featured channel.\u201d\n<ul>\n<li>Check the box to agree to the Terms of Service.<\/li>\n<li>Click \u201cDone\u201d on the Configure MS Teams page in the bottom left hand corner.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Bots and Microsoft Azure<\/strong>\u00a0\u2013 When you edit the properties of an existing bot in the\u00a0<a href=\"https:\/\/dev.botframework.com\/bots\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">list of your bots in Bot Framework<\/a>\u00a0such as its messaging endpoint, which is common when first developing a bot, especially if you use\u00a0<a href=\"https:\/\/ngrok.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ngrok<\/a>, you will see the &#8220;Migration status&#8221; column and a blue &#8220;Migrate&#8221; button that will take you into the Microsoft Azure portal. Don&#8217;t click on the &#8220;Migrate&#8221; button unless that&#8217;s what you want to do; instead, click on the name of the bot and you can edit its properties.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>If you register your bot using Microsoft Azure, it does not need to be\u00a0<em>hosted<\/em>\u00a0on Microsoft Azure.<\/li>\n<li>If you do register a bot using\u00a0the\u00a0Microsoft Azure portal, you must have a Microsoft Azure account. You can\u00a0<a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\" target=\"_blank\" rel=\"noopener noreferrer\">create one for free<\/a>. To verify your identity when you create one, you must provide a credit card, but it won&#8217;t be charged; it&#8217;s always free to create and use bots with Microsoft Teams.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>You project needs to run with a configuration that matches your registered bot&#8217;s configuration. To do this, you will need to update the web.config file:\n<ul>\n<li>In Visual Studio, open the web.config file. Locate the\u00a0&lt;appSettings&gt;<\/li>\n<li>Enter the BotId value. The BotId is the\u00a0<strong>Bot handle<\/strong>from the\u00a0<strong>Configuration<\/strong>\u00a0section of the bot registration.<\/li>\n<li>Enter the MicrosoftAppId. The MicrosoftAppId is the App ID from the\u00a0<strong>Configuration<\/strong>section of the bot registration.<\/li>\n<li>Enter the MicrosoftAppPassword. The MicrosoftAppPassword is the auto-generated app password displayed in the pop-up during bot registration.<\/li>\n<li>Enter the BaseUri. The BaseUri is the https endpoint generated from ngrok, e.g.\u00a0<a href=\"https:\/\/2d1224fb.ngrok.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/2d1224fb.ngrok.io<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Here is an example for reference:<\/p>\n<p>&lt;add key=&#8221;BotId&#8221; value=&#8221;Bot_Handle_Here&#8221; \/&gt; &lt;add key=&#8221;MicrosoftAppId&#8221; value=&#8221;88888888-8888-8888-8888-888888888888&#8243; \/&gt; &lt;add key=&#8221;MicrosoftAppPassword&#8221; value=&#8221;aaaa22229999dddd0000999&#8243; \/&gt; &lt;add key=&#8221;BaseUri&#8221; value=&#8221;https:\/\/#####abc.ngrok.io&#8221; \/&gt;<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>In Visual Studio click the \u201cStart Debugging\u201d button.<\/li>\n<li>Once the app is running, a manifest file is needed:\n<ul>\n<li>In the Solution Explorer pane of Visual Studio, navigate to the file, manifest\/manifest.json \u2013 change all instances of the following patterns:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>&lt;&lt;REGISTERED_BOT_ID&gt;&gt; (there are 3): change to your registered bot&#8217;s app ID<\/li>\n<li>&lt;&lt;BASE_URI&gt;&gt; (there are 2): change to your https endpoint from ngrok<\/li>\n<li>&lt;&lt;BASE_URI_DOMAIN&gt;&gt; (there is 1): change to your https endpoint from ngrok excluding the &#8220;https:\/\/&#8221; part<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>Save the changes to manifest.json.<\/li>\n<li>Zip it and the bot_blue.png file located next to it together to create a \u201cmanifest.zip\u201d file. Make sure that files are at the top level of the ZIP package, not a subfolder.<\/li>\n<\/ul>\n<ul>\n<li>Once complete, sideload your zipped manifest to a team as described here:\u00a0<a href=\"https:\/\/msdn.microsoft.com\/en-us\/microsoft-teams\/sideload\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/msdn.microsoft.com\/en-us\/microsoft-teams\/sideload<\/a><\/li>\n<\/ul>\n<p>Congratulations! You have just created and sideloaded your first Microsoft Teams app! Try adding a\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/tabs\/tabs-content\" target=\"_blank\" rel=\"noopener noreferrer\">configurable tab<\/a>\u00a0or at-mentioning your bot in a channel by its registered name (@Sample-App-csharp Hello).<\/p>\n<p>&nbsp;<\/p>\n<p>If C# isn\u2019t your language of choice, you may be interested in the Node.js version instead:\u00a0<a href=\"https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-node\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-node<\/a>.<\/p>\n<p>As always, we welcome your\u00a0<a href=\"https:\/\/msdn.microsoft.com\/en-us\/microsoft-teams\/feedback\" target=\"_blank\" rel=\"noopener noreferrer\">feedback<\/a>. We look forward to seeing what\u00a0<a href=\"http:\/\/aka.ms\/microsoftteamsdesignguidelines\" target=\"_blank\" rel=\"noopener noreferrer\">great experiences<\/a>\u00a0you can bring to Microsoft Teams.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve heard you and we\u2019ve delivered, the\u00a0Microsoft Teams C# sample app\u00a0is here! This sample app will give you all the tools you need to start developing for Microsoft Teams. The sample app has two goals: To show you different examples of how an app can integrate into Teams.To give you a starting point of patterns, examples, and tools that can be used as a template for creating a larger, scalable, enterprise-level bot to work within Teams.<\/p>\n","protected":false},"author":69074,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[37],"class_list":["post-1431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-bot-framework"],"acf":[],"blog_post_summary":"<p>We\u2019ve heard you and we\u2019ve delivered, the\u00a0Microsoft Teams C# sample app\u00a0is here! This sample app will give you all the tools you need to start developing for Microsoft Teams. The sample app has two goals: To show you different examples of how an app can integrate into Teams.To give you a starting point of patterns, examples, and tools that can be used as a template for creating a larger, scalable, enterprise-level bot to work within Teams.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1431","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\/69074"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=1431"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/1431\/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=1431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=1431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=1431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}