Teams-Apps entwickeln: Eine Einführung für Einsteiger

Von Mirko Peters · 2026-05-19 · Aktualisiert 2026-09-13

Erfahren Sie, wie Sie Microsoft Teams-Apps entwickeln, mit einem Überblick über Registerkarten, Bots, Erweiterungen, Projekteinrichtung, lokale Tests, UI-Anpassung und die Veröffentlichung Ihrer App.

Automatisch mit KI aus dem Originalbeitrag übersetzt. Englisches Original lesen

Mit eigenen Apps für Microsoft Teams heben Sie die digitale Arbeitsumgebung Ihres Teams auf die nächste Stufe. Statt sich nur auf die Standardfunktionen zu verlassen, ergänzen Sie Teams um eigene Werkzeuge, interaktive Dashboards, Bots und vieles mehr – direkt dort, wo die Menschen ohnehin zusammenarbeiten. Für Organisationen bedeutet das reibungslosere Arbeitsabläufe, Zeitersparnis und eine Teams-Umgebung, die genau auf Ihre Anforderungen zugeschnitten ist.

In diesem Leitfaden lernen Sie die Grundlagen der Teams-App-Entwicklung kennen, von den Kernkonzepten bis zur praktischen Einrichtung. Wir erklären, was das Teams Toolkit ist, warum Microsoft 365 dabei eine zentrale Rolle spielt, und stellen wichtige Begriffe wie Registerkarten, Bots, Erweiterungen und Konnektoren vor. Am Ende wissen Sie, was möglich ist, und sind bereit, maßgeschneiderte Lösungen für Ihr Team in Microsoft Teams zu entwickeln.

Einstieg in Teams Toolkit-Apps und die Entwicklungsumgebung

Wenn Sie mit der Entwicklung von Apps für Microsoft Teams beginnen, machen die richtige Toolkit-Wahl und eine saubere Arbeitsumgebung einen großen Unterschied. Das Teams Toolkit ist Ihr wichtigstes Werkzeug: Es führt alle Komponenten zusammen und lässt sich direkt in Visual Studio Code integrieren. Dort finden Sie alles an einer Stelle, um Teams-Apps zu entwerfen, zu entwickeln, zu testen und bereitzustellen. Das macht die Arbeit deutlich einfacher und deutlich produktiver.

Wenn Sie neu einsteigen, müssen Sie mit dem Teams Toolkit in Visual Studio Code nicht zwischen mehreren Programmen wechseln oder sich komplizierte Befehlszeilenschritte merken. Vorlagen, Einstellungen und sogar lokale Tests sind direkt griffbereit. Diese Einrichtung ist auf Tempo, Wiederholbarkeit und den Abbau typischer Hürden für Einsteiger ausgelegt.

Bevor Sie mit dem Toolkit loslegen, sollten Sie einige Voraussetzungen abhaken: die richtige Software installieren, mit einem Microsoft 365-Testmandanten arbeiten und sicherstellen, dass Sie die nötigen Berechtigungen besitzen. So vermeiden Sie, mitten im Projekt auf unüberwindbare Hindernisse zu stoßen. Sobald Ihre Umgebung bereit ist, verläuft der Weg von der Projekterstellung bis zur Veröffentlichung Ihrer fertigen App deutlich reibungsloser. Wir gehen all diese Details durch, damit Sie ohne Umwege starten können.

Voraussetzungen und Überlegungen zu Microsoft 365 im Überblick

• Visual Studio Code und Teams Toolkit-Erweiterung: Installieren Sie zuerst Visual Studio Code und fügen Sie anschließend die Teams Toolkit-Erweiterung hinzu. Sie ist Ihr zentraler Arbeitsbereich für die Entwicklung von Teams-Apps.
• Node.js und verwandte Tools: Viele Teams-Apps basieren auf JavaScript oder TypeScript. Installieren Sie daher Node.js (LTS-Version), um Abhängigkeiten zu verwalten und Skripte auszuführen.
• Microsoft 365-Entwicklerkonto: Richten Sie einen Microsoft 365-Testmandanten ein. So können Sie Apps sicher erstellen, testen und in der Vorschau anzeigen, ohne Ihre produktive Organisationsumgebung zu beeinträchtigen.
• Berechtigungen und Administratorzugriff: Stellen Sie sicher, dass Sie im Testmandanten Administratorrechte oder Entwicklungsberechtigungen besitzen. Einige Funktionen, etwa Bots oder Datenkonnektoren, erfordern erweiterten Zugriff.
• Internetzugang und Browser: Eine stabile Internetverbindung ist nötig, um Code zu synchronisieren, Vorschauen auszuführen und sich bei Cloud-Diensten zu authentifizieren. Außerdem benötigen Sie einen aktuellen Browser für den Zugriff auf Teams und die Vorschauportale für Apps.

