Skip to content

Overhauled topic #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlesprakash merged 2 commits into from
Oct 18, 2017
Merged

Overhauled topic #5

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36b4b8d
Overhauled topic
majordamage Oct 18, 2017
c14da3b
Updated apps-overview.md
majordamage Oct 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 67 additions & 36 deletions msteams-platform/concepts/apps/apps-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,94 @@
---
title: Apps overview
description: Describes how to get started with apps in Microsoft Teams
keywords: teams activity feed
title: Develop apps
description: Describes how to get started developing apps in Microsoft Teams
keywords: teams development
---

# Overview of apps in Microsoft Teams: Tabs, bots, and more
# Develop apps in Microsoft Teams

Each app in Microsoft Teams can offer multiple capabilities, including tabs, bots, compose extensions, and Office 365 Connectors.
In Microsoft Teams, a single app can provide one or more *capabilities*. Deciding which capabilities to offer depends on what you want to do.

## Scopes in Microsoft Teams
For example, your users might want personal views of a planning app just a click away. Or they might need to look up a customer-support ticket and add it directly to a conversation. Or perhaps receive real-time notifications about events in a business system. Or get assistance in scheduling an event for a group, translate a message into another language, or track incoming social-media messages and respond directly from Teams.

By creating apps in Microsoft Teams, you can make your service available to users in the contexts—or "scopes"—that make the most sense.
Your app can provide services in channels, which enable teams to work collaboratively, or one-on-one with individual users—or both. (The term we use for services in channels is *team scope*; for one-on-one, *personal scope*.)

* You can use most app capabilities (such as bots and tabs) in most scopes.
## Map your scenario to Teams capabilities

* You offer these capabilities via a single Teams app package that users can acquire through our in-product app gallery, via the Office Store, or sideloaded directly by your team.
After you decide what your app should do, you can map those activities to capabilities in Teams:

* You declare precisely which capabilities you support, in which scopes, via your app package's [manifest file](~/reference/schema/manifest-schema).
* For simple information display or interaction with web-based data, consider using *tabs*. Examples of tabs include dashboards with data visualization, documents, notes, task managers, and design canvases.
* For natural-language questions and lightweight tasks, consider using *bots*. By using bots, users can monitor and control build systems, receive and sign documents, schedule meetings or travel, and quickly gather information from their teams. Notification-only bots can push relevant information directly to a specific user in a channel or a direct message.
* To look up information and insert it directly into a conversation, consider using *compose extensions*. With compose extensions, users can insert text, links, pictures, videos, and other rich media without switching to another app.

### App bar (personal scope)
## Leverage what you've already built

>New feature
The following table provides a few ideas about bringing resources you've already created into Microsoft Teams.

