Erstellen eines benutzerdefinierten Engine-Agents mithilfe der Teams KI-Bibliothek und des Teams Toolkits

Sie können einen benutzerdefinierten Engine-Agent für Microsoft Teams erstellen, um präzise Kontrolle über Lichtvorgänge zu erhalten. Dies zeigt die Effektivität des Sprachmodells beim genauen Verstehen und Ausführen von Benutzerabsichten und deren Ausrichtung an App-Aktionen.

In diesem Tutorial erfahren Sie Folgendes:

Einrichten eines neuen Projekts mit dem Teams-Toolkit.
Importieren von Ki-Bibliotheksfunktionen von Teams.
Hier erfahren Sie, wie Sie Ihren benutzerdefinierten Engine-Agent in Teams bereitstellen und leichte Vorgänge steuern.

Die folgende Ausgabe wird angezeigt:

Screenshot: Beispiel für das Chatfenster auf dem lokalen Computer

Voraussetzungen

5 Minuten verbleibend

Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihres benutzerdefinierten Engine-Agents benötigen.

	Installieren	Zum Benutzen...
	Teams Toolkit	Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version.
	Microsoft Teams	Um mit allen zusammenzuarbeiten, arbeiten Sie mit Apps für Chats, Besprechungen und Anrufe an einem Ort.
	Node.js	Back-End-JavaScript-Laufzeitumgebung. Weitere Informationen finden Sie unter Node.js Versionskompatibilitätstabelle für den Projekttyp.
	Microsoft Edge (empfohlen) oder Google Chrome	Ein Browser mit Entwicklertools.
	Visual Studio Code	JavaScript-, TypeScript- und Python-Buildumgebungen. Verwenden Sie die neueste Version.
	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 Microsoft Azure zugreifen möchten, müssen Sie zunächst einen Azure OpenAI-Dienst erstellen.
	Microsoft 365-Entwicklerkonto	Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.

Vorbereiten der Entwicklungsumgebung

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Installieren des Teams-Toolkits

Teams Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App, veröffentlichen im Teams Store und vieles mehr.

Sie können das Toolkit mit Visual Studio Code verwenden. Sie können auch die CLI (Befehlszeilenschnittstelle) verwenden, die als bezeichnet wird teamsapp.

Visual Studio Code
Befehlszeile

Öffnen Sie Visual Studio Code, und wählen Sie die Ansicht Erweiterungen aus (STRG+UMSCHALT+X / ⌘⇧-X oder Erweiterungen anzeigen>).
Geben Sie im Suchfeld Teams Toolkit ein.
Wählen Sie neben dem Teams Toolkit die Option Installieren aus.

Das Symbol Teams Toolkit wird in der Visual Studio Code-Aktivitätsleiste angezeigt, nachdem es installiert wurde.

Sie finden das Teams Toolkit auch im Visual Studio Code Marketplace.

Verwenden Sie den Paket-Manager, um die npm Teamsapp-CLI zu installieren:

npm install -g @microsoft/teamsapp-cli

Abhängig von Ihrer Konfiguration müssen Sie möglicherweise verwenden sudo , um die CLI zu installieren:

sudo npm install -g --unsafe-perm @microsoft/teamsapp-cli

Diese Bedingung tritt häufiger auf Linux- und macOS-Systemen auf.

Stellen Sie sicher, dass Sie dem Pfad den globalen npm-Cache hinzufügen. Dieser Schritt wird normalerweise als Teil des Node.js-Installationsprogramms ausgeführt.

Sie können die CLI mit dem teamsapp Befehl verwenden. Überprüfen Sie, ob der Befehl funktioniert, indem Sie ausführen teamsapp -h.

Achtung

Bevor Sie Teamsapp in PowerShell-Terminals ausführen können, müssen Sie die Ausführungsrichtlinie "Remotesigniert" für PowerShell aktivieren.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder ein Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Überprüfen auf benutzerdefinierte App-Uploadoption

Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Hinweis

Ein benutzerdefinierter App-Upload ist für die Vorschau und das Testen von Apps in der lokalen Teams-Umgebung erforderlich. Wenn sie nicht aktiviert ist, können Sie Ihre App in der lokalen Teams-Umgebung nicht in der Vorschau anzeigen und testen.

