Microsoft 365 Community Microsoft Teams, 27 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: What’s new in the Microsoft Teams Toolkit – Fall, 2022

Description

In this 11-minute developer focused demo, John Miller shares updates delivered in the last 3 months in the Teams Toolkit that further simplify Teams app development. Highlights include - new sample app project, simpler APIs for bot and message extension SSO, New project template for Workflow bot, fine-tuned control of Teams Toolkit debussing steps, Add SSO after the fact feature, and more. Also covers what’s next. Toolkit is available in Visual Studio 2022 and VS Code. We always appreciate your feedback!
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 29, 2022.

Demo Presenter
• John Miller (Microsoft) | @jmillerdev

Supporting materials
• Tools - Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx
• Samples - Microsoft Teams Framework (TeamsFx) Sample Gallery | aka.ms/teamsfx-samples

Topic related demos
• Demo - Add Azure AD single sign-on to your Microsoft Teams bots using Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder – 29:43
• Demo - Build your first Workflow bot for Microsoft Teams with Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder – 39:44
• Demo - Build your first Command bot in C# for Microsoft Teams with Teams Toolkit for Visual Studio – Ayça Baş (Microsoft) | @aycabs https://youtu.be/AQgo2MmMzr4
• Demo - Build your first Command bot for Microsoft Teams with Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder https://youtu.be/3skgtkJ1McQ
• Demo - Build your first Notification bot for Microsoft Teams with Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder https://youtu.be/bwyd46tVzQo
• Demo - Build a productivity dashboard by using Teams Toolkit for Visual Studio – Ayça Baş (Microsoft) | @aycabs https://youtu.be/AZMH1tq7wEw
• Demo - Getting started with Teams Toolkit for Visual Studio – Garry Trinder (Microsoft) | @garrytrinder https://youtu.be/7oa0hW5pXt8

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

Ts on we're going to move quickly and I will share with you what's new in team's toolkit. If you've been here for the past several months, uh some of this will be pretty familiar to you. We've had um Gary and Aisha on a lot to demonstrate many of the new features so I wanted to take this time.

B

Just to kind of recap: what's happened over the roughly the past three months with teams toolkit and highlight some of the big things that we've released, but for anyone who's new and maybe doesn't know what the heck I'm talking about. This is what team's toolkit is. It is our Pro code developer tools and also includes an SDK that is focused on simplifying team's app development that includes creating building hosting and Publishing teams apps and there's a couple ways that we're trying to do that right now and that's with a quick start experiences.

B

So we have project templates that really help you jump start how you get started with specific uh teams, apps that you can then transform into whatever business scenario you need to complete, and then we have some tooling features that make building and debugging. So running in teams debugging that code a little simpler and uh we also and also automate some of the configuration. So you can spend less time in the team's developer portal right away and Azure portal and configuring all these different things in app IDs and just kind of jump right into code.

B

So the toolkit helps you do that and then we also have it optional set of features in the toolkit that provides some smart defaults for hosting in Azure using an infrastructure as a code approach. So we basically the all of our templates- have bicep files that come with them to help you get started, and if you want to deploy that to Azure using the toolkit, that's optional. You don't have to use that, but we do provide it.

B

The toolkits available, both vs code and visual studio 2022, so depending on which stack you want to build with. You want to build with JavaScript typescript node visit the vs code toolkit. That's what we focus on there and if you're a net developer, then check it out in Visual, Studio 2022., real quick.

B

If you want to get that for vs code, it's in the marketplace so just go ahead and search it like you would for any other extension, It's, A team's toolkit and then for visual studio, it's in the vs installer, so you'll just click on the asp.net and web development workload. If you don't already have that you'll want to install that, and then you can see here on the right hand, side, there's a little check box that says: Microsoft teams, development tools, that's an optional component, that is the team's toolkit.

B

You check that and then you will have the teams toolkit installed, as a very small download, so should shouldn't take too long. Okay, that's how you get what I'm talking about. So what's new with what I'm talking about first thing, is uh we released a new sample up I? Think back in September, um it was uh Gary. I think has demoed that um so Gary trender also released that and it's in the teams FX samples, repo, which I put an AK link there for you, you can check that out.

B

That's where all of our team's toolkits specific samples are, and it's really just an example of like stock ticker, you know, check, prices and adaptive card shows you some ways to authenticate with an API key to a public, API and and uh just kind of helps, complete out more samples for teams. Toolkit so check that out. If you're interested in samples.

B

We've also been working on improving the team's effects SDK and the things that we see developers doing so there's been several quality of life improvements. This is one of them. We're trying to make it simpler to add single sign-on to Bots and message extensions, so we already have what I feel is and what we hear from you folks is a pretty simple SDK for doing SSO with tabs, so we're trying to do the same thing for bots.

B

So here's an example of what that looks like so we've basically have this teamsfx bot, SSO command Handler, and then we, the the change we did, is we've broken out with these interfaces for the way you configure the authentication scheme, so you can do different types of authentication here here you see we have the OBO, credential and basically three lines of code here and then I cut out some of the parameters. So that way the code would fit on the slide. So you can see it a little nicer.

B

So the important thing here is: you basically have the credential. Then we have some methods to help. You get an authenticated graph client using that, and then you can go ahead and call graph the way you normally would the grout with the graph client and do whatever your Scopes allow you to do so that helps make that a little easier. Hopefully, we also released a new project template, so that's the workflow bot again, if you were here a few weeks ago, we uh Gary showed pretty in depth on how that is.

