Microsoft 365 Community Microsoft Teams, 27 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Microsoft Teams Toolkit

Description

In this 17-minute developer/designer focused demo, John Miller delivers a comprehensive walk through of Microsoft’s end-to-end approach to Teams app development that’s embodied in the structure of the Microsoft Teams Toolkit. Overview on core elements of the Teams Toolkit (CLI, VS Code, Visual Studio, SDK). Deep dive into layout and features (samples, scenario-based outcome templates, sandbox, etc.) of the VS Code extension that jump starts a developer’s integrated Teams development journey. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 13, 2022.

Demo Presenter
• John Miller (Microsoft) | @jmillerdev

Supporting materials
• Marketplace – Microsoft Teams Toolkit for Visual Studio Code | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension
• Repo - Microsoft Teams Toolkit | https://github.com/officedev/teamsfx

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

A

B

My name is John I'm, a program manager on the team's toolkit team and I have a couple slides to share with you. Just give you a little bit of an overview of the way that we look at building apps for the team's platform and then I'm just going to jump right in and just give an overview of the team's toolkit and where we're at today and show you some of the features we have in the vs code extension and then I'll tell you a little bit about what we're doing next and I.

B

Think then we'll wrap up with that. So just real, quick I have this slide here with the team's platforms, this little overview and I think it might even be a little outdated now, because there's probably a couple more bullet points we could add on here these days, so I need to update that, but um just want to give an idea of if you're new to the platform or if you're not a lot of this will be familiar to you. But this is kind of what we look at is how you know if I'm getting started.

B

What does it mean to extend teams? What does it mean to build an app for teams? What can I even do, and this is a really common question we get as people are coming into the platform or getting started with building for teams and I, find it helpful to look at something like this and see. You know the categories of how we break it down on the left here with the capabilities the UI constructs and how you can kind of start with an entry point into that space and there's a lot of terminology here.

B

So there's a lot of things to search and learn about and that all can be pretty overwhelming. So the way we're looking at it with with teams toolkit is we're really just trying to ask one question: what are you trying to do in teams? What are you trying to do and we're focused on the outcome of what you're trying to build and then, as you go across that Journey, you start to pick up some of that terminology and figure out like okay, what am I trying to do I want to I want to show.

B

You know my web app inside of teams in this area that I'm familiar with. What's that called, and maybe you learn that that's a tab and that helps you kind of progress through the Journey or hey I, really want to do some type of chat type interface.

B

Maybe that's a bot I've heard that before or something like that, we want to try to like introduce these topics kind of an incremental way and an Outlook of you know the way we think about that is we really want it to be simple to build for teams and office and Outlook, and also use the tools that you know and you love, and so these are kind of the six ways that I've kind of broken it down is I want to make it simple to uh everywhere everything from learning to creating setup, changing it testing it and then, if you need it scaling it, and so that's why we've kind of created the team's toolkit to try and solve these kind of six buckets, and so with the learn part we have samples, we have our own documentation right now we have tutorials that are specifically around the team's toolkit and how it can help you solve specific scenarios that we've focused on it, helps you create projects with templates that are help jump start those scenarios which I'll show you in a minute and then helps you build them.

B

So it sets up. You know a bit of a development environment, for you can help you with things like tunneling, so you can debug these applications since everything's hosted remote when you're working with teams and then also you know, testing, and if you need it, you can also adopt our provisioning and deployment kind of pieces of toolkit, and what that really is is we by default.

B

We give you a kind of our opinion on a good way to get started to scale this with Azure, and then you can also use the toolkit to publish directly to team. So if you want to take this your project and put it in your tenant, then you also have kind of a one-click way to do that as well.

B

More practically another way to think about the toolkit is: what does it include like what am I actually looking at here and I? Think one way that helps me is to think about it like this, like what are the practical things I'm going to be using, and so we have these four things.

B

The toolkit provides a CLI tool and the vs code and vs extensions build on top of the CLI to give you a little bit more of UI and ux and the tools that you might be familiar with, and then we also have an SDK that provides some abstractions and some simplifications for things like single sign-on for things like creating certain types of bots that help you achieve a certain scenario which I'll show you in a minute, and these are kind of the four things that the toolkit provides right now.

B

So I'm just gonna stop sharing this and jump over to vs code. So hopefully you can see that and I'm going to start with. Just how do you even get team's toolkit if you're working in vs code and that's what I'm going to show today today I'm going to just take a a tour of the vs code extension uh you just go to the Marketplace search it like I, did here and install it. So it's just like any other vs code extension once you install it.

