Build Microsoft Teams tab app using Teams Toolkit for Visual Studio Code

[Music] foreign today I'm going to be talking through how to build a Microsoft teams Tab app using teams toolkit for visual studio code my name is Gary trinder I'm A Cloud developer Advocate at Microsoft uh this uh session today is part of a five-week series and this is covering the build and deploy apps for Microsoft teams using teams talking Visual Studio code Microsoft learnpath and so this covered at five weeks we have already covered how to get started on week one so that was installing and teams talk it and creating a sample app uh week two I covered how to build a a bot a notification bot and this week um I'm going to be covering tabs uh next week well actually not next week um I'm gonna skip a week but the next um session is going to be covering uh team's JavaScript library and how you can integrate that into your application so bring some of the Native features uh for of teams into your apps and then finally in week five we're going to go through how to deploy and publish your app um to uh to teams and to and to azure and and you've got everything available to you at the moment so the learn path is live so if you want to check that out go to aka.ms slash learn slash teams talk it and you'll find all the information on the modules that we've already covered and actually the modules that we're going to cover uh if you're interested in you you want to you want to jump ahead so I just want to quickly recap if this is the first um session that you've seen and I'm talking about teams talk it you're thinking what is it so teams talk it is uh extension for visual studio code it enables you to build and debug and publish teams apps uh much faster than you would be building everything yourself so if you're using the visual studio code version uh you're going to be using JavaScript or typescripts and that can be used on Windows Mac OS and Linux as well but also to just make you aware there is also a team's toolkit baked into Visual Studio 2022 so if you're a net developer using c-sharp and or just on Windows and you can build teams apps using using the toolkit in in visual studio and for today and this series we'll just concentrate on Visual Studio code um so yeah if you're interested in Visual Studio let us know as well if there's anything that you'd like us as to cover let us know as well and we'll get up to speed on that so a few uh prerequisites just to uh just to call out as I'm going through this so uh to build your tab app you're going to need a Microsoft 365 developer tenant with custom apps enabled you're obviously going to need Visual Studio code uh because uh teams talk it um is a visual studio code extension and uh it's also built on uh it uses the the node.js runtime as well so you're going to need at least node.js uh version 14 um installed uh on your on your machine okay so let's get into building tabs what what is a tab well a tab is really like a teams aware web page that you can embed in Microsoft teams you can add them uh into your channels uh inside a team you can add them in group chats or you can also have them as a as a personal app as well so open that up from from the left hand rail so you've got a focused um area where you where you want to be able to to surface your your app you can also use them in meetings so you can Surface a tab in the the pre-meeting stage before the meetings actually started during the meeting as well through the through the meeting stage and also post meeting as well um so when you're you're viewing a uh a meeting that's already happened and you want to show information about that that meeting in your tab and you can also surface it there as well now Taps can be just static or they can actually have some configuration as well so you can build configuration pages so that when people in your organization start using your your app that contains a tab they can configure it to their their individual needs and so you can you can build tailored experiences rather than uh just you know a a single page that just uh shows a uh a particular um a static set of of content and and tabs can also provide a single sign-on support as well so users don't have to manage multiple accounts you can use your Azure ID account uh to uh to to authenticate and make requests as as well through that app and now the tabs are a really good way of surfacing existing apps as well so um you know if you've got an existing web app that people already use in your organization you think actually yeah we want to bring that into teams because because that's uh where where our employees are working yeah you can do that with with a tab now you might not want to bring the whole app in you might want to bring um certain areas of your app um into uh into teams but using the tab is a is a great way of uh of being able to uh to do that now the last few weeks we've been kind of talking through a a support scenario and um you know suppose in this scenario you've got support Engineers um that want to be able to view and update statuses of tickets manage assignees and do that all through uh through through teams a tab could be used to surface that information in the place where they're working um it might be that you want to surface knowledge Base information within teams as well in a tab and using a tab in this scenario can actually help so the support Engineers don't have to go to to different systems all the time they can you know look at a tab or a tab in a Channel or tabbing a personal uh app and access that quickly through through teams and to you know really help that overall support process and and and improve the uh the the communication within your within your teams this team's toolkit coming to all of this well teams talk it really helps you to build these tab experiences through a series of project templates which which I'll I'll show you and it's worth noting that all of these templates are actually using the create react app Library so as you can imagine all of the uh the the tabs you use react so if you're a react developer and then then this will be good news for you and so this is set up right from um from from the get-go you don't have to configure anything and you get the the features that you that you'd get from you know using Create react app to to build any other web application but you get it in in teams so let's quickly take a look through uh the the code which is um created for you when you create a a new project using uh teams toolkit Visual Studio code so here is our main app file um so this is like the top level uh component in our in our app um we get a a used tint hook this is provided by the teams FX library that is provided with with the template and this gives us easy access to things like themes so what is the current theme being used in the user interface the Dark theme or light theme and we can pass that into a provider um which shares this globally within our application that components that are in this app can use they can change their um change the the user interface on the Fly should should an end user want to to change their theme so everything uh updates and the use teams hook actually provide you with lots of information as well it provides you with with teams context as well and you know whether this app is actually running in teams on a nice little utility there if you're you know maybe again surfacing your um your existing web applications outside themes and in teams as well so it's a very useful uh useful hook uh provides lots of information for you the next thing I want to talk about is the the router so the router is provided um for you to uh to provide client-side routing for your for your application so we can see that there are four routes that are provided um for you so the privacy in terms of use these are pages that are needed to be added into the uh into the app manifest that's created for a free uh for an app so if you're building the uh building a tab you can you can use this this setup to uh to to basically create your your privacy pages and your terms of use Pages there's also a a config component um as well which is another type of tablet that's the configurable tab and but I'm just going to focus on the the tab component at the moment and so this basically means that if you know the browser goes to our um our web server address with Slash tab at the end it's going to load a react component called Tab and that essentially becomes our our Tab and our our page um that's uh that's going to be going to be loaded and additionally uh what it gives us as well if for whatever reason um yeah someone hits the the root address of our web server it's going to automatically redirect them to uh to our tab um as well so again this is all coming from the uh the the react setup it basically means that we don't have to handle all of this we could just go straight into the uh the tab component and actually start building out uh our our interface for our for our album you know add any components that we want to so let's take a look at that now and and this is the out of the box example really simple uh the tab is just a a simple function that returns a um a welcome component and that welcome component again can provide whatever user interface that that we need but this as you're building out your your tablet this is where you're going to start this is where you're going to start adding in uh your uh your your own uh features and and user interface so it's really uh lightweight um in in its setup so with that let's actually go to uh to the demo and let's go to visual studio code there we go so I've got Visual Studio code here again if this is the first time you've seen uh uh teams toolkit demo and the uh the the way that you actually install teams talk it is you can go to the uh the extensions Marketplace in Visual Studio code and just search for teams toolkit I already have this installed um just open up the page and you'll be able to see the install button um as well in there when you've installed uh teams talk it you'll find that you'll have a little teams icon on the uh on this sidebar on the left hand side click that and you get a number of options now we want to create a new app so we can click on the create new app and go through the uh the the project uh creation wizard so yes I want to create a new app and here are the different templates that we have uh available to us so we've got a number of tab options actually um for us um we've got I'm going to start with our basic kind of hello world tab um we've also got spfx tabs as well so if you're using SharePoint framework you can use teams toolkit as well to uh to build your your tabs you've got an SSO enable tab as well so that's a tab that comes already pre-configured with with SSO and a new um a template called dashboard tap as well which sets up as you can imagine a a a dashboard uh like a tab that's got a user interface already there set up and that you can that you can go and uh and amend for now I'm just going to use the uh the basic tab template and go choice of language so JavaScript or typescript let's choose JavaScript a place where I want to to save this and then type in your application name hit enter that will scaffold the the application for you and it will open up um and then you'll be able to run it now I'm not going to go through that step now because I've already done that so I'm going to skip to uh and a already created project so this is all default I've not changed anything what I have done is it is running at the moment so hence why you can see the uh the the terminal down here um with the the local um address is already showing um so this is um what you what you get by default so we've got the the readme that's going to provide lots of information as to um you know how to delete book how to edit and manifest and eventually you know deploy this to to Azure if you uh if you want and also add in extra features so this is just a basic tab it doesn't have single sign-on um but the information uh how you can do that is is also uh also provided if we look at the project structure so we have all of our all of our code for our tab in the in the tabs folder if we go into the source folder we can see that we've got um some react jsx files in here and if I open the components folder let's go to the app jsx file so this is the the app file that I that I showed you this is the very top level of our app with the router and the uh and The Roots and the uh the link in references to the the individual tabs um so if I go into the tab component we can see that that is yeah it's very basic let's just have a look at the the welcome Tab and we can see that yeah we've got lots more um kind of code in here um that is basically building up a a user interface and that looks like this which is already ready um so I've already run uh teams talk it and and loaded this into uh into my developer tenant and so to save time on the npm installs that uh that take take a while and this is already running and side loaded and I'll just quickly go back and show you how I did that I went to teams talk it on the left hand side and I clicked this button here to debug and then chose my uh the the browser which which I wanted to use for for my debug session which is either going to be Edge or it's going to be going to be Chrome so if I just go back to the um the tab so we see it's running if I just refresh we should see that it will reload so we know that that's actually coming from a from the live web server and we've just got some user interface uh components on here we've got a a tab uh uh control that's on here that's just showing different information so let's uh just put this side by side with the actual code so we can see here that the uh the the actual image is all coming from from this uh welcome component now what's really nice in here is that it's actually got a hot reload as well so if I come in and make a change and hit save you see that the uh the the code is is being compiled and the change happens immediately so it's a nice setup already from not having to make any changes I've just created a project I've run F5 side loaded that into my uh into my project let teams talk it do all the setup that it that it actually uh it needs and so I don't have to do it I'm then able to make changes to the code and have that reflected in the in the running app as well now just cover the user interface um components that I talked about so by default it uses the react North Star library and so we can see that it's pulled in like a menu component that that can be used to to create this interface and with that the slides and yeah so uh I think you've seen how kind of really quick and easy it is to to create a new teams app that that contains a a tab and if you want to learn more then definitely check out the teams toolkit documentation uh where you know there's documentation there as well as the learn path of how to create a new teams project and lots of information on building tabs for teams as well in in the docs and this goes into how to design them what user interface to use things to do things to don't or avoid um as well as documentation for adding single sign-on to your team's apps as well should you should you want to yeah then once make requests to the graph API and pull information into your app as well and to to help your users go through that process of consenting to your app and and authenticating as well um that's all I was going to speak about today I know we've finished a little bit early um but yeah uh want to quickly finish with um this series uh build and deploy apps for Microsoft teams using teams talking Visual Studio code is on Microsoft learn it is a learn path and we covered building tabs today uh just a reminder not next week week after which will be the 21st of March we'll be covering teams JavaScript library before then going on to deploying and Publishing your app but so yeah if this trusts you and you want to learn more about the previous weeks as well and modules uh check out the learnpathak.ms slash learn teams talk it and the previous recordings as well that will also be on the community YouTube channel um and with that Vasa back to you excellent thank you Gary really really cool uh demo and the simplification and how easy it is to do those things it's it's really great it's certainly heading to the right direction gets simplified yeah released by really so to say and just to remind remind everybody there's the V5 preview release of the teams toolkit also available so if you have time and availability I know that they would love to get your feedback around what works in team toolkit and what does not work in dim's toolkit [Music]

Channel: Microsoft 365 & Power Platform Community

Views: 5,473

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

Id: V-LKTFCI_JI

Length: 20min 50sec (1250 seconds)

Published: Thu Mar 30 2023