Microsoft 365 Community Microsoft Teams, 19 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on using yo Teams for building your Microsoft Teams solutions

Description

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

If you are new to Teams app development, then this 16-minute premier is a must view demo. Wictor Wilen quickly and neatly steps through installing (scaffold out a Teams project) and using Yo Teams - the Microsoft Teams app generator. Yo Teams has been around for 3 years and in used to build Teams apps - tabs, bots, messaging extensions, etc. The generator has capabilities SPFx does not have - client and server side tabs, bots, connectors, web hooks... The Repo has solid Quick Starts, tutorials, samples, and guidance. The presenter also does a good job calling out the differences between SharePoint and Teams generators throughout the demo.

Demo Presenter: Wictor Wilen (Avanade) | @wictor

Supporting materials:
• Yo Teams GitHub repo: https://aka.ms/yoteams

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Howdy folks, how are you all doing today? Let's get started I, don't have a fancy. Powerpoint presentation hopefully spend most of the times in demos, the yeoman generator for micro teams, applications which is I actually looked at the date for the first commit now it's the first commit was made the 3rd of March 2017, so it's over three years old.

A

Actually this project- and we started out for as a solution to building tabs easier and this ever since its evolved into building tabs for teams, building BOTS for teams, building messaging extensions, a lot of other things as well and over the last three years, a lot of community contributions has happened. We recently had them moved the actual generator source code over to the PNP repository. So now it's under the PNP umbrella, etc, but it will start if you want to get started working with Marshall teams.

A

You start by going to a K data, mustachio teams which take you to the github repo there's some manual and instructions etc, and let's take a look at that fairly quickly, let's see if I can find the right browser there we go. This is actually the first commit March 3rd 2017, but if you go to a Kaito time, Alessio teams you get here, there's an readme file on how to get started and walk you through that furnished short as well.

A

Then, if you want to contribute, if you have issued cetera use the issues tab here find something you can help out with there's also wiki and we are in the process of moving that into better documentation. But there's some quick starts for you in here to tell us how to build your first application. If you want to build in and sharpen online provider hosted web part, we have that etc, and also we keep sort of the change log of all the updates it's as happening in here continuously.

A

So let's go back to my presentation and the first thing you need to do: you need to have a PC or a Mac essentially to get started, and with this it's all built using nodejs. If you're coming from the SharePoint world, you should be very familiar: the sort of the same kind of approach to scaffolding applications, but it's actually answer so the the reason and I get this question. Often, why do we have a generator for teams? Because you can build teams? Application use a shotgun framework?

A

Yes, you can, but the only thing you can do with sharpen framework is sort of client-side tabs, the German generator. We can build a lot of things specifically if you have those kind of business processes that require server-side compilation or rendering and those come things you want to hide your business logic. Then you can build a server side and client side tab. That's also why I showed you, the provider hosted web part.

A

If you want to build that kind of approach for for SharePoint, then you can use the team generator, but also in the team's application we have bots. We have connectors yeah outgoing web hooks and a lot of other things. So that is the power of this. It combines all those into its seamless application and that the second thing you need to do is install the the yeoman to the gulp CLI in typescript and install those three NPM modules, and once you have that you can actually install the generator and that's easy.

A

It's just what type NPM is the hole, generator team starters global and you will be set to go and also we always keep a preview version out there with the latest and greatest features and just append that's preview to that one. If you want to try out the latest builds- and yes, please do that. We have a preview out right now with this SSO support for tabs and we need a lot of feedback. We can get there, so we can make sure and to build stable solutions.

A

I will do how to scaffold out a team or team project, and then we also take a look at the demo. Hopefully the demo works the same sort of good and bad thing right now. The usage of teams is so huge, so we are actually being throttled when, when adding new tabs or adding applications. So we have a back-up plan for that, but let's see how things goes and let me first of all start off for a start, scaffolding and actually start my application in the background.

A

So we have that running and then we take a look at that later. But in order to scaffold the project you essentially type, your team's I will not run an NPM install here. So I run you skip install, so we don't have to wait for all them to get in package, etc. So just type that and then take a few seconds for the DOMA generators, startup and old, and right now I'm using the preview on my local machine here and just give me a few seconds. Hopefully it works.

