Erstellen Ihrer ersten Registerkarten-App mit JavaScript
Starten Sie die Entwicklung von Microsoft Teams-Apps mit Ihrer ersten Teams-App. Sie können eine Registerkarten-App mit Teams mithilfe von 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.
Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen der Registerkarte mit dem Teams-Toolkit. Die folgende Ausgabe wird angezeigt, nachdem Sie diese Anleitung abgeschlossen haben:
Voraussetzungen
Stellen Sie sicher, dass Sie die folgenden Tools zum Erstellen und Bereitstellen Ihrer Apps installieren.
| Installieren | Zum Benutzen... | |
|---|---|---|
| Required | ||
| Visual Studio Code | Build-Umgebungen für JavaScript, TypeScript oder SharePoint Framework (SPFx). 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, 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. | |
| 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 Veröffentlichen Ihrer Teams-App, einschließlich in Ihrem organization oder im 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 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.
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 Registerkarten-App
Starten Sie die Entwicklung von Microsoft Teams-Apps, 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. Version und Umgebung des Teams-Toolkits können je nach Betriebssystem 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 TAB aus, um ein neues Registerkartenprojekt zu erstellen.
Stellen Sie sicher, dass die Registerkarte "Basic" 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.
Führen Sie die Schritte aus, um den Standardspeicherort zu ä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.
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 in 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 |
|---|---|
.vscode |
VSCode-Dateien zum Debuggen. |
appPackage |
Vorlagen für das Teams-Anwendungsmanifest. |
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/app.js |
Anwendungseinstiegspunkt und express -handler für website. |
src/views/hello.html |
Eine HTML-Vorlage, die an den Registerkartenendpunkt gebunden ist. |
src/static |
Die statischen Ressourcen wie CSS- und JavaScript-Dateien, die vom Webserver bereitgestellt werden können. |
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. |
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.
Anmelden bei Ihrem Microsoft 365-Konto
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 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.
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 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.
- Benutzerdefinierter App-Upload 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 Teams Toolkit eine bestimmte Voraussetzung nicht überprüfen kann, werden Sie aufgefordert, dies zu überprüfen.
- Installieren Sie NPM-Pakete.
- Registriert die App bei Microsoft Entra ID und konfiguriert die App.
- Registriert die App im Teams-Entwicklerportal und konfiguriert die App.
- Startet die Registerkarten-App.
- Startet Teams in einem Webbrowser und lädt die Registerkarten-App hoch.
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 benutzerdefinierte App auf Teams auf Ihrem lokalen Computer hochzuladen.
Herzlichen Glückwunsch, Ihre erste App wird in Teams ausgeführt!
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.
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 erneut 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 den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps 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 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 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?
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 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 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.
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 hochzuladen.
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 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 Registerkarten-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 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.