Erstellen einer neuen Teams-App

In diesem Abschnitt erfahren Sie, wie Sie mit Microsoft Visual Studio Code ein neues Microsoft Teams-Projekt erstellen.

Erstellen eines neuen Teams-Projekts mit Visual Studio Code

Sie können ein neues Teams-Projekt erstellen, indem Sie Neue App im Microsoft Teams-Toolkit erstellen auswählen. Sie können mit integrierten Teams-App-Vorlagen beginnen oder mit offiziellen Teams-App-Beispielen im Teams-Toolkit beginnen. Darüber hinaus unterstützt das Teams-Toolkit die Verwendung von Outlook-Add-In-Vorlagen, um Ihre eigenen Outlook-Add-Ins zu erstellen.

Um mit den Teams-Funktionen zu beginnen, können Sie die folgenden Arten von Teams-Apps erstellen:

App-Typen	Definition
Szenariobasierte Teams-Apps	Diese Gruppe von Vorlagen ist für bestimmte abstrahierte Geschäftsszenarien konzipiert, für die Ihre Teams-App verwendet werden kann. Beispiel: Benachrichtigungsbot, Befehlsbot, SSO-fähige Registerkarte oder Dashboard-Registerkarten-App.
Grundlegende Teams-Apps	Einfache Teams-Apps sind nur die Teams-Registerkarten, Bots oder Nachrichtenerweiterungen hello world, die Sie basierend auf Ihren Anforderungen erstellen und anpassen können.
Erweitern der Teams-App auf Microsoft 365	Diese Gruppe von Teams-Apps kann in Outlook und Office.com installiert und ausgeführt werden.

Erstellen einer neuen Teams-App

Der Prozess zum Erstellen einer neuen Teams-App ist für alle Arten von Apps ähnlich.

So erstellen Sie eine einfache Teams-App:

1. Öffnen Sie Visual Studio Code.

2. Wählen Sie das Teams-Toolkit>Neue App erstellen aus.

   

3. Wählen Sie in diesem Beispiel tab als App-Funktion aus.

   

4. Wählen Sie die Registerkarte "Basic" als App-Funktion aus.

   

5. Wählen Sie JavaScript als Programmiersprache aus.

   

6. Wählen Sie Standardordner aus, um ihren Projektstammordner am Standardspeicherort zu speichern.

   

   Erfahren Sie, wie Sie den Standardordner ändern:

   1. Wählen Sie Durchsuchen aus.

      

   2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.

      

   Der ausgewählte Ordner ist der Speicherort für Ihren Projektarbeitsbereich.

   1. Geben Sie einen geeigneten Namen für Ihre App ein, z. B. helloworld, als Anwendungsnamen. Stellen Sie sicher, dass Sie nur alphanumerische Zeichen verwenden. Drücken Sie EINGABE.

   

   Die Teams-Registerkarten-App wird in wenigen Sekunden erstellt.

   

Verzeichnisstruktur für verschiedene App-Typen

Das Teams-Toolkit bietet alle Komponenten zum Erstellen einer App. Nachdem Sie das Projekt erstellt haben, können Sie die Projektordner und Dateien im Explorer-Abschnitt anzeigen.

Verzeichnisstruktur für die einfache Teams-App

Das folgende Beispiel zeigt eine grundlegende Verzeichnisstruktur der Teams-Registerkarten-App:

Ordnername	Inhalt
.vscode	Einstellungen für VS Code zum Erstellen und Debuggen Ihrer Teams-App.
appPackage	App-Manifestdateien (früher Teams-App-Manifest genannt) und Symboldateien, die Teams verwendet haben, um Ihre Teams-App zu erkennen.
env	Speichert verschiedene Umgebungsparameter.
infra	Azure-Vorlagendateien bicep . Wird zum Bereitstellen Ihrer Teams-App in Azure verwendet.
src	Quellcode für die Registerkartenfunktion, einschließlich Ihrer Front-End-App, Ui-Komponenten und der Datenschutzhinweis, Nutzungsbedingungen,
src/app.js	Anwendungseinstiegspunkt und restify -handler für website.
src/views/hello.html	Eine HTML-Vorlage, die an den Registerkartenendpunkt gebunden wird.
src/static	Der Webserver kann statische Ressourcen wie CSS- und JavaScript-Dateien bereitstellen.
teamsapp.yml	Diese Konfigurationsdatei definiert das Verhalten des Teams-Toolkits für den Bereitstellungs-, Bereitstellungs- und Veröffentlichungslebenszyklus. Sie können diese Datei anpassen, um das Verhalten des Teams Toolkits in jedem Lebenszyklus zu ändern.
teamsapp.local.yml	Dadurch werden teamsapp.yml mit Aktionen überschrieben, die die lokale Ausführung und das Debuggen ermöglichen.

