Erstellen von Apps mit dem Teams Toolkit und Visual Studio Code

Das Teams Toolkit für Visual Studio Code hilft Entwicklern beim Erstellen und Bereitstellen Teams Apps mit integrierter Identität, Zugriff auf Cloudspeicher, Daten von Microsoft Graph und anderen Diensten in Azure und M365 mit einem Nullkonfigurationsansatz für die Entwicklerumgebung.

Sie können das Toolkit auch mit Visual Studio oder als CLI teamsfx (genannt) verwenden.

Installieren des Teams Toolkits für Visual Studio Code

  1. Öffnen Sie Visual Studio Code.
  2. Wählen Sie die Erweiterungsansicht (STRG+UMSCHALT+X / ⌘⇧-X oder Ansicht > Erweiterungen) aus.
  3. Geben Sie in das Suchfeld Teams Toolkit ein.
  4. Klicken Sie auf die grüne Installationsschaltfläche neben dem Teams Toolkit.

Sie finden auch das Teams Toolkit auf dem Visual Studio Code Marketplace.

Die folgenden Tools werden von der Visual Studio Code-Erweiterung installiert, wenn sie benötigt werden. Wenn sie bereits installiert ist, wird stattdessen die installierte Version verwendet. Wenn Sie Linux (einschließlich WSL) verwenden, müssen Sie diese Tools vor der Verwendung installieren:

  • Azure Functions Core Tools

    Azure Functions Core Tools wird verwendet, um alle Back-End-Komponenten während einer lokalen Debugausführung lokal auszuführen, einschließlich der Authentifizierungshilfsprogramme, die beim Ausführen Ihrer Dienste in Azure erforderlich sind. Sie wird mithilfe des npm im Projektverzeichnis devDependencies installiert.

  • .NET SDK

    Das .NET SDK wird verwendet, um angepasste Bindungen für lokales Debuggen und Azure Functions-App-Bereitstellungen zu installieren. Wenn Sie das .NET 3.1- oder höher-SDK nicht global installiert haben, wird die portierbare Version installiert.

  • ngrok

    Einige Teams App-Features (Unterhaltungs-Bots, Messaging-Erweiterungen und eingehende Webhooks) erfordern eingehende Verbindungen. Sie müssen Ihr Entwicklungssystem für Teams über einen Tunnel verfügbar machen. Für Apps, die nur Registerkarten enthalten, ist kein Tunnel erforderlich. Dieses Paket wird im Projektverzeichnis installiert (mit devDependencies npm).

Verwenden des Teams-Toolkits für Visual Studio Code

Einrichten eines neuen Teams Projekts

Das Teams Toolkit kann React Apps erstellen, die in Azure gehostet werden, oder SPFx Webparts, die in Ihrer M365 SharePoint-Umgebung gehostet werden. So erstellen Sie eine neue React-App, die in Azure gehostet werden soll:

  1. Öffnen Sie Visual Studio Code.

  2. Öffnen Sie das Microsoft Teams-Toolkit, indem Sie auf das Microsoft Teams-Symbol in der Randleiste klicken:

    Das Microsoft Teams-Symbol in der Visual Studio Code-Randleiste.

  3. Klicken Sie auf Neues Projekt erstellen.

    Ort des Links „Neues Projekt erstellen“ in der Randleiste des Microsoft Teams-Toolkits.

  4. Wählen Sie Neue Microsoft Teams-App erstellen aus.

    Starten des Assistenten für „Neues Projekt erstellen“

  5. Im Schritt "Funktionen auswählen" ist die Registerkartenfunktion bereits ausgewählt. Sie können optional auch Bot- und Messaging-Erweiterung auswählen. Drücken Sie OK.

    Screenshot, der zeigt, wie Ihrer neuen App Funktionen hinzufügt werden können.

  6. Wählen Sie im Schritt Frontend-Hostingtyp die Option Azure aus.

    Screenshot, der zeigt, wie das Hosting für Ihre neue App ausgewählt wird.

  7. Wählen Sie optional im Schritt "Cloudressourcen" Cloudressourcen aus, die Ihre Anwendung verwendet. Sie können den CRUD-Zugriff (Erstellen, Lesen, Aktualisieren und Löschen) auf eine SQL Tabelle oder eine API auswählen:

    Screenshot, der zeigt, wie Cloudressourcen für Ihre neue App hinzugefügt werden.

  8. Im Schritt "Programmiersprache" können Sie JavaScript oder TypeScript auswählen:

    Screenshot, der zeigt, wie die Programmiersprache ausgewählt wird.

  9. Wählen Sie einen Arbeitsbereichsordner aus. Ein Ordner wird in Ihrem Arbeitsbereichsordner für das Projekt erstellt, das Sie erstellen.

  10. Geben Sie einen passenden Namen für Ihre App ein, wie z. B. helloworld. Der Name der App darf nur aus alphanumerischen Zeichen bestehen. Drücken Sie die EINGABETASTE, um fortzufahren.