The app bar is the area on the left side of Microsoft Teams where the user's activity feed, chat, teams, meetings, and files buttons live. We designed the app bar to serve as a central container giving users quick access to the features that they use the most.
| If I have an existing… | In Microsoft Teams it can be a… |
| --- | --- |
| Web app | [Tab](~concepts/tabs/tabs-overview) |
| Bot built with Bot Framework | [Bot](~/concepts/bots/bots-overview) (and a [compose extension](~/concepts/compose-extensions), if you'd like)
| Office 365 Connector | [Connector](~/concepts/connectors) |
| Web service (to look up information) | [Compose extension](~/concepts/compose-extensions) |
| Outgoing webhook | [Custom bot](~/concepts/custom-bot) |

![Microsoft Teams apps bar](~/assets/images/appbar_apps_flyout.png)
>**Tip:** If you've created a bot that uses the Microsoft Bot Framework, you can make it work in Microsoft Teams, both as a bot that can chat with a user or a team channel and as a compose extension to quickly insert information in a conversation.

Users can access personal experiences from your app via the app bar, such as holding personal conversations with your app's bot or interacting with personal data in a tab.
## Get started developing

<!-- TODO screenshot of personal UIs bot and tab -->
The fastest way to create your first Microsoft Teams app is to follow one of our "Get started" guides:

### Interacting in channels (team scope)
* [Get started with .NET and C#](~/get-started/get-started-dotnet)
* [Get started with Node.js](~/get-started/get-started-nodejs)

Users can access team experiences from your app in a channel, such as @mentioning your app's bot, configuring notifications via a Connector, or interacting with team data in a tab.
Because Microsoft Teams apps are composed web services, you can use any web-programming technology. For tabs, we provide a JavaScript library. For bots and compose extensions, we recommend you use either C# or TypeScript to take advantage of our [SDK extensions](#microsoft-teams-extensions-for-the-bot-builder-sdk) for .NET and Node.js.

<!-- TODO screenshot of team UIs, bot and tab -->
### Develop your tab

## Building your app
Tabs are simply iframe'd web content. You can leverage your existing web service, written in any language and hosted on any cloud platform, and simply include the [Microsoft Teams JavaScript client SDK](~/reference/library/client-sdk-javascript) in pages you display in Teams. This library provides methods for your tab and your authentication and configuration experiences.

Ready to get started adding your experience into Teams? Follow these steps:
A *configurable tab* becomes part of a channel and provides a single kind of information to a team. For example, the Planner tab for a channel contains a single plan; the Power BI tab maps to a specific report. Users can drill down to the relevant context, but they should not be able to navigate outside the tab. The Power BI tab, for instance, doesn't enable navigation to other Power BI reports&mdash;but it does enable the **Go to website** button that launches the report in the main Power BI website.

### Build your app's rich capabilities
A *static tab* supports an individual user. For example, if your service is a notetaking app, add a tab that holds personal notes. That way, a user can refer to his or her own notes without having to share them with an entire team.

* [Set up for development](~/get-started/get-started)
* [Design your app](~/get-started/design)
* [Code](~/get-started/code) your app's capabilities
### Develop your bot and compose extension

Because your Teams bots and compose extensions are built on the [Microsoft Bot Framework](https://dev.botframework.com/), we recommend that you leverage the [Bot Builder SDK](https://docs.microsoft.com/en-us/bot-framework/resources-tools-downloads), available for .NET and for Node.js.

>**Note:** You can develop in any other web-programming technology and call the [Bot Framework REST APIs](https://docs.microsoft.com/en-us/bot-framework/rest-api/bot-framework-rest-overview) directly, but you must perform all token handling yourself.

We want to make development of Microsoft Teams apps as easy as possible, so we build and maintain extensions to the Bot Builder SDK. These packages extend the basic Bot Builder classes and methods with the following:

* Specialized Teams card types like the Office 365 Connector card
* Consuming and setting Teams-specific channel data on activities
* Processing compose extension requests
* Handling rate limiting

Both packages install dependencies, including the Bot Builder SDK.

#### .NET extensions

To use the Microsoft Teams extensions for the Bot Builder SDK for .NET, install the [Microsoft.Bot.Connector.Teams](https://www.nuget.org/packages/Microsoft.Bot.Connector.Teams) NuGet package in your Visual Studio project.

#### Node.js extensions

To use the Microsoft Teams extensions for the Bot Builder SDK for Node.js, add the [botbuilder-teams](https://www.npmjs.com/package/botbuilder-teams) npm package.

#### Source code

You can find the full source code for the extensions in the [BotBuilder-MicrosoftTeams](https://github.com/OfficeDev/BotBuilder-MicrosoftTeams) repo on Github.

### Create your app

Ready to start adding your experience into Teams?

* [Design your app](~/reference/design/framework/basics)
* Code your app's capabilities
* [Tabs](~/concepts/tabs/tabs-overview)
* [Bots](~/concepts/bots/bots-overview)
* [Connectors](~/concepts/connectors)
* [Compose extensions](~/concepts/compose-extensions)
* [Activity feed integrations](~/concepts/activity-feed)

### Package and test your app within Teams

* [Create package](~/publishing/apps-package)
* [Sideload](~/concepts/apps-sideload) in Teams
* [Test functionality](~reference/general/debug)

### Publish your app and drive engagement

* [Register and publish](~/publishing/apps-publish) to Office Store
* [Embed deep links](~/concepts/deep-links) on your website
* Test and publish your app
* [Sideload your app](~/concepts/apps-sideload)
* [Publish your app](~/publishing/apps-publish)