To follow this guide successfully you need the following.<\/p>\n With the pre-requisites done, let\u2019s begin!<\/p>\n Our first step is to install Teams Toolkit into Visual Studio.<\/p>\n Once the installation is complete, you can close the Visual Studio installer.<\/p>\n After installing Teams Toolkit into Visual Studio, it is time to create our project.<\/p>\n Teams Toolkit will now generate a new project for you and open it.<\/p>\n We will use an Adaptive Card to represent our stock price update, so let\u2019s update the default Adaptive Card design to fit our needs.<\/p>\n Open the\u00a0NotificationDefault.json<\/em>\u00a0file in the\u00a0Resources<\/em> directory and replace the contents with the following JSON.<\/p>\n We use Adaptive Cards Template Language here to provide separation between our data and layout. Using binding expressions i.e., ${name}, we can add placeholders to our layout in locations where we want our data to be rendered.<\/p>\n Let\u2019s create a class to represent the data object to use with the template. Open the\u00a0NotificationDefaultModel.ts<\/em>\u00a0file in the\u00a0Models<\/em>\u00a0directory and replace the contents with the following.<\/p>\n When we combine our template and data using the Adaptive Cards SDK, the notification will look something like this.<\/p>\n Open the NotifyTimerTrigger.cs<\/em> file, this file contains the core logic of our bot that will be executed on a schedule.<\/p>\n For now, let\u2019s remove the contents of Run<\/em> method and remove unused using statements. You can remove the statements by using the keyboard shortcut, Ctrl + R followed by Ctrl + G<\/em>.<\/p>\n As our bot will call out to an external API, we need an HTTP client to execute the requests. So, let\u2019s also create a new read-only property in the NotifyTimerTrigger<\/em> class and create a new HTTP client.<\/p>\n Your file should look like the below block of code.<\/p>\n Let\u2019s add in the logic for our bot.<\/p>\n First, let\u2019s add a try\/catch<\/em> block to the Run<\/em> method.<\/p>\n When the bot is executed, our bot needs to obtain the latest stock price. To do this, we will send a HTTP request to the Alpha Vantage API.<\/p>\n Replace the \/\/ bot logic goes here<\/em> comment inside the try<\/em> block, with the following code:<\/p>\n Next, we need to deserialize and transform the response into the correct shape to use with our Adaptive Card model.<\/p>\n Add the following using statements to the top of the file.<\/p>\n Add the following code into the try<\/em> block.<\/p>\n Now that we have all the data and it has been transformed into the correct shape, we need to obtain our Adaptive Card template.<\/p>\n Add the following code into the try block.<\/p>\n Finally, we want to iterate over all the locations where the bot has been installed in Microsoft Teams, render our Adaptive Card by combining the data and template, and send the card output into those locations.<\/p>\n Add the following code into the try<\/em> block.<\/p>\n That\u2019s the code complete, so let\u2019s move onto getting our project ready to run our bot locally.<\/p>\n We need to ensure that ngrok is running so Microsoft Teams can communicate with the code running on our local machines.<\/p>\n Open a terminal prompt at the location where you installed the ngrok<\/em> executable and start the ngrok service forwarding port 5130 using the following command:<\/p>\n When ngrok is running, a dashboard will be displayed in your terminal prompt with the internet accessible ngrok address that is forwarding network traffic to your localhost hostname. This will be in the format of <randomid>.<region>.ngrok.io<\/em>.<\/p>\n <\/p>\n In Visual Studio, right click the StocksUpdateNotificationBot<\/em> project in the Solution Explorer pane, expand the Teams Toolkit<\/em> menu and select the first option in the menu, Prepare Teams Apps Dependencies.<\/em><\/p>\n A Visual Studio account dialog box will be shown. Add your Microsoft 365 tenant account and follow the authentication steps. Once your account has been authenticated, click Continue<\/em> to start the process.<\/p>\n The Prepare Teams Apps Dependencies<\/em> process ensures that the required resources have been provisioned in your target Microsoft 365 tenant, and that the services needed are running on your machine, such as ngrok, and updating the app manifest file.<\/p>\n Now, it is time to see our bot in action! To do this, simply press F5 on your keyboard.<\/p>\n The first time you run your bot, you will need to allow the Azure Functions executable to send network requests through the Windows Defender firewall. To enable this, click Allow access<\/em> in the prompt.<\/p>\n Teams Toolkit will open a browser window for you and start to open Microsoft Teams. You may be asked to sign into you Microsoft 365 tenant at this point. If you are, complete the process. When you are authenticated, you will be presented with Microsoft Teams dialog which enables you to side load our app into your Microsoft 365 tenant.<\/p>\n Click the Add<\/em> button to install the bot as a personal app and you will be taken to the chat tab of your personal app.<\/p>\n Wait a few seconds for your bot to be executed. You will see a message arrive from our bot with the latest stock price rendered as an Adaptive Card.<\/p>\n Congratulations, you have just created your first notification bot using Teams Toolkit for Visual Studio! \ud83c\udf89<\/p>\n Want to make some updates? Here are a few things you can try.<\/p>\n Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Microsoft Teams Toolkit for Visual Studio enables you to create, debug and deploy Microsoft Teams apps to a Microsoft 365 tenant fast using a no configuration approach.\u00a0Learn how to create a Stock Update Notification bot for Teams Toolkit and C# in this tutorial.<\/p>\n","protected":false},"author":100385,"featured_media":12269,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,128],"tags":[219,23,217,55],"class_list":["post-12256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-teams","tag-c","tag-teams-toolkit","tag-ngrok","tag-visual-studio"],"acf":[],"blog_post_summary":" Microsoft Teams Toolkit for Visual Studio enables you to create, debug and deploy Microsoft Teams apps to a Microsoft 365 tenant fast using a no configuration approach.\u00a0Learn how to create a Stock Update Notification bot for Teams Toolkit and C# in this tutorial.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12256","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\/100385"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=12256"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/12269"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=12256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=12256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=12256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Animation](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/Bot-notification-for-Csharp.gif\")
<\/a><\/p>\nTable of Contents<\/h2>\n
\n
\ud83c\udfc1 Prerequisites<\/h2>\n
\n
\ud83d\udee0 Install Teams Toolkit for Visual Studio<\/h2>\n
\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/ttk-for-vs.png\")
<\/a><\/p>\n\ud83d\udc77 Scaffold the project<\/h2>\n
\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/create-a-new-teams-applications.png\")
<\/a><\/p>\n\u2139\ufe0f Update the Adaptive Card<\/h2>\n
{\r\n \"$schema\": \"http:\/\/adaptivecards.io\/schemas\/adaptive-card.json\",\r\n \"type\": \"AdaptiveCard\",\r\n \"version\": \"1.4\",\r\n \"body\": [\r\n {\r\n \"type\": \"Container\",\r\n \"items\": [\r\n {\r\n \"type\": \"TextBlock\",\r\n \"text\": \"${name}\",\r\n \"size\": \"Medium\",\r\n \"wrap\": true\r\n },\r\n {\r\n \"type\": \"TextBlock\",\r\n \"text\": \"${symbol}\",\r\n \"isSubtle\": true,\r\n \"spacing\": \"None\",\r\n \"wrap\": true\r\n },\r\n {\r\n \"type\": \"TextBlock\",\r\n \"text\": \"{{DATE(${timestamp},SHORT)}} {{TIME(${timestamp})}}\",\r\n \"wrap\": true\r\n }\r\n ]\r\n },\r\n {\r\n \"type\": \"Container\",\r\n \"spacing\": \"None\",\r\n \"items\": [\r\n {\r\n \"type\": \"ColumnSet\",\r\n \"columns\": [\r\n {\r\n \"type\": \"Column\",\r\n \"width\": \"stretch\",\r\n \"items\": [\r\n {\r\n \"type\": \"TextBlock\",\r\n \"text\": \"${formatNumber(price,2)}\",\r\n \"size\": \"ExtraLarge\",\r\n \"wrap\": true\r\n },\r\n {\r\n \"type\": \"TextBlock\",\r\n \"text\": \"${if(change >= 0, '\u25b2', '\u25bc')} ${formatNumber(change,2)} USD (${formatNumber(changePercent, 2)}%)\",\r\n \"spacing\": \"None\",\r\n \"wrap\": true\r\n }\r\n ]\r\n },\r\n {\r\n \"type\": \"Column\",\r\n \"width\": \"auto\",\r\n \"items\": [\r\n {\r\n \"type\": \"FactSet\",\r\n \"facts\": [\r\n {\r\n \"title\": \"Open\",\r\n \"value\": \"${formatNumber(open,2)}\"\r\n },\r\n {\r\n \"title\": \"High\",\r\n \"value\": \"${formatNumber(high,2)}\"\r\n },\r\n {\r\n \"title\": \"Low\",\r\n \"value\": \"${formatNumber(low,2)}\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n}<\/pre>\nnamespace StocksUpdateNotificationBot.Models{\r\n public class GlobalQuote\r\n {\r\n public string Symbol { get; set; }\r\n public double Open { get; set; }\r\n public double High { get; set; }\r\n public double Low { get; set; }\r\n public double Price { get; set; }\r\n public double Volume { get; set; }\r\n public string LatestTradingDay { get; set; }\r\n public double PreviousClose { get; set; }\r\n public double Change { get; set; }\r\n public double ChangePercent { get; set; }\r\n public string Name { get; set; }\r\n public string Timestamp { get; set; }\r\n }\r\n}<\/pre>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/test-bot.png\")
<\/a><\/p>\n\ud83e\udd16 Update the bot logic<\/h2>\n
private readonly HttpClient _client = new();<\/pre>\n
using Microsoft.Azure.WebJobs;\r\nusing Microsoft.Extensions.Logging;\r\nusing Microsoft.TeamsFx.Conversation;\r\n\r\nusing ExecutionContext = Microsoft.Azure.WebJobs.ExecutionContext;\r\n\r\nnamespace StocksUpdateNotificationBot\r\n{\r\n public sealed class NotifyTimerTrigger\r\n {\r\n private readonly ConversationBot _conversation;\r\n private readonly ILogger<NotifyTimerTrigger> _log;\r\n private readonly HttpClient _client = new();\r\n\r\n public NotifyTimerTrigger(ConversationBot conversation, ILogger<NotifyTimerTrigger> log)\r\n {\r\n _conversation = conversation;\r\n _log = log;\r\n }\r\n\r\n [FunctionName(\"NotifyTimerTrigger\")]\r\n public async Task Run([TimerTrigger(\"*\/30 * * * * *\")]TimerInfo myTimer, ExecutionContext context, CancellationToken cancellationToken)\r\n {\r\n\r\n }\r\n }\r\n}<\/pre>\ntry {\r\n \/\/ bot logic goes here\r\n} catch (HttpRequestException e) {\r\n _log.LogError(e.Message);\r\n}<\/pre>\n\/\/ Get quote data from Alpha Vantage API\r\nvar response = await _client.GetStringAsync($\"https:\/\/www.alphavantage.co\/query?function=GLOBAL_QUOTE&symbol=MSFT&apikey=demo\", cancellationToken);<\/pre>\n
using Newtonsoft.Json;\r\nusing Newtonsoft.Json.Linq;\r\nusing StocksUpdateNotificationBot.Models;<\/pre>\n
\/\/ Deserialize JSON response\r\nJObject jObj = (JObject)JsonConvert.DeserializeObject(response);\r\n\r\n\/\/ Transform Global Quote object\r\nvar globalQuote = new GlobalQuote\r\n{\r\n Symbol = jObj[\"Global Quote\"][\"01. symbol\"].ToString(),\r\n Open = double.Parse(jObj[\"Global Quote\"][\"02. open\"].ToString()),\r\n High = double.Parse(jObj[\"Global Quote\"][\"03. high\"].ToString()),\r\n Low = double.Parse(jObj[\"Global Quote\"][\"04. low\"].ToString()),\r\n Price = double.Parse(jObj[\"Global Quote\"][\"05. price\"].ToString()),\r\n Volume = double.Parse(jObj[\"Global Quote\"][\"06. volume\"].ToString()),\r\n LatestTradingDay = jObj[\"Global Quote\"][\"07. latest trading day\"].ToString(),\r\n PreviousClose = double.Parse(jObj[\"Global Quote\"][\"08. previous close\"].ToString()),\r\n Change = double.Parse(jObj[\"Global Quote\"][\"09. change\"].ToString()),\r\n ChangePercent = double.Parse(jObj[\"Global Quote\"][\"10. change percent\"].ToString().Replace(\"%\", string.Empty)),\r\n Name = \"Microsoft Corporation\",\r\n Timestamp = $\"{DateTime.Now.ToUniversalTime().ToString(\"o\").Split(\".\")[0]}Z\"\r\n};<\/pre>\n\/\/ Read adaptive card template\r\nvar adaptiveCardFilePath = Path.Combine(context.FunctionAppDirectory, \"Resources\", \"NotificationDefault.json\");\r\nvar cardTemplate = await File.ReadAllTextAsync(adaptiveCardFilePath, cancellationToken);<\/pre>\n
\/\/ Get bot installation\r\nvar installations = await _conversation.Notification.GetInstallationsAsync(cancellationToken);\r\n\r\nforeach (var installation in installations)\r\n{\r\n \/\/ Build and send adaptive card\r\n var cardContent = new AdaptiveCardTemplate(cardTemplate).Expand(globalQuote);\r\n await installation.SendAdaptiveCard(JsonConvert.DeserializeObject(cardContent), cancellationToken);\r\n}<\/pre>\n\ud83d\udce1 Start ngrok<\/h2>\n
> .\\ngrok http 5130<\/pre>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/ngrok.png\")
<\/a><\/p>\n\ud83e\uddd1\u200d\ud83c\udf73 Prepare dependencies<\/h2>\n
\ud83e\uddea Test your bot!<\/h2>\n
\u23ed What\u2019s next?<\/h2>\n
\n
\ud83d\udcda Learn more!<\/h2>\n
\n