Microsoft 365 Community Teams Low-Code Development, 10 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Teams Development: Making and Deploying Teams Apps

Description

This short video explains the basics of Microsoft Teams application development. It introduces the concept of a Teams app manifest which tells Teams where your tabs (web pages) and bots and other extensions (web services) are located. This video lays the foundation for both regular and low-code developers who want to get started building Teams applications.

Presenter: Bob German (Microsoft) | @Bob1German

Supporting materials:

• Teams Dev Center: https://developer.microsoft.com/en-us/microsoft-teams
• Microsoft Learn - Introduction to Building Apps for Teams: https://docs.microsoft.com/en-us/learn/modules/intro-microsoft-teams-apps/
• Office Developer training content for Teams: https://github.com/OfficeDev/TrainingContent/tree/master/Teams/

PnP videos for Teams developers: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWG3R399jMSrt1eFa5KErvc

PnP videos for Teams low-code developers: https://www.youtube.com/playlist?list=PLR9nK3mnD-OUEuwES5Zn66qUdUdD60PCZ

A

Hi, I'm bob german and this video is making and deploying teams apps.

A

This video will show you how to create teams apps in app studio and deploy them to a team or into the enterprise. App catalog you'll also learn how to manage teams apps using application policies. So, let's dive in now. If you want to do the things I'm showing in this video, you need to have certain permissions at a minimum. You need the permission to upload apps that will allow you to make and install apps for yourself and for teams that you own.

A

This is a tenant setting and you need to be a tenant admin to change it and it's off by default. But if you can get your admin to turn it on, then you'll be able to do things right in your regular tenant.

A

You also will probably want to have permission to install app studio, which I'm going to show how to use, makes it a lot easier to write the apps.

A

Now, if you want to make and install apps for your own tenant or if you want to manage apps with app policies, including that upload policy, then you need to be a full office, 365 admin, and if you do, if you don't have a tenant where you're the admin, let me tell you: you can get your own free developer, tenant at aka dot. Ms slash 0365 dev program, you'll get a tenant where you are the tenant admin. You have 25 e5 licenses to use for development use.

A

Only so in my last video I showed you what teams apps are and what they can do, but let's have a quick uh review here: apps can have tabs tabs could be pinned to the sidebar or they could be inside of a team or a group.

A

Conversation tabs really are just any web page and they can even be configured in the case of a team or group conversation apps can have bots and bots can come back and respond with adaptive cards, so you can have conversations and even have cards that act as little forms as you interact with the bot.

A

In addition to bots, you can have messaging extensions where you're, adding to the menus inside of teams and putting your own functionality so that your team can collaborate directly on business data. How is that for a 30 second tour?

A

So now, let me pull back the curtain a little and show you how this really works. Microsoft, teams, client, is a brilliant facade that stitches together dozens of different backend services, including office 365 favorites like sharepoint, onedrive and exchange word excel powerpoint, onenote and, of course, all the skype services. Some of them are still there, as well as the team services, microsoft stream.

A

Your services could be added to this. So when you're writing an application, you either need to provide a web page for a tab, and you could use powerapps or sharepoint for that web page, but you need to provide a webpage somewhere and that web page has to be able to run in an iframe, and ideally it has to use azure active directory. But that's for another talk. Nice thing, of course, about sharepoint and powerapps is that they both natively, understand active azure ad, so they work easily.

A

You could also put a bot inside of that service or messaging extensions, and teams will knit it all together for you. But how does teams know how to find your service? Your web page, your bot? Well, that's done using something called an app package which contains it contains a teams app manifest.

A

So your tabs bots messaging extensions and connectors and again I'll talk about them more in another video, but all of that gets added kind of put together inside of this manifest file, along with a couple of icons that get zipped up, and at that point you can upload it for yourself or for a team you own. If you have permission, you can publish it to the enterprise app catalog or you can publish it to the teams store.

A

So let's see how that works.

A

So the first thing you'll need to do is install an app called app studio and you can install it from the apps icon in the left sidebar, and then you can access it once it's been installed using the three dots, which is where your personal apps are in teams main use for app studio is as a manifest editor. So the manifest is a json file and I'll talk a little bit more about that later.

A

But the easy way is to use app studio which understands all the json, and it just fill in all your information here. So here I've got a short name, a full name, an identifier that has to be unique for each app, but app studio will just generate that for you, a package name which is generally your dns domain name, because that sort of establishes ownership. If you own the domain name, it avoids conflicts.

A

A version number that's important. If you update the app you need to increment the version number or somehow make it greater than the last one. If you want teams to take the update descriptions, your developer information, that's going to get stitched into the team's ui when the user goes to install the app. If you're a microsoft partner, you want to put your mpn id into the app manifest that way.

A

You'll get telemetry, uh eventually you'll get telemetry for the short term, we'll at least get the telemetry and can give you some idea how your app is doing app urls. So again, these are going to be stitched into the teams ui and branding, which is the icons.