B

You'll get a tab over here on the left hand, side, and this is your kind of view UI- for how to enter the toolkit and get started.

B

um You have a couple different options here and the one I'm going to show you here is: we can basically have an entry point to create a new app and we can choose to either start from some templates or we can start from some samples.

B

The sample basically gives you a gallery of a little more complete apps that you might want to start from and we'll probably dive into that in a future time and I'll have that much time to go into all the samples, but something to take a look at, but for now I'm going to just highlight the templates that we provide that help jump, start you and talk about kind of the scenario thing.

B

So we call these scenario based teams apps here it's called think about it like these are templates that are focused on an outcome and, for example, we've named these like notification, bot and really what this does is. If you are trying to bring existing data or events into teams into a team's chat like a notification, which is a common scenario that we hear a lot of the to start with, then this would be a good template to start with.

B

So I can basically get everything set up to have a bot that will send a chat message and wherever I really want. I can kind of configure that and notify. My team that something's going on our team has used this exact template to build a notification bot for showing the issues and work items from Azure devops that are assigned to us each day. So what we've basically done is we've selected notification bot. We give you three options on how you want to trigger that notification.

B

You can use an HTTP trigger either with a restify server or an Azure function, or you can use a timer. So what we did is we chose a timer and we basically have this running in Azure every day and every one of the team kind of gets a ping from this spot. It says like hey these. These work items are assigned to you and we we might even filter down like hey. This is a couple days old.

B

You know, don't forget about it, that kind of stuff, so that's kind of how we've we've played with that. So once you pick how you want to do this, you can choose what programming language you want to do and where you want to put it, that's fine and I'll, just name it something.

B

Started and then vs code will just scaffold out the project for us: I'll just keep it in the same window, so once this loads, then we have a pretty simple project here, but what I think is interesting to highlight is just maybe a little bit about what we scaffold and what the layout of this is in our documentation. Kind of goes into this little more detail, but by default the toolkit has this FX folder.

B

This is where we store a lot of the configuration data for these kind of, like all the M365 specific things and also your manifest values. So if we take a look in the templates, folder and the app package we see one thing the toolkit does is the the Manifest for your app, so maybe you're familiar with this or not, but all the all teams apps have this Json file, which is called the app manifest.

B

They kind of really defines what your app is and where the endpoints are for the different extensibility points that you're kind of plugging into and teams toolkit takes a kind of a template approach to this you can see. There's things like some mustache brackets here and we templatize this app manifest for you and that's you know controlled by these configs and the reason we do that and we'll get into in a second is because you can have different environments for this.

B

It's the terminology we use for saying, like Okay, when I'm running locally, it's one value when I'm running in my uh test environments, another value I'm running in production, it's a different value and that's kind of the way we handle that with the toolkit.

B

We jump back over to the team's toolkit. Tab, just walk you through some of the features on what the toolkit helps you do when they close these things, just to remove some noise. The first thing we have here at the top is the accounts area. So this is where you can sign in with your M365 account and optionally.

B

If you choose to use uh the provisioning and deployment things you can sign in with an Azure subscription and choose your subscription here and then that will allow you to provision and deploy things in the cloud, but by default you, the the only thing you really need to do is sign in with M365 identity, and that's where do you want to run this app?

B

That's what this is for, so what the toolkit will do is once you sign in with this, and then you hit F5 to start debugging, we'll, go and automatically register this app in teams developer portal for that tenant and get everything set up. So that way, you can have a pretty seamless, debugging experience without having to jump between different portals and configure everything and and paste in IDs and all that kind of stuff.

B

So you just sign in with your credentials, for where you want this to be, and I've signed in with my M365 developer account so that way, I have kind of a Sandbox tenant to play around in and the the next thing we have is the environments thing. You don't have to use these features, but it is nice if you're able to so if I have, because I'm using developer accounts, I have permissions to do whatever I want for these subscriptions. So the local and Dev are the two things we give you by default.

B

Local is what you would expect I think in that we run as much locally as possible like if it's, uh if you're trying to create some type of web app, then we will run the web server locally for you, just as you would expect, and for the bot piece. You know there's still some remote configurations that are done um in bot framework and teams developer portal- things like that. So that's not local. Those things have to be remote, but any piece that we can run locally.

B

We will and that's to make it easy for you to develop and debug and test things and iterate and then, as you want, you can create. You find you can name these environments whatever you want just hit the plus and type in a new environment. You might want like something like test or stage and you can configure which Azure account that goes to you can add users to it.