A

So this is a very familiar if you work have been working with allergen, yeoman generators, we get the set of questions and based on those questions, we scaffold out the project. So we need, of course, the name of our solution.

A

We won't use the current folder that we in right now to structure scaffold out the phone files. Then we need to give our application name and we just use default. One suggested here. You need to have a developer name, I'll put my name in here and then we have an interesting option here. So max of team's applications are packaged into a manifest, and these manifests have a version depending on what version you have different features.

A

So what we're doing right now we're actually supporting everything from 1.3 to 1.5, including the preview one, but four and one two three we most likely be duplicating inversions going forward, so typically choose the latest version or the preview branch. If you want to try out the latest and greatest so we choose the 1.5.

A

There's some other questions here: I'm, not gonna, walk you to all of them and that's. This is the most important questions. This asks you for what kind of things do you want to add to your applications? So we have. As I mentioned, we have tabs, we have BOTS, we have outgoing web hooks, we have connectors. We have mixed the extensions. We also have localization support, so this is up to you to pick and choose what you want to add, but also the generators are built in such way. You can actually run it again.

A

If say assume. You added a tab me, but you won't add a bot later and we're ahead actually message extension later or a tab later. You can have to run it again, so we don't support all the different kind of options here and, of course, good opportunity for you to help on at least support quite a few options, specifically around tabs, which are typically that you add multiple off. So let's choose that tab at the bottom, just for the demo and then I just continue and depending on your. What would you essentially put in here?

A

You will be asked to cut follow-up questions so I'll just click them through here, one of the cool things we have. We already have built in an option for you if you want to include a test framework and some sample tests for you. If you want to do the proper testing I'll skip that one for now. We also have support for application inside skip that one as well. Then I get to my tab.

A

I, give it a name: I choose to the default one here, I can choose between a configurable and Static that will change from from team and group two to person and personal, because the configurable one are the ones you can have two team and the static one is the one you it's a personal tab. Essentially, let's choose two configurable one here, then I can change and choose what I want this to appear in the team or and or in a group chat.

A

We just choose default one again, and this is a new feature in into the thirteen preview. Do you want to add single sign-on support for this tab? Let's choose yes here and right now, I'm going to come, use the empty good, but essentially what you need to do is you need to register an app ID in Asscher ad, which you should paste in here. You can always go back in and modify this later. It's in a configuration file, so um I typically want to build my projects.

A

I, just click through here and add those IDs later I also need an application, ID URI the same kind of thing here we can change that one later, then, we have a cool thing here, for if you want to actually create that kind of provider and host the web part. So do you want to add this tab to show up on online? I can click yes here then I can choose some if I want to. This is a full page application or just as a web part.

A

So let's choose the web part and click enter then I'm getting into the the bot questions. I'm, just click do them very fast here and so there's a lot of questions being asked here: I need to create a long short err and once that, when I asked all the questions, he was scaffold out all the files for me and using it they're a type script. So everything is typed script on the server side, the client side and all the required files to build this.

A

And of course you should run NPM install which are already done in a demo project here. So what happens? Is that you get a project that looks something like this? You get a lot of help refines the the Gallup files. The the web pack configuration the T is configured cetera. One thing that might be confusing if you come in from the SharePoint world is that we use typescript both for the server-side and client-side components.

A

That's why I see two different tiers, config files here, one which is used for client-side and one is for server-side the same kind of thing in the book, but that configuration won't work for client side and one for server side on their source, depending on what a scaffold out, of course, I get a manifest, and that's where the actual team's application is defined and that's what you can create with app studio as well, and one of the things we looking into is an import from app Studios.

A

You can define your application there and import into the youma generator and not running the actual generate by the importing that file is dead, but in here, when you see all the stuff that I entered the tabs, the bots, etc, etc. You can also see we have these kind of replaceable parameters here. So what, while we're, building this and actually creating that team's application, zip file we're replacing those with parameters which are stored in the dock tnd file, so this is where it always can go.

A

