Getting started with Teams Toolkit for Visual Studio

foreign ER I'm A Cloud developer Advocate at Microsoft mainly focused around Microsoft 365. in this case it's going to be Microsoft teams and I'm here today to talk to you about teams toolkit but teams toolkit for visual studio we had a session last week from John Miller who went through teams toolkit at the high level and it was very much focused on Visual Studio code so there is a visual studio code extension about teams development and there was lots of Interest around what was coming with visual studio so here we are based on that feedback we're going to have a a getting started uh session um with basically if you're new to teams development or you're using visual studio your c-sharp developer using.net then hopefully this is something that you've been looking for and we'll help you get started building apps for Microsoft teams and so let's get started then so teams talk it is basically an add-on to uh to visual studio that's going to add in new Microsoft teams project templates and it's going to extend uh Visual Studio code with lots of features that's going to make it easier for you to launch your apps to debug them and also deploy them as well when you want to get them into Azure so really in short team's toolkit is there to help you build teams apps and fast um so what I'm going to show you today as well is it's all generally available there's nothing preview in here and so teams talk it for visual studio was actually released made generally available in August of this year so you may have missed it you may have been on holiday at the time it got released with the latest version of Visual Studio 2022 which is 17.3 so I'm going to show you that when we step through how you can install it how you can create project and and get those apps running so let's first start with how you can install the toolkit so one of the things which through me at first is it's not an extension um so what you actually need is you need the installer to modify your installation of visual studio so download the installer or if you've got it saved and you download somewhere just Just Launch that and hit modify and you'll bring up the uh the the screens to be able to modify the workloads that you've got installed and if you take a look under the asp.net and web development workload you will see I just click that down here we have the Microsoft teams development tools so basically if you want to install them check that box I hit modify and that will install everything for you I've actually pre-installed it so it is still there I don't actually want to to remove it so I'm gonna I'm gonna close this down right now otherwise that that demo is not going to go very well so yeah just come into here tick the Box install it and that will install teams toolkit for visual studio for you okay so let's open Visual Studio so we've got our welcome screen what I'm just going to go through step through now the the project uh creation process so let's create a new project you'll find that you have under all platforms you'll have a new option for Microsoft teams so let's select that only one option um for the platform so Microsoft teams app so we're going to select that click next and then we've got our you know standard give your project a name so let's um call it Community call and I'm going to hit create and now teams talk it is it's kicked into action and provided us with a number of different options um for different types of templates that we can select from to scaffold our teams app so we've got four high level types of of apps that we can create we've got two Bots uh one notification bot so this is good for if you're wanting to react to external events um in in another system you want to push a message into teams maybe with an Adaptive card get some kind of response back and great place to start so if you choose the notification bot you do have further options you can change the type of trigger that you use and also uh what is what technologies are used in the implementation as well so we have a HTTP trigger using web API server and then we have a mix of HTTP trigger and timer triggers as well but using Azure functions as the um in the implementation and then a final option of both triggers together with with Azure functions we've also got a command block so a command bot is kind of your if you've been using Bots conversational Bots what you have commands act commands that you can create and so that people who download the bot can interact with the features of that bot this is a great way of getting started to be able to scaffold that app and create new commands um and and kind of step into those conversational uh type Bots third we've got a tab everyone knows what a tab is in in Microsoft teams I would suspect so yeah this is a tab project which is really quite nice and we'll go and look into this actually so this is using Blazer um behind the scenes in in its implementation it's got some really cool um features that the toolkit gives you some interoperability between c-sharp and the team's JavaScript SDK as well really really cool and we'll go look at that in a second and finally we've got message extension as well so basically if you want to extend that message box with with different actions you can use a message extension in here and just want to point out that the two Bots and the message extension do require any Rock to actually run them that is a dependency at the moment so you have to kind of set that up in the background and have have that really so use the the toolkit and if you're kind of thinking oh no I can't use engrock I'm Enterprises has decided we can't use it for whatever reason there are plans to move away from engrock just at the moment we have that dependency and so if you are if you do face that issue be great to know that you have that issue for the beginning so that we can move forward and it's on our roadmap to move away from uh from from ngrok anyway and but the tap you don't need enrock so let's go and create our tab okay so we have created our project and this has all been scaffolded so nice get a bit of a quick start of of how you can get up and running quickly with this app um one of the things that I'm going to show you now is the way that the toolkit works with how you set things up if you watch the the session previously for the team's toolkit for visual studio code you kind of hit F5 and it does everything for you in the background and it's a bit more I guess developer driven in visual studio so the actions are more kind of like preparation and then run just the one in in this version wanted to give developers a lot more control over what was actually happening um at different stages through through that life cycle so we have our project that's been scaffolded I just want to quickly uh run through this so if you are familiar with the screen so we've got your WWE root folder and we've got an fx folder we've got some components uh in there as well we've got the interop folder which contains the interrupt classes between c-sharp and the team's JavaScript SDK as well we have our pages shared layouts and also templates as well the templates is where our manifest lives so for teams application we we need a manifest so this is in here this is our template we but it also this project comes with templates for deploying to Azure as well so you get bicep templates right out the box and so that when you come to provision they're already there which is great you can come and inspect these and modify them however you like add them in CI CD pipelines that you might already have or yeah a great way of of getting getting started over files as well to take a look at is a permissions.json file so with this application when we actually start to run it it's gonna configure create a app registration for us so we've got some settings in here where we can Define what the the permissions are what the resources are for both delegate and um application permissions as well and I'll just knit back to as we're talking about config I'm going to look back to the FX file as well where we have lots of project level configurations we've got some parameters for Azure these are used by the bicep templates we've also got configs as well for local development and some project settings if I look at the the local configs you can see here that we've got some placeholder values for for the app name and these are all reused within the the Manifest template so you can add your own properties into here and then reuse inject them into the templates so that every time you go to launch your your project I'll run it sorry in Microsoft teams that manifest is going to get updated with all of the values that are in these files really nice way of centralizing those properties okay enough of going through the project structure now let's actually see how we can run this uh this application so teams toolkit has been added in as a as a menu item on the on the project so I've right clicked on the project and we can see we've got teams talk it um and we can see expand the the options that are available to us alternatively we can go to the project um across the the menu at the top as well and we've got teams talking there's two different ways of access it generally you're going to go for the right click method we've got a few options so we've got prepare the team's apps dependencies and so this is the what you need to do before you actually run do the F5 uh kind of launching of your application this is where it's going to kind of do the initial setup update the Manifest do things in Azure and this is dependent on different types of projects that you've got so for example if this was a bot project clicking that prepare teams apps uh dependencies would also register my bot in the bot framework as well which is really really nice um a few other options which I'm not really going to get into today but we've got a nice shortcut to the Manifest file so like I showed you before it was deep in the templates if you don't want to find it and manually you can just come into the team's toolkit and click open manifest and here we go we've got our manifest file you can see the placeholder values so there's lots of configuration values that teams talk it is handling for you in in the background we have our config where our name is being injected in so that was the the config.local.json file so these ones here will get added in and you can see that it's actually got all the configuration for the tabs the identity domains um and well application info as well so a lot of the initial groundwork has been been covered for you here but if you want to come in and change the developer name you know you can either change it manually in the template or you can create a configuration property as well and have that dynamic as well so it's a nice feature that teams toolkit provided that ability to just create new properties and inject them into the into the Manifest right let's go back to teams toolkit and we'll do prepare teams app dependencies so one of the things that toolkit wants to know is where's your Microsoft 365 tenant so this is using the visual studio account management features so I've already linked my developer tenant account in here and but I can choose from different accounts if I need to add a new one I can obviously go through the process here of adding a new account if I hit continue it's going to do the initial setup and we get told what's happening um in the in the output so we can see that work has been done here with creating the application IDs as well and some internal kind of uh logs there basically the Manifest is is being updated everything's been set up ready so that we can hit F5 and we can launch this tab into teams and I'll just show you that if I go into the Azure portal where you can see that our community call app registration has been created and we should be able to see in the permissions that user.read is there so again really nice simple way of being able to get started very quickly from a identity point of view okay everything is now ready to run so let's hit F5 or click the debug button this is now running and it's going to have some authentication there just to authenticate us with Microsoft teams and primaries teams we have the side loading window so we can see what uh values in our Manifesto have been shown into teams so we can see the descriptions and the permissions that it's got different versions we've got the options to add it into to different places in teams so I have a specific team or a chat or if I just click add it will add it as a personal tab for me that's what I'm gonna do so I'm going to click add so you can see this is now running we've also got some examples in here as well as for for the code where teams toolkit is providing us with helpers to get the user information of the uh of the current user uh a few bits of information as well we want to carry on to provision and deploy to the the cloud and actually publish your your app to teams now I'm going to go back to visual studio and let's just take a quick look at the components in here so we have a welcome component so this is the component that is being displayed on that very first screen that we saw and we can see in here where we have the interoperability with the teams JS SDK V2 so we can call the is in teams method just to make sure that yes we're in teams and there are other helpers that are provided but you know it's a nice way of being able to interact with JavaScript through uh through c-sharp and and reuse a library that is already out there and a library that you can already use and we've also then got the example line where we're using the get user info async method on the teams used credential to pull back the user information of the current user as well so again a really nice way of how teams talk it is providing you with one a link to an SDK um definitely recommend that you check out the the documentation for that SDK there's tons of features in there and it's getting dated all of the time and again another nice easy way to be able to uh to get the the user information okay so I'm going to stop there and um because I've queued up questions for you towards the end so you know there's like four so keep going perfect yeah as I've got a little bit of time so what I'm gonna what I can do is I can just go through and show you uh how the the Bots work as well as I think that'd be that'd be quite uh quite useful um so I already have a I should have a project already open but it might just be easier to just start from scratch so let's create a new project let's call it really is called Bots and let's choose a timer on Azure functions okay so this is now scaffolded now notification Bots using an Azure function behind the scenes and fairly similar setup in in terms of the project structure from teams toolkit perspective so we've got our FX folder again we're all our configuration and it's held and in our templates folder as well we've got the themes app package and also the Azure templates as well and for the the bicep files so those are there again done for us really nicely still get the benefit of the uh the placeholders as well so just to quickly show you that that it's exactly the same um yeah easily inject that config in there really nice feature if we take a look at our notify timer trigger in here we can see that it's a it's initial function it runs every 30 seconds if you've developed your functions in the past this should be very familiar to you up what this is doing is this is using a a timer trigger this will run every 30 seconds and what it's going to do is it's just going to send a message as an Adaptive card into a location where that bot is installed so we can install things in teams in all sorts of different locations include personal uh they can be in the context of a team that can be in context of a chat or a group chat so there's an abstraction here that allows us to return where that bot is installed within teams and then we can iterate through the installations and then we can create our adaptive card and we actually have a card in here so we could see a standard adaptive card that has again placeholders in there so we can inject data in there and we're going to pass in these values and send an Adaptive card to that installation so again really simple that there's a method on the installation location just to send a card back which again makes it really nice and simple one thing I did mention just to reiterate uh so I was talking through the different types of apps that you can create in the different templates because this is a bot there is the dependency on ngrok so I have engrock running in the background not going to show it because they'll have my IP address on there and but it's running in the background on uh Port 5130 which team's toolkit is looking for so one of the things that it does when we go to prepare themes apps dependencies it's going to check and see if ngrok is running if it's not it will throw your message back to say you know you need to have it running on this part um to to work so let's prepare the team's app dependencies let's pass that ingrot check and again it's asking me for the account that I want to use to connect to uh my Microsoft 365 Talent so I'll hit continue on there again just doing some work in the background um it's created out an Azure ad app as well but it's also in this scenario it's registering a uh a bot with the bot framework as well in the background which is again really nice so that has now finished so let me run this app so again we're just side loaded in this app into uh teams click add and then give it a few seconds a message will appear into this chat as an Adaptive card in a few seconds there we go uh so here is our adaptive card so here are the values that we were injecting into a card and we've got an action button there as as well so we can click that and just go to the Adaptive cards designer page one of the really cool things and this is a new feature in Visual Studio 2022 is I definitely recommend that you turn on the hot reload and hot reload on file save so if you want to come in here and make those changes the Bots running in the background it's going to be triggered every 30 seconds it's going to pick up your new code as well so then you don't have to stop and restart the the debug process and go through those steps um again so that will really speed up your uh your development time okay I'm gonna leave it there I'm gonna turn that bot off because that's gonna get annoying getting a message uh every 30 seconds but uh let's go back to all right browser and so where's the best place to to get more information about this well there's the team FX GitHub repository if you go to this repository you'll see that it's kind of a a bit lined to visual studio code that's just the history at the moment but there is Visual Studio content in there there will be more added but if you have any suggestions for new features you run into any issues here's a place where you can go and create a a new issue create new issue in the initials list and you know the team will get back to you with some assistance and alternatively you can actually go through the help feature in Visual Studio as well use the report a problem or suggest the feature the team are also triaging the messages that come through through that way as well and this way actually if you do have a bug you get lots of telemetry that's sent for you know issues that you might have found with the tooling and so that can get to the the team quicker it might speed up as well the assistance that they can give you so that's another new feature that you can use on that I think yep uh hopefully you've seen enough today that will kind of get you interested that you can actually start installing have a play around and yeah be really interested to see uh what you build what your thoughts are if we can make things better what you like what you don't like and um and and yeah let's uh let's work together on this one and that's it thank you for listening today and hopefully we've got a few questions Fabian yep my cute amount for you in a list right there where you can see chatter you want me to read them perfect yeah if you can uh read them I'm trying to find my uh yeah no words no worries so I think Victor answered the first one is it only tab or command bot as well um this Yasser right as well doesn't need it um yes sir do you want to come off mute or did you get your answer to your question if you're still here no I will come back to you Paul's asking are the capabilities in teams toolkit for visual studio the same as Visual Studio code I think you touched on a little bit in the end but you have a response from that one uh yeah so it's a great question actually and I was hoping someone would ask this so Paul thank you very much so yeah if you've if you have an understanding of what teams talk it for visuals Visual Studio code gives you um there's extra features in the visual studio code version such as API connections SSO features as well and they're not in the visual studio version at the moment it's primarily aimed at scaffolding and get it running there isn't so there isn't parity that's not to say that they're not going to come later on but there's a I guess a slightly different approach with the visual studio version based on feedback from the visual studio code extension there was a feeling that it was just doing too much and that it was abstracting so much away from you as a developer it left you without as much control so there's been a kind of a conscious thought of making sure that you're going through the steps as a developer and it's not you know hitting F5 and a a magic wand is being thrown about and then and and everything happening for you so so yeah uh there's not parity just yet but yep if there's something in there that you think I've seen this in Visual Studio code and I'd really like it in Visual Studio then you know contact the team get into the issues list and you know that will be able to get prioritized for you thanks Gary for that and I think I'll somewhere dude answered um and they send a demo so when we go back and look at the recording yeah sir you'll see how Gary had started the installer went back into it I forgot into his tooling now I think it was under asp.net applications and then light up the chat box for teams development and that's how you get it inside the installer um the other question which is more of a it's a consideration question I guess I wonder when to use Visual Studio code vis-a-vis Visual Studio on 2022 for teams development any guidelines I guess it's more preferential at best but what are your thoughts around it do you get a question often Gary though I know that you know there's a lot of certainly for Bots there's there's a lot of samples already out there for net and c-sharp and so you know I think leveraging the theme store kit for visual studio will give you a bit of a a lag up there if you like because there's the sdks have been around for for longer than the the JavaScript sdks have been around but yeah it's it's down to what your preferences are right I know I think and and hearing feedback a lot of people have been thinking oh I'm doing teams development I have to use JavaScript I have to use typescript and I think that's been a real concern and that's not the case and you can use dotnet you can use anything it's just you know it's a web app at the end of the day or it's just covering the cloud teams just needs to point to where your application is running um so you can use you know different different Technologies and and mix and match and if you are comfortable you know.net and c-sharp then definitely you know check out this new feature and you'll be able to hopefully get up already even quicker than having to maybe yeah first it off to learn a different technology just to build apps for teams yeah absolutely I'm I'm a big proponent of that I do not want to learn any more JavaScript than I need to be able to Google back overflow so thank you for that [Music]

Channel: Microsoft 365 & Power Platform Community

Views: 3,024

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Teams, Microsoft Teams Toolkit, Visual Studio

Id: 7oa0hW5pXt8

Length: 29min 37sec (1777 seconds)

Published: Wed Oct 05 2022