Erstellen einer Nachrichtenerweiterungs-App

Eine Nachrichtenerweiterung ermöglicht Benutzern die Interaktion mit Ihrem Webdienst über Schaltflächen und Formulare im Microsoft Teams-Client. Benutzer können in einem externen System über den Nachrichtenbereich „Verfassen“, das Befehlsfeld oder direkt aus einer Nachricht heraus suchen oder Aktionen starten. Sie können die Ergebnisse dieser Interaktion in Form einer detailreich formatierten Karte an den Teams-Client zurücksenden.

Der Screenshot zeigt die konzeptionelle Nachrichtenerweiterung im Teams-Client.

In diesem Tutorial lernen Sie, eine suchbasierte Nachrichtenerweiterungs-App zu erstellen, mit der Benutzer npm-Pakete aus dem Verzeichnis Node Paket-Manager (npm) durchsuchen können.

Machen Sie sich mit der suchbasierten Nachrichtenerweiterungs-App auf eine der folgenden Arten vertraut:

  • GitHub-Codespaces: Mit der Codespace-instance können Sie eine Teams-App sofort erleben. Es öffnet Visual Studio Code (VS Code), wo die Microsoft 365 Agents Toolkit-Erweiterung (früher als Teams Toolkit bezeichnet), der App-Quellcode und alle Abhängigkeiten für Sie vorverpackt sind.
  • Schritt-für-Schritt-Handbuch: Ermöglicht es Ihnen, Ihre Entwicklungsumgebung einzurichten und eine Teams-App von Anfang an zu erstellen.

Stellen Sie vor dem Erstellen des Codespaces sicher, dass die folgenden Voraussetzungen erfüllt sind:

Tipp

GitHub Codespaces bietet einen kostenlosen Plan bis zu einer festen Nutzungsmenge pro Monat. Wenn Sie mehr Speicherplatz freigeben müssen, wechseln Sie zu github.com/codespaces , und löschen Sie die Codespaces, die Sie nicht mehr benötigen.

Führen Sie die folgenden Schritte aus, um eine suchbasierte Nachrichtenerweiterungs-App mit GitHub Codespaces zu erstellen:

  1. Wählen Sie die folgende Schaltfläche aus, um GitHub-Codespaces zu öffnen.

    Nachrichtenerweiterung in GitHub-Codespaces öffnen

    Möglicherweise werden Sie aufgefordert, sich bei einem GitHub-Konto anzumelden, falls Sie dies noch nicht getan haben.

  2. Wähle Neuen Codebereich erstellen aus.

    Der Screenshot zeigt die GitHub-Seite zum Erstellen eines Codespaces für die Nachrichtenerweiterung.

    Die Seite Codespace wird eingerichtet" wird angezeigt.

    Screenshot: Codespace, der die Nachrichtenerweiterung erstellt.

    Agents Toolkit bereitet die Nachrichtenerweiterung für Sie vor und öffnet sie in VS Code im Browser. Das Symbol "Microsoft 365 Agents Toolkit" wird in der Aktivitätsleiste von VS Code angezeigt.

  3. Wählen Sie "Bei Microsoft 365 anmelden" und "Bei Azure anmelden" aus, um sich mit Ihrem Microsoft 365-Konto anzumelden.

    Der Screenshot zeigt das Fenster

    Hinweis

    Wenn Sie Ihre App erstellen, lädt GitHub Codespaces sie in einem neuen Tab in den Teams-Client. Wenn Ihr Browser Popupregisterkarten oder Fenster blockiert, müssen Sie Popups zulassen, damit Ihre App geöffnet werden kann.

  4. Wählen Sie Vorschau Ihrer Teams-App anzeigen (F5), um Ihre Nachrichtenerweiterung zu erstellen.

    Der Screenshot zeigt das Agents Toolkit-Fenster im Browser mit Ihrer Nachrichtenerweiterung.

    GitHub Codespaces erstellt Ihre Nachrichtenerweiterungs-App, lädt sie in den Teams-Client und öffnet sie in einer separaten Browserregisterkarte.

  5. Wählen Sie "Hinzufügen" aus, um Ihre Nachrichtenerweiterung in Teams zu installieren.

    Screenshot des Dialogfelds mit den App-Details zum Hinzufügen der Nachrichtenerweiterungs-App in Teams.

  6. Wählen Sie "Öffnen " aus, um die App im persönlichen Bereich zu öffnen.

    Screenshot des Dialogfelds zur Bereichsauswahl, um die App im persönlichen Bereich zu öffnen.

    Sie haben die suchbasierte Nachrichtenerweiterung erfolgreich erstellt und in den Teams-Client geladen.

    Der Screenshot zeigt Ihre Nachrichtenerweiterung, die im Teams-Client geladen ist.

Weitere Informationen zu Nachrichtenerweiterungen finden Sie unter Nachrichtenerweiterungen.

Wenn Sie an einem Bot interessiert sind, wählen Sie Folgendes aus:

Wenn Sie eine einfache Registerkarten-App erstellen möchten, wählen Sie Folgendes aus:

Nächster Schritt

Siehe auch

npm-Verzeichnis