In later, add my hat buy these for my bots for my tabs, SSO and grokken whatever so, yes, I will change this angra cause there it's okay! Later you also get the actual application it's in here we will have a bot, for instance, so we can take a look at the bottom, and this is my hello team spots.

A

Extending the team's activity handler, which is using what framework 4.7 contain, contains some sample code, but also depending on, if you had message, extensions that will be inserted in here, so we have quite a cool way of actually inserting a JavaScript into your already existing class. So even if you modified it, we can insert through the ast and the typescript object model, essentially insert code into your application without destroying it. We also have the client-side web taps, for instance, so we have the the team's tab here.

A

All the react code that is required to create that tap you know all of them need to do is what I did in the background here to save some time and actually type golf and roxxor, and then we start my application. And finally, we see this when everything is hosted and if everything works now, let's hope for that. So we're not being throttled again. We can go into Microsoft teams and upload our application into team.

A

So welcome to team I created this one. Just before the this meeting, we go in to sydorov application brain to manage team, and then we go into apps, and this is sort of the same thing that happens when you do the sync from the SharePoint app catalog, what we doing it manual here and of course you can script this if you want to, but this is typically I need to upload the application once then, you can modify your application, so the actual golf voice is monitoring your files, just as in with the sharpen framework.

A

So when you save the file it will recompile, etc, etc. And typically, you don't need takla know the manifest of many times. I want me to do is choose the zip file. So we need to go to my cone here. Called demos.

A

Pmp and that's you know, choose hello teams and when I'd run, the golf Bangkok service also created that zip file in here, so I could upload that one- and this is the confirmed, confirmed dialog. You have a tab in here at BOTS messages, extensions and click Add to add it, and hopefully this works. It failed a couple of times this morning due to being throttled, looks like I mean throttle again. No, it did work cool awesome, just no. No!

A

So what happened now is since I had a bot in this one I will actually first get a message in here. So a welcome message and that's something we hooked up in in the sample code. So you get that to start with to quickly one of the things you should do as a best practice, that's Welcome card and also to show you what we're doing. In the background you can see here we get the incoming post message from the bot framework in here and what actually sends this to the team.

A

I also have a tab in this application. So we click on plus here and we can choose hello teams, which is my tab and let's see if everything works, so loading the tab. I have some dummy stuff in here just configuration. This is up to you. It's a web page. You can configure whatever you want in here the difference here between SharePoint framework webparts tabs or that you actually do inside this actual dialog.

A

Here the first title: that's where you have the configuration and then we click Save, and actually it did work this time, so I wasn't being throttled and also you see now we actually typing out my name here so we're using it in the azure ad SSO features. The tab has its own features to get the graph information, essentially here and there's just a sample button and those kind of things. So you can start building with react and we have some hygiene factors in here.

A

First of all, or most importantly, is that we actually, if you go to settings here, we support sort of the dark and high contrast. Monster switch to dark here. We'll actually get a dark experience of this one. So you don't have to worry about that. That's all built into the the code, that's being scaffolded for you, so that is how you've started. Building your applications with the yo team generator, and we look and have some interesting things coming in the pipeline right now and some great support from the community and the PNP community.

A

We will do a big new version called we call it version 3 with the big refactoring on the actual structure of the code and make it a little more lightweight and more pluggable. So you can switch in and choose. If you don't want to use to react, for instance, you might want to want to use something else or on the server side you prefer to use a GS for a templating engine. So all of that we're gonna work on over the next few months, so I think I wasn't I'm. There.

B

Excellent, thank you. Thank You, Victor, really really great demo on getting started because we really need to have this getting started. Demos as well, so people know how to catch up if they or understand the basics to get started on things as well. So we shouldn't assume that everybody has been watching on every single session. What we're doing so!

B

Thank you for Victor for that one and a que ms / yo teams, a stat rest where you can actually find more information and likely to set the B key is right now, where the the the guidance is, the guidance is actually, but we really crate already and then there's a more work being done related on getting the documentation were approachable, all good, so the samples and all whatever we have Victor shirt a km as a yo teams.

B

You installed the team generator, and then you run the basic setup and follow up on the getting started. Guidance and you'll be good to go with that. One.