Erstellen eines Benachrichtigungsbots mit JavaScript
Der Benachrichtigungsbot sendet proaktiv Nachrichten im Teams-Kanal oder Gruppenchat oder persönlichen Chat. Sie können den Benachrichtigungsbot mit einer HTTP-Anforderung auslösen, z. B. Karten oder SMS.
In diesem Tutorial erfahren Sie Folgendes:
- Erstellen eines neuen Benachrichtigungsbots mit dem Teams-Toolkit
- Informationen zur Verzeichnisstruktur Ihrer App.
- So senden Sie mehrere Benachrichtigungen.
Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen eines Benachrichtigungsbots mit teams 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 | |
|---|---|---|
| Visual Studio Code | JavaScript- oder TypeScript-Buildumgebungen. Verwenden Sie die neueste Version. | |
| Teams Toolkit | Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie Version 4.0.0. | |
| Node.js | Back-End-JavaScript-Laufzeitumgebung. Verwenden Sie Version 14 oder 16. | |
| Microsoft Teams | Microsoft Teams, um mit allen, mit denen Sie zusammenarbeiten, über Apps für Chat, Besprechungen, Anrufe und alles an einem Ort zusammenzuarbeiten. | |
| Microsoft Edge (empfohlen) oder Google Chrome | Ein Browser mit Entwicklertools. | |
| Microsoft 365 | Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App. |
Hinweis
Das Handbuch ist auf Teams Toolkit Version 4.0.0 und Nodejs Version 14 und 16 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 Teams-Toolkits
Das Teams Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App, veröffentlichen sie im Teams Store und vieles mehr.
Sie können das Toolkit mit Visual Studio Code oder der CLI (Befehlszeilenschnittstelle) TeamsFxverwenden.
- Öffnen Sie Visual Studio Code, und wählen Sie Erweiterungen (STRG+UMSCHALT+X / ⌘⇧-X oder Erweiterungen anzeigen > ) aus.
- Geben Sie in das 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.
Hinweis
Die neueste Version von Teams Toolkit ist 4.2.0.
Einrichten Ihres Teams-Entwicklungsmandanten
Ein Mandant ist wie ein Raum oder Container, in dem Sie chatten, Dateien freigeben und Besprechungen für Ihre Organisation in Teams ausführen. Sie können die App auch querladen und testen.
Option "Auf Querladen überprüfen"
Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dies wird als Querladen bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.
Hinweis
Das Querladen ist für die Vorschau und das Testen von Apps in der lokalen Teams-Umgebung erforderlich. Aktivieren Sie Querladen, um eine Vorschau ihrer App in Teams lokal anzuzeigen und zu testen.
Verfügen Sie bereits über einen Mandanten und über Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies wirklich tun!
So überprüfen Sie das Querladen von Apps in Teams:
Wählen Sie im Teams-Client Store aus.
Wählen Sie Verwalten Ihrer Apps aus.
Wählen Sie App hochladen aus.
Suchen Sie nach der Option Zum Hochladen einer angepassten App. Wenn die Option angezeigt wird, ist das Querladen von Apps aktiviert.
Hinweis
Wenden Sie sich an den Teams-Administrator, wenn die Option zum Hochladen einer benutzerdefinierten App nicht angezeigt wird.
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.
Richten Sie ein Administratorkonto ein. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.
Melden Sie sich mit dem neuen Administratorkonto bei Teams an. Nun sollten Sie über die Option Benutzerdefinierte App hochladen verfügen.
Erstellen eines Benachrichtigungsbots
So erstellen Sie einen Benachrichtigungsbot mit Visual Studio Code
Ö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 die Option Neue Teams-App erstellen aus, um eine App mithilfe des Teams-Toolkits zu erstellen.
Stellen Sie sicher, dass Notification Bot als die Funktion ausgewählt ist, die Sie in Ihrer App erstellen möchten.
Wählen Sie HTTP Trigger Restify Server als Trigger aus.
Wählen Sie OK aus.
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 Teams-Toolkit die folgende Meldung an:
Die Benachrichtigungsbot-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(Edge) oder Debuggen(Chrome) aus.
Wählen Sie die Schaltfläche Debuggen starten aus.
Klicken Sie auf Hinzufügen.
Öffnen Sie Windows PowerShell.
Führen Sie den Befehl
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notificationaus.
Sie erhalten die folgende Ausgabe in Teams:
Einführung in den Quellcode
Das Teams-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.
Der neue Projektordner enthält folgenden Inhalt:
| Ordnername | Inhalt |
|---|---|
.fx |
Einstellungen, Konfiguration und Umgebungsinformationen auf Projektebene |
.vscode |
VS-Codedateien für das lokale Debuggen |
bot |
Der Botquellcode |
templates |
Vorlagen für das Teams-App-Manifest und die entsprechenden Azure-Ressourcen |
Die kerne Benachrichtigungsimplementierung im Botordner und enthält Folgendes:
| Dateiname | Inhalt |
|---|---|
src/adaptiveCards/ |
Vorlagen für adaptive Karte |
src/internal/ |
Generierter Initialisierungscode für Benachrichtigungsfunktionen |
src/index.*s |
Der Einstiegspunkt zum Verarbeiten von Botnachrichten und senden von Benachrichtigungen |
.gitignore |
Datei zum Ausschließen lokaler Dateien aus dem Botprojekt |
package.json |
Die npm-Paketdatei für das Botprojekt |
Senden einer Benachrichtigung an den Teams-Kanal
So senden Sie Benachrichtigungen an den Teams-Kanal
Wählen Sie in Visual Studio Code unter EXPLORER die Option MYNOTIFICATIONBOT> bot> src> index.jsaus.
Die folgende Seite wird angezeigt:
Verwenden Sie den folgenden Code nach
for (const target of await bot.notification.installations()) {in Visual Studio Code.if (target.type === "Channel") { const members = await target.members(); await target.sendMessage("This is a message to channel: " + members.length + " members."); for (const member of members) { await member.sendMessage("This is a message to Member: " + member.account.email); } } /*
So passen Sie den Speicher an:
Wählen Sie in Visual Studio Code unter EXPLORER die Option MYNOTIFICATIONBOT> bot> src> internal> initialize.jsaus.
Die folgende Seite wird angezeigt:
Aktualisieren Sie den folgenden Code in initialize.js Datei, um den Speicher anzupassen.
const myStorage = new MyStorage(...); // initialize ConversationBot with notification enabled and customized storage const bot = new ConversationBot({ // The bot id and password to create BotFrameworkAdapter. // See https://aka.ms/about-bot-adapter to learn more about adapters. adapterConfig: { appId: process.env.BOT_ID, appPassword: process.env.BOT_PASSWORD, }, // Enable notification notification: { enabled: true, storage: myStorage, }, });Verwenden Sie Ihren eigenen Speicherort anstelle von MyStorage.
Hinweis
Es ist erforderlich, Ihren eigenen Speicher für die Produktionsumgebung zu verwenden. Wenn kein Speicher bereitgestellt wird, wird der standardmäßige lokale Dateispeicher berücksichtigt.
Wählen Sie auf der Randleiste von Visual Studio Code das Symbol Ausführen und Debuggen
aus.Wählen Sie in der Dropdownliste Debuggen(Edge) oder Debuggen(Chrome) aus.
Wählen Sie die Schaltfläche Debuggen starten aus.
Sie erhalten die folgende Ausgabe in Teams.
Wählen Sie in der Dropdownliste zu einem Team hinzufügen aus.
Fügen Sie im Suchfeld einen beliebigen Kanal hinzu.
Wählen Sie Bot einrichten aus.
Der folgende Bildschirm wird angezeigt:
Öffnen Sie Windows PowerShell.
Führen Sie den Befehl
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notificationaus.
Sie erhalten die Benachrichtigung im Teams-Kanal:
Sie erhalten die Benachrichtigung im persönlichen Chat:
Bereitstellen Ihrer ersten Teams-App
Sie haben gelernt, wie Sie eine Teams-App mit Benachrichtigungsbot-Funktion erstellen und ausführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.
Wir stellen die erste App mit Benachrichtigungsbotfunktion in Azure mithilfe des Teams-Toolkits 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, in dem Sie die Benachrichtigungsbot-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.
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 der Randleiste werden die beiden Konten separat angezeigt. Außerdem wird die Anzahl der verwendbaren Azure-Abonnements aufgelistet, die Ihnen zur Verfügung stehen.
Hinweis
Stellen Sie sicher, dass Mindestens ein verwendbares Azure-Abonnement verfügbar ist.
Jetzt können Sie Ihre App 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 das Teams-Toolkit-Symbol
in der Visual Studio Code-Randleiste aus.Wählen Sie unter BEREITSTELLUNGdie Option Bereitstellung in der Cloud aus.
Wählen Sie eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue Ressourcengruppe. Weitere Informationen finden Sie unter Erstellen einer Ressourcengruppe.
Wählen Sie ein beliebiges vorhandenes Abonnement aus.
Wählen Sie eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue 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.
Die Option zum Anzeigen der bereitgestellten Ressourcen wird angezeigt. Für dieses Tutorial müssen Sie keine Ressourcen anzeigen.
Wählen Sie nach Abschluss der Bereitstellung unter BEREITSTELLUNG die Option In der Cloud bereitstellen aus.
Wählen Sie Bereitstellen.
Die Bereitstellung dauert einige Zeit. Sie können den Fortschritt in den Dialogfeldern in der unteren rechten Ecke überwachen.
Wählen Sie in Visual Studio Code unter UMGEBUNGdie Option Lokales Debuggen aus.
Wählen Sie in der Dropdownliste Debug Edge aus.
Klicken Sie auf Hinzufügen.
Öffnen Sie Windows PowerShell.
Führen Sie den Befehl
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notificationaus.
Sie erhalten die Benachrichtigung in Teams:
Abschließen der Herausforderung
Haben Sie sich so etwas einfallen lassen?
Herzlichen Glückwunsch!
Sie haben das Tutorial zum Erstellen eines Benachrichtigungsbots abgeschlossen!
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.
Feedback
Feedback senden und anzeigen für