Erstellen Ihrer ersten Registerkarten-App mit JavaScript
Beginnen Sie Microsoft Teams-App-Entwicklung mit Ihrer ersten Teams-App. Sie können eine Registerkarten-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 Registerkarten-App mit JavaScript erstellen.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Projekts mit dem Teams-Toolkit.
- Erstellen einer Registerkarten-App
- Die Struktur der App:
- Der Registerkartenteil mit JavaScript mit React.
- Die restlichen Features mit Node.js.
- 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 | ||
| Visual Studio Code | Build-Umgebungen für JavaScript, TypeScript oder SharePoint Framework (SPFx). Verwenden Sie Version 1.55 oder höher. | |
| 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 das neueste v16 LTS-Release. | |
| 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. | |
| Microsoft Edge (empfohlen) oder Google Chrome | Ein Browser mit Entwicklertools. | |
| 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 den Microsoft Graph-Explorer 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, 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 Organisation 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 Store aus.
Wählen Sie Verwalten Ihrer Apps aus.
Wählen Sie In App veröffentlichen aus.
Suchen Sie nach der Option Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist das Querladen von Apps aktiviert.
Hinweis
Wenn Sie keine 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 Registerkarten-App
Beginnen Sie Microsoft Teams-App-Entwicklung, indem Sie Ihre erste App erstellen. Diese App verwendet die Registerkartenfunktion.
Auf dieser Seite erfahren Sie Folgendes:
- Einrichten eines neuen Registerkartenprojekts mit dem Teams-Toolkit
- Informationen zur Verzeichnisstruktur Ihrer App
Erstellen Ihres Registerkartenprojektarbeitsbereichs
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 tab als Funktion ausgewählt ist, die Sie in Ihrer App erstellen möchten. 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.
Die Teams-Registerkarten-App wird in wenigen Sekunden erstellt.
Nachdem Ihre App erstellt wurde, zeigt Teams Toolkit die folgende Meldung an:
Sie können Lokales Debuggen auswählen, 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 Registerkarten-App
Das Teams-Toolkit bietet alle Komponenten zum Erstellen einer App. Nach dem Erstellen des Projekts können Sie die Projektordner und -dateien im Explorer-Bereich von Visual Studio Code anzeigen.
Obwohl Sie ein beliebiges Benutzeroberflächenframework auswählen können (oder keins verwenden möchten), bietet dieser Beispielvorlagencode ein Gerüst mit React Komponenten.
Das Toolkit verwaltet unter anderem folgende Elemente in dieser Verzeichnisstruktur:
| 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/states |
Bereitstellen einer Ausgabe, die vom Teams-Toolkit generiert wird. Das Toolkit erstellt diesen Ordner, nachdem Sie Ressourcen für Ihre App bereitgestellt haben. |
- .fx/states/state.<envName>.json |
Stellen Sie die Ausgabedatei für jede Umgebung bereit. |
- .fx/states/<env>.userdata |
Vertrauliche Benutzerdaten für die Bereitstellungsausgabe für jede Umgebung. |
tabs |
Code für die zur Laufzeit erforderliche Tab-Funktion, z. B. der Datenschutzhinweis, die Nutzungsbedingungen und die Konfigurationsregisterkarten. |
- tabs/src/index.jsx |
Einstiegspunkt für die Front-End-App, bei der die App-Hauptkomponente mit gerendert wird ReactDOM.render() |
- tabs/src/components/App.jsx |
Code für die Verarbeitung von URL-Routing in der App. Es ruft die Microsoft Teams JavaScript-Clientbibliothek auf, um die Kommunikation zwischen Ihrer App und Teams herzustellen. |
- tabs/src/components/Tab.jsx |
Code zum Implementieren der Benutzeroberfläche Ihrer App. |
- tabs/src/components/TabConfig.jsx |
Code zum Implementieren der Benutzeroberfläche, die Ihre App konfiguriert. |
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 oder Remoteumgebung. |
templates/azure |
BICEP-Vorlagendateien |
Wenn Sie die Cloudfunktionalität hinzufügen, fügt Teams Toolkit dem Projekt die erforderlichen Ordner hinzu. Der api Ordner enthält den Code für alle Azure Functions, die Sie schreiben.
Erstellen und Ausführen Ihrer ersten Registerkarten-App
Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, erstellen Sie Ihr Registerkartenprojekt. Sie müssen sich bei Ihrem Microsoft 365-Konto anmelden.
Melden Sie sich bei Ihrem Microsoft 365-Konto an.
Verwenden Sie Ihr Microsoft 365-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.
Im Abschnitt KONTEN der Randleiste wird der Name Ihres Microsoft 365-Kontos angezeigt. Im Teams-Toolkit wird das Querladen aktiviert angezeigt, wenn das Querladen für Ihr Microsoft 365-Konto aktiviert ist.
Jetzt können Sie die App erstellen und in der lokalen Umgebung ausführen!
Erstellen und lokales Ausführen der App in Visual Studio Code
So erstellen Sie Ihre App und führen sie lokal aus:
Wählen Sie in Visual Studio Code F5 aus, um die Anwendung im Debugmodus auszuführen.
Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.
Falls Sie sich fragen, wenn Sie die Taste F5 drücken, teams Toolkit:
- Überprüft, ob die folgenden Voraussetzungen erfüllt sind:
- 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.
- Das Entwicklungszertifikat für localhost ist installiert.
- Port ist für die Registerkarten-App verfügbar.
Hinweis
Wenn das Teams-Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, sie zu überprüfen.
- Installieren Sie NPM-Pakete.
- Registriert die App bei Azure AD und konfiguriert die App.
- Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
- Startet die Registerkarten-App.
- Startet Teams in einem Webbrowser und überlädt die Registerkarten-App quer.
Hinweis
Wenn Sie die App zum ersten Mal ausführen, werden alle Abhängigkeiten heruntergeladen, und die App wird erstellt. Nach Abschluss des Builds wird ein Browserfenster geöffnet. Dieser Vorgang kann 3-5 Minuten dauern.
Das Toolkit fordert Sie bei Bedarf auf, ein lokales Zertifikat zu installieren. Mit diesem Zertifikat kann Microsoft Teams Ihre Anwendung von
https://localhostladen.Wählen Sie Ja aus, wenn das folgende Dialogfenster angezeigt wird:
Oder wählen Sie je nach Betriebssystem Weiter aus:
Der Teams-Webclient wird in einem Browserfenster geöffnet.
Hinweis
Wenn Sie vom Toolkit nicht aufgefordert werden, ein Zertifikat zu installieren, müssen Sie das Zertifikat manuell installieren. Weitere Informationen finden Sie unter Hinzufügen eines manuellen Zertifikats.
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.
Herzlichen Glückwunsch, Ihre erste App wird in Teams ausgeführt!
Sie können das SSO-Feature hinzufügen, um die Benutzerdetails abzurufen. Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, als ob es sich um eine andere Webanwendung handeln würde. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite neu geladen.
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.
Bereitstellen Ihrer ersten Teams-App
Sie haben gelernt, eine Teams-App mit tab-App zu erstellen, zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App in Azure bereitzustellen.
Wir stellen die erste App mit tab-Funktion 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 Registerkarten-App bereit.
Was ist der Unterschied zwischen Bereitstellen und Bereitstellen?
Im Schritt Bereitstellen werden Ressourcen in Azure und Microsoft 365 für Ihre App erstellt, 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 Bereitstellung in der Cloud aus.
Wählen Sie ein beliebiges vorhandenes Abonnement aus.
Wählen Sie eine Ressourcengruppe aus, die für die Azure-Ressourcen verwendet werden soll.
Hinweis
Ihre App wird mithilfe von Azure-Ressourcen gehostet.
Weitere Informationen finden Sie unter Erstellen einer Ressourcengruppe.
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 nach Abschluss der Bereitstellung im Bereich Bereitstellung die Option In der Cloud bereitstellen aus.
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.
Hinweis
Ihre App wird mithilfe von Azure-Ressourcen gehostet.
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.
Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams querzuladen.
Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer Azure-Umgebung ausgeführt!
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 diesen 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 Registerkarten-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 einer Registerkarten-App 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