Microsoft 365 Community Microsoft Teams, 20 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on building a Microsoft Teams bot with yo teams

Description

In this 12-minute developer focused demo, Stephan Bisser addresses what is yo teams (a Microsoft Teams app generator) and how to use it to build a bot. After installing Yeoman generator and Gulp CLI task manager, install npm i -g generator-teams. Create a project. In VS Code step through files generated by yo teams. Use gulp build, gulp manifest and gulp serve. Upload created bot to Teams site and appreciate its out-of-box capabilities. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 20, 2022.

Demo Presenter: Stephan Bisser (Solvion) | @stephanbisser

Supporting materials:
• Repo - Microsoft Teams App Project Generator - #YoTeams | aka.ms/yoteams
• Documentation - Yo Teams - the Microsoft Teams app generator | https://pnp.github.io/generator-teams/
• Documentation - Single sign-on (SSO) support for bots | https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/auth-aad-sso-bots

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

So what I'd like to do? The next couple of minutes is to introduce you on your teams and how to use it. So, as we said, your teams is like the team's app generator, so you can build teams apps nowadays, which offer a variety of features.

A

You can build tabs, you can build bots, um you can build messaging extensions, connectors and so on and so forth, and therefore you teams actually should provide you, let's say with a kind of scaffolding solution and some kind of guidance to give you a quick start on your microsoft teams development. So if you haven't just installed npm and then install npm, install dash g or global generator dash teams, and after that, you should be able to use it and it the way you use.

A

It is kind of simple within your favorite terminal may that be on windows or on linux, or on mac just type in your teams in a folder where you want to actually scaffold a new microsoft teams project and then it should basically ask you some basic questions around your team's application, so first off solution.

A

Name um then, if you want to use the current folder or if you want to create a new one, um the title of your project, your company name or your your actual name, um then you can play around with the manifest versions.

A

So um you have the choice of using um either one of the yeah more older, manifest versions like 1.8 or the newest one, which is 1.11, and we were planning to deprecate at least some of the old ones, because we see that they're hardly ever used or if you want to test out preview features. You can also go along with the depth preview version, which offers you more functionality in terms of your team's application.

A

So you pick and choose one of the manifest versions, and then you can actually choose if you wanna do a quick scaffolding or if you want to um get asked all the questions which are in there for the sake of simplicity, I'll pick the quick scaffolding, because I don't want to get into too much detail, um and then this is kind of the most important question being asked, which type of application do you want to build? Do you want to build a tab? Do you want to build a bot? Do you want to build both?

A

So you basically pick and choose whatever functionality your team's application should have for this. For the sake of this demo, we'll go with the bot, because we want to build a box, um then we basically optionally can enter. If we already know our bot endpoint, we can add it into into our app settings, file or environment file or leave it blank. And then we have some yeah default questions like showing a loading indicator.

A

If you want to go with a new boss framework or if you want to create, uh go with an existing one, uh we want to create a new one, or we already have created a new one in azure, um which I'll show in a bit um the name of our bot than the microsoft bot application id and for grabbing. This will switch the windows for um just one second, because I have already created a new azure bot in my azure portal. So this is my azure portal.

A

In my azure subscription, I've created a new azure service called azure bot and from there what we need to get is the microsoft app id. So each azure bot comes with a microsoft application or azure id application in the back end and we'll need to grab that id and paste it in then. We can also say if we want to add a static tab to our bot or not so, for instance, you can add some kind of introduction phrases or anything in terms of help into that static tab.

A

I won't do that as of now. I also do not want to support file upload to the bot, because we have a rather simple demo and we also do not want to add calling support. So if you would enable that what the generator would do for you basically is to add to some kind of yeah extended functionality and more lines of code to your bot to make that work out of the box and after you've basically answered all the questions in there.

A

What it will do is it will generate bot for you, so it will scaffold out the whole project. For you- and we won't wait for that, because I've already created another one for the sake of time and will directly jump into visual studio code to see how the yield teams generated uh what the eo team's generator did for us. So it capita a whole project. For us. um We have a nice little readme in there, which explains you um how to get started and also what it has.

A

