Microsoft 365 Community Community Demos, 4 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Get started building apps for Microsoft Teams using Teams Toolkit for VS Code

Description

In this 27-minute developer focused demo, Garry Trinder opens with an overview of Teams apps (bots, tabs, message extensions and meeting extensions), Teams Toolkit and Toolkit prerequisites (Visual Studio Code, Microsoft 365 tenant and Node.js). Then in VS Code, install and setup Teams Toolkit in the tenant, get a sample tabs app (sourced from Toolkit’s samples gallery) up and running. This is the part 1 in a 5-part series.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 21, 2023.

Demo Presenter
• Garry Trinder (Microsoft) | @garrytrind

Supporting materials
• Learn Path - Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code | aka.ms/learn/teamstoolkit

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

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.

A

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.

A

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.

A

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.

A

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.

A

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

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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?

A

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?

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

I'll just check the uh the the output- hopefully there's not a an issue in Azure ID at this moment in time,.

A

You're just testing your resilience, don't worry about it yeah it is. It is.

A

I wish it tested my resilience earlier today when I went through this.

A

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,.

A

So this is already installed. Teams toolkit should already sign me in as well.

A

So that's already signed in so let's run this one.

A

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.

A

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.

A

Oh well, yeah you get like a cinematic countdown for you. There Gary, oh, that is yeah. Is this 24.

A

A

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.

A

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.

A

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.

A

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.

A

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.

A

There we go, there's a there's, a window in the background and just sign in.

A

Of course, Authenticator prove that.

A

Dates, that's been approved.

A

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.

A

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.

A

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.

A

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.