Microsoft 365 Community Platform, 21 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 Platform Community Call – 21st of February, 2023

Description

Microsoft 365 platform community call delivered on February 21st. Two demos in this call: Integrate Azure Communication Services Calling into a React App and Teams Toolkit Learn Path – Get started building apps for Microsoft Teams using Teams Toolkit for Visual Studio Code.

Activities: 6 new articles from different Microsoft blog posts.

Events: Sharing Is Caring - Maturity Model Practitioners and Power Platform Samples Contributor training. See upcoming events WW around Microsoft 365 and Power Platform from https://communitydays.org.

See the blog post for this call for announcement, news and event details. The host of this call was Fabian Williams (Microsoft) | @fabianwilliams. Q&A takes place in chat throughout the call.

Agenda
00:00 – Intro
10:03 – Latest updates and news on the Microsoft 365 platform – Fabian Williams (Microsoft) | @fabianwilliams
11:39 – Together mode picture
14:04 – Demo – Integrate Azure Communication Services Calling into a React App – Dan Wahlin (Microsoft) | @DanWahlin
31:04 – Demo – Teams Toolkit Learn Path – Get started building apps for Microsoft Teams using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder
59:18 – Closing

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/blog
• Microsoft 365 & Power Platform Sample Gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms//community/home
• Join also to our LinkedIn group for discussions - http://aka.ms//community/li
• Download invite for this weekly Microsoft 365 Platform community call: https://aka.ms/m365-dev-call

A

B

Welcome everyone um today is February the 21st 2023 and uh we are promptly here at uh 11, A.M, Eastern, 18, Pacific and 4 P.M I know it says GTM but I'm thinking. That means Greenwich, Mean Time, not team. You know whatever um we're on the Microsoft 365 and Power Platform Community call thank you for everyone for joining today and uh let me get that away.

C

From there and.

B

What my question not to give me that you know um today's agenda um is uh we're gonna, provide I'm, going to be really brief and thorough on this and so I'm going to give you uh the latest updates on the news on the Microsoft graph 365 platform latest news on the Microsoft 365 blogs. Vesa is going to do the um the group Time picture in together mode and then we're gonna have the stars of the show who's done.

B

Walin um who's going to be talking about integrates in Azure um communication, Services ACS um calling into a react app, and then we have Gary trinder who's going to be talking about the teams, toolkit learn path and that's all about getting started. Building apps of Microsoft teams using the teams toolkit for visual studio code, all the great stuff there. Thank you pardon me I'm, coming off a little bit of a success, so um one of the things that we, you know we love and we we encourage people to do.

B

Is you know this is all about learning all about community, and um you know if you're, a visual learner like myself, um you know we have plenty of resources for you. If you're a person like to see things listed out in front of you, we have that as well, and we have the videos at um ak.ms, Community, slash videos, and um we also have a LinkedIn discussion um Forum as well, where we have at ak.ms Community, slash Li.

B

um We know this is all about community, so very open source. um We have a lot of materials on GitHub. um You know whether it's PNP office, Dev, sharepoints or well I mean my favorite Microsoft graph. We have tons of things in the sample Gallery as a way to get um started in case you, you know. Sometimes people feel a little bit intimidated by Mt IDE.

B

um We have a great way of getting you started by providing new samples, whether it's on teams, SharePoint framework, Power, Platform um and so on and so forth. If these these are too many, um you know things to. Remember, don't worry about it. We've got you covered just go to AK dot, Ms, um Community I, believe it's slash Community, but we have slash home here as well too. So I want more to just direct you there, um as you're here today um on a Tuesday, um we're doing a call.

B

However, we have calls that are done. We claim what causes are done, monthly, we're causing it on bi-weekly. um You know you can find those here on the links before again.

B

If these links are to remember um just go to AK dot, Ms, slash, Community calls agendas for these calls are published on social media and also at ak.ms Community, slash Meetup, so you can find out what's going to be there ahead of time plan your day plan your week ahead of time, so you can get the content that is relevant for you, as this is all about community, and you know in in a call like this is typically Microsoft presenters, whether it's the PMS, um you know or or the engineers coming on, to speak to you.