B

If you need to so that way, they can also run and debug inside that environment if they have permissions Etc down here in the development section, just some helpful kind of quick buttons here for how to do things, you can start another teams app if you need to. But what I think is interesting to highlight. Is this ad features piece so I've already created an App here and I chose a notification bot that template, but, let's say now, I'm ready to add a UI experience.

B

um So what I can do is I can hit, add features and we get a list here of some things. I can do you can see here. I can add some some of the other templates that I didn't choose before so I can add a SSL enable tab or just a regular tab without all the SSO features. Hooked up. I can also connect. Some data resources here, like I, can add a SQL database to this and key vaults, and the toolkit will help scaffold out the required files and connect all the dots for you.

B

So it's a little easier to set up. We also have ways if you want to add an API connection. We have kind of abstractions around that to help you connect to an external API and basically create some objects. That will let you interact with that API. So we kind of scaffold that out for you and a way to easily create GitHub actions in Azure devops workflows for your project. So that way you can plug this into cicd a little easier.

B

Like I said, the Manifest file is provided in a templated way. So we have this feature here to make it a little simpler to find that file and open it, and then you can also click preview up here and choose which environment do I want to preview. This for now, I haven't run this yet so these there's, these values don't exist, so I I can't actually preview. It I have to run this first. So that way the values exist.

B

But let me jump over to another project where I've already hit F5 and the reason I'm skipping over here is because npm install takes too many minutes to demo live. So if I go to edit manifest file and I choose preview and I choose local, then it's going to open up my local configure.

B

You see these values have been replaced now, so I can see what my actual manifest file is, and it's it's available on disk as well just a quick way for you to be able to kind of jump back and forth between these environments.

B

If you do use them, we also plug in with some previewing adaptive cards so for the notification bot that I did go back up here and if I look in my bot Source, we give you an Adaptive card by default and to make that a little nicer to edit and display you know you can go here and you can see kind of a preview of that using the Adaptive card extension. So it makes designing your notification like what's going to be posted in a channel a little easier, so you can design this.

B

You can manipulate the data here on the on the left if you want to plug in for these variables.

B

So that's uh just a nice little development feature and then the last section of the toolkit that we have is the deployment section. This is an optional thing you can adopt. You can use a toolkit without having to use Azure, but if you, if you are using Azure, um it can be nice to be able to provision these things for different environments. So we have kind of one-click ways to provision all these resources that would be needed and the way that that is configured is when you scaffold.

B

We give you some. uh Let's see in here, there's some different options you can see here we give you these bicep files, so we have an opinionated hosting solution for each template. So for like the bot, we put that in an app service for any web UI front end piece like a tab or something like that you can choose but I think by default. We give you an app service, so you can also Choose Or Bots for like Azure function, stuff like that, and so we create the bicep files to handle all that.

B

And then, when you use the provisioning features, that's that's kind of what controls that so you could go and edit or reauthor those bicep files, if you wanted to or put them in a CI CD pipeline of some kind and use this. The teams fxc CLI tool to do that. But we give you a way to provision them and then deploy them as well. So the provision will create the resources and deploy is about getting your actual code to those resources.

B

If you don't want to do that, that's fine. We also have another feature where you can just zip your team's app package, and that just gives you the local bundle, which is zip file with your app manifest for whichever environment that you that you want and then you could upload it to teams developer portal or some whatever other way that maybe you're familiar with or that you're you find in documentation and maybe that's simpler for you and then we also have a way for you to publish directly to your organization from the toolkit.

B

So if you are working, maybe you're working, a small team, it just makes sense to do all this right from vs code. Then you have kind of a end-to-end way to do this. Pretty easy and I forgot about the I guess this is actually the last section is the help and feedback area. So we have a link to a documentation and tutorials, and you can also report issues on GitHub.

B

So let me jump back over and I. Think I have just one more slide to share um so just to get started. uh The team's effects project is what we call the whole thing, because uh teams FX includes the team's toolkit, which is our extensions. Our CLI SDK also our documentation samples, so we're open source on GitHub. So you can start there and we have.

B

The wiki has a lot of the documentation or links to the Microsoft docs, where we have a lot of content as well as the samples has where to get started with download and install, and you can also submit issues. There start a discussion. If you have problem or you have questions um you know happy to help so that'd be a great place to get started. I think that's what I got for you today. So thanks for listening.

A

Hey excellent John, thank you, John really really cool stuff and it is such a beautifully done. Extension for Visa Studio code, so awesome job on that uh really really great stuff.