Verfügen Sie bereits über einen Mandanten und über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies wirklich tun!

Überprüfen Sie, ob Sie eine benutzerdefinierte App in Teams hochladen können:

Wählen Sie im Teams-Client das Symbol Apps aus.
Wählen Sie Verwalten Ihrer Apps aus.
Wählen Sie App hochladen aus.
Suchen Sie nach der Option Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

Hinweis

Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

Gehen Sie zu Microsoft 365-Entwicklerprogramm.
Wählen Sie Jetzt beitreten aus, und folgen Sie den Anweisungen auf dem Bildschirm.
Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.
Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.
Melden Sie sich bei Teams mit dem Administratorkonto an, das Sie gerade eingerichtet haben. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Abrufen eines kostenlosen Azure-Kontos

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Jetzt verfügen Sie über alle Tools zum Einrichten Ihres Kontos. Die Entwicklungsumgebung kann mit dem Erstellen des App-Projekts beginnen.

Erstellen eines Projektarbeitsbereichs für Ihre benutzerdefinierte Engine-Agent-App

4 Minuten verbleibend

Lassen Sie uns Ihre erste benutzerdefinierte Engine-Agent-App erstellen.

Die Benutzerdefinierte Engine-Agent-Funktion einer Teams-App erstellt einen KI-Chatbot. Sie verwenden es, um einfache und automatisierte Aufgaben auszuführen, z. B. die Bereitstellung von Kundendienst. Ein benutzerdefinierter Engine-Agent kommuniziert mit einem Webdienst und hilft Ihnen bei der Verwendung seiner Angebote. Mit dem benutzerdefinierten Engine-Agent können Sie Wettervorhersagen erhalten, Reservierungen vornehmen oder andere Dienste anbieten.

Da Sie sich bereits auf die Erstellung der App oder des benutzerdefinierten Engine-Agents vorbereitet haben, können Sie ein neues Teams-Projekt zum Erstellen des benutzerdefinierten Engine-Agents einrichten.

In diesem Tutorial erfahren Sie Folgendes:

Hier erfahren Sie, wie Sie ein neues Projekt für einen benutzerdefinierten Engine-Agent mit dem Teams-Toolkit einrichten.
Informationen zur Verzeichnisstruktur Ihres App-Projekts.

Erstellen des Projektarbeitsbereichs für den benutzerdefinierten Engine-Agent

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

Visual Studio Code
Befehlszeile

Ö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 erstellenaus.
Wählen Sie Benutzerdefinierter Engine-Agent aus.
Wählen Sie Grundlegende KI-Chatbots aus.
Wählen Sie TypeScript als Programmiersprache aus.
Wählen Sie OpenAI oder Azure OpenAI aus.
Geben Sie OpenAI-Schlüssel oder Azure OpenAI-Schlüssel und Azure OpenAI-Endpunkt ein.
Wählen Sie Standardordner aus, um ihren Projektstammordner am Standardspeicherort zu speichern.

Sie können den Standardspeicherort auch mithilfe der folgenden Schritte ä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.
Geben Sie einen geeigneten Namen für Ihre App ein, und drücken Sie dann die EINGABETASTE.

Ein Dialogfeld wird angezeigt. Wählen Sie Ja, ich vertraue den Autoren oder Nein, ich vertraue den Autoren nicht basierend auf Ihren Anforderungen aus.

Ihr benutzerdefinierter Engine-Agent wird in wenigen Sekunden erstellt.

Nachdem Ihre App erstellt wurde, zeigt das Teams-Toolkit die folgende Meldung an:

Eine kurze Zusammenfassung der Erstellung einer Teams-App.

Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-App an.

Erstellen einer Teams-App

Verwenden Sie die teamsapp-CLI zum Erstellen Ihres ersten Projekts. Beginnen Sie in dem Ordner, in dem Sie den Projektordner erstellen möchten.

teamsapp new

Sie können die CLI verwenden, um eine neue Teams-App zu erstellen. Die CLI führt Sie durch eine Reihe von Fragen. Jede Frage enthält eine Anweisung zur Beantwortung.

Verwenden Sie beispielsweise Pfeiltasten, um eine Option auszuwählen. Nachdem Sie die Auswahl getroffen haben, drücken Sie die EINGABETASTE , um dies zu bestätigen.