B

However, we all grow through the community and as as a matter of fact, um a great way to get started in the community is by presenting whether it's to your local group or in a forum like this. So we encourage you to request to present at the ak.ms link that you see there slash Community, slash, request, slash demo, and you know let us know you know. You know we have a great idea in terms of what we think our scenarios are.

B

However, we you know it is not uncommon for people to take our you know the product and go left, go right and twist and turn and make it into something else. That totally adds value and we- and we would love to see that we take that back to our leadership. I know I, do and write great customer stories about it. So um you know, please request the demo. Let us see what you're building out there in the field in the wild.

B

Now you may say: okay, I'd love, to do that. How do I do that? So um you know we want to make sure that you have the infrastructure in order to do that.

B

So um as long as you maintain and build in a developer environment, we provide you a free, E5 tenant for you to do that at ak.ms, M365, slash Dev program and again you know if there's an intimidation Factor around having a blank IDE or you don't know where to start AK dot, Ms, slash, M365, slash, Dev, slash, learn, has tons of um sample data that are free, 73, learn modules available for you right there for you to go in. Are you raising your hand? Tom um Todd? You say something to me: okay, all right yeah.

B

um So um we do have. Let's say that you know you're on your your what Your Daily walks. You know we encourage total uh sense of Wellness here and um you want to hear something. You don't want to hear the birds chirping and you don't want to hear the car zooming by. We have three podcasts here for you. We have the M365 Dev podcast and in the latest episode you can listen to Jeremy. Think and I Shabazz talk um to Louis bodon aler.

B

Hopefully let me say that correctly um about sugar and their latest governance um SAS offerings. um You can also hear um on the PNP weekly podcast, hosted by waldeck and vesa episode. 198. um um They spoke with uh Mustafa tourman um from devil team and Cloud. um It's a great um episode, I think was only published around six or seven hours ago.

B

um I I would listen to a little bit of it this morning and also the debut of the um the episode one of the Power Platform connection and basically they're um Hugo Bernier and David Warner um spoke with MVP Asher McFarlane, and that was a great episode. I did listen to it that this morning in the school episode entirety um again, um you know we I think. In the last episode we had um David mentioning that we're so close to um 1500 samples.

B

This week, I I checked we're up by 10 we're at 14.95 samples, and this is a testament to the community and the work that you guys are doing. So. Thank you very much for that. At ak.ms Community samples, you can get access to all of these 1495 samples across various different product lines, again a great way to start a great way for you to you know build on top of the successes of others that are already there and um with that I'm, going to turn this over to David I'm, going to talk about our share.

B

This Karen initiative.

A

Awesome, thank you. Thank you. Fabian yeah, and so we are five away from 1500 everybody. How are you gonna? Get there we're gonna help you get there. It's you that provide those samples to us, and we want to empower you to do that. Sharing is caring is a program that does just that. What does it do? It provides Hands-On guidance, and that means that we get together live in teams meetings showing you and working together on how to accomplish things like submitting a pull request, understanding. What a pull request is.

A

Would you like to take that pull request and those samples you submit show them off on a call we're going to help you there too? These are safe. Space calls do not record, they are not saved in any way shape or form. So it's a safe space to ask any and all questions don't hesitate to sign up. We've got more coming up this month and next month. In fact, we've got one later this week for Power Platform samples contributor check it out at ak.ms. Sharing is caring, Fabian back to you.

B

Thank you, David and just you know, dovet killing off, um sharing this Karen and where to start um we're going to briefly go through a couple events that we have going on, um one that actually I'll be on on the 15th along with two MVPs one.

B

uh You know I like to consider myself well, I'm, not anymore, but I was a legacy MVP, meaning that I was back there from the very beginning with you know, from when Todd Clint started off as well, maybe two years after talking, and um we also have a new MVP that actually started. um You know what just got minted or anointed or whatever you want to call it in this February, so I'll be there on the last day. So join me on that.

B