A

You need two different sizes and an accent color and those icons are just going to get uploaded into the or just included into the zip file. But app studio will do that. For you too now, there's two kinds of tabs team tabs are configurable tabs, and so they require a configuration page and that'll be for another video. Although I do have a pointer to my blog article, that does talk about how to do that for sharepoint and powerapps. But in any case you need to have a configuration page.

A

The url of that config page goes here and that's how teams knows what to show in terms of when you click and add a new tab to a channel or group conversation, and you actually get to to configure the tab.

A

Personal stat tabs are so called static tabs, so you just click them and they come up. There's nothing that you can configure- and you can add those inside of here as well.

A

Bots well bots have a messaging endpoint and you can input that later I'll go more deep in how to set this up, but you're you're, going to define your bots in here and you're also going to define the commands. These are not the commands that the bot actually shows these are uh or that the bot actually understands.

A

These are just suggestions that teams is going to make while the user is typing something into the bot.

A

Connectors haven't really talked too much about them, but this this is a way that an external service can send messages into a team. You could also use a bot for that, but connectors is an older technology that also works with outlook and messaging extensions.

A

Are those pop-ups where you can insert things into the menus and allow the user to do things with their messages, while they're composing a message or acting on a message, so those actually are also associated with a bot doesn't have to be the same bot as the first one um and you're going to have to define a messaging endpoint and commands for that, and if you paid attention to the video or if you watched it when it was running a little slower before you might remember that I had the ability to look up and search for open positions and candidates, and you can see both of those being defined in here then there's languages.

A

um So what language do I support domains and permissions? So you have to put any domains that you're going to aggregate sorry, any dns domains that your app is going to access have to be listed in here and then. Finally, I can test and distribute my app. So if you click the install button, you can actually put the app in your own personal use or into a group chat or a team that you're the owner of.

A

So if you're just doing a quick, one-off, that's fine or if you're, developing and testing, that's also fine right later, you'll probably want to download your app and put it put the json right into source control.

A

If it's a fully blown app or you might want to download it, you'll get a zip file that you could later upload into your tenant. App catalog and the last link uh begins the process of a state of a teams, app store, submission.

A

So if I click on the apps in the sidebar you'll see that here are all the third-party apps that are available to me as well as apps that have been published just for my enterprise, if you click on built for and then your tenant name, my tenant name is ms labs you'll see that I actually can have my own apps just for my tenant. If you want to upload one of these well, just click the upload link and upload for your tenant name.

A

You have to be a tenant admin to do this, we'll put the zip file as an app in your tenant, catalog or if you want to upload it for yourself or your teams, it's the same as the install button in app studio. It's just if I don't have app studio for some reason, I could take an app manifest. That's that I got from somewhere else or I could edit the json manually with a text editor put it into a zip file and upload it. This way.

A

So now, let's pop over to a team and I'll show you one other way to install an app. This only works for teams is that you can manage the team and then, if that upload capability is there there's an up you'll find another upload link here where you can upload an app into one individual team now we're over in teams admin. So this is under the office.

A

365 admin center way down the bottom, and I clicked microsoft teams administration, I'm going to open this up and inside here are teams apps and there's two policy screens here.

A

App policies allows me to an administrator to define which apps are available to users, so you can allow all allow only certain apps deny all or deny only certain apps from each of these categories. So microsoft apps is obvious. Third-Party apps are the ones coming from the app store and then the tenant apps are the ones that you upload into your enterprise, app catalog and then finally, there's setup policies, and these are really useful. You can set up more than one policy for both permissions and setup and associate it with different users.

A

Let me look inside the org-wide policy to show you what I've got going on upload custom, apps, there's the setting right. That's what allows the people who this a policy applies to, in this case the whole enterprise to upload their own apps, also user, pinning! No, no users are harmed and no users are pinned in the making of this video. However, you this does allow users to pin apps uh by right clicking on them inside of the team's ui, and then you can pin apps for the users and basically customize the sidebar in teams.

A

So it's on the bottom in the mobile app and decide what apps are going to be there for your.

A

Users- so I want to point you to this: this is the reference for the teams manifest and there's two reasons why you might want this. One is well: maybe you don't have app studio and you want to write the manifest by hand, and you can do that.

A

Another reason is it's a great reference for what all the different fields mean. So this was a short video. If you find yourself wondering about one of the fields in app studio, the best place to look it up is here find the equivalent field in the app manifest.

A

Finally, I promised a pointer to my blog and I will eventually make a video on this as well, but this blog article is all about how to take any sharepoint or powerapps page and make it into an app by either manually editing the manifest or grabbing one actually out of github or using app studio thanks for watching this microsoft, 365 patterns and practices. Video, if you like this video, please subscribe to the patterns and practices youtube channel at aka dot. Ms slash sppnp dash videos, I'm bob german.

A

You can follow me on twitter, at bob1, german and please check out my blog at bobonegerman.com. That's all for this time and thanks for watching.