Übung: Erstellen einer Nachrichtenerweiterung

  • 10 Minuten

In dieser Übung erstellen Sie eine Nachrichtenerweiterungslösung. Sie verwenden das Teams-Toolkit in Visual Studio, um die erforderlichen Ressourcen zu erstellen und dann eine Debugsitzung zu starten und in Microsoft Teams zu testen.

Screenshot der Suchergebnisse, die von einer suchbasierten Nachrichtenerweiterung in Microsoft Teams zurückgegeben werden.

Erstellen eines Nachrichtenerweiterungsprojekts

Erstellen Sie zunächst ein neues Microsoft Teams-App-Projekt, das mit einer Nachrichtenerweiterung konfiguriert ist, die einen Suchbefehl enthält. Sie könnten zwar ein Projekt mit einer Projektvorlage für das Teams-Toolkit für Visual Studio erstellen, es müssen jedoch Änderungen am Gerüstprojekt vorgenommen werden, um dieses Modul abschließen zu können. Stattdessen verwenden Sie eine benutzerdefinierte Projektvorlage, die als NuGet-Paket verfügbar ist. Der Vorteil der Verwendung einer benutzerdefinierten Vorlage besteht darin, dass eine Lösung mit den erforderlichen Dateien und Abhängigkeiten erstellt wird, wodurch Sie Zeit sparen.