And that's one of the most important um files in there is the environment file which holds the the settings for our teams, application, which is, in our case a bot. So it holds the microsoft app id and please don't copy the microsoft app password I'll delete it later on um as well. So that's the kind of glue between your team's application and azure id, and it also defines default port for local, debugging and stuff like that and also what it did for you is it created your um your code base.

A

So we have a new bot in our server folder in there, which is the yobot or yobot1bot.ts file, which is basically our bot which holds all the basic functionality.

A

So it makes sure that the bot um will be able to to run on your um on your local host if you start debugging it locally or in azure um in the near future and as will also handle uh all of the logic like the greeting stuff, if a member gets added and stuff- and it also offers us and that's what I meant earlier by new project template, it offers us functionality of integrating dialogues out of the box.

A

So you have a yeah. You will have a an easy time, extending your yo team space, bot with custom dialogues and custom functionality, because it's already baked in in the default template or default project template, and you just need to yeah kind of refer to to how we uh implemented it in it into the default template. So, as I said, a lot of functionality in there, but in actual to to demonstrate you um how to start, um if you have never yeah developed a bot using your teams, um it's pretty simple.

A

So after scaffolding has been done, um you can basically go ahead and type in gulp build which will actually build the whole application for you, which usually takes a couple of seconds to to do so and, as you see in here, it uses webpack to build the clients, build the server and stuff like that um and after it has been built. um We can go along with the second comment, which is then called manifest, and that's a a real uh yeah nice functionality, because what it does now is.

A

It will generate the team's manifest for us. So if you have noticed uh it did a short refresh in my visual studio code editor and it created me a yobot1.zip file which is actually, if I go, go ahead and look into my windows explorer, which is actually our team's manifest flipped up and ready to use right away. So.

A

This is actually the thing within that zip file. It consists of two item files or image files for the teams, application and also the manifest which defines our microsoft teams. Application, and the cool thing now is what I can do.

A

I can go along in my terminal and type in gulp serve to start the bot uh locally on my machine and then what I can do is I can switch to my microsoft teams, web client, because I'm logged in onto my desktop client to do the presentation, and then I can go to apps, manage your apps and I can upload a custom app and then what I can do is.

A

I can pick the zip file which has been generated by um gulp, manifest common guild, manifest for me select open and it will bring me basically my team's application, and I can add it for me as user right away and what it will do, then, is, as I have set up. Ngrok running on. My local machine is that microsoft teams will now yet tangle to my uh localhost and, as you can see, I'm reusing that azure um bot service, so I've already communicated with that with that spot before.

A

But what what I can do now is.

A

I can select, for instance, who am I from that adaptive card and we see it land on my localhost and basically I cannot communicate with my bot running locally right within themes, so I can say yes, because I want to see the current team's context and it seems that it had some kind of issue right now so we'll test out. If mentioned me, works okay, that works um strange.

A

That who am, I doesn't work because, usually what it should do is it should grab the team's context and it should get me my team's context displayed in right in here. Now there we go um so we see, even without um without the need of authentication.

A

We still get the basic information about the user from the team's context, like the name, the team's id, the email address and so on and so forth.

A

We also see that the default project template has some um yeah functionality baked in, like mention me to give you kind of an idea, what's already possible, so you can chat with your bot in a one-on-one chat, but you can also chat with your bot right within a team or a channel, and you can make use of the add, mentions and stuff like that and that's all baked into the default project template um so yeah.

A

I kind of should give you an idea on how to start with uh with your teams and the bot development per se, and then you can do stuff like integrate the graph um integrate single sign on from there, which isn't the heart of the test and we'll try to get that into the docs um sooner than later, to make yeah teams development, um no matter if it's tab, spots messaging extensions. So whatever uh a no-brainer for you and with that that's.

B

Awesome awesome very, very yeah, perfect timing. Actually thank you really really cool stuff, I mean in less than 15 minutes. You uh showed how to build a bot end to end and obviously we can do more with it. But that is incredible. Thank you and I love how encouraging your bot was it. It said, hey head over and let's start building, some more features right. So even the box in this community know about sharing is caring so who doesn't love it all right? Well, thank you again.

B

Steven uh some links around stephen's demo is in the chat again awesome, stuff steven. Thank you.