Developing Teams Apps for Beginners

Microsoft Teams

Background

Microsoft Teams apps is something I have been keen to blog about for a long while. However, there was one issue with that, I had never learned what they are, how they work and how you go about creating one. So, I set myself a challenge at the start of the year to learn, hoping to help others in the process. Let’s get started!

Fundamentals

What is a Teams app?

The actual Teams app that you add or install to Teams is actually not really an app, as such. On it’s own it doesn’t actually do anything. If you look inside a Teams app package, you will usually only see three files:

Two of these are PNG files related to the app icon and the other is a JSON file. The manifest.json file effectively defines what the app is rather than being the app itself.

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "id": "c4db5c50-7272-11ea-9498-3539a4c9e33d",
  "version": "0.0.1",
  "packageName": "requestteamapp",
  "developer": {
    "name": "Lee Ford",
    "websiteUrl": "https://example.com",
    "privacyUrl": "https://example.com/privacy.html",
    "termsOfUseUrl": "https://example.com/tou.html"
  },
  "name": {
    "short": "Request a Team",
    "full": "Request a Team"
  },
  "description": {
    "short": "Request a Team",
    "full": "Request a Team to be created in your organisation"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#D85028",
  "configurableTabs": [],
  "staticTabs": [
    {
      "entityId": "default-data",
      "name": "New Request",
      "contentUrl": "https://example.com/requestTeamTab/",
      "scopes": [
        "personal"
      ]
    }
  ],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "example.com"
  ],
  "webApplicationInfo": {
    "id": "c26fce65-4641-4a04-ba7c-be82b180cef1",
    "resource": "api://example.com/c26fce65-4641-4a04-ba7c-be82b180cef1"
  }
}

OK, what is a Teams app then?

You may have spotted on the JSON above there references to tabs, bots, connectors etc. and this is because a Teams app is services hosted outside of Teams. From an end users perspective this is not important, but from the perspective on wanting to create an app it is important to understand that Teams itself does not host the app.

A Teams app is effectively hosted services external to Teams.

What types of apps can I create?

There are different base components of a Teams app, which are:

  • Tabs - Effectively webpages from your hosted app embedded within Teams, these can be deployed in the following ways:
    • Personal Tabs - These tabs become part of a personal app that is not associated with a Team. This app can be found on the left hand app bar in Teams
    • Teams Tabs - These tabs appear in a Channel, just like any other Tab in a channel i.e. Power BI, OneNote
  • Bots - Built on the Microsoft Bot Framework, you can have conversations with hosted bots
  • Messaging Extensions - Allows you to surface information from your applications in to a conversation

When creating an app you are able to use any or all of the components listed above.

Great, how do I start?

Before you can get started, you need to ensure you are ready to begin. First and foremost, if you have never written a line of code before, you may struggle.

There are examples out there of ’no code’ apps, but in my opinion you at least need a solid understanding of a programming language before you proceed. Teams apps can be written in many different languages as it is connecting to your hosted service you have written. If you are new to programming, choosing a language such as JavaScript/TypeScript or C# will probably make the most sense for Teams app development.

In my experience I have found JavaScript/TypeScript to be the de-facto ‘web’ programming language, especially when looking for examples or help with Teams app development. With that in mind, this post leans in that direction.

The next step is to draw up what kind of app do you want to create:

  • What components and functionality it needs to have?
  • What are the use cases for the app?

Getting started

Once you have an idea on what type of app you want to create and how you will approach coding it, you can start to create the app…

Choose your tools

…once you’ve decided what tools you want to use. Although you could create an app from nothing, there are various tools to get you up and running quickly. I’ll cover the most commonly used tools:

App Studio

App Studio is a Teams app itself that is built in to Teams. Using App Studio you are able to create an app package by completing the various sections within App Studio. This is great if you’ve never developed an app before as you can generate a manifest pretty quickly and then explore the manifest to see how it all comes together.

Within the Manifest Editor you can specify Tabs, Bots etc. for your app - which is great if you have already developed these. However, what App Studio won’t do is help you build the Tab or the Bot.

Even if you don’t choose to build anything with App Studio, one use case you will almost certainly end up using is the ability to import/side load Teams apps in to Teams. This effectively lets you install and use Teams apps before publishing them to the ‘App Store’ - useful during development.

Yo Teams - A Yeoman Generator for Teams

I’ve already touched on the fact App Studio will generate an app package, but it will not help you create the app itself. If you are familiar with (or willing to learn) Node/JavaScript/Typescript then I recommend giving Yo Teams a try.

Yo Teams is a Teams app generator based on Yeoman. By populating a few parameters you are able to generate a basic structure (scaffolding) of a Teams app. The benefit of this is all basic dependencies such as UI, frameworks and Teams SDK are already in place, allowing you to just start building out your app.

When it comes time to ‘run’ your application (as a webservice) it will automatically create an up-to-date Teams app package that can be imported in to Teams.

SPFX (SharePoint Framework) Generator

Although SharePoint is in the name, I promise you this can be used with Teams! The SPFX generation is also based on Yeoman and it allows you populate a few parameters and it will generate the basic constructs of an SPFX app.

There are also some differences to consider when choosing a ‘standard’ Teams app or an SFPX app:

  • SPFX allows you to create a SharePoint app, Teams app or a combination of the two - use a single codebase to deploy to SharePoint and Teams
  • SPFX apps are hosted in SharePoint, removing the necessity to host your apps on webservers
  • SPFX apps are a client-side only solution, meaning that all the code is run on the client (Teams) - there is no ‘back-end’
  • SPFX takes care of SSO, without having to implement additional logic and Azure AD Applications in your app
  • SPFX supports Graph API out of the box - you can grant permissions in SharePoint admin
  • Instead of generating Teams app packages to upload to Teams, apps are generated and uploaded to a SharePoint App Catalog. From there, you are able to ‘sync’ the app to the Teams ‘App Store’

If you are familiar with SharePoint development this will more than likely the approach you will want to take.

Ultimately you can choose to create an app how you want, but I would at least recommend using either Yo Teams or SPFX Generator as a starting point, this will get your up and running pretty quickly and allow you to focus creating your app.

Getting Started

I promise you we are now ready to create our first Teams app. Follow the links below to get started on your journey to Teams app creation.