In einer PowerShell-Sitzung:

  1. Beginnen Sie mit der Installation des Vorlagenpakets aus NuGet, indem Sie Folgendes ausführen:

    dotnet new install M365Advocacy.Teams.Templates

  2. Erstellen Sie ein neues Projekt, indem Sie Folgendes ausführen:

    dotnet new teams-msgext-search --name "ProductsPlugin" `
  --internal-name "msgext-products" `
  --display-name "Contoso products" `
  --short-description "Product look up tool." `
  --full-description "Get real-time product information and share them in a conversation." `
  --command-id "Search" `
  --command-description "Find products by name" `
  --command-title "Products" `
  --parameter-name "ProductName" `
  --parameter-title "Product name" `
  --parameter-description "The name of the product as a keyword" `
  --allow-scripts Yes

  3. Warten Sie, bis das Projekt erstellt wurde.

  4. Wechseln Sie zum Projektverzeichnis, indem Sie ausführen cd ProductsPlugin.

  5. Öffnen Sie die Projektmappe in Visual Studio, indem Sie ausführen .\ProductsPlugin.sln.

Erstellen eines Dev Tunnels

Wenn der Benutzer mit Ihrer Nachrichtenerweiterung interagiert, sendet der Bot-Dienst Anforderungen an den Webdienst. Während der Entwicklung wird Ihr Webdienst lokal auf Ihrem Computer ausgeführt. Damit der Bot-Dienst Ihren Webdienst erreichen kann, müssen Sie ihn über Ihren Computer mithilfe eines Dev-Tunnels verfügbar machen.

Screenshot des Fensters

Fahren Sie in Visual Studio fort:

  1. Wählen Sie auf der Symbolleiste das Dropdownmenü neben der Schaltfläche Start aus, erweitern Sie das Menü Dev Tunnels (kein aktiver Tunnel), und wählen Sie Tunnel erstellen... aus.
  2. Geben Sie im Dialogfeld die folgenden Werte an:
    1. Konto: Wählen Sie ein Konto Ihrer Wahl aus.
    2. Name: msgext-products
    3. Tunneltyp: Temporär
    4. Zugriff: Öffentlich
  3. Erstellen Sie den Tunnel, indem Sie OK auswählen. Es wird eine Eingabeaufforderung mit dem Hinweis angezeigt, dass der neue Tunnel jetzt der aktuelle aktive Tunnel ist.
  4. Schließen Sie die Eingabeaufforderung, indem Sie OK auswählen.

Vorbereiten von Ressourcen

Wenn alles vorhanden ist, führen Sie mithilfe des Teams Toolkits den Prozess Vorbereiten von Teams-App-Abhängigkeiten aus , um die erforderlichen Ressourcen zu erstellen.

Screenshot des erweiterten Teams Toolkit-Menüs in Visual Studio.

Der Prozess Vorbereiten von Teams-App-Abhängigkeiten aktualisiert die BOT_ENDPOINT - und BOT_DOMAIN Umgebungsvariablen in der Datei TeamsApp\env\.env.local mithilfe der aktiven Dev-Tunnel-URL und führt die in der Datei TeamsApp\teamsapp.local.yml beschriebenen Aktionen aus.

Nehmen Sie sich einen Moment Zeit, um die Schritte in der teamsapp.local.yml-Datei zu untersuchen.

Fahren Sie in Visual Studio fort:

  1. Öffnen Sie das Menü Projekt (alternativ können Sie das Projekt TeamsApp im Projektmappen-Explorer mit der rechten Maustaste auswählen), erweitern Sie das Menü Teams Toolkit, und wählen Sie Teams-App-Abhängigkeiten vorbereiten aus.
  2. Melden Sie sich im Dialogfeld Microsoft 365-Konto bei einem vorhandenen Konto an, oder wählen Sie ein vorhandenes Konto für den Zugriff auf Ihren Microsoft 365-Mandanten aus, und wählen Sie dann Weiter aus.
  3. Melden Sie sich im Dialogfeld Bereitstellen an, oder wählen Sie ein vorhandenes Konto aus, das für die Bereitstellung von Ressourcen in Azure verwendet werden soll, und geben Sie die folgenden Werte an:
    1. Abonnementname: Verwenden Sie die Dropdownliste, um ein Abonnement auszuwählen.
    2. Ressourcengruppe: Wählen Sie Neu... aus, um ein Dialogfeld zu öffnen. Geben Sie im Textfeld rg-msgext-products-local ein, und wählen Sie OK aus.
    3. Region: Verwenden Sie die Dropdownliste, um die Region auszuwählen, die Ihnen am nächsten liegt.
  4. Erstellen Sie die Ressourcen in Azure, indem Sie Bereitstellen auswählen.
  5. Wählen Sie in der Teams Toolkit-Warnungsaufforderung Bereitstellen aus.
  6. Wählen Sie in der Eingabeaufforderung zum Teams-Toolkit die Option Bereitgestellte Ressourcen anzeigen aus, um ein neues Browserfenster zu öffnen.

Nehmen Sie sich einen Moment Zeit, um die in Azure erstellten Ressourcen zu erkunden und auch die Umgebungsvariablen anzuzeigen, die in der Datei .env.local erstellt wurden.

Hinweis

Wenn Sie Visual Studio schließen und erneut öffnen, ändert sich die Dev-Tunnel-URL und wird nicht mehr als aktiver Tunnel ausgewählt. In diesem Fall müssen Sie den Tunnel erneut auswählen und den Prozess Vorbereiten von Teams-App-Abhängigkeiten ausführen, um die aktualisierte URL im App-Manifest widerzuspiegeln.

Ausführen und Debuggen

Teams Toolkit verwendet Startprofile mit mehreren Projekten. Zum Ausführen des Projekts müssen Sie eine Vorschaufunktion in Visual Studio aktivieren.

In Visual Studio:

  1. Öffnen Sie das Menü Extras , und wählen Sie Optionen... aus.
  2. Geben Sie im Suchfeld mehrere Projekte ein.
  3. Wählen Sie unter Umgebungdie Option Vorschaufeatures aus.
  4. Aktivieren Sie das Kontrollkästchen neben Startprofile für mehrere Projekte aktivieren , und wählen Sie OK aus, um Ihre Änderungen zu speichern.

Standardmäßig öffnet Visual Studio ein Browserfenster mit Ihrem Microsoft Edge-Hauptprofil. Wenn Sie sich beim Vorbereiten von Teams-App-Abhängigkeiten für die Verwendung eines Microsoft 365-Kontos entschieden haben, das sich von dem Konto unterscheidet, das Sie in Ihrem Hauptprofil verwenden, empfiehlt es sich, Visual Studio so zu konfigurieren, dass ein Browserfenster gestartet wird, das ein bestimmtes Microsoft Edge-Profil verwendet. Dadurch wird sichergestellt, dass beim Testen Ihrer App das richtige Konto und der richtige Microsoft 365-Mandant verwendet werden.

So konfigurieren Sie Visual Studio für die Verwendung eines bestimmten Microsoft Edge-Profils:

In Microsoft Edge:

  1. Wechseln Sie zu dem Profil, das Sie verwenden möchten, oder erstellen Sie ein neues Profil.
  2. Navigieren Sie zu edge://version , und notieren Sie sich den ProfilePath-Wert . Wenn der Profilpfad C:\Users\user\AppData\Local\Microsoft\Edge\User Data\Profile1 lautet, ist Profil 1 der Verzeichnisname des Profils.
  3. Kopieren Sie den Verzeichnisnamen des Profils, z. B. Profil 1.

In Visual Studio:

  1. Wählen Sie auf der Symbolleiste das Dropdownmenü neben der Schaltfläche Start aus, und wählen Sie Durchsuchen mit... aus.

  2. Wählen Sie Hinzufügen... aus.

  3. Geben Sie im Dialogfeld Programm hinzufügen die folgenden Werte an:

    1. Programm: C:\Programme (x86)\Microsoft\Edge\Application\msedge.exe
    2. Argumente: --profile-directory="Profile 1", wobei Profil 1 durch den Verzeichnisnamen des Profils ersetzt wird, das Sie verwenden möchten.
    3. Anzeigename: Microsoft Edge (Profilname), wobei Profilname durch den Namen des Profils ersetzt wird, das Sie verwenden möchten.

  4. Wählen Sie OK aus.

  5. Wählen Sie Als Standard festlegen und dann Abbrechen aus.

So starten Sie eine Debugsitzung und installieren die App in Microsoft Teams:

  1. Drücken Sie F5, oder wählen Sie auf der Symbolleiste Start aus.
  2. Warten Sie, bis ein Browserfenster geöffnet wird und das Dialogfeld für die App-Installation im Microsoft Teams-Webclient angezeigt wird. Wenn Sie dazu aufgefordert werden, geben Sie die Anmeldeinformationen Ihres Microsoft 365-Kontos ein.
  3. Wählen Sie im Dialogfeld „App-Installation“ Hinzufügen aus

So testen Sie die Nachrichtenerweiterung:

  1. Öffnen Sie einen neuen oder vorhandenen Microsoft Teams-Chat
  2. Wählen Sie im Nachrichtenerstellungsbereich aus + , um die App-Auswahl zu öffnen.
  3. Wählen Sie in der Liste der Apps Contoso-Produkte aus, um die Nachrichtenerweiterung zu öffnen
  4. Geben Sie im Textfeld hello ein.
  5. Warten, bis die Suchergebnisse angezeigt werden
  6. Wählen Sie in der Ergebnisliste Hello aus, um eine Karte in das Feld zum Verfassen von Nachrichten einzubetten.

Screenshot der Suchergebnisse, die von einer suchbasierten Nachrichtenerweiterung in Microsoft Teams zurückgegeben werden.

Kehren Sie zu Visual Studio zurück, und wählen Sie auf der Symbolleiste Beenden aus, oder drücken Sie UMSCHALT + F5 , um die Debugsitzung zu beenden.