Erstellen eines Benachrichtigungsbots mit JavaScript

Artikel
Developer (Anfänger)
6 Minuten bis zum Abschluss

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:

Triggerausgabe

Voraussetzungen

5 Minuten verbleibend

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	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 Personen, 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	Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App.

Hinweis

Der Leitfaden wird mit der neuesten Version des Teams Toolkits 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 Microsoft Teams-Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App und zum Veröffentlichen im Teams Store.

Sie können das Teams-Toolkit mit Visual Studio Code oder einer Befehlszeilenschnittstelle namens TeamsFx CLI verwenden.

Visual Studio Code
Befehlszeile

Öffnen Sie Visual Studio Code, und wählen Sie Erweiterungen (STRG+UMSCHALT+X oder Erweiterungen anzeigen>)aus.
Geben Sie im Suchfeld Teams Toolkit ein.
Wählen Sie Installieren aus.

Das Symbol Teams Toolkit wird in der Visual Studio Code-Aktivitätsleiste angezeigt.

Sie können das Teams-Toolkit auch über den Visual Studio Code Marketplace installieren.

Verwenden Sie zum Installieren der TeamsFx CLI den npm Paket-Manager, und geben Sie den folgenden Befehl in der Eingabeaufforderung ein:

npm install -g @microsoft/teamsfx-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/teamsfx-cli

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

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

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

Achtung

Bevor Sie TeamsFx in PowerShell-Terminals ausführen können, müssen Sie die remote signierte Ausführungsrichtlinie für PowerShell aktivieren.

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.

Erstellen eines Benachrichtigungsbots

4 Minuten verbleibend

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 Bot aus, um ein neues Botprojekt zu erstellen.
Stellen Sie sicher, dass Chatbenachrichtigung als App-Feature ausgewählt ist, das Sie in Ihrer App erstellen möchten.
Wählen Sie HTTP Trigger Restify Server als Trigger 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:
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.
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 in Teams (Edge) oder Debuggen in Teams (Chrome) aus.
Wählen Sie die Schaltfläche Debuggen starten aus.
Wählen Sie Hinzufügen.

Ihre Benachrichtigungsbot-App wird in den Teams-Client hochgeladen.

Ereignisse werden in Echtzeit von einer externen Quelle ausgelöst, z. B. durch eine Drittanbieter-API, die den Benachrichtigungsbot dazu veranlassen, dem Benutzer eine Benachrichtigung zu senden. Zum Emulieren eines Ereignistriggers können Sie ein Ereignis manuell mithilfe von PowerShell oder Terminal senden.
Um ein Ereignis zum Auslösen einer Benachrichtigung aufzurufen, verwenden Sie eine der folgenden Methoden:
- Wenn Sie Windows verwenden, führen Sie die folgenden Schritte aus:
  1. Öffnen Sie Windows PowerShell.
  2. Führen Sie den Befehl Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notification aus.
- Wenn Sie Windows nicht verwenden, führen Sie die folgenden Schritte aus:
  1. Wechseln Sie in Visual Studio Code zu Terminal>Neues Terminal , um ein weiteres Terminal zu öffnen.
  2. Führen Sie den Befehl curl -X POST http://localhost:3978/api/notification aus.
Sie erhalten die folgende Ausgabe in Teams:

Hinweis

Wenn Sie Ihre App auf Outlook und Microsoft 365 erweitern möchten, können Sie ihre App mit Outlook und Microsoft 365 in der Dropdownliste AUSFÜHREN UND DEBUGGEN in Visual Studio Code debuggen.

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.

Registerkarte

Der neue Projektordner enthält folgenden Inhalt:

Ordner-/Dateiname	Inhalt
`.vscode`	VSCode-Dateien zum Debuggen.
`appPackage`	Vorlagen für das App-Manifest (zuvor als Teams-App-Manifest bezeichnet).
`env`	Name/Wert-Paare werden in Umgebungsdateien gespeichert und von teamsapp.yml verwendet, um die Bereitstellungs- und Bereitstellungsregeln anzupassen.
`infra`	Vorlagen für die Bereitstellung von Azure-Ressourcen.
`src\`	Der Quellcode für die Teams-Benachrichtigungsanwendung.
`src\index.js`	Anwendungseinstiegspunkt und `restify` Handler für Benachrichtigungen.
`src\teamsbot.js`	Ein leerer Teams-Aktivitätshandler für die Botanpassung.
`src\adaptiveCards\notification-default.json`	Eine generierte adaptive Karte, die an Teams gesendet wird.
`teamsapp.yml`	Die Hauptprojektdatei beschreibt Ihre Anwendungskonfiguration und definiert den Satz von Aktionen, die in den einzelnen Lebenszyklusphasen ausgeführt werden sollen.
`teamsapp.local.yml`	Dies wird mit Aktionen überschrieben `teamsapp.yml` , die die lokale Ausführung und das Debuggen ermöglichen.

Senden einer Benachrichtigung an den Teams-Kanal

3 Minuten verbleibend

So senden Sie Benachrichtigungen an den Teams-Kanal

Wählen Sie in Visual Studio Code unter EXPLORER die Option MYNOTIFICATIONBOT> 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 (optional):

Wählen Sie in Visual Studio Code unter EXPLORER die Option MYNOTIFICATIONBOT> 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 in Teams (Edge) oder Debuggen in Teams (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/notification aus.

Sie erhalten die Benachrichtigung im Teams-Kanal:

Sie erhalten die Benachrichtigung im persönlichen Chat:

Bereitstellen Ihrer ersten Teams-App

2 Minuten verbleibend

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.

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 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 Teams-Toolkits 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.

Visual Studio Code
Befehlszeile

Wählen Sie das Teams-Toolkit-Symbol in der Visual Studio Code-Randleiste 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.
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 LIFECYCLEdie Option 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.

Im Terminalfenster:

Führen Sie aus teamsfx new , um ein neues Projekt zu erstellen.
```
teamsfx new
```
Führen Sie aus teamsfx provision , um eine Azure-Ressource zu erstellen.
```
teamsfx provision
```
Führen Sie aus teamsfx deploy , um die App bereitzustellen.
```
teamsfx deploy
```
Führen Sie aus teamsfx preview , um die App auszuführen.
```
teamsfx preview
```

Erstellen eines Benachrichtigungsbots mit JavaScript

Voraussetzungen

Vorbereiten der Entwicklungsumgebung

Installieren des Teams-Toolkits

Einrichten Ihres Teams-Entwicklungsmandanten

Option "Auf App-Upload überprüfen"

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Erstellen eines Benachrichtigungsbots

Einführung in den Quellcode

Senden einer Benachrichtigung an den Teams-Kanal

Bereitstellen Ihrer ersten Teams-App

Bereitstellen Ihrer App in Azure

Abschließen der Herausforderung

Herzlichen Glückwunsch!

Feedback

Erstellen eines Benachrichtigungsbots mit JavaScript

Voraussetzungen

Vorbereiten der Entwicklungsumgebung

Installieren des Teams-Toolkits

Einrichten Ihres Teams-Entwicklungsmandanten

Option "Auf App-Upload überprüfen"

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Erstellen eines Benachrichtigungsbots

Einführung in den Quellcode

Senden einer Benachrichtigung an den Teams-Kanal

Bereitstellen Ihrer ersten Teams-App

Anmelden bei Ihrem Azure-Konto

Bereitstellen Ihrer App in Azure

Abschließen der Herausforderung

Herzlichen Glückwunsch!

Feedback