Teams-App-Typen und ihre Funktionen verstehen

Nicht alle Teams-Apps sind gleich aufgebaut. Microsoft Teams unterstützt mehrere App-Typen, die jeweils eigene Stärken haben und auf bestimmte Szenarien zugeschnitten sind. Die wichtigsten sind Registerkarten, Bots, Nachrichtenerweiterungen und Konnektoren. Wenn Sie den passenden Typ wählen, passt Ihre Lösung optimal in die Arbeitsabläufe Ihres Teams und spart Ihnen später Zeit und Verwirrung.

Tabs werden als eingebettete Web-Apps direkt in einem Teams-Kanal oder -Chat angezeigt. Denken Sie an Dashboards, Berichte oder Formulare, die Benutzer verwenden müssen, ohne Teams zu verlassen. Bots sind eine Art Gesprächshelfer: Sie beantworten Fragen, geben Erinnerungen aus oder führen Sie Schritt für Schritt durch einen Prozess. Wenn Sie es aktionsorientierter wünschen, ermöglichen Nachrichtenerweiterungen Benutzern, über die Nachrichtenleiste mit Ihrer App zu interagieren, etwa um Datensätze zu suchen, Links zu teilen oder Aktionen von überall in Teams auszulösen. Lohnend ist auch der ausführliche Beitrag zu Nachrichtenerweiterungen in Teams, der zeigt, wie diese die Produktivität steigern und Aufgaben vereinfachen.

Dann gibt es noch Connectoren, die automatisch Updates oder Warnmeldungen aus anderen Systemen in einen Teams-Kanal senden. Warnmeldungen von GitHub oder Trello können beispielsweise direkt in Teams erscheinen, sodass alle auf dem Laufenden bleiben, ohne die Tabs zu wechseln. Entscheidend ist, zu verstehen, welcher Typ zu Ihrem Bedarf passt und wann er sinnvoll ist. Bots eignen sich hervorragend für Automatisierung und Dialog, Tabs für die vertiefte Interaktion, Nachrichtenerweiterungen bringen Daten in Chats und Connectoren halten Ihr Team automatisch auf dem neuesten Stand. Kluge Entscheidungen an dieser Stelle helfen Ihnen, das richtige Werkzeug für die Aufgabe zu bauen und nicht einfach irgendein Werkzeug.

Ein neues Teams Toolkit-App-Projekt in Visual Studio Code starten

Sobald Ihre Entwicklertools eingerichtet sind, beginnt die eigentliche Arbeit in Visual Studio Code mit dem Teams Toolkit. Es ist Ihr Startpunkt für das erste Teams-App-Projekt. Geführte Abfragen helfen Ihnen, den gewünschten App-Typ auszuwählen (etwa einen Tab oder einen Bot), und aus einsatzbereiten Vorlagen zu wählen, die Ihren Einstieg beschleunigen.

Betrachten Sie die Auswahl der Vorlage als Wahl eines Bauplans. Entwickeln Sie ein Dashboard, einen Dialog-Bot oder etwas, das Daten abruft und im Chat teilt? Das Teams Toolkit bietet passende Ausgangspunkte für all diese Szenarien. Die Einrichtung besteht nicht nur aus dem Ausfüllen von Formularen: Sie legen hier fest, was Ihre App tun soll und welche Teams-Funktionen sie nutzen wird.

Sobald die Initialisierung des Projekts abgeschlossen ist, erscheinen in Ihrem Arbeitsbereich eine bestimmte Ordnerstruktur und mehrere Dateien, die jeweils eine andere Aufgabe haben: Einige verwalten den Code, andere definieren Einstellungen und wieder andere steuern die Bereitstellung. Wenn Sie frühzeitig wissen, welche Rolle jeder Teil spielt, vermeiden Sie Verwirrung und behalten den Überblick, während das Projekt wächst. Als Nächstes erläutern wir, was jeder Ordner und jede Datei leistet, damit Sie nicht im Unklaren bleiben.

