Explore tools and code samples

Artikkeli
11/28/2024

You've built your first tab app, interactive notification bot, and message extension. You can build a Teams app as per your app's requirements. Based on factors such as business needs, development environment, and domain knowledge, select the environment and tools to build your app.

A Teams app offers you the flexibility of choosing your build environment. It includes tools, framework, and languages to approach your app development. Build your Teams app in the environment that's best suited for your app. You can even select a combination. For example, you can use Teams Toolkit to build an app with JavaScript and host it on a SharePoint site.

This section takes you through the various options for building your Teams app.

Teams collaborative platform
Tools and SDKs
Teams app tutorials and code samples

Teams collaborative platform

As a collaborative platform for building apps, Teams offers the full range of apps and tools. Teams platform supports your app development at every stage from planning to distributing it.

You can use various tools and services to build your app. Following is an example development flow.

Plan your project and figure out the requirement.
Design your app. Use Teams UI Kit and Fluent UI React components for designing tabs UI.
Build your app with JavaScript using Teams Toolkit.
Extend functionality by adding more Teams capabilities, send activity feed notifications, and use Microsoft 365 data with Microsoft Graph.
Test the app on a developer tenant with sample user data.
Deploy the app to Azure.
Manage and publish the app to Microsoft Teams Store with Developer Portal. Monetize your app with options, such as SaaS offers, in-app purchases, and more.

Tools and SDKs

You can build your Microsoft Teams app with the help of the following tools and SDKs.

To start building your Teams app, you can select the tools and SDKs based on your app requirements.

App capabilities: You can choose a single or a combination of capabilities based on your app requirements.
SDKs you need: For example, if you're building AI capability for your bot app, you select Teams AI library.
UI Components: Choose the UI components to design your app based on your app capability.
Languages: Choose the language in which you want to build your app.
Recommended Tools: Choose the tools based on the language that you've selected. You can also use the Teams Developer Portal to manage and publish your app. The Teams Toolkit and Yo Teams allows you to build your app with JavaScript and TypeScript or with C# in Visual Studio Code (VS Code) or Visual Studio.

App capabilities	User interactions	Recommended tools	SDKs	Languages
Tabs	A full-screen embedded web experience.	VS Code or Visual Studio with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI	Teams JavaScript client library for UI functionalities, SharePoint Framework (SPFx), and Microsoft Graph SDK	C#, TypeScript, and JavaScript (including React)
Bots	A chat bot that converses with members.	VS Code or Visual Studio with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI	TeamsFx SDK, Bot Framework SDK, Teams AI library, and Microsoft Graph SDK	C#, TypeScript, and JavaScript
Message extensions	Shortcuts for inserting external content into a conversation or taking action on messages.	VS Code or Visual Studio with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI	TeamsFx SDK, Bot Framework SDK, Teams AI library, and Microsoft Graph SDK	C#, TypeScript, and JavaScript

Note

Meeting and calls can deliver a user experience for enabling collaboration, partnership, informed communication, and shared feedback. For more information, see apps for Teams meetings and calls.
You can also use languages, such as Node.js, Java, Python, and Web technology like HTML and CSS to build your Teams app.

Example scenario: If you want to build a social media dashboard app that sends notifications using TypeScript, consider the following scenario:

Explore SDKs

You can also create and build your Teams app with various SDKs. Teams supports all the SDKs shown in the following image and you can choose SDKs based on your requirements:

Explore Tools

The following tools in the Teams platform help you during app development:

App development phase	Teams platform tools
Design	Teams UI kit and Fluent UI React components
Build	Teams Toolkit, Tools and SDKs, and Microsoft Graph
Test, deploy, and publish	Microsoft Entra ID and Developer Portal
Distribute	Partner Center and Teams Store

Teams app tutorials and code samples

You can build your own Microsoft Teams app with different capabilities using the following tutorials and code samples.

Teams app tutorials

To start building your Teams app, use the following languages or frameworks and prepare your development environment.

	Tab	Bot	Message extension
Basic app	• Build your first tab app using JavaScript • Build your first app using C# • Build your first app with SPFx	Build your first bot app using JavaScript	Build your first message extension app using JavaScript
Scenario-based app	NA	• Build notification bot with JavaScript • Build command bot with JavaScript • Create Teams workflow bot	NA

Code samples

Code samples are designed to help you understand and build your own Teams app with different capabilities and scenarios. To learn more about the code samples, see Microsoft Teams samples.

Jaa