However, this is from um waldik and Archer on the Microsoft microsoftgrafn.net and it's all about I'm, a hackathon where you can kick start your learning um by building apps and Microsoft graph, based on common scenarios and with a chance to win exciting prizes um and meet with Microsoft graph product leaders, Cloud, Advocates and MVPs, and student ambassadors, so hope to see you there, starting March 1 through March 15th.

B

Next, um you know if it's May the force be with you. It is a time for the Microsoft 365 conference uh made of second through fourth at MGM Grand in Las Vegas, here from the various teams of Viva teams, SharePoint and the Power Platform, and get to see Jeff T per keynote as well, and if you use user so happen to be in tildorf um Germany around the 24th to the 26th of May 2023. You can see vessel and or myself or both um depends on how you just want to spend your day.

B

um You know, along with beer parts of the 2500 attendees, the sponsors, Microsoft speakers, MVPs and RDS at the European collaboration, Summit 2023 again in Dusseldorf Germany and if you're a stay side and you um throughout the course of the year, um whether it's in DC in June Seattle in August and Chicago in October, um the 365 um educon conference is there if you're in a DC area. Please let me know Todd, please let me know because I live here in the DC Metro area, I'm happy to I'm.

B

You know to to come and be with you and share a pint or two.

B

um If you're in Dublin between the 20th and 22nd of June 2023rd, there is the European Power Platform conference, um it's a great conference um and the Power Platform is, you know everywhere today a great way for you, your end users and for your business analysts and folks to really get their hands dirty and hands.

B

um You know into um buildings great Solutions with um you know, local no code, and if you look at ak.ms, um slash Community Days, um you can get a full detail of all of these local community events that are here um too much to name. But if you go to that URL at the very top, um it is available for you. So real quickly.

B

I'm going to talk a little bit about some of the um the news updates before we kick it to um the teams um in the um M365 Dev blog, um we have um waldek and aicha. um You know again. This is around there's some yeah. Sorry, it's not the summit, the March 1 through 15 hackathon.

B

um We have I'm from Sanjay at ignite 2022. They announced the preview of the teams app um on Android app. Now it's G8. So if you're an Android User go ahead and grab it um from uh David, we should. We have um CRM and AI context, so basically communicate more effectively with AI generated emails and um streamline customer.

B

You know Discovery by understanding stuff with those people live card um further down in terms of the SP blog, we have Bill bear I'm talking about um the release of the SharePoint workflow manager for the SharePoint server, and we also have Paul Diamond talking about using playlists to create uh videos or audios.

B

um You know in M365 and finally, we have Kathy Dew and our part two of building beautiful sites with purpose. So all of these here are available for you to go ahead and get some. You get your learning on I'm, going to kick it over to Rajiv I. Believe who's going to be talking about our team's platform updates. Was she thanks.

C

Hello, everyone, so we have two updates to cover. So first we have released talks on growth of your apps. uh The document provides the guidelines about how should you strategize and execute growth for your app? What decisions you need to make? What levels you can pull? What programs and the resources and the guidance you can utilize? It also includes some proven best practices from team that crafted the team's platform and the commercial Marketplace itself to make your app successful.

C

Please take a look and second support: apps for anonymous user, so Anonymous users don't have Azure active directory identity and aren't Federated with the tenant. The anonymous user participants are like external users, but their identity isn't shown in the meeting. You can build Bots, messing Extinction cards and a task model in your app to engage with Anonymous meeting participant for anonymous users to interact with the app and teams meeting, ensure you update your manifest version 1.116 and set the support, Anonymous guest user property in manifest to true.

C

You also need to enable the anonymous user app fraction in the team's admin Center. So, by default it's enabled, but there's a control to disable that as well in tabs, you can use the JavaScript SDK to check the user.licensed type to understand whether the current user is anonymous or not, and for Bots you can use the team member use a role property to do the same. We have also updated the sample to show Anonymous user support which I published at AKA dot Ms slash team sample stepper.

C

So this is what we had for today like if you have any feedback or situation, please post it on AKA, dot, Ms, slash teams, platform feedback, the link is available in footer and also you could configure to RSS feed to get the regular platform dates. Thank you back to you. Thank.

B

You thank you for those updates, so at this point in time is when we uh do our optional picture time and I'm going to basically kick that over to vesa I'm going to stop presenting here. Oh you already kick me out, didn't.