Projektstruktur und Verzeichnisaufbau verstehen

• src-Verzeichnis: Hier liegt die gesamte Kernlogik Ihrer App und der UI-Code. Ob Sie einen Bot oder einen Tab entwickeln: Ihre TypeScript- oder JavaScript-Dateien schreiben und organisieren Sie in diesem Verzeichnis.
• env-Ordner: Enthält umgebungsspezifische Konfigurationsdateien, etwa Variablen für Entwicklung und Produktion. Damit verwalten Sie Einstellungen, ohne Geheimnisse fest im Code zu hinterlegen.
• infrastructure- bzw. infra-Ordner: Enthält Skripte und Vorlagen für Azure-Ressourcen oder andere Anforderungen der Bereitstellung. Er wird benötigt, wenn Ihre App Cloud-Dienste bereitstellt.
• App-Manifest-Ordner: Hier definieren Sie das Manifest Ihrer App mit Symbolen, App-Namen, Beschreibungen und Berechtigungen. Es bestimmt, wie Teams Ihre App erkennt und installiert.
• README.md und docs: Diese Dateien enthalten Dokumentation, Anleitungen oder Notizen, die Ihnen und Ihren Teamkollegen helfen, Einrichtung und Zweck des Projekts auf einen Blick zu verstehen.

Ihre Teams Toolkit-App mit ngrok lokal in der Vorschau testen

Bevor Sie Ihre Teams-App der gesamten Organisation bereitstellen, sollten Sie sie live testen, so wie Ihre Benutzer sie sehen würden. Das Teams Toolkit übernimmt dabei viele Aufgaben, aber da Microsoft Teams ein Cloud-Dienst ist, reicht es nicht aus, einen lokalen Webserver zu öffnen und auf ein reibungsloses Funktionieren zu hoffen. Hier kommt ngrok ins Spiel.

ngrok richtet einen sicheren Tunnel vom öffentlichen Internet zu Ihrem lokalen Rechner ein. Dadurch ist Ihre Teams-App (ob Tab, Bot oder Nachrichtenerweiterung) für Microsoft Teams erreichbar, obwohl sie auf Ihrem eigenen Computer läuft. Das Teams Toolkit ist in ngrok integriert, sodass die Einrichtung mit nur wenigen Klicks erledigt ist und Sie sich nicht mit Firewalls oder Netzwerkproblemen herumschlagen müssen.

Wenn Sie mit dem Toolkit und ngrok lokal eine Vorschau anzeigen, erhalten Sie direkt in der Teams-Oberfläche sofortiges Feedback darüber, was funktioniert und was korrigiert werden muss. Wenn Sie ein Problem entdecken, passen Sie den Code an und laden neu – so einfach ist das. Diese Feedbackschleife verkürzt die Zeit vom Entwickeln bis zu echten Ergebnissen. Das ist entscheidend, wenn Sie Fehler beheben oder die Benutzererfahrung vor dem Launch verfeinern. Die lokale Vorschau in Teams hilft Ihnen, alles richtig zu machen, bevor Sie Ihrem gesamten Team die App zeigen.

Ihre Teams Toolkit-App anpassen: Verbesserungen für UI und Daten

Sobald die Grundlagen sitzen und Ihre App läuft, wird es Zeit, sie zu Ihrer eigenen zu machen. Eine Teams-App anzupassen bedeutet mehr, als Farben zu ändern oder ein Logo einzufügen. Es geht darum, die Benutzeroberfläche so zu verfeinern, dass Benutzer Ihre Marke wiedererkennen und die Werkzeuge zu den Anforderungen Ihres Teams passen. Sie können mit dem Aktualisieren der App-Titel, dem Anpassen der Hintergründe in der Galerie oder dem Austausch von Symbolen beginnen, damit sie zur Identität Ihrer Organisation passen.

Doch es geht nicht nur um das Aussehen. Die Anbindung Ihrer App an echte Daten kann sie von einer Demo zu einem unverzichtbaren Arbeitswerkzeug machen. Vielleicht soll Ihre App Informationen aus einer Tabelle übernehmen, Zeilen in einer Tabelle verwalten oder über benutzerdefinierte API-Aufrufe mit einem Backend verbunden werden. Diese Erweiterungen geben Ihnen die Kontrolle darüber, was Ihre App anzeigt und wie Benutzer täglich mit ihr interagieren.

