Demystifying Teams Toolkit for Visual Studio Code

Key Takeaways

hey folks welcome to another video for code decoding [Music] today we're going to Deep dive teams toolkit 's a vs code extension also available in Visual Studio to create debug tests deploy your application for teams right from the editor and we are not doing this alone I've got ziddishang principal program manager in Visual Studio team with us today and we will be decoding everything together ziddi would you like to intro yourself to all this audience out here and what you do in Microsoft hi everyone I'm ziti uh working as a product manager at the Microsoft developer division over the past years we've been developing developer tools for Global developers to make their life easier most recently we are working on a new product called the teams toolkit for Microsoft Visual Studio code it can help you to create and debug and deploy teams app with a lot of the routine processes much simplified for example integrated identity uh make it easier to access to the cloud storage or if you want to access your organization's data then we offer the convenience feature to through the Microsoft graph of course there were a lot of other Azure or Microsoft 365 Services we make them easy with the zero config approach so we're now in vs code I have already installed the teams toolkit we're going to go ahead and click on get started so because I want to try out from very beginning to see how the experiences and you can also see the experience from the tool all right so zydia I can see here a few items like get your environment ready I'm just gonna click on that so what it does here is it runs a prerequisite Checker Let's just go ahead and select that so it does sort of like checking whether you have the right tools installed with you right in your machine yep uh currently the only yeah currently only the the only prerequisite uh to get started is just a node.js with the right version and the npn yeah all right so is there any version that you need to be mindful of like from this version up it works uh we are trying to align with the official node.js version with their long-term support policy so which means currently we're supporting uh version 16 and the earlier version 14. uh for the current latest version 18. uh we are trying to align with it very soon awesome that's good so just have one prerequisite that you can go ahead and start creating apps for and then you can there's also another one so build your first teams up which is basically creating your app but I can see something here create a M365 testing tenant for free which is great I already have an environment where I can test this application but it's good to know that we also provide an option from within the tool to create an environment if you don't have it which is great um but I already have an environment so let's go ahead and create this teams application all right so it gave me uh some options like again creating from scratch or um starting from a sample I'm gonna go ahead and choose the first option all right so there are these scenario based teams apps and uh there are these uh basic teams app I can see is it yes that's correct we recommend to start with some scenario based the teams apps yeah this is great and I can't wait to see more scenarios coming from your team but right here we have notification bot which is great so it sends notification to teams uh via maybe an Azure function or triggers um and Scott command bar it responds to simple commands SSO which is like auth um and spfx tab as well I'm really tempted to go ahead and try command bot because I really love uh this scenario because it can be used for various uh like q a FAQ sort of situation and a lot of uh people actually look for this kind of apps um in in teams so I'm gonna go ahead and try this one all right so it's asking me for JavaScript versus typescript I'm definitely going for typescript and let me check okay I will go ahead and create a new folder um and let's call it command bot all right so again I'm gonna give it a very basic name not feeling very creative at the moment command bot and it starts scaffolding so I can see oh okay I've got two uh notifications that says my Azure resource template is updated based on your resource Dot and I also got like success it's got folded uh which I can make sense because I know that it probably created um uh the project for me the files Etc um let's find out all right so it it's I think it's opening up my uh app yeah okay uh the project has been success successfully scaffolded uh with your input no I can't help you to give you a quick walk through about the folder structure okay that would be amazing because I'm I'm waiting to see what all stuff has been scaffolded apart from the bot itself nice um in the project folder you will see four uh subfolders so the first one is called the dot FX where it stores all the environment parameters project settings and uh configs okay that's great because I think we'll get to the part where we'll show folks how we have we can handle multiple environment from the same project the second subfolder is called a vs code.vs code that's uh it stores all the necessary information in order to make a successful local debug the third subfolder is called a bot that's where all your part logic that's all the main project source code stays so under body will see a next layer like called SRC uh you will find all the details about the code logic and artifacts but I will call out one uh one very important file under this part of the subfolder is the readme file uh where you can treat it as a like a step-by-step guide yeah yeah then the last subfolder is called a template that's where all the uh if you want to deploy your project or app into the Azure Cloud we made it easy for you so they have a two parts one is the app package where it has uh scaffolded manifests the file and the other necessary artifacts like a project icon so for you to package into a zip file and upload it to the teams then the other very important subfolder is called Azure so here we put all the things that required all the cloud artifacts that we are going to provision uh all those definition files we put in this folder so as you can see there's a subfolder called a provision if you expand that one you will find a set of bicep files now let me explain what exactly is the bicep files Rabia you must be familiar with Azure used to use a lot of things called arm template for the position yeah yes that then the pythophile is the next subversion next generation of the arm templates so it makes the uh definition Cloud resource definition much simpler cleaner and the modular yeah that's great because I I'm seeing a bicep file for the first time but I can actually understand that it is this one is creating a bot service and that's required that's one of the resources required for our Command bot and there is one for web app which I can totally make uh you know sense out of it it I did go through this and I was feeling okay yeah I can I know these properties I know what they're trying to do but this is amazing so it's another new thing I'm learning today so that's great and the tool takes care of all the configuration at this stage right we have not really gone into the juice of things but everything is kept ready for you to go ahead and distribute exactly uh so you don't need to do any tweak uh about this scaffolding file you can directly move to the next stage exactly so the developer doesn't really need to worry about all these settings and configurations and all this uh but they only can concentrate on creating their applications which is which is beautiful yes so we we got to understand what is inside the the main folder uh which has all the team's toolkit aspects as well but now we're in the app itself just to understand what's in the app which is the scenario based command bot so first thing I always like to do folks is go into the package and see the dependencies um and I can see there's not a lot which is great um so we have got the teams effects which is a library that actually helps developers um you know get all those really hard bits into easy a usable modules so uh I like teams FX when it comes to like uh create all stuff like bot SSO Etc it's super easy to use this Library we also have a CLI right ZD for all these uh um deployments CI CD aspects um which is great yep and we also have bot Builder so because this is a bot we're using that package as well so very very limited amount of dependencies for the developer uh that's a good thing um and I can see some folder for adaptive card which is great um they're very rich actionable cards that you can use in your application and they're also like you don't have to worry about how they look because they uh live in the hosts um and take the form of the host so that's that's an amazing beauty of adaptive cards um and um there are a few models and uh you've got the command Handler so this is probably the most important bit here and what it does here is this word hello world it should actually give me back a card and that card is living in this folder yeah all right super simple and I think Index this is the entry point uh our server side code uh all good I I'm gonna go ahead and run this bot to see how it works so it's as simple as this folks once you've provisioned it out all you have to do is FY and you can debug you can go ahead and run this app and you don't have to worry about anything so previously we have done uh applications where we create apps a team sample you have to run tunneling services like ngrok but the teams toolkit would go ahead and do all that work for you so that you can start testing your application locally um so now it's gonna go ahead and run the app for you it's doing again another prerequisite check which is interesting City uh this uh this is the second time we do the prerequisite chat you saw the uh first the prerequisite chat is only checking your node.js version agenda npm version that's for getting started so this check is really for a successful local debug so in addition to checking the version of your node.js installation uh they also check whether you have a proper micro Microsoft 365 account and more importantly it must have site loading permission otherwise the local debug or site loading won't work so it will check that and they warn you if it doesn't have it or if you don't even have a test proper M365 account it gives you a link to request one a free account yeah that's awesome oh I should have actually done that in done the entire thing in a VM so that we could get that experience but I'm pretty sure that's uh going to be easier for you to do if it's just a link and go ahead and create your own and we already saw I think in the get started page City that we had that button where you could create a new tenant so that's that's brilliant meanwhile that's happening maybe what we could do uh ZD is since you already discussed about accounts and side loading side loading folks is that something that you have to enable in your tenant for you to actually put your application by yourself and test it um so uh in my environment obviously it's uh this is enabled so that's what the day has been mentioning that I see a green tick um next to it uh so that's one of the prerequisites so can you take us through a bit about what's happening in this uh left hand side that's quite a few there are four different things like accounts environment development and deployment sections can we just go through it yeah so this is basically our our entry point to uh for the developer to uh like a access most of the teams toolkit features so as you can see there were several blocks the top one is the accounts uh we just talked about the M65 account which you need to have a site loading permission in order to uh do the local debug but in addition um if you really want to do a remote debug which means you need to provision the cloud resources remotely and deploy all your application code there then you need proper Cloud credential to get that to do all these uh tasks so in uh for now the teams toolkit has a built-in support for Azure so that's why you need a Azure proper Azure account to sign in as well then the second box is really about the environment we just briefly talk about that in the scaffolding folder walkthrough local means everything local that's currently by default so it's got a new project right now you are on the local environment yeah okay which means yeah all the debugging uh all the Bots will be deployed to a local host first that's why in the prerequisite check you need the ink Rock because when you sign a load into a team's web client it's going through the internet so your localhost need to be exposed to the outside through the engrock that's why we chat also check that for you yeah you've actually put that very beautifully uh zidi that that's exactly what it is what ngrok is then you found a another default environment we call it to death but you can definitely create your own or give a different name so you can create a new environment but more importantly each environment represents a remote running environment where you can deploy to most time it will be a cloud subscription you need to sign in and you need to add a have a proper permission to do all the deployment okay yeah so I that makes a lot of sense because this I can see there are two new buttons that's like ad and 365 teams up with owners uh the aad uh registration app owners right and uh there's also like listing out who are the owners for this particular app so this makes it easier for someone else in your team also to have complete control over this app and you know get this code and run the app from within this environment exactly yeah that's a mini for the collaboration uh for the developers yeah this this is brilliant so if I have another environment staging production this is going to be the same experience as the dev we can still collaborate ad owners and things like that so that's that's amazing and I think we saw previously some config files as well so they were Dev local so if you've got a staging uh environment it will create a new config for that as well and then everything will be taken care of that's brilliant that's brilliant so something's really happening over here but I'm I'm still curious about development and the deployment aspects they're pretty straightforward it's like creating in a sample viewing the sample uh we can quickly go through it if there is something I don't understand I will call you out um there's also add features so I can go ahead and add more features into this app right you can try to click that one you will see uh some of the features like adding a new API connection or adding a single file on you can always get a access from this click all right so that that's that's beautiful um and also you can edit your manifest file if you want to change something there the developer name or anything um and you can also preview and debug adaptive cards okay that's brilliant I had no idea um that means you can actually see these adaptive cards uh from within like there used to be an extension for that as well right yeah yeah if you go through the project folder uh you can actually um uh find the adapted car file double click that one it will automatically trigger this foreign oh okay I see it okay I see that little eyes over here that's wonderful so I'm gonna click that okay that's that's the first time I'm saying that so I got a bit excited then we built in all these features to make a designers or developers life uh easier um you can also preview and debug this adaptive card you can see other online cards as well I can see here for probably inspiration um so that's that's that's wonderful so that's uh another new thing that I'm learning today this thank you so much for teaching so much uh in a short time all right so now we have finally the deployment area which is a bit more deeper so I need you to go in and help me out here provision in the cloud so what does this mean to a developer when he is clicking on this yeah uh as in the walkthrough of the project folder you saw a few uh Azure services like Azure bot service and web app yeah yes yeah so before we can deploy all the uh application code to This Cloud resources we first need to provision them so this command is exactly doing that it will create the bot service it will create the web app for you um and it hasn't really uh deployed your application to it yet right it's just creating oh yes yeah I can uh briefly explain what's happening here so once you click the provision uh it will take a follow all the bicep file and deploy it based on the a configuration or definition and creating all those instances and the return gather returned uh like instance IDs and the small them into the configure folder so you remember the data FX folder so all those implementing once deployed successfully like in a state yeah yeah oh it's in the States oh okay because yep that's the local or or if you deploy to that environment it will have something called the dev dot user data where you can see all those IDs then those ID can be used by teams toolkit for the next step deployment the day um let's walk through the other bits in here in this section deployment um so next one is zip teams metadata package it's just packaging the opposite yep so this step is uh basically preparing the app package.zip uh that's the only file you will be uploading to the admin Center or their portal to get your um uh apparetti for site to loading yeah yeah that's right so in case you want to do it manually instead of the tool deploying it for you you can also do like get the app maybe it's like you're Distributing manually to some admin or someone then you can use this one to package it up um all good and and the next bit is deployed to the cloud I believe this is uh putting your app where it's hosted like web app or the bot service and things like that isn't it yes uh so that uh some people may be confused about the provision and deploy yeah yeah we he's playing the earlier it's more like a one-time job so you prepare the cloud environment uh with all the instance provisions and ready to be deployed then the deploy can happen as many times as you wish so whenever you make the code to change you can just copy your uh finish the app code to the provision Cloud instances like a web app service or the Azure or service so this one meant to be multiple times yeah okay yeah that that's good that's the confusion I had in the beginning as well so when you say provision I'm always thinking I'm provisioning everything out in the cloud but there are two different things of provisioning as you said creating the instances for all the things that you need to deploy and then deploy decline is like and every time you make changes to the code you can deploy it to the cloud and host where it's hosted right yep yep right cool awesome that's that's brilliant and uh publish to teams obviously it's going to be pushing to the org or what kind of publishing are we talking about here um so this is a mainly about publishing for your organization only uh there were two types of publishing one is like lob what do we call it a lionful business app so this one created just for your own organization but it does require approval from your organization's I.T admin so publish to your team is basically uploading the Zip app package to the admin Center of your organization then there will be alert sent to the admin admin will either approve it so all the people within the organization can see and use it or it will be rejected yeah yeah that makes sense no that that's right because um the app does not go ahead and put everything in your org that would be weird I mean even if you have permissions but it would put it there in the org for your admin to go ahead and click publish exactly uh okay teams toolkit uh offered this as a convenience feature but you can also do it through the teams of developer portal you can manually publish as well and if you really as a isv app you want to publish to the teams app store that's a totally different process will not be covered yeah it's a long process you need to get it validated um there's lots of things involved in there um but uh we are actually doing a workshop where folks can actually start from scratch and put it to the store so I'll link down below um about app Camp which is a project that one of our colleagues Bob and I we did it uh with that aspect covered but right now we're not gonna focus on that we're still in local we're testing this is nothing's been deployed there we are so it says local debug automatically to the name what we created that's saying that it's not you know anything nothing's provisioned out right because so I'm gonna go ahead and add this app so this would actually then take me to a chat I believe because it's a bot and yep that's exactly what's happening all right so we I think the trigger Awards hello world let's go back and check uh it in the code if I'm not mistaken it was hello world right Yes actually uh yeah once it's a loaded it will prompt you what the what account okay oh okay yeah okay that's cool super cool something that's already in there and helpful right so if you've got an FAQ you already have all these options what you want to like frequently ask questions and things like that so I already put the trigger in so once it sees the trigger the bots in gonna invoke and give me a reply which is an Adaptive card and here we are at the nice little adaptive card with links yeah yeah so that that was easy so everything up and running in like few minutes um and uh if you want to add more uh text that is a trigger word then you can go ahead and add more as a string of uh sorry an array of string um so yeah go ahead and try uh having fun with it um and we haven't really deployed it to the cloud so once you stop debugging it's gonna stop that app is gonna stop working and then if you want to have it hosted go to the team toolkit this option right so deploy to the cloud and then you can even share it with someone they can test your app Etc awesome that has been amazing ziddi um I'm really gonna go and try out a few more other things in this bot because this is exciting uh but is there anything you want to tell our audience yeah where they can go and try out A team's toolkit you know what what kind of feedback would you want under this video as comments yeah uh thank you Rabia and thank you all the viewers uh if you are interested to explore more uh we have a short link uh https AKA dot Ms slash ttk is a king's toolkit uh where it's our GitHub repo it's a totally open source to the public feel free to look through the things took in and all the sample questions so remember to read me that's a very useful for you see you bye [Music]