D

D

Let's see this is so hard with the one screen.

C

D

Cool now this is looking good. Let's wait for a while: let's wait a while, but wait a while this is productivity is really it's really really significant unless, when you're not with four screens or three screen, oh I can see you guys talking upstairs and on the for a pro, let's wait for a few more seconds and do some hand waving I'm, already recording. We still have a few seats in the room, a few more a few more I guess, that's maxing out. Let's do some hand fighting everybody!

D

Thank you for joining once again awesome to have you on the call and we'll craft a gift animation out of this uh thanks everybody for joining excellent, brilliant stuff, excellent.

B

Thank you very much um so right now we're going to jump into the real stars of the show, we're going to first start off with Don Williams who's going to be talking about integrated Azure communication, Services ACS into the react apps Dan over to you. So.

E

It's good to be back with you for those that were here last two weeks.

E

This is actually the third week in a row that bass hasn't kicked me out yet this maybe this will be the final one but uh I'm here to talk with you again about integrated Services across the Microsoft cloud and specifically how we can enhance user collaboration and what we've been doing is uh building up a series that we basically take 15 minutes and talk about specific topics and then uh today we're going to focus more on the front end side, so we'll get to that in just a moment.

E

So for those that don't know me, my name is Dan walline, I'm, A, Cloud Advocate at Microsoft, and what I'm going to be showing you I've, also been working with my colleague, aicha Bosch aicha will actually be joining us next week to talk about the kind of next 15-minute chunk of what we're going to cover here.

E

So what we've done is uh two weeks ago I guess we introduced audio video calling and how that could be used to call into a teams uh meeting actually and then last week I showed how we could set up an ACS resource some of the things you can do there, such as getting a token and user identity.

E

If you weren't here, don't worry I'm going to review that again today, but today is finally, let's see some code Dan, because the last two sessions were all about showing the demo talking about the Technologies involved and those type of things, but today we're actually going to jump into the front end now I'm going to be covering react, but the technology we're going to be using with ACS Azure communication. Services is actually web components, so it runs anywhere. The web runs uh now next week.

E

Aisha is going to be joining us to talk about how we can dynamically create the teams meeting side of this, and so she'll be talking about Azure functions uh with Microsoft graph, and then she'll also be talking about how we can use Azure functions to dynamically.

E

Do some of the things I'm going to show you today, I'm actually going to hard code them today and then later she'll show you how we can make this dynamic and then I'll be back to wrap things up in a couple few weeks from now and we're going to talk about some deployment options, and so we have a lot of good stuff kind of an end-to-end view of this approach here, all right.

E

So let's talk about the front inside and how you would actually get started doing this so first off for those that haven't seen this here's kind of what we're talking about. We have a customer app and let's say the customer goes here and they would like to talk to a customer service agent or someone that's going to help them. You know put together Ikea furniture who knows so.

E

The customer service agent is using teams we're going to assume they can then join a meeting that would be dynamically set up and as they do, that here's aicha, who will be here with us next week and now she can admit the guest, which is the customer from the lobby and give the video a sec it'll uh sync up here, but there's mini me uh on camera.

E

Talking to aicha, and now you can see kind of from the customer Viewpoint what we would see now lots of good use cases for this uh I shared a story.

E

I think it was last week actually I had some air conditioning folks to fix a problem at our house and they were using a tablet for all their app stuff, but then, when they would call back to headquarters for parts and things like that, they would use the phone and that's like perfect use case I mean they may not even need the video, but also if they do need the video. They can actually show the AC unit and talk to headquarters while they're in the actual app where they have to input the information.

E

Instead of doing this, uh so lots of use cases here but I'll, let you kind of come up with those. What we're are going to talk about, though, is how we can integrate this into the front. End side again I'm going to focus on react, but this can run anywhere the web runs.

E

So let me uh first kind of walk you through what are the major like Lego blocks? If you will I'm a big fan of Lego blocks, my kids used to do all the we still have a bunch of Star Wars sets set up. Actually um I, don't know when those are going to come down. Maybe my wife's saving them for the you know: grandkids someday I, don't know but anyway. The first thing we're going to have to do is install some packages all right, pretty normal.

