Erstellen Ihrer ersten App mit SPFx
SharePoint Framework (SPFx) ist ein Entwicklungsmodell zum Erstellen clientseitiger Lösungen für Microsoft Teams und SharePoint. Ihre SPFx Teams-App wird auf Microsoft 365 gehostet. Es bietet vollständige Unterstützung für die Entwicklung und das Hosten Ihrer clientseitigen SPFx-Lösung. Sie können Ihre SharePoint Framework-Lösung mit Folgendem integrieren:
- SharePoint-Daten und Erweitern von Microsoft Teams.
- Ihre Geschäfts-APIs sind mit der Microsoft Entra-ID geschützt.
In diesem Tutorial beginnen Sie mit der Entwicklung von Microsoft Teams-Apps mit SPFx, indem Sie Ihre erste App mit einer Registerkartenfunktion erstellen.
Hinweis
Das Teams-Toolkit bietet nur die Registerkartenfunktion in einer Teams-App, die mit SharePoint Framework erstellt wurde. Die Bot- und Nachrichtenerweiterungsfunktionen sind nicht verfügbar.
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 | JavaScript oder TypeScript, Buildumgebungen. Verwenden Sie die neueste Version. | |
| Teams Toolkit | Eine Microsoft Visual Studio Code-Erweiterung, die ein Projektgerüst für Ihre App erstellt. Verwenden Sie Teams Toolkit v5. | |
| 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. | |
| Optional | ||
| 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.
Administratorkonto der SharePoint-Sammlungswebsite
Stellen Sie sicher, dass Sie über ein Administratorkonto für eine SharePoint-Websitesammlung verfügen. Sie benötigen dieses Konto bei der Bereitstellung für das Hosting. Wenn Sie einen Microsoft 365-Entwicklerprogrammmandanten verwenden, können Sie das Administratorkonto verwenden, das Sie zu diesem Zeitpunkt erstellt haben.
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!
Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App
Dieses Tutorial führt Sie durch die Schritte zum Erstellen, Erstellen und Bereitstellen einer Teams-App mithilfe von SharePoint Framework SPFx. Diese App verfügt über eine Registerkartenfunktion.
In diesem Tutorial erfahren Sie Folgendes:
- Einrichten eines neuen Projekts mit dem Teams-Toolkit
- Informationen zur Verzeichnisstruktur Ihrer App
Wichtig
Bevor Sie mit dem Erstellen des Projektarbeitsbereichs beginnen, stellen Sie sicher, dass Sie nicht bei einem Microsoft 365- oder Azure-Konto angemeldet sind.
Erstellen Ihres Projekts
Wenn die Voraussetzungen erfüllt sind, fangen wir an!
Ö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 Tab aus.
Wählen Sie SPFx aus.
Wählen Sie Neue SPFx-Lösung erstellen aus.
Wählen Sie eine Option für das Gerüst aus.
Wählen Sie im Abschnitt Framework die Option React aus.
Drücken Sie die EINGABETASTE , um den Standardwebpartnamen zu übernehmen.
Wählen Sie Ihren Arbeitsbereichsordner aus, indem Sie den gewünschten Ordner auswählen.
Geben Sie einen geeigneten Anwendungsnamen für Ihre App ein. Drücken Sie EINGABE.
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.
Das Teams-Toolkit ruft die Yeoman-CLI auf, um ein Gerüst für Ihre Teams-App zu erstellen und dabei die erforderlichen Abhängigkeiten zu installieren.
Das Gerüst dauert einige Minuten.
Eine kurze Zusammenfassung der Erstellung einer Teams-App.
Machen Sie einen Rundgang durch den Quellcode
Nach der Projekterstellung verfügen Sie über die Komponenten zum Erstellen einer einfachen persönlichen App. Sie können die Projektverzeichnisse und -dateien im Explorer-Bereich von Visual Studio Code anzeigen.
Das Toolkit erstellt ein Gerüst für Sie im Projektverzeichnis für die Registerkartenfunktion.
Das Teams-Toolkit enthält unter anderem folgendes in diesem Verzeichnis:
- appPackage: Enthält die App-Symbole
color.pngundoutline.png. -
manifest.local.json: enthält das App-Manifest für das lokale Debuggen. -
manifest.json: enthält das App-Manifest für die Veröffentlichung im Entwicklerportal für Teams. -
.vscode/Settings.json: Die Einstellungen, die Sie beim Erstellen des Projekts ausgewählt haben.
Wenn Sie ein SPFx-Webpartprojekt ausgewählt haben, sind die folgenden Dateien für Ihre Benutzeroberfläche relevant:
-
SPFx/src/webparts/{webpart}: enthält Ihr SPFx-Webpart. -
.vscode/launch.json: Beschreibt die Debugkonfigurationen, die in der Debugpalette verfügbar sind.
Erstellen Ihrer 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.
Auf dieser Seite erfahren Sie, wie Sie Ihre erste App erstellen und ausführen.
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 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.
Jetzt können Sie die App erstellen und lokal 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 auf der Randleiste von Visual Studio Code das Symbol Ausführen und Debuggen
aus.Wählen Sie eine der folgenden Optionen aus, um die App auszuführen und zu debuggen.
Teams Workbench (Edge)
Teams Workbench (Chrome)
Wählen Sie die Wiedergabeschaltfläche aus, oder drücken Sie F5 , um das Debuggen zu starten.
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 automatisch ein Browserfenster geöffnet und die SharePoint Workbench geladen. Dieser Vorgang kann einige Minuten dauern.
Das Toolkit fordert Sie ggf. 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 Dialogfeld angezeigt wird:
Der Teams-Webclient wird in einem Browserfenster geöffnet.
Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die benutzerdefinierte App auf Teams auf Ihrem lokalen Computer hochzuladen.
Wählen Sie die Web-App-Version aus, wenn Sie aufgefordert werden, zum Teams-Desktop zu wechseln. Sie können den HTML-, CSS- und JavaScript-Code in einer Standardmäßigen Webentwicklungsumgebung sehen.
Wählen Sie Debugskripts laden aus, wenn Sie aufgefordert werden, Debugskripts zu laden, bevor Ihre benutzerdefinierte App in Teams hochgeladen wird.
Herzlichen Glückwunsch, Ihre erste App wird in Teams ausgeführt!
Ihre App sollte jetzt ausgeführt werden. Sie können die App wie jedes andere SPFx-Webpart debuggen (z. B. das Festlegen von Haltepunkten).
Tipp
Versuchen Sie, Haltepunkte in der Rendermethode von SPFx/src/webparts/{webpart}/{webpart}.ts zu platzieren, und laden Sie das Browserfenster erneut. Visual Studio Code wird an Haltepunkten in Ihrem Code beendet.
Erfahren Sie, was geschieht, wenn Sie Local Workbench zum Debuggen Ihrer App verwenden.
Die lokale Workbench ist die Standardoption zum Ausführen und Debuggen einer App in Visual Studio Code. Für dieses Tutorial wird empfohlen, dass Sie Ihre App mit der Teams Workbench debuggen. Sie können jedoch die lokale Workbench auswählen, um Webpartlayouts zu untersuchen.
Hinweis
Diese Schnittstelle dient nur dazu, zu untersuchen, wie ein Webpart auf einem Mobilgerät oder Tablet angezeigt werden kann. Sie müssen den Code für die Aufnahme in Ihre App schreiben und dann bereitstellen, um sie anzuzeigen.
So erkunden Sie Webpartlayouts mithilfe der lokalen Workbench
Wählen Sie Lokale Workbench und dann F5 aus, um die App auszuführen und zu debuggen.
Die SharePoint-Webpart-Workbench wird im Browser geöffnet, damit Sie Webparts hinzufügen, bearbeiten und entfernen können.
Wählen Sie in Spalte 1 + Symbol Webpart hinzufügen aus, um Ihr Webpart hinzuzufügen.
Wählen Sie im Menü Ihr Webpart aus.
Wählen Sie Neuen Abschnitt hinzufügen + Symbol aus, um das Spaltenlayout für Ihre Webparts auszuwählen.
Verwenden Sie diese Benutzeroberfläche, um verschiedene Layouts für Webparts auszuprobieren:
- Zeigen Sie Webpartdaten für Ihr Layout an.
- Versuchen Sie, zwischen verschiedenen Layouts, Texten, Farben und mehr zu wechseln.
- Verwenden Sie die Schaltfläche Vorschau , um die Webparts anzuzeigen.
- Zeigen Sie das Webpartlayout auf verschiedenen Mobilen oder Tablet-Geräten an.
- Speichern oder verwerfen Sie alle Änderungen im Layout, um weiterhin mögliche Layouts auszuprobieren.
Schließen Sie das Browserfenster, um das Debuggen der lokalen Workbench zu beenden, wenn Sie bereit sind.
Bereitstellen Ihrer ersten Teams-App
Sie haben gelernt, eine Teams-App mit Tabstoppfunktion zu erstellen, zu erstellen und auszuführen. Der letzte Schritt besteht darin, Ihre App bereitzustellen.
Lassen Sie uns die erste App mit der Tab-Funktion in SharePoint mithilfe des Teams-Toolkits bereitstellen.
Auf dieser Seite erfahren Sie Folgendes:
Bereitstellen Ihrer App in SharePoint
Stellen Sie sicher, dass in Ihrer Bereitstellung ein SharePoint-App-Katalog vorhanden ist. Wenn sie nicht vorhanden ist, erstellen Sie eine. Es kann bis zu 15 Minuten dauern, bis der App-Katalog erstellt wurde.
Öffnen Sie Visual Studio Code.
Wählen Sie auf der Randleiste das Teams-Toolkit aus, indem Sie das Symbol Teams auswählen.
Wählen Sie unter LEBENSZYKLUSdie Option Bereitstellen aus.
Das Toolkit aktualisiert den Fortschritt in der unteren rechten Ecke. Nach einigen Sekunden wird der folgende Hinweis angezeigt:
Wählen Sie nach Abschluss der Bereitstellung unter LIFECYCLEdie Option Bereitstellen aus.
Das App-Paket wird erstellt und auf die SharePoint-Website hochgeladen. Das Teams-Toolkit zeigt eine Meldung mit dem lokalen Pfad an, in dem das App-Paket gespeichert ist.
Nachdem das Paket erstellt wurde, zeigt Teams Toolkit eine Meldung mit der URL der SharePoint-Website an, auf die Ihr App-Paket hochgeladen wurde.
Sie können entweder in Teams veröffentlichen oder die SharePoint-Website auswählen.
- Veröffentlichen in Teams (#publish-zu-Teams)
- Wählen Sie den Link der SharePoint-Website aus (#select-the-link-of-the-sharepoint-site)
In Teams veröffentlichen
Wählen Sie In Teams veröffentlichen aus.
Wählen Sie Verwaltungsportal aus.
Wählen Sie Apps verwalten aus, und durchsuchen Sie Ihre App im Suchabschnitt, um Ihre App auszuwählen.
Wählen Sie Veröffentlichen aus, um Ihre App in Teams zu veröffentlichen.
Öffnen Sie die Teams-Anwendung (oder melden Sie sich unter an
https://teams.microsoft.com).Wählen Sie auf der Randleiste den Dreifachpunkt und dann Alle Apps aus.
Die App wird in der Kategorie Apps angezeigt, die für Ihre Organisation erstellt wurden . Sie können die App dort hinzufügen.
Wählen Sie Ihre App und dann Hinzufügen aus.
Herzlichen Glückwunsch! Ihre App wird jetzt Teams hinzugefügt.
Wählen Sie den Link der SharePoint-Website aus.
Wählen Sie den Link der SharePoint-Website aus.
Die SharePoint-Website wird mit der Startseite Apps geöffnet. Führen Sie das Verfahren aus, um die App auf SharePoint zu verteilen.
Verteilen des App-Pakets auf SharePoint
Sie finden das hochgeladene App-Paket auf der SharePoint-Website. So verteilen Sie die App und synchronisieren sie mit Teams:
Wählen Sie Apps für SharePoint verteilen aus.
Die Startseite Apps für SharePoint wird geöffnet. Ihre App ist auf dieser Seite aufgeführt.
Wählen Sie die Registerkarte DATEIEN aus.
Wählen Sie das paket aus, das Sie bereitgestellt haben, und wählen Sie dann Mit Teams synchronisieren aus.
Hinweis
Der Vorgang "Mit Teams synchronisieren" kann einige Minuten dauern. Im Browser wird eine Meldung angezeigt, die angibt, dass die App erfolgreich mit Teams synchronisiert wurde.
Öffnen Sie die Teams-Anwendung (oder melden Sie sich unter an
https://teams.microsoft.com).Wählen Sie auf der Randleiste den Dreifachpunkt und dann Alle Apps aus.
Die App wird in der Kategorie Apps platziert, die für Ihre Organisation erstellt wurden . Sie können die App dort hinzufügen.
Wählen Sie Ihre App und dann Hinzufügen aus.
Herzlichen Glückwunsch! Ihre App wird jetzt Teams hinzugefügt.
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.