Ihre Teams-App wird innerhalb weniger Sekunden erstellt. Die Gerüst-App enthält Code zum Behandeln des einmaligen Anmeldens mit Azure Active Directory und zugriff auf die Microsoft-Graph. Wenn Sie Azure-Ressourcen ausgewählt haben, ist auch der Code für diese Ressourcen verfügbar.

Eine exemplarische Vorgehensweise zum SPFx Erstellungs- und Veröffentlichungsprozess finden Sie im SPFx Lernprogramm.

Konfigurieren Sie die App

Im Kern umfasst die Teams App drei Komponenten:

  1. Der Microsoft Teams Client (Web, Desktop oder Mobil), auf dem Benutzer mit Ihrer App interagieren.

  2. Ein Server, der auf Anforderungen für Inhalte reagiert, die in Teams angezeigt werden. Beispiel: HTML-Registerkarteninhalt oder eine adaptive Bot-Karte.

  3. Ein Teams-App-Paket besteht aus drei Dateien:

    • Die manifest.jsaktiviert.
    • Ein Farbsymbol für Ihre App, das im öffentlichen App- oder Organisations-App-Katalog angezeigt werden soll.
    • Ein Gliederungssymbol für die Anzeige auf der Teams Aktivitätsleiste.

Das Manifest und die Symbole werden im .fx Ordner Ihres Projekts gespeichert, bevor sie in Teams hochgeladen werden. Wenn eine App installiert ist, analysiert der Teams-Client die Manifestdatei, um die erforderlichen Informationen wie den Namen Ihrer App und die URL zu ermitteln, unter der sich die Dienste befinden.

  1. Navigieren Sie zum Konfigurieren Ihrer App zur Registerkarte Teams Toolkit in Visual Studio Code.
  2. Wählen Sie im Abschnitt Project den Manifest-Editor aus.

Durch das Bearbeiten der Felder auf der Seite "App-Details" wird der Inhalt der manifest.jsin der Datei aktualisiert, die letztendlich als Teil des App-Pakets ausgeliefert wird.

Lokales Installieren und Ausführen der App

So erstellen Sie Ihre App und führen sie lokal aus:

  1. Drücken Sie in Visual Studio Code F5, um die Anwendung im Debugmodus auszuführen.

    Wenn Sie die App zum ersten Mal ausführen, werden alle Abhängigkeiten heruntergeladen und die App wird erstellt. Wenn die Erstellung abgeschlossen ist, wird automatisch ein Browserfenster geöffnet. Dies kann 3 bis 5 Minuten dauern.

    Das Toolkit fordert Sie auf, bei Bedarf ein lokales Zertifikat zu installieren. Mit diesem Zertifikat kann Microsoft Teams Ihre Anwendung von https://localhost laden. Wählen Sie "Ja" aus, wenn das folgende Dialogfenster angezeigt wird:

    Screenshot mit Dialogfenster zum Installieren eines SSL-Zertifikats, damit Microsoft Teams Ihre Anwendung von localhost laden kann.

  2. Ihr Webbrowser wird gestartet, um die Anwendung auszuführen. Wenn Sie zum Öffnen von Microsoft Teams aufgefordert werden, wählen Sie „Abbrechen“ aus, um im Browser zu verbleiben. Möglicherweise werden Sie auch aufgefordert, zu anderen Zeiten zur Teams-Anwendung zu wechseln. Wählen Sie in diesem Fall die Web-App aus.

    Screenshot, der zeigt, wie die Web-Version von Microsoft Teams beim Start ausgewählt wird.

  3. Möglicherweise werden Sie aufgefordert, sich anzumelden. Melden Sie sich in diesem Fall mit Ihrem M365-Konto an.

  4. Wenn Sie aufgefordert werden, die App in Microsoft Teams zu installieren, drücken Sie Hinzufügen.

Sowohl das Back-End als auch der Frontend sind in den Visual Studio Code Debugger eingebunden. Auf diese Weise können Sie haltepunkte an einer beliebigen Stelle im Code festlegen und den Status überprüfen. Sie können auch alle Front-End-Debuggingtools (z. B. die React Developer Tools) im Browser verwenden. Weitere Informationen zum Debuggen in Visual Studio Code, lesen Sie die Dokumentation.

Veröffentlichen Ihrer App in Teams

Bevor sie von anderen Personen verwendet werden kann, müssen Sie Ihre App für Teams im Entwicklerportal veröffentlichen.

  1. Navigieren Sie zum Veröffentlichen Ihrer App zur Registerkarte Teams Toolkit in Visual Studio Code.
  2. Wählen Sie im Abschnitt Project in Teams veröffentlichen aus.

Wenn Sie Azure-Hosting verwenden, müssen Sie die Cloud bereitgestellt und bereitgestellt haben. Eine exemplarische Vorgehensweise zum SPFx Veröffentlichungsprozess finden Sie im SPFx Lernprogramm.

Nächster Schritt