E

We have a front-end app we're going to be using typescript in this case, so you'll notice. There's this Azure communication. Common and Azure communication react all right and that's actually what we're going to be using to do this now I'm going to talk through these symbols. We call them the main one that does the audio video calling capability is right here. It's called call composite and we'll talk about that in just a moment. Actually, so that's kind of Step One, pretty normal, just get the stuff. We need there's the Lego blocks.

E

Now we need to put the Lego blocks together to actually do something. So one of the first things we have to do is ACS requires us to have a token and a user identity. You're going to see both those here now, first off you'll notice that we have this use memo now, if you're not familiar with this, this does what's called memorization kind of a caching technique to ensure that we only create this Azure communication. Token credential right when the app loads just one time and then from there.

E

uh The token is only set once therefore, we just get one Azure communication, token credential. If you don't do that, you can get weird results. I might have gone through that myself and done it the wrong way, the first time. So what this will do, though, is it returns a credential, so that's kind of step one. We need to convert this token into a credential that we can actually use in ACS all right now. The next thing we need is think about a customer calling into a customer service agent.

E

We probably need the name for the customer or at least guest, which is what we're going to do. um We probably need their user identity which we're going to talk about. We probably need the teams URL. If we're going to call into a teams meeting. We need some way to know how to get into that meeting, and then we probably need the token as well.

E

So what we're going to do for that is create, what's called some call, adapter arcs now again we're going to do some memoization here, but all we're going to do is say all right. Once we have a user ID, a credential, a display name and the team's meeting link available, because some of this is going to be retrieved asynchronously, then we're going to return. This object, literal, just a basic JavaScript object and notice. It has the user ID the display name, the credential and then the locator notice.

E

That is the team's meeting link all right, and this is one of those things you do at once and then from then on. If you had different apps that needed it, you could either use like copilot, which is my preference. uh If you haven't tried copilot with vs code, it's amazing, but normally this is something I mean you do it once and you can reuse it in many places across apps. If you needed to so, we now have the token credential we've put that credential into an object. That also has some info about the user.

E

Now we need to package all this up into something that we can feed into the UI part and so what they provide and they be an ACS team. Is this use? Azure communication call adapter. This is a custom react hook. It's basically a custom function that you feed it. This call adapter arcs, it returns. This call adapter object and then we're going to use that, for now we can make the audio video call. We know about the user. We know about the token we know about the teams.

E

Meeting URL like we have everything we need, and this is the bulk of the code right here. It's not that much actually now, the last and probably most important piece is we want the UI.

E

Well, that's done through something called a call composite, and this is uh basically a set of web components that, if you think about putting together a video call, what would you need? Well, you need a way to start the call. So you need a button. You need a way to pick the camera. uh The mic things like that, if assuming it's audio video, all right so that'd be some drop downs. Probably you need something to render the the video all right.

E

So there's the video and then you probably have a toolbar, because you want to be able to hang up. uh You might want to share your screen. All those things we're used to in teams. You can actually do, and this call composite literally all it is- is a wrapper around these web components all right. So like streaming, the video it wraps that the button to start the call it has that as well, so think of it as kind of like uh you're. Putting all the Lego blocks together.

E

Call composite is you know the I, don't know the ad at from Star Wars, if you're not familiar with that, and now we can use that to render the UI okay I wanted to go through that first because I'm, a big fan of let's kind of get people thinking and then we'll jump into the code and kind of review this and how it's actually used.

E

So with that, let me jump on over and what I have here is a single react file and you're going to notice. We have all those Imports right there right at the top, all right, so there's the call composite there's how we create the the token credential uh there's a type we're going to use and then some other helper functions here as well, so moving on down. If you break this down kind of into steps, the first steps are, we need an ACS user identity and token, and we need a teams meeting link.

E

Now you might notice, I have hard-coded those, and the reason is because iTunes starting next week is going to show how we can actually go in and dynamically get uh well next week. She'll cover this part dynamically, getting the team's meeting URL with Microsoft graph, and then the following week will be about how to dynamically get the user identity and the token from ACS we're going to be using Azure functions for all that. Okay, so in this case, I've hard-coded it.