Wählen Sie Neue Microsoft Teams-App erstellen aus.
Wählen Sie Bot aus, und deaktivieren Sie die Tabulatortaste.
Wählen Sie JavaScript als Programmiersprache aus.
Drücken Sie die EINGABETASTE , um den Standardarbeitsbereichsordner auszuwählen.
Geben Sie einen passenden Namen für Ihre App ein, wie z. B. HelloBot. Der Name der App darf nur aus alphanumerischen Zeichen bestehen.

Nachdem Sie alle Fragen beantwortet haben, wird Ihr Projekt erstellt.

Machen Sie sich einen Überblick über den Quellcode der App

Nachdem das Gerüst erstellt wurde, zeigen Sie die Projektverzeichnisse und -dateien im bereich Explorer von Visual Studio Code an.

Screenshot: Struktur des Teams Toolkit-Beispielbotordners

Ordnername	Inhalt
`env/.env.local.user`	Konfigurationsdatei für die lokale Umgebung, die von `teamsapp.yml` zum Anpassen der Bereitstellungs- und Bereitstellungsregeln verwendet wird.
`index.ts`	Haupteinstiegspunkt für die App.
`teamsBot.ts`	Teams-Aktivitätshandler.
`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.
`config.ts`	`config.ts` umschließt den Zugriff auf Umgebungsvariablen, die zum Einrichten des Bots-Adapters verwendet werden.
`teamsapp.yml`	Dies ist das Standard Teams Toolkit-Projekt, das Eigenschaften und Konfigurationsphasendefinitionen definiert.
`teamsapp.local.yml`	Dadurch werden teamsapp.yml mit Aktionen überschrieben, die die lokale Ausführung und das Debuggen ermöglichen.

Erstellen und Ausführen Ihres ersten benutzerdefinierten Engine-Agents

3 Minuten verbleibend

Nachdem Sie Ihren Projektarbeitsbereich mit dem Teams Toolkit eingerichtet haben, erstellen Sie Ihr Projekt. Stellen Sie sicher, dass Sie sich bei Ihrem Microsoft 365-Konto angemeldet haben.

Verwenden Sie dieses Konto, um sich bei Teams anzumelden. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, ist das Administratorkonto, das Sie bei der Registrierung eingerichtet haben, Ihr Microsoft 365-Konto.

Visual Studio Code
Befehlszeile

Öffnen Sie Visual Studio Code.
Wählen Sie auf der Randleiste das Symbol Teams Toolkit aus.
Wählen Sie Bei M365 anmelden aus.

Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.
Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Microsoft 365-Konto an.
Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.
Kehren Sie zu Teams Toolkit in Visual Studio Code zurück.

Verwenden Sie dieses Konto, um sich bei Teams anzumelden. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, ist das Administratorkonto, das Sie bei der Registrierung eingerichtet haben, Ihr Microsoft 365-Konto.

Jetzt können Sie die App erstellen und lokal ausführen!

Melden Sie sich mit der Teamsapp CLI bei Microsoft 365 an:
```
teamsapp account login m365
```
Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können. Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Azure-Konto an. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden.
Melden Sie sich mit der Teamsapp-CLI bei Azure an:
```
teamsapp account login azure
```
Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können. Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Azure-Konto an. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden.

Die Kontoanmeldungen werden von Visual Studio Code und der Teamsapp CLI gemeinsam genutzt.

Nachdem die Entwicklungsumgebung konfiguriert wurde, können Sie Ihre erste Teams-App erstellen, erstellen und bereitstellen.

Aktualisieren Ihres benutzerdefinierten Engine-Agents mit Teams KI-Bibliotheksfunktionen

Teams Toolkit ist die einfachste Möglichkeit, ein Gerüst zu erstellen und einen benutzerdefinierten Engine-Agent auszuführen. Teams Toolkit erstellt die grundlegende Struktur für die ersten Schritte mit der Konfiguration Ihres benutzerdefinierten Engine-Agents.

Beginnen wir mit dem Konfigurieren der Ki-Bibliotheksfunktionen von Teams:

Wechseln Sie zu Visual Studio Code, und öffnen Sie ein Terminalfenster.
Führen Sie den folgenden Befehl im Terminal aus, um zu installieren yarn:
```
npm install
npm install @microsoft/teams-ai
```
Hinweis

Wenn Sie das Beispiel über das Teams-Toolkit erstellen, finden Sie die .env.local.user Datei im Setup, die automatisch erstellt wird. Wenn die Datei nicht verfügbar ist, erstellen Sie die .env.local.user Datei, und aktualisieren Sie den OpenAI-Schlüssel, den Azure OpenAI-Schlüssel und den Azure OpenAI-Endpunkt.

Wechseln Sie zur app.ts Datei:

Fügen Sie TurnContext der import-Anweisung wie folgt hinzu:


import { MemoryStorage, TurnContext} from 'botbuilder';

Fügen Sie DefaultConversationState, Memory, TurnState der "@microsoft/teams-ai" import-Anweisung wie folgt hinzu:

     // See https://aka.ms/teams-ai-library to learn more about the Teams AI library.
     import { Application, ActionPlanner, DefaultConversationState, Memory, TurnState, OpenAIModel, PromptManager } from "@microsoft/teams-ai";

Fügen Sie nach "@microsoft/teams-ai" Folgendes hinzu:

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface ConversationState extends DefaultConversationState {
  lightsOn: boolean;
}
type ApplicationTurnState = TurnState<ConversationState>;

if (!process.env.OPENAI_API_KEY) {
throw new Error('Missing environment variables - please check that OPENAI_KEY or AZURE_OPENAI_KEY is set.');
}

Fügen Sie nach Define storage and application codeFolgendes hinzu:

// Define a prompt function for getting the current status of the lights
planner.prompts.addFunction('getLightStatus', async (context: TurnContext, memory: Memory) => {
return memory.getValue('conversation.lightsOn') ? 'on' : 'off';
});

Fügen Sie nach return memory.getValue('conversation.lightsOn') ? 'on' : 'off';Folgendes hinzu:

// Register action handlers
app.ai.action('LightsOn', async (context: TurnContext, state: ApplicationTurnState) => {
    state.conversation.lightsOn = true;
    await context.sendActivity(`[lights on]`);
    return `the lights are now on`;
});

app.ai.action('LightsOff', async (context: TurnContext, state: ApplicationTurnState) => {
    state.conversation.lightsOn = false;
    await context.sendActivity(`[lights off]`);
    return `the lights are now off`;
});

interface PauseParameters {
    time: number;
}

app.ai.action('Pause', async (context: TurnContext, state: ApplicationTurnState, parameters: PauseParameters) => {
    await context.sendActivity(`[pausing for ${parameters.time / 1000} seconds]`);
    await new Promise((resolve) => setTimeout(resolve, parameters.time));
    return `done pausing`;
});

Wechseln Sie zur adapter.ts Datei:

Entfernen Sie unter Import required bot services.den vorhandenen Code, und aktualisieren Sie Folgendes:

// Import required bot services.
// See https://aka.ms/bot-services to learn more about the different parts of a bot.
import { TeamsAdapter } from '@microsoft/teams-ai';
import { ConfigurationServiceClientCredentialFactory } from 'botbuilder';

Entfernen Sie den folgenden Code unter This bot's main dialog.:

// This bot's main dialog.
import config from "./config";

const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(
{},
new ConfigurationServiceClientCredentialFactory(config)
);

Ersetzen Sie nach import { ConfigurationServiceClientCredentialFactory } from 'botbuilder';den Code unter Create adapter. durch Folgendes:

// Create adapter.
// See https://aka.ms/about-bot-adapter to learn more about how bots work.
const adapter = new TeamsAdapter(
    {},
    new ConfigurationServiceClientCredentialFactory({
        MicrosoftAppId: process.env.BOT_ID,
        MicrosoftAppPassword: process.env.BOT_PASSWORD,
        MicrosoftAppType: 'MultiTenant'
    })
);

Wechseln Sie zur index.ts Datei:

Create HTTP server. console.log( Nach dem Start\nBots fügen ${server.name}, die ${server.url}); lauschen, Folgendes hinzu:

console.log('\nGet Bot Framework Emulator: https://aka.ms/botframework-emulator');
console.log('\nTo test your bot in Teams, sideload the app manifest.json within Teams Apps.');

Erstellen Sie im Stammordner eine neue Ordnerstruktur: eingabeaufforderungssequenz>.
Erstellen Sie unter Sequenz die folgenden Dateien:
- config.json
- skprompt.txt
- actions.json
Wechseln Sie zur config.json Datei, und fügen Sie den folgenden Code hinzu, um die Einstellungen für das Eingabeaufforderungsmodell zu erstellen:
```
{
    "schema": 1.1,
    "description": "A bot that can turn the lights on and off",
    "type": "completion",
    "completion": {
        "model": "gpt-3.5-turbo",
        "completion_type": "chat",
        "include_history": true,
        "include_input": true,
        "max_input_tokens": 2800,
        "max_tokens": 1000,
        "temperature": 0.2,
        "top_p": 0.0,
        "presence_penalty": 0.6,
        "frequency_penalty": 0.0,
        "stop_sequences": []
    },
    "augmentation": {
        "augmentation_type": "sequence"
    }
}
```
Der benutzerdefinierte Engine-Agent verwendet OpenAI oder Azure OpenAI für seine Modellierung in natürlicher Sprache. Die config.json Datei verarbeitet die Sprachverarbeitung für den benutzerdefinierten Engine-Agent. Diese Datei, die von der PromptManager -Datei initiiert index.ts wird, überwacht die Sprachverarbeitung des Agents. Beim Initiieren einer Eingabeaufforderung sucht der Eingabeaufforderungs-Manager nach der Eingabeaufforderungskonfigurationsdatei (Sequenz/config.json) und übergibt die Eingabeaufforderungseinstellungen an OpenAI oder Azure OpenAI.
Wechseln Sie zur skprompt.txt Datei. Fügen Sie die folgenden Anweisungen für OpenAI oder Azure OpenAI hinzu, um Konversationen zu führen und zu erleichtern:
```
The following is a conversation with an AI assistant.
The assistant can turn a light on or off.

