Teams-App-Testtool zum Debuggen des KI-Chatbots - Teams

Starten Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer Teams KI-Chatbot-App, und debuggen Sie sie mit dem Teams App-Testtool (Testtool). Mit dem Testtool können Sie botbasierte Apps mühelos debuggen. Sie benötigen kein Microsoft 365-Entwicklerkonto, Tunneling oder eine Teams-App- und Bot-Registrierung, um das Testtool verwenden zu können.

Sie können mit Ihrem Bot chatten und die Nachrichten und adaptiven Karten so anzeigen, wie sie in Teams angezeigt werden. Sie können auch eine Aktivität im Testtool mithilfe von Aktivitätstriggern simulieren.

Hinweis

Das Teams App-Testtool ist nur in Teams Toolkit v5.4.0 verfügbar.
Das Teams App-Testtool wird nur für Desktop- und Webclients unterstützt.

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen eines KI-Chatbots mithilfe des Teams Toolkits und beim Debuggen mit dem Testtool. Nach Abschluss dieses Leitfadens wird die folgende Ausgabe angezeigt, in der der Benutzer auf den KI-Chat-Bot zugreifen und diesen verwenden kann:

Voraussetzungen

6 Minuten verbleibend

Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.

Installieren	Zum Benutzen...
Visual Studio Code oder Visual Studio	JavaScript-, TypeScript- oder C#-Buildumgebungen. Verwenden Sie die neueste Version.
Teams Toolkit	Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie Teams Toolkit v5.4.0. Weitere Informationen finden Sie unter Installieren des Teams-Toolkits.
Node.js	Back-End-JavaScript-Laufzeitumgebung. Weitere Informationen finden Sie unter Node.js Versionskompatibilitätstabelle für den Projekttyp.
OpenAI oder Azure OpenAI	Erstellen Sie zunächst Ihren OpenAI-API-Schlüssel, um das GPT von OpenAI zu verwenden. Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, müssen Sie einen Azure OpenAI-Dienst erstellen.
Microsoft Edge (empfohlen) oder Google Chrome	Ein Browser mit Entwicklertools.

Erstellen eines Projektarbeitsbereichs für Ihre KI-Chat-Bot-App

5 Minuten verbleibend

Lassen Sie uns Ihre KI-Chat-Bot-App erstellen.

Die Botfunktion einer Teams-App erstellt einen Chatbot oder einen Konversationsbot. Es kommuniziert mit einem Webdienst und erleichtert die Nutzung seiner Dienste. Der Bot kann einfache, automatisierte Aufgaben wie die Bereitstellung von Kundendienst ausführen. Sie können Wettervorhersagen erhalten, Reservierungen vornehmen oder andere Dienste, die mithilfe eines Konversationsbots angeboten werden.

Screenshot: App mit drei Features Bot ist hervorgehoben.

Da Sie sich bereits auf die Erstellung dieser Apps vorbereitet haben, können Sie ein neues Teams-Projekt zum Erstellen der KI-Chatbot-App einrichten. In diesem Tutorial erfahren Sie Folgendes:

Erstellen Sie Ihren Botprojektarbeitsbereich.
Machen Sie sich einen Überblick über den Quellcode der Bot-App.

Erstellen Ihres Arbeitsbereichs für bot-Projekte

Wenn die Voraussetzungen erfüllt sind, fangen wir an!

Öffnen Sie Visual Studio Code.
Wählen Sie das Symbol Teams Toolkit in der Visual Studio Code-Aktivitätsleiste aus.
Wählen Sie Neue App erstellen aus.
Wählen Sie Bot aus.
Wählen Sie AI Chat Bot aus. Wenn Sie eine andere Funktionalität für Ihren Bot benötigen, wählen Sie die erforderliche Option aus.
Wählen Sie JavaScript aus.
Wählen Sie Standardordneraus.

Führen Sie die folgenden Schritte aus, um den Standardspeicherort zu ändern:
1. Wählen Sie Durchsuchen aus.
2. Wählen Sie den Speicherort für den Projektarbeitsbereich aus.
3. Wählen Sie Ordner auswählen aus.
4. Geben Sie einen geeigneten Namen für Ihre App ein, und drücken Sie dann die EINGABETASTE .
  
  Es wird ein Dialogfeld angezeigt, in dem Sie ja oder nein auswählen müssen, um den Autoren der Dateien in diesem Ordner zu vertrauen.
  
  Nun haben Sie erfolgreich ihren Ki-Chat-Bot-Projektarbeitsbereich erstellt.