E

But you might wonder if you're new to this like, where did I get these things?

E

Well, if I come back over to the Azure portal, I've already created uh just a phenomenal name here, test dual lean: this is my ACS resource for this uh demo and this literally I covered it last week, but it literally you're looking like 30 to 60 seconds to set this up super easy, just go up to the search, type, Azure communication or just communication and then pick it and create it done now for development purposes, and this is something that, for those that have seen this last week, I'll show it again, but those that didn't I'm going to click right here, voice and video calling and what this will generate is a user identity and a token now I've already done that they're good for 24 hours, and so mine are good and I'm not going to attempt fate here by creating another one.

E

I should be able to do that by the way, but I'm not going to, but that's where I got them I had literally it writes them out. I copied and pasted them uh back into right here, and that's it now, they're only for development purposes. You would never use this for production. You would never hard code this for production, that's a given okay! So moving on down now that we have that what about the team's link? Well, that's just normal on that I set up a meeting here.

E

I uh I have a Microsoft 365 developer, tenant, uh aicha, I, actually added to that tenant. This is a fake version of it, and uh aicha can now join and when we click join, we can go into here, but we can also go into the meeting and get the link right. There. You've all seen that with teams- and that's all I did for that piece.

E

Okay, so moving on down the rest of this is what we just covered I'm going to take that token, okay, which is right here this guy I'm, going to convert that into an ACS credential. We're then going to create our call adapter args, and this is again just a matter of making an object. That has something ACS expects. This is in the docs that you wouldn't even need to memorize this, but I'm going to create a user identity from the user ID. They have a little helper function to help with that.

E

The display name I hard coded in this case to guest, but if we had a logged in user, obviously we could get that logged in user's name. uh Credential, we've already seen that that's the token and then the locator there's the teams meeting now I do want to point out that you don't have to call into teams. If you haven't heard this before, ACS can actually call in from a custom app to another custom, app that's running ACS.

E

You can even do one to many type of calls right now we're doing teams but just kind of know that that's not the only way. All right now. I also want to point out when I first did this piece, I didn't actually write it I'm going to show you real, quick, create an ACS uh token, uh let's say credential, because that's actually what it is um using the token- and this is copilot and so I'm just going to tab, tab, tab and you're going to notice. This looks really close.

E

It's slightly different than what I did they return undefined I just did return, but that's copilot in action. If you haven't seen it before it's pretty cool so anyway, there's an example of that. So the next thing is once we have our adapter args we're going to feed those into this custom react hook that ACS provides if I go back up top you'll see it right. There same communication react, and now we get to the important part right here. The call composite now I'm going to have a links for all this at the end.

E

uh But one thing I want to point out is ACS has a really nice demo page where you can try this stuff out without writing any code uh for those that were here last week. This is something I talked about, but I wanted to show because I know everybody can't make it every week. So I want to show it again.

E

So I'll have a link at the end to get to this, but if I come down to call composite you'll notice, I can join existing call and if I scroll on down here they'll actually have some of the stuff you saw like call adapter. They have some other things as well, but if we go to the very bottom here, 's another example of using the call adapter with the call composite now going back to the code. What we're going to do here is the call adapter, which is this little piece right here.

E

Remember that has the the user ID display name the credential of the teams link and if we come on down we're now going to bind that into this call composite and the call composite again is what renders the UI for the college. So now it has everything it needs and we can actually do a call from here. So let's do that. This is a kind of a live version. So let me just refresh this. This is my local react, app running now again: I've hard-coded, the IDS and the tokens and stuff like that.

E

But we'll we'll learn later how to fix that. uh Let me do this camera here. Let me turn it on all right and now we're actually using I haven't called yet obviously, but we're actually using the token and all that stuff. So let me go ahead and start the call and then we'll wrap up here, we'll imagine that the customer service agent got a notification that a customer has a call. They joined the meeting, they admit them from the lobby and we should be in here in just a sec. There we go.

E

