Get started building apps for Microsoft Teams using Teams Toolkit for VS Code

foreign my name is Gary trinder I'm A Cloud developer Advocate from Microsoft and today I'm going to introduce you to the new teams toolkit learn path today we're actually just going to cover how to get started building apps using a team's toolkit for visual studio code and but this is actually going to be a series um so over the next it says five weeks it's going to be longer than that we're going to have a break in between and we're going to cover all the modules that are in the new learn path which is called build and deploy apps for Microsoft teams using teams toolkit for visual studio code and so the load path is already available if you're interested you want to rush along and and and get started on that learn path then you can use the the AKA Ms link so use aka.ms learn teams toolkit that'll take you to the very first module which we're going to cover today which is getting started and then over the next few weeks um we're going to cover building Bots uh next week then we're going to build some tabs fourth week we're going to look at how the team's JavaScript library can be used to add extra functionality into your applications and on the last week we're actually going to go through how you can deploy and publish your apps using uh teams toolkit for visual studio code so we're going to go through I'll cover a lot of the bases end to end how to get started right to having your app deployed running in Azure and available in your organization catalog but for this week we're just going to get started we're just going to go through the the initial steps of how to get ready with the toolkits that start building your apps so first of all let's actually start with asking the question is what what is a Microsoft teams app well really if you think of a teams app as more of a web-based app that just extends the team's platform and and the app itself is is not actually uh uh the web part itself really a teams app is nothing more than a than a small package that contains a what's called an app manifest and you upload this package into teams and that that manifest basically tells teams what capabilities your app has and that app can have several capabilities of which I'll go through uh shortly but basically these capabilities are there to be able to extend the the native features of of teams and allow you to customize it to whatever your your needs of your organization are or if you're building an application and you're an ASB where you can bring your application to Microsoft teams to to where people actually actually work as well so I mentioned a teams app is kind of a let's say a container of capabilities let's take a look at the capabilities that that you've actually got on on offer to be able to add into your app one of the capabilities is is a bot so a bot is it can be referred to as a chat bot or a conversational bot and really it's a it's it's an app where you can automate uh simple and repetitive tasks but you you talk to it you instruct it through through text and it could range from being you know a really fancy chat GPT bot where it's it's uh picking up on your intent and you're having a a real conversation like you have with a user or it could be it could be incredibly basic where it's simply almost like a command line tool but but actually running in teams and the bot can actually return responses like as you see on the screen like adaptive cards with buttons and actions to actually drive processes um as well and a good example of using this might be in kind of like a a a customer service um example support example where where people just want to ask questions get answers and kind of be on their way we're actually having to to speak to people the next capability is tabs and so tabs really are teams aware web pages that can be embedded in different locations in teams like we've got on the screen in front of us we've got a a tab embedded in a in a channel but it could also be um delivered as a personal app which you can open from the left-hand Rail and you can also um put these tabs in chats um as well the next capability I'm going to talk about is Messenger extensions and he's kind of come in two flavors as well so the first type of message extension is what we call a search based message extension and this extension lives down in in the compose box so when you're typing a message uh either into a Channel or into a chat and you've got a little app there that you can use to maybe speed up uh accessing information you've probably already used a message extension every single day I know I do because I use the GIF app really nice and easy to just kind of click the button get a search box type in for your image and then embed that straight into into your message well it's the same that you could have a custom message extension to potentially uh query a line of business system to access some information that you can put into a message and and and increase the the communication um in your operations with your team through those conversations the second type of message extension is what we call Action based so this is taking action on a um on a message um so in the example that we've got there someone just wanting to set a a reminder against a particular um message that they've seen in a channel and I use this quite a lot actually I use the create a task action a lot uh in fact it's part of my my general workflow and and these are things that you can add in your own actions by developing an app that has an action-based uh messenger extension and finally um we've also got meeting extensions as well so this is the ability to enhance your your meetings uh to help them run maybe more productively and that you can actually show content within a shared stage and you know help you help you drive uh your your meetings more efficiently ask questions get responses and so on another thing with meeting extensions that's that's quite interesting is it has different stages so you have a pre-meeting stage you have um a stage where um as the the meat is actually running and a post meeting stage as well so you can access this information at different times and you can show different uh information and surface different data depending on whether you know your before or or after so those are the the kind of the main capabilities that I wanted to uh talk about is what you could actually put into your your team's app but the question is why why build for teams why why build these uh extensions so one reason could simply be to just bring in some common business processes or simplify some business processes using uh the uh the the team's features I mentioned uh with the Bots and you know one way is you could simplify the the process of an employee in your organization being able to to get help whether that's for HR whether that's I.T and having a bot there easily accessible in teams uh you know actually could speed up that uh that that that those processes be able to get information and ask questions get answers much quicker than than maybe without that another reason might be well actually you want to make teams a bit more socially interactive right it's a it's a social platform people are collaborating and communicating all the time maybe you want to add something in there that that is a lot helps you uh kind of enforce your company culture do the right things um you might want to you know put in your own custom praise um application in there however you you you see fit you've got the ability to to maybe improve um how people use uh teams um in your organization and then finally it might be that you've already got an existing app but people are living in teams and you might want to bring that app into teams where they're working and the graphic in front there shows a tab which is you know clearly uh kind of a simple way of bringing any existing app into teams by literally just surfacing uh the the web page in there but actually thinking about how you could use some of the other capabilities like message extensions and to maybe access the the same data that your existing app does but present it in a different way and and show it in a way that it could be used differently to you know again improve communication increase collaboration in in your teams I just wanted to quickly go through the support scenario just to kind of bring this more more to life is why you build in teams and use these capabilities so I mentioned before about you know a customer support scenario so here we've got a solution that actually has a teams Tab and a couple of bots just to help simplify that that support process so first off we've got a teams tab that a you know a customer or employee could use to access tickets that they've opened maybe raise new tickets potentially as as well and through a through a web page interface but that's again surfaced in teams made it easily accessible we've then got a a bot that a support engineer could could use maybe to get reminders of uh of of a critical incidents that have just been raised that need that need attention and reminders for you know tickets that maybe have uh expired gone overdue that that needs some attention as well that that's another use for for that that bot and and as well as having that team's uh tab um for customers to raise tickets while actually providing a bot where they can ask these frequently uh ask questions and get answers without actually having to talk to anyone in in support and again maybe speeds up that process that helps unblock that customer that uh that um that employee to be able to to carry on with their work so we've talked quite a lot about uh Bots and the different capabilities and the different scenarios and and why you'd want to build um apps in teams now we're going to talk about teams toolkit and and teams talker is really uh the uh development tooling to be able to build apps really quickly to get up and running really quickly now team socket um comes in two different flavors the first flavor of that we're going to talk about it today and in this series is going to be Visual Studio code and so teams talk it is a visual studio code extension uh it's in Visual Studio code it supports JavaScript or typescript and it can run on Windows Mac OS and also Linux the second flavor is it's also available in Visual Studio 2022 and so if you're a net developer uh you you know UC sharp and you're on Windows then you can use teams toolkit features in Visual Studio to to build your apps as well however today I'm just going to concentrate on Visual Studio code and and this is what we're going to use as we go through the uh the learn path so just to kind of give you a a an understanding of the prerequisites of yes you you might want to use teams toolkit for visual studio code we've got some prerequisites that we need to cover so first of all you need a Microsoft 365 tenant that 365 tenant needs to be enabled for for um uploading custom apps um as well and I'll cover that uh shortly as we start to look at the tool itself pretty pretty obvious you're going to need Visual Studio code uh it is Visual Studio code extension so that is a given and it also you require node.js to be installed as well and So currently uh the version 16 is supported version 18 uh is is literally coming and that'll be their short labor if you're using version 16 you'll you'll be fine for using uh teams to talk it for visual studio code okay so I'm going to jump into a demo we're going to go through the initial install and setup of your tenant and then we're going to take a look at the sample gallery and show you how you can get a sample app up and running in your tenant really quickly and just show how teams talk it can can really help you there so if I get to the right screen okay here we go so we've got Visual Studio open here and um if we want to install teams toolkit we can just simply come to the extensions Marketplace type in teams toolkit and you can see here that it's already been installed on my machine you just click the install button that will install the the extension it'll be really quick it'll only take a few seconds when that's completed you've got the teams toolkit icon on the left hand side so this opens up the initial pane we've got access to documentation how-to guides and then a couple of buttons to either create a new app from scratch using some some templates or actually we've got a samples gallery that we can see some apps that have already been built that we can basically create our own apps from um that show some of the capabilities that I've actually talked about earlier now we're not going to go create go through the create new app we'll do that later in uh in in future modules but first we're going to look at view samples so if we open up the samples Gallery you can see in here we've got a whole number of different available sample apps and so we've got and we've got tabs um we've got uh some Bots as well we've got meeting apps so there's a whole range in here so definitely go and check that check those out for today I'm just going to show you how we can create an instance of this contact Explorer and now this contact's Explorer it's a tab but it uses it uses the uh the Microsoft graph toolkit to build up a UI and actually talk to Microsoft graph in the background so if I click on this I get the option to create a new project based on this sample or I can actually go and view it on GitHub as well so these are all publicly accessible now I've already done that so I'm going to switch to another window where I've just created click the create button then here we have it so here is what teams toolkit looks like on the left hand side when we've created a new project we've got uh accounts up in the top left hand side we've got some environments and we've got some development features down here deployment and and then links to help and feedback we've also got readme in front of us that tells us a little bit more about this actual sample what it does and some of the the features which it uses as well but to get this kind of up and running first what I need to do is to sign into my Microsoft 365 account I'm going to sign into that prompt which should open up a new window and it's going to be a lottery as to which screen it's going to open up on just going to check yep a browser is opening up in the background it's not over the window it's just running it's slightly slow at the moment which is uh demo gods are what is that okay yep so I'm going to sign in using an account so basically in the background you can't see this but it's just a standard Azure ad login and logging into uh into my tenant using an admin account and there you can see it's popped up there it's it's actually signed in and we can see that this side loading um enabled um has been has got a nice green tick against it now this means that I'm able to side load custom apps so that I can see them and use them uh if this uh doesn't appear and it says that it's disabled what you need to do is you need to go into the admin Center and look in manage apps and if you go into our wide app settings there is a toggle here for custom apps at the tenant level so make sure that is on as well and another place to look is under permission policies um sorry no setup policies going to Global we have here upload custom apps as well so just make sure that that's turned on if you if you have to turn it on then just be aware that it can take a little while for that setting to actually uh become available and to actually persist and so just give it give it a little while and and check back but if you're using a developer tenant then actually that should be done for you and you shouldn't actually have an issue and we definitely recommend using development tenant for your uh for your team's development anyway now that we've signed into Microsoft 365 uh tenant uh what we can do is we can actually run this app locally and so we just click the little uh little debug button there against the local environment and then choose the uh the browser that we want to use and I'm going to use Edge for this so this starts team's toolkit and teams toolkit basically is doing a lot of work in the background it's setting up a lot of things for you it's building up that app manifest file and that I talked about before which describes what the features of the app has when we upload that into Microsoft teams but it's doing a whole host of other things in this sample so this is a tab so there needs to be a web server set up uh it uses SSO so there's an Azure ad registration being created as well and being configured and making sure that that's all set up and and ready and this is kind of where um the the power of teams talk it really really comes into its own when it can handle a lot of these uh complexities oh and there we go we have an error as I was just saying that the demo gods have not gone not gone well there uh let me just try that again I'll just check the uh the the output hopefully there's not a an issue in Azure ID at this moment in time you're just testing your resilience don't worry about it yeah it is it is I wish it tested my resilience earlier today when I went through this okay that one's that one's not happened okay let's just switch back and let's just try a different one let's try this one uh how are we doing for time so we've got a few minutes left yeah eight minutes of top of the hour but I only need maybe a minute or so for the um wrap up so you're good to go okay so this is already installed teams toolkit should already sign me in as well so that's already signed in so let's run this one so this uh yeah now this is running this take a slightly longer because it's going to do an npm install but I'm hoping that's not going to take too long um and uh and that's going to get up and running and that's because we did the shark bit uh uh from uh finding an email I think at this point when it's like what entertaining things can we do and there's an npm install happening right it leaves some type of GIF animation it definitely does yeah maybe maybe I need feedback uh Liberty needs to provide a little video down in the bottom oh and whilst you're whilst you're installing all the packages Let's uh or if we really want to be crew we can run some ads oh well yeah you get like a cinematic countdown for you there Gary oh that is yeah is this 24 [Music] . so whilst that's running um I'll just kind of talk through actually the what you can see here is that um talk it's all it's checked the prerequisites as well so it checked that node was installed uh it checked they're connected to um the Microsoft 365 tenant uh it checked as well that was a a development certificate for for the local host of the web server that that it's set up to uh to run the code and it's also checking the uh the the parts as well um and then just provided this this summary just to you know make sure that that everything is correct and present um so then its first step is well it's a new project it needs to go and and run an npm install because of the the dependencies once it's got past that it then goes um and sets up the the other things that the uh that the the project needs like Azure ad which uh which I'm hoping there we go so right it went straight through there so I'm not sure what was probably wrong with the uh the other uh sample uh it did definitely work earlier um so I'm surprised that it didn't um but we've got a backup and it's uh it's a great backup um so quickly if you saw it but I actually said that it was building the app manifest file and in the background it's uploading that to uh to Microsoft teams so when it loads into teams teams is just going oh I need to find a a tab where's it running oh it's running on the Local Host so it's going to go out to that Local Host address and then pull the uh the the web server content uh into into teams so it's just starting up this development server once it's got past that so the debug session has happened and then a browser window will appear so that's taken a little while to do that npm install but I'm hoping that uh I can get this show and then quickly hand back over to you Fabian there we go there's a there's a window in the background and just sign in of course Authenticator prove that dates that's been approved so at this point um because the app has been already uploaded into teams we've got now the the side loading window where we can add this in and there we go I can click add so this adds adds it into teams just for me um doesn't add it into the organization store so it's not available to anyone else in in this 10 that's a separate feature where you could should be able to see here is a personal Tab and click the button and we can see that it's got a host of graph API permissions that we need to consent to I'm going to accept that and then we have the Hub here I can look at my files I can create to-do tasks and calendar events so that's that's created the app running in my tenant from the sample app um some resources uh that's available for this I'll provide all of the links uh after the session we'll put them in the call notes as as well but just a reminder that the the actual learning path is available we just finished week one we've got four more weeks to go hopefully the demos will go a little bit more smoother than what I did today um but uh next week we're going to talk about building Bots using the toolkit and just remember that toolkit is available so sorry the learn path is available go to AKA dot Ms slash learn teams talk it to take a look at today's module and future modules as well and thank you very much everyone foreign

Channel: Microsoft 365 & Power Platform Community

Views: 6,337

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

Id: tOoEnTqlG60

Length: 26min 55sec (1615 seconds)

Published: Tue Apr 04 2023