context:
The lights are currently {{getLightStatus}}.
```
Die skprompt.txt Datei enthält Textaufforderungen, mit denen die Benutzer mit OpenAI oder Azure OpenAI interagieren. OpenAI oder Azure OpenAI versucht, diese Eingabeaufforderungen zu verwenden, um die nächste Reihe von Wörtern zu erzeugen, die höchstwahrscheinlich aus dem vorherigen Text folgen.

Wechseln Sie zur actions.json Datei. Fügen Sie den folgenden Code hinzu, um die Aktionen für den benutzerdefinierten Engine-Agent zu definieren:

{

    {
        "name": "LightsOn",
        "description": "Turn the lights on",
        "parameters": []
    },
    {
        "name": "LightsOff",
        "description": "Turn the lights off",
        "parameters": []
    },
    {
        "name": "Pause",
        "description": "Delays for a period of time",
        "parameters": {
            "type": "object",
            "properties": {
                "time": {
                    "type": "number",
                    "description": "The amount of time to delay in milliseconds"
                }
            },
            "required": [
                "time"
            ]
        }
    }
}

Die actions.json Datei enthält die Aktionen, die der benutzerdefinierte Engine-Agent ausführen kann. Der ActionPlanner aus der index.ts Datei verwendet die in der actions.json Datei definierten Aktionen, um die Aktionen auszuführen.

In diesem Beispiel wird OpenAI oder Azure OpenAI für die modellierung natürlicher Sprache verwendet. Der Benutzer kann mit dem benutzerdefinierten Engine-Agent in einer beliebigen Sprache kommunizieren. Der benutzerdefinierte Engine-Agent versteht und reagiert entsprechend ohne zusätzlichen Code.

Lokales Erstellen und Ausführen ihres benutzerdefinierten Engine-Agents

So erstellen Sie Ihre App in der lokalen Umgebung und führen sie aus:

Drücken Sie F5 , um Ihre App im Debugmodus auszuführen.

Hinweis

Wenn Teams Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, dies zu überprüfen.
Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.

Falls Sie sich fragen, wenn Sie die Taste F5 drücken, wird das Teams-Toolkit:
1. Überprüft alle folgenden Voraussetzungen:
- Sie sind mit einem Microsoft 365-Konto angemeldet.
- Benutzerdefinierter App-Upload ist für Ihr Microsoft 365-Konto aktiviert.
- Unterstützt, Node.js Version installiert ist.
- Der für die Bot-App erforderliche Port ist verfügbar.
1. Installieren Sie npm-Pakete.
2. Startet Dev Tunnel, um einen HTTP-Tunnel zu erstellen.
3. Registriert die App in Microsoft Entra ID und konfiguriert die App.
4. Registriert die App im Bot Framework SDK und konfiguriert die App.
5. Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
6. Startet die App.
7. Startet Teams in einem Webbrowser und lädt die App hoch.
Hinweis

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. Dieser Vorgang kann drei bis fünf Minuten dauern.

Teams führt Ihre App in einem Webbrowser aus.
Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.
Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, Ihre App auf Teams auf Ihrem lokalen Computer hochzuladen.

Jetzt wird der benutzerdefinierte Engine-Agent erfolgreich in Teams ausgeführt! Nachdem die App geladen wurde, wird eine Chatsitzung mit dem benutzerdefinierten Engine-Agent geöffnet.

Sie können eingeben LightsOn , um mit der Interaktion mit dem benutzerdefinierten Engine-Agent zu beginnen.

Erfahren Sie, wie Sie Probleme beheben, wenn Ihre App nicht lokal ausgeführt wird.

Um Ihre App in Teams erfolgreich auszuführen, stellen Sie sicher, dass Sie den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt voraussetzungen.

Wichtig

Das Hochladen benutzerdefinierter Apps ist in Den Umgebungen Government Community Cloud (GCC), GCC-High und Department of Defense (DOD) verfügbar.

Tipp

Überprüfen Sie mithilfe des App-Validierungstools vor dem Hochladen einer benutzerdefinierten App auf Probleme. Dieses Tool ist im Toolkit enthalten. Beheben Sie die Fehler beim Hochladen der App.

Bereitstellen ihres benutzerdefinierten Engine-Agents

2 Minuten verbleibend

Sie haben gelernt, einen benutzerdefinierten Engine-Agent zu erstellen, zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.

Stellen Sie den agent für die benutzerdefinierte Engine mithilfe des Teams-Toolkits in Azure bereit.

Verwenden Sie dieses Konto, um auf die Microsoft Azure-Portal zuzugreifen und neue Cloudressourcen zur Unterstützung Ihrer App bereitzustellen.

Visual Studio Code
Befehlszeile

Öffnen Sie Visual Studio Code.
Öffnen Sie den Projektordner, in dem Sie die App erstellt haben.
Wählen Sie auf der Randleiste das Symbol Teams Toolkit aus.
Wählen Sie Bei Azure anmelden aus.

Tipp

Wenn Sie die Azure-Kontoerweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen. Verwenden Sie dasselbe Konto wie in anderen Erweiterungen.

Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.
Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Azure-Konto an.
Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.

Im Abschnitt KONTEN in der Randleiste werden die beiden Konten separat angezeigt. Außerdem wird die Anzahl der verwendbaren Azure-Abonnements aufgelistet, die Ihnen zur Verfügung stehen. Stellen Sie sicher, dass Mindestens ein verwendbares Azure-Abonnement verfügbar ist. Wenn nicht, melden Sie sich ab, und verwenden Sie ein anderes Konto.

Jetzt können Sie Ihre App in Azure bereitstellen!

Herzlichen Glückwunsch, Sie haben einen benutzerdefinierten Engine-Agent erstellt!

Melden Sie sich mit der Teamsapp CLI bei Microsoft 365 an:
```
teamsapp account login m365
```
Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können. Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Azure-Konto an. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden.
Melden Sie sich mit der Teamsapp-CLI bei Azure an:
```
teamsapp account login azure
```
Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können. Melden Sie sich mit Ihren Anmeldeinformationen bei Ihrem Azure-Konto an. Schließen Sie den Browser, wenn Sie dazu aufgefordert werden.

Die Kontoanmeldungen werden von Visual Studio Code und der Teamsapp CLI gemeinsam genutzt.

Herzlichen Glückwunsch, Sie haben sich bei Ihrem Azure-Konto angemeldet!

Bereitstellen Ihrer App in Azure

Die Bereitstellung besteht aus zwei Schritten. Zunächst werden erforderliche Cloudressourcen erstellt (auch als Bereitstellung bezeichnet). Anschließend wird der Code Ihrer App in die erstellten Cloudressourcen kopiert. In diesem Tutorial stellen Sie den benutzerdefinierten Engine-Agent bereit.

Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?

Der Schritt Bereitstellen erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, aber kein Code (HTML, CSS, JavaScript) wird in die Ressourcen kopiert. Der Schritt Bereitstellen kopiert den Code für Ihre App in die Ressourcen, die Sie während des Bereitstellungsschritts erstellt haben. Es ist üblich, mehrmals bereitzustellen, ohne neue Ressourcen bereitzustellen. Da der Bereitstellungsschritt einige Zeit in Anspruch nehmen kann, ist er vom Bereitstellungsschritt getrennt.

Visual Studio Code
Befehlszeile

Wählen Sie das Teams-Toolkit-Symbol in der Visual Studio Code-Randleiste aus.

Wählen Sie Bereitstellen aus.
Wählen Sie ein Abonnement aus, das für die Azure-Ressourcen verwendet werden soll.

Ihre App wird mithilfe von Azure-Ressourcen gehostet.

Ein Dialogfeld warnt Sie, dass beim Ausführen von Ressourcen in Azure Möglicherweise Kosten anfallen.
Wählen Sie Bereitstellen aus.

Beim Bereitstellungsprozess werden Ressourcen in der Azure-Cloud erstellt. Dies kann einige Zeit in Anspruch nehmen. Sie können den Fortschritt überwachen, indem Sie sich die Dialogfelder in der unteren rechten Ecke ansehen. Nach einigen Minuten wird der folgende Hinweis angezeigt:

Wenn Sie möchten, können Sie die bereitgestellten Ressourcen anzeigen. Für dieses Tutorial müssen Sie keine Ressourcen anzeigen.

Die bereitgestellte Ressource wird im Abschnitt UMGEBUNG angezeigt.
Wählen Sie im BEREICH LEBENSZYKLUS die Option Bereitstellen aus, nachdem die Bereitstellung abgeschlossen ist.

Wie bei der Bereitstellung dauert die Bereitstellung einige Zeit. Sie können den Prozess überwachen, indem Sie sich die Dialogfelder in der unteren rechten Ecke ansehen. Nach einigen Minuten wird ein Abschlusshinweis angezeigt.

Jetzt können Sie den gleichen Prozess verwenden, um Ihren benutzerdefinierten Engine-Agent in Azure bereitzustellen.

Im Terminalfenster:

Ausführen teamsapp provision.
```
teamsapp provision
```

Wenn Sie dazu aufgefordert werden, wählen Sie ein Azure-Abonnement aus, um Azure-Ressourcen zu verwenden.

Ihre App wird mithilfe von Azure-Ressourcen gehostet.

Ausführen teamsapp deploy.
```
teamsapp deploy
```

Ausführen der bereitgestellten App

Nach Abschluss der Bereitstellungs- und Bereitstellungsschritte:

Öffnen Sie den Debugbereich (STRG+UMSCHALT+D / ⌘⇧-D oder Ausführung anzeigen>) in Visual Studio Code.
Wählen Sie remote (Edge) starten aus der Dropdownliste Startkonfiguration aus.
Wählen Sie Debuggen starten (F5) aus, um Ihre App aus Azure zu starten.
Klicken Sie auf Hinzufügen.

Das Toolkit zeigt eine Meldung an, die angibt, dass die App zu Teams hinzugefügt wird.

Ihre App wird auf den Teams-Client geladen.

Erfahren Sie, was geschieht, wenn Sie Ihre App in Azure bereitgestellt haben.

Vor der Bereitstellung wurde die Anwendung lokal ausgeführt:

Das Back-End unter Verwendung von Azure Functions Core Tools ausgeführt.
Der HTTP-Endpunkt der Anwendung, an dem Microsoft Teams die Anwendung lädt, wird lokal ausgeführt.

Die Bereitstellung ist ein zweistufiger Prozess. Sie stellen die Ressourcen in einem aktiven Azure-Abonnement bereit und stellen dann den Back-End- und Front-End-Code für die Anwendung in Azure bereit oder laden sie hoch.

Das Back-End verwendet, sofern konfiguriert, verschiedene Azure-Dienste, einschließlich Azure App Service und Azure Storage.
Die Front-End-Anwendung wird in einem Azure Storage-Konto bereitgestellt, das für statisches Webhosting konfiguriert ist.