It takes the video just a sec to catch up, but hey here's from the Logitech camera um and then I didn't share uh I, just obviously, because I only have so many cameras set up. But if we turned on our mics we could talk and we can notice down here we can switch devices. We can see the people in the call we can even share screens all this was done through the call composite really cool. So all right.

E

So let me hang up on that and wrap up here, because Gary has some really good stuff and I don't want to eat into his time. So let's go back. So all the links and I'll paste these in the chat as soon as I get done here uh can be found here. The tutorial that walks you through building everything we're talking about throughout these uh sessions, we're doing uh over six weeks. You can actually get that to that tutorial today.

E

If you want to try this out call into teams or whatever um we also have some other samples, and this keeps growing and then the library I just showed you where you can demo stuff live. That's the ACs UI Library! You can go to this link right here again. Don't worry about this I'll uh paste it in the chat. So with that, uh let me turn it back over and I think Gary's up next yeah.

B

Thank you very much Dan. That is an amazing demo, I'm totally looking forward to see what is going to do next week. Take it the next step further. So thanks very much for um for demoing that for us and walking us through um the process, I'm.

F

B

You are absurd.

F

uh So uh hi everyone, my name- is Gary trinda, I'm, A, Cloud, developer Advocate from uh Microsoft, and today, I'm gonna introduce you to the new teams. Toolkit learn path.

F

um Today, we're actually just going to cover um how to get started: uh building apps using uh teams 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 um 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.

F

uh 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, dot, Ms, slash, learn, slash 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.

F

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

F

um But for this week we're just gonna get started. uh We're just going to go through the um the the initial steps of how to get uh get get ready with the toolkits that start building your apps.

F

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.

F

A teams app is nothing more than a than a small package uh that contains a uh 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.

F

But basically, these capabilities are there to be able to extend the the native features of of teams and 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 ISP and where you can bring your uh application to Microsoft teams to to where people actually actually work as well.

F

So I mentioned a teams, app is, 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.

F

You know a really fancy chat, GPT box, but I bought 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.

F

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

F

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.

F

The next capability I'm going to talk about is message. Extensions now 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 accessing information. You've probably already used a message. Extension every single day.

F

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 uh to access some information that you can put into a message and and and increase the the communication um in your collaborations, with with your team um through through those conversations.

F

The second type of message extension is what we call Action based, so this is taking action on a um on a message.

F

um So in the example that we've got there, someone just wanting to set a a reminder against a particular 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 um message. Extension and finally, um we've also got meeting extensions as well.

F

So this is the ability to enhance your your meetings uh to help them run, maybe more productively, and that you can actually show um 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.

F

You have 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 could show different uh information and surface different data depending on whether you know your before or or after.

F

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?

F

So one reason could simply be to just bring in some common business processes or simplify some business processes. Using uh the uh the team's features I mentioned uh with the Bots, and you know one way is you could simplify the the process of um a an employee in your organization being able to to get help, whether that's HR, whether that's I.T and having a bot there easily accessible in teams.

F

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.

F

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 kind of enforce your company culture. Do the right things and you might want to you- know, put in your own custom praise um application in there. However, you you, you see fit.

F

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.

F

I just wanted to quickly go through their support scenario. Just to kind of bring this uh more more to life is why you build in teams and use these capabilities so I mentioned before about you know um 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.

F

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 through a web page interface, but that's again surfaced in teams made it easily accessible.

F

We've then got a a bot that a support engineer could could use maybe to get reminders of uh 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, got overdue, that that needs some attention as well.

F

That's another use for for that that bot, and and as well as having that teams uh Tab and for customers to raise tickets well actually providing a bot where they can ask these frequently uh ask questions and get answers without actually having to support to uh sorry 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.

F

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 talk. It is really uh the uh development tooling to be able to build apps uh really quickly to get up and running really quickly.

F

Now team socket um comes in two different flavors. The first flavor that I'm 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 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, use C, sharp um and you're on Windows. Then you can use teams.

F

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.

F

So just to kind of give you a a an understanding of the prerequisites of yes, you you might want to use teams, talk it uh 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.

F

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 toolkit for visual studio code.

F

