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:
Öffnen Sie Visual Studio Code.
Wählen Sie das Teams-Toolkit>Neue App erstellen aus.
Wählen Sie in diesem Beispiel tab als App-Funktion aus.
Wählen Sie die Registerkarte "Basic" als App-Funktion aus.
Wählen Sie JavaScript als Programmiersprache aus.
Wählen Sie Standardordner aus, um ihren Projektstammordner am Standardspeicherort zu speichern.
Erfahren Sie, wie Sie den Standardordner ändern:
Wählen Sie Durchsuchen aus.
Wählen Sie den Speicherort für den Projektarbeitsbereich aus.
Der ausgewählte Ordner ist der Speicherort für Ihren Projektarbeitsbereich.
- 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 express -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 |