Machen Sie einen Überblick über den Quellcode der Bot-App

Nachdem Sie das Gerüst erstellt haben, erkunden Sie die Projektverzeichnisse und -dateien im Explorer-Abschnitt von Visual Studio Code.

Screenshot: Struktur des Teams Toolkit-Beispielbotordners

Ordner- oder Dateiname	Inhalt
`env/.env.testtool`	Die Konfigurationsdatei mit Umgebungsvariablen, die an Git committet werden können.
`env/.env.testtool.user`	Die Konfigurationsdatei mit Umgebungsvariablen, einschließlich Anmeldeinformationen, die standardmäßig nicht an Git committet werden.
`appPackage`	App-Manifestvorlagendateien und App-Symbole (color.png und outline.png).
`appPackage/manifest.json`	App-Manifest zum Ausführen der App in einer lokalen und Remoteumgebung.
`src/app.js`	Verarbeitet Geschäftslogiken für den KI-Chatbot.
`teamsapp.yml`	Dies ist die Hauptprojektdatei des Teams-Toolkits. Die Projektdatei definiert zwei Hauptbegriffe: Eigenschaften und Konfigurations- und Phasendefinitionen.
`teamsapp.local.yml`	Dies wird mit Aktionen überschrieben `teamsapp.yml` , die die lokale Ausführung und das Debuggen ermöglichen.
`teamsapp.testtool.yml`	Dies überschreibt `teamsapp.yml` Aktionen, die die lokale Ausführung und das Debuggen im Testtool ermöglichen.

Erstellen und Ausführen Ihrer KI-Chat-Bot-App

4 Minuten verbleibend

Nachdem Sie Ihren Projektarbeitsbereich mit dem Teams Toolkit eingerichtet haben, erstellen Sie Ihr KI-Chatbotprojekt.

Erstellen eines Open KI-Schlüssels und -Endpunkts für Ihren KI-Chat-Bot

Navigieren Sie zum Azure-Portal.
Wählen Sie Ressource erstellen aus, und suchen Sie nach Azure Open AI.
Wählen Sie Azure Open AI und dann Erstellen aus.
Geben Sie die erforderlichen Details ein, und wählen Sie Weiter aus.
Wählen Sie Alle Netzwerke, einschließlich des Internets, können auf diese Ressource zugreifen aus, und wählen Sie dann Weiter aus.
Geben Sie die erforderlichen Details ein, und wählen Sie Weiter aus.
Wählen Sie Erstellen aus.

Sie haben erfolgreich Schlüssel und Endpunkt für Ihren KI-Chat-Bot erstellt.

Hinweis

Sie können auch den OpenAI-API-Schlüssel abrufen, um Ihren KI-Chat-Bot zu debuggen. Weitere Informationen finden Sie unter Einrichten Ihres API-Schlüssels.

Abrufen von Azure Open AI-Schlüsseln und -Endpunkten

Wählen Sie Zu Ressourcen wechseln aus.
Wählen Sie im linken Bereich Schlüssel und Endpunkt aus, und kopieren Sie den SCHLÜSSEL und den Endpunkt. Sie können entweder KEY 1 oder KEY 2 kopieren.

Speichern Sie den SCHLÜSSEL und den Endpunkt zur weiteren Verwendung.
Wählen Sie im linken Bereich Modellbereitstellungen und dann Bereitstellungen verwalten aus.

Das Fenster Azure Open AI Studio wird angezeigt.
Wählen Sie im linken Bereich Bereitstellungen und dann + Neue Bereitstellungen erstellen aus.
Wählen Sie die folgenden Details aus:
1. Wählen Sie gpt-35-turbo aus der Dropdownliste Modell auswählen aus.
  
  Hinweis
  
  Für den KI-Chat-Bot wird nur das gpt-35-turbo-Modell unterstützt.
2. Wählen Sie 0301 (Standard) aus der Dropdownliste Modellversion aus.
3. Geben Sie Bereitstellungsname ein , und wählen Sie Erstellen aus.
Kopieren Und speichern Sie den Bereitstellungsnamen zur weiteren Verwendung.

Aktualisieren von Azure Open AI-Schlüsseln und -Endpunkten

Öffnen Sie Ihr Projekt in Visual Studio Code.
Wechseln Sie unter EXPLORER zur Datei env.env.testtool.user>.

