Erstellen eines Befehlsbots mit JavaScript
Mit Microsoft Teams können Sie sich wiederholende Aufgaben mithilfe eines Befehlsbots automatisieren. Es reagiert auf einfache Befehle, die in Chats mit adaptiven Karten gesendet werden.
In diesem Tutorial erfahren Sie Folgendes:
- Hier erfahren Sie, wie Sie einen Befehlsbot mit dem Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) erstellen.
- Informationen zur Verzeichnisstruktur Ihrer App.
Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen eines Befehlsbots mit dem Agents Toolkit. Die folgende Ausgabe wird angezeigt:
Voraussetzungen
Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer Apps benötigen.
| Installieren | Für die Verwendung von | |
|---|---|---|
| Erforderlich | ||
| Visual Studio Code | JavaScript oder TypeScript, Buildumgebungen. Verwenden Sie die neueste Version. | |
| Microsoft 365 Agents Toolkit | Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version. | |
| Node.js | Back-End-JavaScript-Laufzeitumgebung. Weitere Informationen finden Sie unter Node.js Versionskompatibilitätstabelle für den Projekttyp. | |
| Microsoft Teams | Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort. | |
| Microsoft Edge (empfohlen) oder Google Chrome | Ein Browser mit Entwicklertools. | |
| Microsoft 365-Entwicklerkonto | Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App. |
Hinweis
Das Handbuch wird auf der neuesten Version des Agents Toolkit und nodejs Version 18 und 20 getestet. Die Schritte in diesem Leitfaden funktionieren möglicherweise mit anderen Versionen, wurden aber noch nicht getestet.
Vorbereiten der Entwicklungsumgebung
Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.
Installieren des Microsoft 365 Agents Toolkits
Microsoft 365 Agents Toolkit (früher teams Toolkit genannt) vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App und Veröffentlichung im Teams Store.
Sie können das Agents Toolkit mit Visual Studio Code oder einer Befehlszeilenschnittstelle namens Microsoft 365 Agents Toolkit CLI (früher teamsFx CLI) verwenden.
Öffnen Sie Visual Studio Code, und wählen Sie Erweiterungen (STRG+UMSCHALT+X oder Erweiterungen anzeigen>)aus.
Geben Sie im Suchfeld Microsoft 365 Agents Toolkit ein.
Wählen Sie Installieren aus.
Das Symbol Microsoft 365 Agents Toolkit
wird in der Visual Studio Code-Aktivitätsleiste angezeigt.
Sie können das Agents Toolkit auch über den Visual Studio Code Marketplace installieren.
Einrichten Ihres Teams-Entwicklungsmandanten
Ein Mandant ist ein Raum oder Ein Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. Dieser Bereich ist auch der Ort, an dem Sie Ihre App hochladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.
Option "Auf App-Upload überprüfen"
Nachdem Sie Ihre benutzerdefinierte App erstellt haben, müssen Sie Ihre App mit der Option Benutzerdefinierte App hochladen in Teams hochladen. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um zu überprüfen, ob diese Option aktiviert ist.
Mit den folgenden Schritten können Sie überprüfen, ob Sie Apps 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, können Sie benutzerdefinierte Apps hochladen.
Hinweis
Wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden, wenden Sie sich an Ihren Teams-Administrator.
Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)
Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, treten Sie dem Microsoft 365-Entwicklerprogramm bei.
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.
Befehlsbot erstellen
So erstellen Sie einen Befehlsbot mit Visual Studio Code
Öffnen Sie Visual Studio Code.
Wählen Sie das Symbol Microsoft 365 Agents Toolkit
in der Visual Studio Code-Aktivitätsleiste aus.Wählen Sie Neue App erstellenaus.
Wählen Sie Bot aus, um ein neues Botprojekt zu erstellen.
Stellen Sie sicher, dass Chatbefehl als App-Feature ausgewählt ist, das Sie in Ihrer App erstellen möchten.
Wählen Sie JavaScript als Programmiersprache aus.
Wählen Sie Standardordner aus, um ihren Projektstammordner am Standardspeicherort zu speichern.
Sie können den Standardspeicherort auch mithilfe der folgenden Schritte ändern:
Wählen Sie Durchsuchen aus.
Wählen Sie den Speicherort für den Projektarbeitsbereich aus.
Wählen Sie Ordner auswählen aus.
Geben Sie einen geeigneten Namen für Ihre App ein.
Drücken Sie die EINGABETASTE.
Nachdem Ihre App erstellt wurde, zeigt das Agents Toolkit die folgende Meldung an:
Die Befehlsbot-App wird in wenigen Sekunden erstellt.
Wählen Sie in der Visual Studio Code-Aktivitätsleiste das Symbol Ausführen und Debuggen
aus.Wählen Sie in der Dropdownliste Debuggen in Teams (Edge) oder Debuggen in Teams (Chrome) aus.
Wählen Sie die Schaltfläche Debuggen starten aus. Sie werden aufgefordert, die Befehlsbot-App in Teams auf Ihrem lokalen Computer hochzuladen.
Klicken Sie auf Hinzufügen.
Wählen Sie Öffnen aus, um die App im persönlichen Bereich zu öffnen.
Alternativ können Sie entweder den erforderlichen Bereich suchen und auswählen oder einen Kanal, Chat oder eine Besprechung aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.
Wählen Sie den Befehlsbot aus.
Drücken Sie die EINGABETASTE.
Sie erhalten die folgende Befehlsantwort in einer adaptiven Karte:
Einführung in den Quellcode
Das Agents-Toolkit stellt Komponenten zum Erstellen einer App bereit. Nach dem Erstellen des Projekts können Sie die Projektordner und -dateien im Explorer Bereich von Visual Studio Code anzeigen.
Wenn Sie sich für das Benutzeroberflächenframework entscheiden, bietet der folgende Beispielvorlagencode ein Gerüst mit React Komponenten. Sie enthält folgenden Inhalt:
| Ordner/Datei | Inhalt |
|---|---|
m365agents.yml |
Die Hauptprojektdatei beschreibt Ihre Anwendungskonfiguration und definiert den Satz von Aktionen, die in den einzelnen Lebenszyklusphasen ausgeführt werden sollen. |
m365agents.local.yml |
Dies wird mit Aktionen überschrieben m365agents.yml , die die lokale Ausführung und das Debuggen ermöglichen. |
env/ |
Name/Wert-Paare werden in Umgebungsdateien gespeichert und von m365agents.yml verwendet, um die Bereitstellungs- und Bereitstellungsregeln anzupassen. |
.vscode/ |
VSCode-Dateien zum Debuggen. |
appPackage/ |
Vorlagen für das Teams-Anwendungsmanifest. |
infra/ |
Vorlagen für die Bereitstellung von Azure-Ressourcen. |
src/ |
Der Quellcode für die Anwendung. |
src/index.js |
Anwendungseinstiegspunkt und express -handler für Befehl und Antwort. |
src/teamsBot.js |
Ein leerer Teams-Aktivitätshandler für die Botanpassung. |
src/adaptiveCards/helloworldCommand.json |
Eine generierte adaptive Karte, die an Teams gesendet wird. |
src/helloworldCommandHandler.js |
Die Geschäftslogik zum Verarbeiten eines Befehls. |
Bereitstellen Ihrer ersten Teams-App
Sie haben gelernt, eine Teams-App mit Befehlsbotfunktion zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.
Wir stellen die erste App mit Befehlsbotfunktion in Azure mithilfe des Agents Toolkit bereit.
Anmelden bei Ihrem Azure-Konto
Verwenden Sie Ihr Konto, um auf die Microsoft Azure-Portal zuzugreifen und neue Cloudressourcen zur Unterstützung Ihrer App bereitzustellen.
Öffnen Sie Visual Studio Code.
Öffnen Sie den Projektordner, den Sie für die Befehlsbot-App erstellt haben.
Wählen Sie auf der Randleiste das Symbol Microsoft 365 Agents Toolkit
aus.Wählen Sie Mit Ihren Anmeldeinformationen bei Azure anmelden aus.
Tipp
Wenn Sie die AZURE-KONTOerweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen.
Ihr Standardwebbrowser wird geöffnet, damit Sie sich beim Konto anmelden können.
- Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.
Im Abschnitt KONTEN 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.
Herzlichen Glückwunsch, Sie haben eine Teams-App erstellt! Als Nächstes erfahren Sie, wie Sie mithilfe des Microsoft 365 Agents Toolkit eine der Apps in Azure bereitstellen.
Bereitstellen Ihrer App in Azure
Unter BEREITSTELLUNG können Sie erforderliche Cloudressourcen bereitstellen, und der Code Ihrer App wird in die erstellten Cloudressourcen kopiert.
Wählen Sie auf der Randleiste von Visual Studio Code das Symbol Microsoft 365 Agents Toolkit
aus.Wählen Sie unter LEBENSZYKLUSdie Option Bereitstellen aus.
Wählen Sie eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue Ressourcengruppe. Weitere Informationen finden Sie unter Erstellen einer Ressourcengruppe.
Hinweis
Es wird ein Dialogfeld angezeigt, in dem darauf hingewiesen wird, 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. Sie können den Fortschritt überwachen, indem Sie die Dialogfelder in der unteren rechten Ecke beobachten. Nach einigen Minuten wird der folgende Hinweis angezeigt:
Sie haben die Möglichkeit, die bereitgestellten Ressourcen anzuzeigen. Für dieses Tutorial müssen Sie keine Ressourcen anzeigen.
Wählen Sie nach Abschluss der Bereitstellung unter LIFECYCLEdie Option Bereitstellen aus.
Wählen Sie Bereitstellen.
Die Bereitstellung dauert einige Zeit. Sie können den Fortschritt im Dialogfeld in der unteren rechten Ecke überwachen. Nach einigen Minuten wird der folgende Hinweis angezeigt.
Öffnen Sie den Debugbereich (STRG+UMSCHALT+D / ⌘⇧-D oder Ausführung anzeigen>) in Visual Studio Code.
Wählen Sie remote in Teams (Edge) starten aus der Dropdownliste Startkonfiguration aus.
Wählen Sie die Schaltfläche Debuggen starten aus. Sie werden aufgefordert, die Befehlsbot-App in Teams hochzuladen.
Klicken Sie auf Hinzufügen.
Wählen Sie Öffnen aus, um die App im persönlichen Bereich zu öffnen.
Alternativ können Sie entweder den erforderlichen Bereich suchen und auswählen oder einen Kanal, Chat oder eine Besprechung aus der Liste auswählen und durch das Dialogfeld navigieren, um Los auszuwählen.
Wählen Sie den Befehlsbot aus.
Drücken Sie die EINGABETASTE.
Sie erhalten die folgende Befehlsantwort in einer adaptiven Karte:
Abschließen der Herausforderung
Haben Sie sich so etwas einfallen lassen?
Herzlichen Glückwunsch!
Sie haben das Tutorial zum Erstellen einer Befehlsantwort-App abgeschlossen.
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.