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 mithilfe von Javascript erstellen.
Ihre App verfügt über eine Funktion, die über eine eigene Benutzeroberfläche und Benutzeroberfläche verfügt:
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
Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.
| Installieren | Zum Benutzen... | |
|---|---|---|
| Required | ||
| Teams Toolkit | Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie die neueste Version. | |
| 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. | |
| 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 die neueste Version. | |
| 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-Entwicklertools 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 Microsoft 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 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.
Ö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.
Einrichten Ihres Teams-Entwicklungsmandanten
Ein Mandant ist ein Raum oder Container für Ihre Organisation 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.
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. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen! Wählen Sie die App aus, die Sie zuerst erstellen 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 erstellenaus.
Wählen Sie Bot aus, um ein neues Botprojekt zu erstellen.
Stellen Sie sicher, dass Basic Bot 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, und drücken Sie dann 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
Zeigen Sie nach Abschluss des Gerüstbaus die Projektverzeichnisse und -dateien im Explorer in Visual Studio Code an.
| Ordner/Datei | Inhalt |
|---|---|
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. |
.vscode/ |
VSCode-Dateien für das lokale Debuggen. |
appPackage/ |
Vorlagen für das Teams-Anwendungsmanifest. |
adaptiveCards/ |
Die adaptiven Karten, die vom Bot zurückgesendet werden. |
infra/ |
Vorlagen für die Bereitstellung von Azure-Ressourcen. |
index.js |
Anwendungseinstiegspunkt und restify -handler. |
teamsBot.js |
Teams-Aktivitätshandler. |
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. Sie müssen sich bei Ihrem Microsoft 365-Konto anmelden.
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 Mit Ihren Anmeldeinformationen bei M365 anmelden aus.
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.
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 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:
- Ü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.
- Installieren Sie npm-Pakete.
- Startet Dev Tunnel, um einen HTTP-Tunnel zu erstellen.
- Registriert die App in microsoft Entra ID 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 lädt die benutzerdefinierte Bot-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, die benutzerdefinierte Bot-App in Teams auf Ihrem lokalen Computer hochzuladen, oder verwenden Sie das Dropdownmenü, um Ihre Bot-App einem Team, Chat oder einer Besprechung hinzuzufügen.
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ührungskarte anzuzeigen, und eingebenlearn, um zur Dokumentation für adaptive Karten 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 den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt voraussetzungen.
Wichtig
Benutzerdefinierter App-Upload ist in Government Community Cloud (GCC), GCC-High und 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 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 das 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 Bot-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. Verwenden Sie dasselbe Konto wie in anderen Erweiterungen.
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
Die Bereitstellung besteht aus zwei Schritten. Zunächst erstellt Azure die erforderlichen Cloudressourcen (auch als Bereitstellung bezeichnet). Anschließend kopiert Azure den Code Ihrer App in die erstellten Cloudressourcen. In diesem Tutorial stellen Sie die Bot-App bereit.
Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Der Schritt Bereitstellen erstellt Ressourcen in Azure und Microsoft 365 für Ihre App, kopiert jedoch keinen Code (HTML, CSS oder JavaScript) in die Ressourcen. 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. Sie werden aufgefordert, die Bot-App in Teams querzuladen.
Wählen Sie Hinzufügen aus, oder verwenden Sie das Dropdownmenü, um Ihre Bot-App einem Team, Chat oder einer Besprechung hinzuzufügen.
Sie haben Ihre Bot-App erfolgreich zum Teams-Client hinzugefügt.
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. 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.
Platform Docs