Geben Sie Ihre SECRET_AZURE_OPENAI_API_KEY und SECRET_AZURE_OPENAI_ENDPOINT ein.

...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

Wechseln Sie zu src>app.js Datei.
Kommentieren Sie den OpenAI Code aus, und heben Sie die Auskommentierung des Codes auf Azure OpenAI .

Geben Sie den Namen Ihrer Azure Open AI-Bereitstellung in ein azureDefaultDeployment.

...
// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,
...

Debuggen und Ausführen Ihrer KI-Chatbot-App

Wählen Sie im linken Bereich AUSFÜHREN und DEBUGGEN (STRG+UMSCHALT+D) und dann in der Dropdownliste Debuggen im Testtool (Vorschau) aus.
Das Testtool öffnet Ihren KI-Chat-Bot auf einer Webseite.

Aktivitätstrigger

3 Minuten verbleibend

Sie können eine Aktivität im Testtool mithilfe von Aktivitätstriggern simulieren. Es gibt zwei Arten von Aktivitätstriggern:

Vordefinierte Aktivitätstrigger
Benutzerdefinierte Aktivitätstrigger

Vordefinierte Aktivitätstrigger

Das Testtool stellt vordefinierte Aktivitätstrigger zum Testen der Funktionen Ihres Bots bereit.

Kategorie	Aktivität	Handler
Auslösen der Updateaktivität für die Installation	Installieren des Bots Deinstallieren des Bots	`onInstallationUpdate` `onInstallationUpdateAdded` `onInstallationUpdate` `onInstallationUpdateRemove`
Auslösen der Konversationsaktualisierungsaktivität	Benutzer hinzufügen Bot hinzufügen Kanal hinzufügen	`onMembersAdded` `onTeamsMembersAddedEvent` `onMembersAdded` `onTeamsMembersAddedEvent` `onTeamsChannelCreatedEvent`
	Entfernen eines Benutzers Bot entfernen Kanal entfernen Team entfernen	`onMembersRemoved` `onTeamsMembersRemovedEvent` `onMembersRemoved` `onTeamsMembersRemovedEvent` `onTeamsChannelDeletedEvent` `onTeamsTeamDeletedEvent`
	Kanal umbenennen Team umbenennen	`onTeamsChannelRenamedEvent` `onTeamsTeamRenamedEvent`

Hinweis

Nicht alle Arten von Aktivitäten sind in allen Bereichen verfügbar. Sie können z. B. keinen Kanal in einem persönlichen Chat oder einem Gruppenchat hinzufügen oder entfernen.

Vordefinierte Aktivitätstrigger sind im Testtool im Menü Aktivität simulieren verfügbar.

Führen Sie die folgenden Schritte aus, um eine Benutzer hinzufügen-Aktivität zu simulieren:

Wechseln Sie im Testtool zu Simulieren einer Aktivität>Benutzer hinzufügen.

Ein Dialogfeld wird angezeigt, um eine Vorschau des Aktivitätshandlers anzuzeigen.
Wählen Sie Aktivität senden aus.

Der Bot sendet die folgende Antwort:

Benutzerdefinierte Aktivitätstrigger

Sie können die benutzerdefinierte Aktivität verwenden, um Aktivitätstrigger anzupassen, reactionsAdded um beispielsweise die Anforderungen Ihrer Bot-App zu erfüllen. Das Testtool füllt automatisch die erforderlichen Eigenschaften der Aktivität auf. Sie können auch den Aktivitätstyp ändern und weitere Eigenschaften hinzufügen.

Wählen SieBenutzerdefinierte Aktivität>simulieren aus.

Fügen Sie hinzu messageReaction , um die Aktivität unter der type -Eigenschaft anzupassen:

{
  "type": "messageReaction",
  "reactionsAdded": [
    {
      "type": "like"
    }
  ],
  "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
}

Wählen Sie Aktivität senden aus.

Der Bot sendet als Antwort einen onReactionsAdded Handler.

Abschließen der Herausforderung

2 Minuten verbleibend

Haben Sie eine ausgabe wie diese?

Herzlichen Glückwunsch!

100 % abgeschlossen!

Sie haben erfolgreich eine KI-Chatbot-App erstellt. Nun haben Sie gelernt, ihre KI-Chat-Bot-App im Teams App Test Tool zu debuggen.

Freigeben über

Debuggen Ihres KI-Chatbots mit dem Teams App Test Tool