Hinweis

Wenn Sie über eine Bot- oder Nachrichtenerweiterungs-App verfügen, werden der Verzeichnisstruktur relevante Ordner hinzugefügt.

Weitere Informationen zur Verzeichnisstruktur verschiedener Typen grundlegender Teams-Apps finden Sie in der folgenden Tabelle:

App-Typ	Links
Für Registerkarten-App	Erstellen Ihrer ersten Registerkarten-App mit JavaScript
Für Bot-App	Erstellen Ihrer ersten Bot-App mit JavaScript
Für Nachrichtenerweiterungs-App	Erstellen Ihrer ersten Nachrichtenerweiterungs-App mit JavaScript

Verzeichnisstruktur für szenariobasierte Teams-App

Das folgende Beispiel zeigt eine szenariobasierte Verzeichnisstruktur des Benachrichtigungsbots Teams-App:

Der neue Projektordner enthält den folgenden Inhalt:

Ordnername	Inhalt
.vscode	Einstellungen für VS Code zum Erstellen und Debuggen Ihrer Teams-App.
appPackage	Die App-Manifestdatei und Symboldateien, die Teams verwendet haben, um Ihre Teams-App zu erkennen.
env	Speichert verschiedene Umgebungsparameter.
infra	Azure-Vorlagendateien bicep . Wird zum Bereitstellen Ihrer Teams-App in Azure verwendet.
teamsapp.yml	Diese Konfigurationsdatei definiert das Verhalten des Teams-Toolkits für den Bereitstellungs-, Bereitstellungs- und Veröffentlichungslebenszyklus. Sie können diese Datei anpassen, um das Verhalten des Teams Toolkits in jedem Lebenszyklus zu ändern.
teamsapp.local.yml	Dadurch werden teamsapp.yml mit Aktionen überschrieben, die die lokale Ausführung und das Debuggen ermöglichen.

Die Kernbenachrichtigungsimplementierung wird im Ordner src gespeichert und enthält Folgendes:

Dateiname	Inhalt
src\adaptiveCards\	Vorlagen für adaptive Karten.
src\internal\	Generierter Initialisierungscode für die Benachrichtigungsfunktionalität.
src\index.ts	Der Einstiegspunkt zum Verarbeiten von Botnachrichten und Senden von Benachrichtigungen.
.gitignore	Datei zum Ausschließen lokaler Dateien aus dem Botprojekt.
package.json	Die npm-Paketdatei für das Botprojekt.

Hinweis

Wenn Sie über einen Befehlsbot, einen Workflowbot, eine SSO-fähige Registerkarte oder eine SPFx-Registerkarten-App verfügen, werden der Verzeichnisstruktur relevante Ordner hinzugefügt.

Weitere Informationen zur Verzeichnisstruktur verschiedener Typen von szenariobasierten Teams-Apps finden Sie in der folgenden Tabelle:

App-Typ	Links
Für Benachrichtigungsbot-App	Benachrichtigung an Teams senden
Für Befehlsbot-App	Befehlsbot erstellen
Für Workflowbot-App	Erstellen eines Teams-Workflowbots
Für SPFx-Registerkarten-App	Erstellen einer Teams-App mit SPFx

Siehe auch

• Übersicht über das Teams-Toolkit
• Erstellen einer Teams-App mit Blazor
• Erstellen einer Teams-App mit C# oder .NET
• Voraussetzungen für alle Arten von Umgebung und Erstellen Ihrer Teams-App
• Vorbereiten der Erstellung von Apps mithilfe des Microsoft Teams-Toolkits