Erstellen Ihrer ersten Bot-App mit JavaScript
Starten Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer ersten Teams-App. Sie können eine Bot-App mit Teams erstellen.
Ihre App verfügt über eine Funktion, die über eine eigene Benutzeroberfläche und Benutzeroberfläche verfügt:
Hinweis
In diesem Tutorial können Sie eine Bot-App erstellen.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Projekts mit dem Teams-Toolkit.
- Erstellen einer Bot-App
- So stellen Sie Ihre App bereit.
Voraussetzungen
Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer Apps benötigen.
| Installieren | Zum Benutzen... | |
|---|---|---|
| Required | ||
| Teams Toolkit | Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie Version 4.0.0. | |
| Microsoft Teams | Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie zusammenarbeiten, über Apps für Chats, Besprechungen und Anrufe – alles 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 | Build-Umgebungen für JavaScript, TypeScript oder SharePoint Framework (SPFx). Verwenden Sie Version 1.55 oder höher. | |
| Optional | ||
| Azure Tools für Visual Studio Code und Azure CLI | Azure-Tools für den Zugriff auf gespeicherte Daten oder die Bereitstellung eines cloudbasierten Back-Ends für Ihre Teams-App in Azure. | |
| React Developer Tools für Chrome ODER React Developer Tools für Microsoft Edge | Eine DevTools-Browsererweiterung für die Open-Source-React JavaScript-Bibliothek. | |
| Microsoft Graph-Tester | Microsoft Graph Explorer, ein browserbasiertes Tool, mit dem Sie eine Abfrage aus Microsoft Graph-Daten ausführen können. | |
| Entwicklerportal für Teams | Webbasiertes Portal zum Konfigurieren, Verwalten und Verteilen Ihrer Teams-App, einschließlich an Ihre Organisation oder den Teams-Store. |
Tipp
Wenn Sie mit Microsoft Graph-Daten arbeiten, sollten Sie sich mit dem Microsoft Graph-Explorer vertraut machen und mit einem Lesezeichen versehen. Mit diesem browserbasierten Tool können Sie Microsoft Graph außerhalb einer App abfragen.
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 die Ansicht Erweiterungen aus (STRG+UMSCHALT+X / ⌘⇧-X oder Erweiterungen anzeigen>).
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 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 querladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.
Option "Auf Querladen überprüfen"
Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang 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. Wenn sie nicht aktiviert ist, können Sie Ihre App in Teams nicht lokal 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 Apps in Teams querladen 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 das Querladen von Apps aktiviert.
Hinweis
Wenn Sie nicht die Möglichkeit haben, eine benutzerdefinierte App hochzuladen, wenden Sie sich an Ihren Teams-Administrator.
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 und richten Ihr Konto ein. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen! Wählen Sie zuerst die App aus, die Sie ausführen möchten.
Erstellen eines Projektarbeitsbereichs für Ihre Bot-App
Lassen Sie uns Ihre erste Bot-App erstellen.
Die Botfunktion einer Teams-App erstellt einen Chatbot oder einen Konversationsbot. Sie verwenden es, um einfache und automatisierte Aufgaben auszuführen, z. B. die Bereitstellung von Kundendienst. Ein Bot kommuniziert mit einem Webdienst und hilft Ihnen bei der Verwendung seiner Angebote. Sie können Wettervorhersagen erhalten, Reservierungen vornehmen oder andere Dienste, die mithilfe eines Konversationsbots angeboten werden.
Da Sie sich bereits auf die Erstellung dieser Apps vorbereitet haben, können Sie ein neues Teams-Projekt zum Erstellen der Bot-App einrichten.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Botprojekts mit dem Teams-Toolkit.
- Informationen zur Verzeichnisstruktur Ihres App-Projekts.
Wichtig
Bots sind in Den Umgebungen Government Community Cloud (GCC), GCC-High und Department of Defense (DOD) verfügbar.
Erstellen Ihres Arbeitsbereichs für bot-Projekte
Wenn die Voraussetzungen erfüllt sind, fangen wir an!
Hinweis
Die angezeigte Visual Studio Code-Benutzeroberfläche stammt von Mac. Dies kann je nach Betriebssystem, Teams Toolkit-Version und Umgebung variieren.
Ö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 Neue Teams-App erstellen aus, um eine App mit dem Teams Toolkit zu erstellen.
Stellen Sie sicher, dass Bot als die Funktion ausgewählt ist, die 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.
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.
Ihre Teams-App mit einer Botfunktion wird in wenigen Sekunden erstellt.
Nachdem Ihre App erstellt wurde, zeigt das Teams-Toolkit die folgende Meldung an:
Wählen Sie Lokales Debuggen aus, um eine Vorschau Ihres Projekts anzuzeigen.
Eine kurze Zusammenfassung der Erstellung einer Teams-App.
Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-App an.
Machen Sie einen Überblick über den Quellcode der Bot-App
Nachdem das Gerüst erstellt wurde, zeigen Sie die Projektverzeichnisse und -dateien im bereich Explorer von Visual Studio Code an.
| Ordnername | Inhalt |
|---|---|
.fx/configs |
Konfigurationsdateien, die der Benutzer für die Teams-App anpassen kann. |
.fx/configs/config.<envName>.json |
Konfigurationsdatei für jede Umgebung. |
.fx/configs/azure.parameters.<envName>.json |
Parameterdatei für die Azure BICEP-Bereitstellung für jede Umgebung. |
.fx/configs/projectSettings.json |
Globale Projekteinstellungen, die für alle Umgebungen gelten. |
.fx/configs/ngrok.yml |
Ngrok-Einstellungen |
bot |
Code für die zur Laufzeit erforderliche Botfunktion. |
bot/teamsBot.js |
Haupteinstiegspunkt für die Bot-App. |
templates/appPackage |
App-Manifestvorlagendateien und die App-Symbole, color.png und outline.png. |
templates/appPackage/manifest.template.json |
App-Manifest zum Ausführen der App in einer lokalen und Remoteumgebung. |
templates/azure |
BICEP-Vorlagendateien |
Tipp
Machen Sie sich mit Bots außerhalb von Teams vertraut, bevor Sie Ihren ersten Bot in Teams integrieren.
Erstellen und Ausführen Ihrer ersten Bot-App
Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, erstellen Sie Ihr Botprojekt. Stellen Sie sicher, dass Sie sich bei Ihrem Microsoft 365-Konto angemeldet haben.
Anmelden bei Ihrem Microsoft 365-Konto
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.
Ö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!
Lokales Erstellen und Ausführen Ihrer ersten Bot-App
So erstellen Sie Ihre App in der lokalen Umgebung und führen sie aus:
Wählen Sie F5 in Visual Studio Code aus, um Ihre App im Debugmodus auszuführen.
Hinweis
Wenn das Teams-Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, sie 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:
- Überprüft alle folgenden Voraussetzungen:
- Sie sind mit einem Microsoft 365-Konto angemeldet.
- Das Querladen ist für Ihr Microsoft 365-Konto aktiviert.
- Unterstützt, Node.js Version installiert ist.
- Ngrok ist installiert.
- Der für die Bot-App erforderliche Port ist verfügbar.
- Installieren Sie npm-Pakete.
- Startet Ngrok, um einen HTTP-Tunnel zu erstellen.
- Registriert die App in Azure AD und konfiguriert die App.
- Registriert die Bot-App in Bot Framework und konfiguriert die Bot-App.
- Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
- Startet die Bot-App.
- Startet Teams in einem Webbrowser und führt das Querladen der Bot-App durch.
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, die App auf Teams auf Ihrem lokalen Computer querzuladen.
Jetzt wird der Bot erfolgreich in Teams ausgeführt! Nachdem die App geladen wurde, wird eine Chatsitzung mit dem Bot geöffnet.
Sie können eingeben
welcome, um eine Einführung Karte anzuzeigen, und geben Sie einlearn, um zur Dokumentation für adaptive Karte und Botbefehle zu wechseln.
Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, wie bei jeder anderen Webanwendung. Öffnen Sie die Datei
bot/teamsBot.js, und suchen Sie dieonMessage()-Methode. Legen Sie in jedem Fall einen Haltepunkt fest. Geben Sie dann Text ein.
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 das Querladen in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Querladen finden Sie im Abschnitt Voraussetzungen.
Wichtig
Derzeit sind Querladen-Apps in Government Community Cloud (GCC), GCC-High und DOD verfügbar.
Tipp
Überprüfen Sie vor dem Querladen Ihrer App mithilfe des App-Validierungstools auf Probleme. Dieses Tool ist im Toolkit enthalten. Beheben Sie die Fehler beim Querladen der App.
Bereitstellen Ihrer ersten Teams-App
Sie haben gelernt, eine Teams-App mit Bot-Funktion zu erstellen, zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.
Wir stellen die erste App mit Botfunktion in Azure mithilfe des Teams-Toolkits bereit.
Anmelden bei Ihrem Azure-Konto
Verwenden Sie dieses 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 Registerkarten-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 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 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
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 die Nachrichtenerweiterungs-App bereit.
Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Der Schritt Bereitstellen erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, aber es wird kein Code (HTML, CSS, JavaScript usw.) 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.
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. Es kann einige Zeit dauern. 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 Ihre Bot- und Nachrichtenerweiterungs-Apps in Azure bereitzustellen.
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.
- Wenn Sie Die App erhalten auswählen, können Sie die App später aus der Liste der quergeladenen Apps ausprobieren.
- Wenn Sie Ausprobieren auswählen, lädt Teams Ihre App.
Ihre App wird auf die Azure-Website geladen.
Wählen Sie Ausprobieren aus.
Die Nachrichtenerweiterungs-App wird in eine Chatbot-App 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.
Herzlichen Glückwunsch!
Sie haben es geschafft!
Sie haben eine Bot-App erstellt.
Nachdem Sie gelernt haben, eine einfache App zu erstellen, können Sie mit der Erstellung komplexerer Apps fortfahren. Versuchen Sie zunächst, Ihren vorhandenen Apps Funktionen hinzuzufügen.
So fügen Sie Ihrer vorhandenen App Funktionen hinzu:
Wählen Sie auf der Randleiste des Teams-Toolkits im Abschnitt Entwicklung die Option Features hinzufügen aus.
Wählen Sie die Funktion aus, die Sie Ihrer App hinzufügen möchten.
Das ist alles. Das Teams-Toolkit fügt der Verzeichnisstruktur Ihrer App das Gerüst für die neue Funktion hinzu. Befolgen Sie die Verfahren zum Erstellen und Bereitstellen der App, und Ihre App verfügt über mehrere Funktionen.
Sie haben das Tutorial zum Erstellen eines Bots mit JavaScript 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