B

So you can look for that video if you want to see how that works, but basically the template helps you create an application that will trigger some adaptive cards with actions in them. So here you see, there's a button do stuff. When you click do stuff, you get a response and then you can basically change that adaptive card to display differently. So the way we've imagined folks can use this.

B

Is we hear developers building lots of like sequential workflow type apps, where they want to do something like um I, don't know like a q a or they want to do something like a ticket system? Something like that. So this could help you build out whatever you want, but just this helps you get started with that type of flow.

B

A few weeks ago. We also changed uh how we expose debugging. So if you're familiar with vs code task.json, you can do this now, uh with teams toolkit basically expose each step of the like what debugging means with the toolkit- and this is based on feedback. um We got is like uh hey when I press F5, the toolkit, what the heck is happening and how do I customize it, because I don't want to do certain things that it's doing so now.

B

We've exposed all those steps, as uh in a way we felt was familiar and with your feedback, we've changed it to be task.json driven, so you can go ahead and customize each step here, like I. Just put I just put an example here from our documentation. Show you like. If you don't want to run ngrok, then you could comment that out and just makes it a little simpler change your ports, that kind of stuff on the left here the table just shows all the steps, like all the tasks that are possible to customize.

B

So basically, this is like a sequence of all the things that we do when you press F5, and so you can go ahead and customize them in the task.json file. So look for that. uh Well, we're also going to bring the same type of custom in the visual studio extension in a way that's familiar with net developers. Don't quite know how that looks at the moment, but we're working on building that feature.

B

There's also a new feature here for you to be able to add SSO to your projects later. If you decide when you scaffold, you don't want SSO, but then you say: hey I'd like to add it. Do I need to create a whole new project.

B

No, you can use the toolkit command so available, both vs and vs code, there's basically some menu options here to add the scaffolding that we do later and then there's some documentation that popped up to tell you each of the steps you need and I believe Gary walked through that, as well recently, at least in the vs code scenario. I think you walk through that and demonstrated all the steps that are required to add SSO using the toolkit and teamsfx SDK after the fact so trying to make that a little simpler today.

B

So there's some menu options for there um and there's some other stuff here that we changed recently for sbfx developers. We now are scaffold, uh can now do multi-tab teams apps and there's a way to do that via the ad features. Just like you can add feature at SSO. There's another way to do this for spfx projects, which is another way that we can choose to scaffold so our scaffolds in vs code.

B

You can just scaffold with react or spfx, and then we recently bumped teamsfx SDK to 2.0, and that was really to align with uh the teams. Oh I made a typo here supposed to be teams, js2.x, sorry about that, so that way it's compatible with teams.js and that also helps us be able to deploy to office and Outlook and use all the new manifest and everything, and then there's some additional quality of life, improvements on the teams, FX, SDK and a bunch of little stuff that we just get feedback on and in the repo.

B

So you can take a look at the changelog to see all the things there.

B

A big thing to talk uh to, let you know about, is what's next um so that everything I just discussed was things that are already available today. But what's next is we're we're getting. uh You know a lot of feedback on more like make the toolkit more transparent, there's lots of opaque things that it does and we need to customize it, and we totally understand that so we've been um working with uh developers to figure out exactly how to do that, and so we've come up with.

B

uh Basically, we're going to take everything the toolkit does and expose it in a way that can be config driven and so the first iteration of that is available um in in an alpha State on the GitHub repo for the vs code extension there's a there's an alpha release available for this you could you could play with if you wanted to right now we're kind of just testing that internally, um basically, we have something that looks a lot like uh like an Azure, devops, yaml or GitHub actions file, that's very similar kind of uh layout, so we have this yaml file that describes all the different steps of the toolkit.

B

So this is the other things like like earlier. We talked about debugging. This is the life cycle like end-to-end pieces that the toolkit does, which is like provisioning, deploying um registering the app with teams: developer portal, configuring, the Azure ad, manifest and and linking all those things together and like the bot framework registrations. Things like that we're going to expose all of those steps so that they could be customized. I think this is this is cool, because if you want to use um let's say you don't want to use our provisioning with Azure and bicep.

B

You could swap this out to use. Maybe something you'll already do like hey run this Powershell script um and it's like stuff, you already do, or um you know, use some other CLI tool, that's like azd, CLI or terraform, or whatever you want to do. You could put those steps in here and we'll have examples of how you could do some of those popular things that we get feedback on. So this is coming like I said there is enough available.

B

I'll have more information and I think we'll come back and demonstrate that when we're a little further along and then also we have an RC available for vs to do the same type of thing. So we're trying to align both vs code and vs projects to adopt this kind of app model. So you can configure it and I'll come back and demonstrate exactly how that works. So that's what I have to share with you?

B

I, don't have time to jump into any code right now, but there's lots of things you can find on the internet, for teams to development, but and teams. Fx I put this link here. You can just jump into our GitHub repo um from there you'll be able to find everything that you need and that's all I have.

A

Excellent, thank you so much John for sharing today um we'll be sure to invite you back for a future session, so she can dive into a little bit more of the updates or other things that are coming along. So perfect, uh appreciate that so much.