Wenn Sie die Benutzeroberfläche anpassen oder Datentabellen einrichten, sollten Sie die Benutzerfreundlichkeit im Blick behalten. Klar strukturierte Formulare, hilfreiche Beschriftungen und interaktive Karten bewirken hier viel. Weitere Ideen, wie Sie die Interaktivität in Teams steigern, finden Sie in unserem Beitrag zu interaktiven Adaptive Cards in Teams. Wenn Sie die Anpassung von Benachrichtigungen verbessern und Benutzer auf dem Laufenden halten möchten, lohnt sich dieser Leitfaden zu intelligenteren Teams-Benachrichtigungen und Adaptive Cards. Als Nächstes zeigen wir Ihnen, wie Sie App-Titel, Hintergründe und manuelle Datenverbindungen anpassen, um Ihre App noch professioneller und nützlicher zu machen.

App-Titel und Galerie-Hintergrund aktualisieren

• App-Titel ändern: Öffnen Sie die Manifestdatei und passen Sie den Anzeigenamen der App an das Branding Ihrer Organisation oder Ihres Projekts an.
• Hintergrundbild in der Galerie austauschen: Ersetzen Sie den Standardhintergrund durch ein individuelles Bild, das den Stil oder die Farbwelt Ihres Teams widerspiegelt.
• App-Symbole aktualisieren: Laden Sie quadratische und umrissene Symbole für die Teams-Galerien hoch. So hebt sich Ihre App in der Liste der Teams-Apps optisch ab.

Daten manuell verbinden und Tabellen verwalten

• Datenquellen anbinden: Verbinden Sie Ihre App manuell mit einer Datenbank, einer Excel-Datei oder einem API-Endpunkt. Hinterlegen Sie dazu in der Konfiguration der App einfach die richtige Quelle.
• Tabellen erstellen und ändern: Richten Sie neue Tabellen ein und fügen Sie Spalten für Benutzerinformationen, Status oder benutzerdefinierte Felder hinzu, die Ihre App benötigt.
• Zeilen hinzufügen oder bearbeiten: Erfassen Sie Beispieldaten, passen Sie Werte an oder lassen Sie Benutzer Informationen dynamisch eingeben. So bleiben die Inhalte Ihrer App aktuell und nützlich.

Einheitliches Benutzererlebnis mit Fluent UI und Adaptive Cards gestalten

Eine gute Teams-App funktioniert nicht nur, sie wirkt und fühlt sich in der Microsoft-Teams-Umgebung auch richtig an. Fluent UI bietet Ihnen eine Sammlung barrierefreier Open-Source-UI-Komponenten, die zum Stil von Teams passen. Mit Fluent UI können Sie Formularfelder, Schaltflächen, Listen und Layouts erstellen, die für Ihre Endbenutzer selbstverständlich wirken, ohne dass Sie bei null anfangen müssen.

Adaptive Cards sind ein weiterer wichtiger Baustein. Es handelt sich um einfach zu gestaltende, interaktive Karten, die in Chats, Registerkarten oder Nachrichtenerweiterungen angezeigt werden. Sie ermöglichen es, Benutzereingaben zu erfassen, dynamische Inhalte darzustellen oder Workflow-Auslöser zu erstellen, und das alles in einer flexiblen, kartenbasierten Oberfläche. Wenn Sie die UI-Richtlinien von Teams befolgen, sind alle Elemente touchfreundlich und barrierefrei, unabhängig vom Gerät.

Bewährte UX-Praktiken in Teams setzen auf Klarheit und Geschwindigkeit: Beschriften Sie Schaltflächen eindeutig, gruppieren Sie zusammengehörige Informationen und überladen Sie Ihre Karten nicht mit Details. Responsives Design sorgt dafür, dass sich Ihre App an Web, Desktop und Mobilgeräte anpasst. Für Entwickler und Power-Platform-Profis, die sich mit Adaptive Cards und Automatisierung vertraut machen möchten, bietet dieser Leitfaden zum Erstellen interaktiver Teams-Adaptive-Cards viele Workflows und praktische JSON-Beispiele.

