Erstellen Ihrer ersten Nachrichtenerweiterungs-App mit JavaScript
Starten Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer ersten Teams-App mit JavaScript.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Projekts mit dem Teams-Toolkit.
- Erstellen einer Nachrichtenerweiterungs-App
- So stellen Sie Ihre App bereit.
Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen einer Teams-App für nachrichtenerweiterungen mit Teams Toolkit in Visual Studio Code. Nach Abschluss dieses Leitfadens wird die folgende Ausgabe angezeigt:
Voraussetzungen
Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.
| Installieren | Zum Benutzen... | |
|---|---|---|
| Required | ||
| 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. | |
| Microsoft Teams | Arbeiten Sie über Apps für Chats, Besprechungen und Anrufe an einem Ort mit Personen zusammen, mit denen Sie zusammenarbeiten. | |
| Microsoft Edge (empfohlen) oder Google Chrome | Ein Browser mit Entwicklertools, die für das Debuggen und Testen unerlässlich sind. | |
| Microsoft 365-Entwicklerkonto | Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer benutzerdefinierten App. | |
| 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. |
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 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.
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.
Erstellen eines Projektarbeitsbereichs für Ihre Nachrichtenerweiterungs-App
Nun erstellen wir Ihre erste Nachrichtenerweiterungs-App.
Mit der Nachrichtenerweiterungsfunktion können Sie über Schaltflächen und Formulare mit einem Webdienst interagieren. Verwenden Sie den Bereich zum Verfassen von Nachrichten, das Befehlsfeld oder eine Nachricht direkt im Teams-Client, um Aktionen in einem externen System zu suchen und zu initiieren. Nachrichtenerweiterungen basieren auf Bots, um einen Dialog zwischen dem Benutzer und Ihrem Code bereitzustellen.
Es gibt zwei Arten von Teams-Nachrichtenerweiterungen:
- Suchbefehle: Sie können externe Systeme durchsuchen und die Ergebnisse in Form einer Karte in eine Nachricht einfügen.
- Aktionsbefehle: Sie können Ihren Benutzern ein modales Popupfenster zum Sammeln oder Anzeigen von Informationen anzeigen. Anschließend können Sie deren Interaktion verarbeiten und die Informationen an Teams zurücksenden.
Lassen Sie uns eine Nachrichtenerweiterungs-App mit einem Suchbefehl erstellen. Richten Sie zunächst ein neues Teams-Projekt zum Erstellen der Nachrichtenerweiterungs-App ein.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Nachrichtenerweiterungsprojekts mit dem Teams-Toolkit.
- Informationen zur Verzeichnisstruktur Ihres App-Projekts.
Erstellen Ihres Arbeitsbereichs für das Nachrichtenerweiterungsprojekt
Wenn die Voraussetzungen erfüllt sind, fangen wir an!
Hinweis
Die angezeigte Visual Studio Code-Benutzeroberfläche kann sich je nach Betriebssystem, Toolkitversion, Design und Umgebung unterscheiden.
Öffnen Sie Visual Studio Code.
Wählen Sie in der Aktivitätsleiste von Visual Studio Code das Symbol Teams Toolkit
aus.Wählen Sie Neue App erstellen aus.
Wählen Sie Nachrichtenerweiterung aus.
Wählen Sie Benutzerdefinierte Suchergebnisse aus.
Wählen Sie Mit einem Bot starten aus.
Wählen Sie JavaScript 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.
Teams Toolkit erstellt die App in wenigen Sekunden.
Nachdem Ihre App erstellt wurde, zeigt Teams Toolkit die folgende Meldung an:
Machen Sie sich einen Überblick über den Quellcode der Nachrichtenerweiterungs-App
Eine Nachrichtenerweiterung verwendet Bot Framework, um über eine Konversation mit Ihrem Dienst zu interagieren. Zeigen Sie nach dem Gerüstbau die Projektverzeichnisse und -dateien unter EXPLORER an.
| Ordner/Datei | Inhalt |
|---|---|
teamsapp.yml |
Die Hauptprojektdatei beschreibt Ihre Anwendungskonfiguration und definiert den Satz von Aktionen, die in jeder Lebenszyklusphase ausgeführt werden sollen. |
teamsapp.local.yml |
Überschreibungen teamsapp.yml mit Aktionen, die die lokale Ausführung und das Debuggen ermöglichen. |
.vscode/ |
Visual Studio Code-Dateien für lokales Debuggen. |
appPackage/ |
Vorlagen für das Teams-Anwendungsmanifest. |
infra/ |
Vorlagen für die Bereitstellung von Azure-Ressourcen. |
index.js |
Anwendungseinstiegspunkt und restify -handler. |
Tipp
Machen Sie sich mit Bots und Nachrichtenerweiterungen außerhalb von Teams vertraut, bevor Sie Ihre App in Teams integrieren.
Erstellen und Ausführen Ihrer ersten Nachrichtenerweiterungs-App
Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, ist es an der Zeit, Ihr Projekt zu erstellen. Sie müssen sich bei Ihrem Microsoft 365-Konto anmelden.
Anmelden bei Ihrem Microsoft 365-Konto
Melden Sie sich mit dem Administratorkonto an, das Sie beim Beitritt zum Microsoft 365-Entwicklerprogramm erstellt haben.
Öffnen Sie Visual Studio Code.
Wählen Sie in der Aktivitätsleiste das Symbol Teams Toolkit
aus.Wählen Sie Mit Ihren Anmeldeinformationen bei Microsoft 365 anmelden aus. Ihr Standardwebbrowser wird geöffnet, damit Sie sich anmelden können.
Schließen Sie den Browser, nachdem Sie sich mit Ihren Anmeldeinformationen angemeldet haben.
Kehren Sie zu Teams Toolkit in Visual Studio Code zurück.
Im Abschnitt KONTEN der Randleiste wird der Name Ihres Microsoft 365-Kontos angezeigt. Wenn das Hochladen benutzerdefinierter Apps für Ihr Microsoft 365-Konto aktiviert ist, zeigt Teams Toolkit das Querladen aktiviert an.
Jetzt können Sie die App erstellen und lokal ausführen!
Erstellen und Ausführen Ihrer App in der lokalen Umgebung
Jetzt können Sie Ihre erste Teams-Nachrichtenerweiterungs-App lokal erstellen und debuggen.
Lokales Erstellen und Ausführen Ihrer App
Wählen Sie in Visual Studio Code die Taste F5 aus, um Ihre Anwendung 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.
Wenn Sie F5 auswählen, führt das Teams-Toolkit die folgenden Funktionen aus:
Überprüft die 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.
Installiert 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 App.
Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
Startet die lokal gehostete Nachrichtenerweiterungs-App.
Startet Teams in einem Webbrowser und lädt die Teams-App hoch.
Wenn Sie die App zum ersten Mal debuggen, lädt Teams die Abhängigkeiten herunter und erstellt die App. Dieser Vorgang kann 3 bis 5 Minuten dauern.
Teams wird in einem Browserfenster geöffnet, wenn der Build abgeschlossen ist. Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.
Es wird ein Dialogfeld geöffnet, in dem Sie die Nachrichtenerweiterungs-App zu Teams hinzufügen können. Wählen Sie Hinzufügen.
Teams lädt die Nachrichtenerweiterungs-App.
Da Nachrichtenerweiterungs-Apps auf Bots angewiesen sind, um die Kommunikation zwischen dem Benutzer und dem Webdienst zu ermöglichen, wird Ihre App in ein Chatfeature eines Bots geladen.
- Wenn Sie eine Bot-App erstellt haben, bevor Sie die Nachrichtenerweiterungs-App erstellt haben, lädt Teams die Nachrichtenerweiterung in der von Ihnen erstellten Bot-App. Frühere Chatnachrichten der Bot-App sind sichtbar.
- Wenn Sie zuerst eine Nachrichtenerweiterung erstellt haben, lädt Teams Ihre App im letzten Chat, der in Teams geöffnet ist.
Testen eigener Apps
Wenn Ihre App zum ersten Mal geladen wird, ist die Nachrichtenerweiterungs-App geöffnet, die Sie testen können. Mit dieser Beispiel-App können Sie Open-Source-npm-Pakete aus der Softwareregistrierung durchsuchen.
Ausführen einer Suchabfrage
Geben Sie den Namen eines Open-Source-npm-Pakets in das Suchfeld der Nachrichtenerweiterung ein, z. B. cli. Die Nachrichtenerweiterung zeigt eine Liste der übereinstimmenden Elemente an.
Wählen Sie eines der Elemente aus der Liste aus. Die App erstellt eine adaptive Karte mit dem Element im Bereich zum Verfassen von Nachrichten, sodass Sie sie in einem Chat oder Kanal senden können.
Drücken Sie die EINGABETASTE. Die Nachrichtenerweiterungs-App sendet die adaptive Karte mit dem Element im Chat oder Kanal.
Öffnen der Nachrichtenerweiterungs-App
Sie haben das Suchfeature der Nachrichtenerweiterungs-App im vorherigen Schritt getestet. Lernen Sie nun die verschiedenen Möglichkeiten zum Öffnen der Nachrichtenerweiterungs-App kennen.
Öffnen Der App über das Befehlsfeld
Geben Sie / im Befehlsfeld den Namen Ihrer Nachrichtenerweiterungs-App ein.
Die App wird im Befehlsfeld geöffnet, und Sie können sie zum Ausführen einer Abfrage verwenden.
Hinweis
- Die Verwendung / von zum Öffnen Ihrer Nachrichtenerweiterungs-App über das Befehlsfeld funktioniert nur im neuen Teams-Client.
- Verwenden Sie @ , um Ihre Nachrichtenerweiterungs-App über das Befehlsfeld im klassischen Teams-Client zu öffnen.
Öffnen Der App über den Bereich zum Verfassen von Nachrichten
Wählen Sie die drei Punkte am unteren Rand des Nachrichtenerstellungsbereichs aus.
Wählen Sie Ihre Nachrichtenerweiterungs-App aus.
Die Nachrichtenerweiterungs-App wird mit den Optionen zum Ausführen einer Suche geladen.
Öffnen Ihrer App aus hochgeladenen benutzerdefinierten Apps
Wählen Sie Apps>Verwalten Sie Ihre Apps aus.
Wählen Sie in der Liste der Apps die Dropdownliste für Ihre App und dann Persönliche App aus.
Ein Dialogfeld wird angezeigt, in dem Sie vorschlagen, Ihre App auszuprobieren. Wenn Sie Got it (Erhalten) auswählen, wird das Dialogfeld nicht mehr angezeigt. Wählen Sie Ausprobieren aus.
Eine Liste Ihrer Nachrichtenerweiterungs-Apps wird in Ihrem letzten Teams-Chat angezeigt. Wählen Sie ihre Nachrichtenerweiterungs-App aus der Liste aus.
Erfahren Sie, wie Sie Probleme beheben, wenn Ihre App nicht lokal ausgeführt wird.
Um Ihre App in Teams ausführen zu können, benötigen Sie ein Microsoft 365-Entwicklungskonto, das das Hochladen benutzerdefinierter Apps ermöglicht. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt Voraussetzungen.
Bereitstellen Ihrer ersten Teams-App
Wir stellen Ihre erste Nachrichtenerweiterungs-App in Azure mithilfe des Teams-Toolkits bereit.
Anmelden bei Ihrem Azure-Konto
Melden Sie sich bei Ihrem Azure-Konto an, 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 Nachrichtenerweiterungs-App erstellt haben.
Wählen Sie in der Aktivitätsleiste das Symbol Teams Toolkit
aus.Wählen Sie Mit Ihren Anmeldeinformationen bei Azure anmelden aus. Ihr Standardwebbrowser wird geöffnet, damit Sie sich anmelden können.
Tipp
Wenn Sie die AZURE-KONTOerweiterung installiert haben und dasselbe Konto verwenden, können Sie diesen Schritt überspringen.
Schließen Sie den Browser, wenn Sie dazu aufgefordert werden, und kehren Sie zu Visual Studio Code zurück.
Im Abschnitt KONTEN der Randleiste wird die Anzahl der verwendbaren Azure-Abonnements aufgeführt, 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.
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. Sie stellen die Nachrichtenerweiterungs-App in diesem Tutorial bereit.
Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Mit dem Schritt Bereitstellen werden Ressourcen in Azure und Microsoft 365 für Ihre App erstellt, aber es wird kein Code (z. B. HTML, CSS oder JavaScript) 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 nimmt, ist er vom Bereitstellungsschritt getrennt.
Wählen Sie in der Aktivitätsleiste von Visual Studio Code das Symbol Teams Toolkit aus.
Wählen Sie Bereitstellen aus.
Wählen Sie ein Abonnement aus.
Wählen Sie eine Ressourcengruppe aus.
Wenn Sie keine Ressourcengruppe auswählen können, können Sie mit den folgenden Schritten eine neue Ressourcengruppe erstellen:
Wählen Sie + Neue Ressourcengruppe aus.
Wählen Sie den Standardnamen aus, oder geben Sie einen geeigneten Namen für Ihre Ressourcengruppe ein.
Wählen Sie den Standort für Ihre Ressourcengruppe aus.
In einem Dialogfeld werden Sie gewarnt, 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. Dies kann einige Zeit in Anspruch nehmen. Nach einigen Minuten wird die folgende Meldung 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 unter UMGEBUNG angezeigt.
Wählen Sie unter LEBENSZYKLUS die Option Bereitstellen aus.
Ein Dialogfeld wird angezeigt, in dem Sie gefragt werden, ob Sie Ressourcen in der Entwicklungsumgebung bereitstellen möchten. Wählen Sie Bereitstellen.
Wie bei der Bereitstellung dauert die Bereitstellung einige Zeit. Nach einigen Minuten wird eine Abschlussmeldung angezeigt.
Ausführen der bereitgestellten App
Nachdem die Bereitstellungs- und Bereitstellungsschritte abgeschlossen sind, wechseln Sie im Teams Toolkit zu Ausführen und Debuggen (STRG+UMSCHALT+D oder Ansichtsausführung>).
Wählen Sie das Dropdownmenü AUSFÜHREN UND DEBUGGEN aus.
Wählen Sie Remote in Teams (Edge) starten aus.
Wählen Sie die Schaltfläche " ( ) aus.
Ein Dialogfeld wird geöffnet, um Ihre bereitgestellte App in Teams zu installieren. Wählen Sie Hinzufügen.
Teams öffnet die Nachrichtenerweiterungs-App im letzten Chat.
Erfahren Sie, was geschieht, wenn Sie Ihre App in Azure bereitstellen
Vor der Bereitstellung wird die App 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 der App 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-App wird in einem Azure Storage-Konto bereitgestellt, das für statisches Webhosting konfiguriert ist.
Herzlichen Glückwunsch!
Sie haben das Tutorial zum Erstellen einer Nachrichtenerweiterungs-App mit JavaScript abgeschlossen!
Haben Sie sich so etwas einfallen lassen?
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.