Okay, so I'm going to jump into a 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 a sample app up and running uh in your in your tenant uh really quickly and just show how teams talk it can can really help you there.

F

So if I get to the right screen, okay, here we go so we've got visual studio uh 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.

F

So this opens up the initial pane, where you've got access to documentation, how-to guys 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 maps 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.

F

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.

F

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.

F

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- and here we have it.

F

So here is what a the team's toolkit looks like on the left hand side, when we've um we've created a 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.

F

That tells us a little bit more about this actual sample, what it does and some of the the features um 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.

F

Oops yeah 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 the demo gods are uh who 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.

F

It's it's actually signed in and we can see that this side loading um enabled um has been, uh 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 guide app settings there is a toggle here um for custom apps at the tenant level.

F

So make sure that is on as well and another place to look is under permission policies. um Oops. Sorry, no in setup policies going to Global. We have here upload custom apps as well, so just make sure that that's turned on.

F

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 um 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 would definitely recommend using development tenant for your uh for your team's development anyway.

F

Now that we've signed it into Microsoft 365 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 the browser that we want to use and I'm going to use Edge for this.

F

So this starts teams talk it 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 um the features of the app um uh 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.

F

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 uh really comes into its own when uh yeah it can handle a lot of these uh complexities.

F

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.

F

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

B

You're just testing your resilience, don't worry.

F

About it yeah it is, it is.

F

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

F

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.

B

Eight minutes on 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.

F

So this is already installed, it seems. Toolkit should already sign me in as well.

F

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

F

F

Take us 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.

B

Yeah, that's because we did a sharp bit from uh finding an email.

F

I think at this point, when it's like what entertaining things can we do and there's an npm install happening right.

B

It leaves some type of GIF animation. It.

F

Definitely does yeah, maybe maybe I need feedback, and maybe you need to provide a little video down in the bottom. Oh, whilst you're, whilst you're installing all the packages Let's.

B

Or if we really want to be crew, we can run some ads.

F

A

You get like a cinematic countdown for you. There Gareth, oh.

F

That is yeah is this 24.

D

F

I've, just kind of talked 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 is 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.

F

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.

F

uh It did definitely work earlier, um so I'm surprised that it 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.

F

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.

F

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 shown and then quickly hand back over to you. Fabian.

F

There's a window in the background and just sign in.

F

Of course, Authenticator.

F

I'll prove that.

F

Okay, so that's been approved.

F

So at this point, um because the app has been already uploaded into teams, we've got now the the side loading window. uh Where we can add this in uh there we go. We can click. Add.

F

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 we 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 stew tasks and calendar events.

F

So that's that's created the uh the uh the the app running in in my tenant from the uh 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, um but just a reminder that the the actual learning path is available. We've just finished week, one we've got four more weeks to go.

F

Hopefully the demos will go a little bit more smoother than what it did today, um but uh next week we're going to talk about uh building uh Bots using the toolkit and just remember that toolkit is available. So uh sorry, the learn path is available. Go to AKA, dot, Ms, slash, learn, slash teams, talk it to take a look at today's module and future modules as well and over to you Fabian. Thank you very much. Everyone thank.

B

You very much Gary thank you for presenting Matt I'd love to see that those demos and they're good definitely good luck on the rest of the week. um Sorry Sophia, the the five weeks that you have going minus one for the four weeks. So thank you. Everyone for coming we're almost we're at the top of the hour, so I'll be really really brief, um as uh Dan Wally mentioned before next week will be doing the part two where she's done she will dynamically create the Microsoft teams.

B

Meeting I'm using Microsoft graph um Gary will be back um to talk about the team. School kit learn path again and we'll have David racette I'm talking about debugging um remotely debugging your Microsoft teams app from any device using um JS.

B

um The recording for this call will be available 24 hours um on the YouTube channel. It could miss Community, slash videos if you're not subscribed. Please Subscribe today follow us on Twitter as well, at um at M365 PMP for all it's in LinkedIn, um the AKA Ms Community Li. The next um call will be on February 28th at zero, eight hundred uh Pacific time, and we look forward to seeing you then thank you all for attending cheers and have a great day.