Kurz gesagt: Wenn Sie bei Fluent UI und Adaptive Cards bleiben, wirkt Ihre App wie fest integriert und vertrauenswürdig. Das hält Nutzer bei der Stange, verringert Verwirrung und erhöht die Chance, dass Ihre App zu einer täglichen Gewohnheit wird und nicht nur zu einem weiteren ignorierten Tab.

Anpassen und Veröffentlichen Ihrer Teams Toolkit-App

Sobald Ihre Teams-App richtig aussieht und sich richtig verhält, ist es Zeit, sie vom Entwicklungsarbeitsplatz in die restliche Organisation zu bringen. Der Veröffentlichungsprozess beginnt mit der Anpassung Ihrer Teams Toolkit-App. Letzte Feinabstimmungen an Manifestdateien, Berechtigungen und Branding stellen sicher, dass Ihre App die Erwartungen Ihres Teams erfüllt und die organisatorischen Prüfungen besteht.

Beim Paketieren Ihrer App werden alle Dateien, Bilder und der Code in ein Format gebracht, das Teams versteht. Prüfen Sie Ihr Manifest noch einmal auf erforderliche Symbole, Datenschutzerklärungen und die Berechtigungen, die Ihre App anfordert. Sicherheit ist besonders wichtig: Apps müssen die organisatorischen Vorgaben und die Standards von Microsoft 365 erfüllen, bevor sie in Teams installiert werden können.

Der Teams Toolkit führt Sie durch die Übermittlung Ihrer App an den App-Katalog Ihres Microsoft 365-Mandanten oder, für umfassendere Rollouts, an den Teams App Store (vorbehaltlich der Überprüfung durch Microsoft). Möglicherweise ist eine Genehmigung durch den Administrator erforderlich, bevor alle das neue Tool nutzen können. Auch die Bereitstellung, also das Einrichten der benötigten Cloud-Ressourcen für Ihre App, erfolgt in dieser Phase. So ist sichergestellt, dass Ihre App für echte Nutzer bereit ist, sobald sie installiert wird.

Ein erfolgreicher Rollout besteht aus mehr als dem Hochladen einer Datei. Testen Sie gründlich, kommunizieren Sie Änderungen und überwachen Sie nach der Veröffentlichung mögliche Probleme, damit Ihr Team die Vorteile ohne Unterbrechung nutzen kann.

Lernressourcen und nächste Schritte für Teams-App-Entwickler

Ihr erstes Microsoft Teams-App-Projekt abzuschließen ist ein großer Erfolg. Wenn Sie Ihre Fähigkeiten weiter ausbauen möchten, stehen Ihnen zahlreiche Ressourcen und Communities zur Verfügung, die Sie gerne unterstützen. Beginnen Sie mit der offiziellen Microsoft-Dokumentation. Sie wird häufig aktualisiert und enthält Beispielcode und Praxisszenarien, sodass Sie nie im Dunkeln tappen.

Tutorials und Videoanleitungen können Ihre Lernkurve verkürzen. Suchen Sie nach Schritt-für-Schritt-Anleitungen wie diesem Leitfaden zur Projektorganisation in Teams mit SharePoint und Power Automate. Er hilft Ihnen, strukturiertere und automatisierte Teams-Lösungen zu entwickeln, wenn Ihre Apps komplexer werden. Eine geordnete Arbeitsweise und das Wissen, wie sich Automatisierung in Teams einfügt, heben Sie von anderen ab.

Community-Foren und Diskussionsgruppen sind wahre Fundgruben für praktische Ratschläge. Vernetzen Sie sich mit anderen Entwicklern, teilen Sie Feedback und stellen Sie Fragen. Die Community für Teams-App-Entwickler ist aktiv und offen, egal ob Sie Einsteiger sind oder mit fortgeschrittenen Integrationen skalieren. Für Governance und bewährte Verfahren kann Ihnen diese Ressource zu Teams-Governance helfen, Compliance und Sicherheit zu verstehen, wenn Ihre Lösungen die nächste Reifestufe erreichen.

Erwägen Sie anschließend, Zertifizierungen zu erwerben, um Ihre Kompetenz in der Entwicklung von Teams-Apps nachzuweisen, oder sich in fortgeschrittene Szenarien wie Bots, Automatisierung und Sicherheit zu vertiefen. Mit der richtigen Mischung aus Lernen und Community-Engagement werden Sie auch lange nach der Veröffentlichung Ihrer ersten App weiterkommen.