Schnellstart: Erstellen Ihrer ersten App mit VS Code

Gilt für: Entwickler

Installieren der SharePoint Embedded-Erweiterung für Visual Studio Code Um einen Containertyp zu erstellen, die besitzende App und Abrechnung zu konfigurieren, den Containertyp zu registrieren, Container zu erstellen und eine Beispiel-App aus einer geführten Ansicht im Editor zu laden:

Abrufen der Erweiterung aus dem Visual Studio Marketplace

Verwenden Sie die SharePoint Embedded Visual Studio Code-Erweiterung , um einen Standardcontainertyp für Ihre erste App zu erstellen. Die Erweiterung konfiguriert auch die besitzende App, fügt die Azure-Abrechnung an und registriert den Containertyp. Anschließend erstellen Sie einen Container und führen eine lokale Beispiel-App aus.

In diesem Artikel beginnt die Buildreise. Weitere Abrechnungsinformationen finden Sie unter Erstellen und Konfigurieren eines Containertyps.

Tipp

Bevorzugen Sie es, mit einem Coding-Agent anstatt mit einer geführten Ansicht zu erstellen? Verwenden Sie den SharePoint Embedded MCP-Server , um Ressourcen in natürlicher Sprache bereitzustellen und zu verwalten.

Voraussetzungen

Stellen Sie zunächst sicher, dass Sie über Folgendes verfügen:

  • Visual Studio Code installiert.
  • Administratorzugriff auf einen Microsoft 365-Mandanten.
  • Ein Mandant mit verfügbarem SharePoint.
  • Ein Azure-Abonnement und eine Ressourcengruppe, auf die Ihr Konto zugreifen kann.
  • Besitzer oder Mitwirkender für das Azure-Abonnement.
  • Node.js und npm für die Beispiel-App installiert.
  • Berechtigung zum Erteilen der Administratorzustimmung in Microsoft Entra ID.

Wichtig

Sie benötigen Administratorzugriff auf einen Microsoft 365-Mandanten. Wenn Sie keinen Mandanten haben, verwenden Sie das Microsoft 365 Developer Program, Microsoft Customer Digital Experience oder eine Microsoft 365 E3 Testversion.

Installieren der Erweiterung

Installieren Sie die Erweiterung über die Schaltfläche oben in diesem Artikel oder im Editor:

  1. Öffnen Sie Visual Studio Code.
  2. Erweiterungen über die Aktivitätsleiste öffnen.
  3. Suchen Sie nach SharePoint Embedded.
  4. Wählen Sie Installieren aus.
  5. Wenn die Erweiterung bereits installiert ist, aktualisieren Sie sie.
  6. Wählen Sie das SharePoint Embedded-Symbol in der Aktivitätsleiste aus.

Anmelden

  1. Wählen Sie in der SharePoint Embedded-Ansicht die Anmeldeaktion aus.
  2. Verwenden Sie ein Microsoft 365-Administratorkonto.
  3. Schließen Sie die Authentifizierung im Browser ab.
  4. Überprüfen Sie die angeforderten Berechtigungen.
  5. Wählen Sie "Annehmen" aus, um die Administratoreinwilligung zu erteilen.
  6. Kehren Sie zu Visual Studio Code zurück, wenn Sie umgeleitet werden.

Wichtig

Überprüfen Sie die Zustimmungsaufforderung sorgfältig. Die Erweiterung benötigt Mandantenberechtigungen, um Entwicklungsressourcen zu konfigurieren.

Screenshot der SharePoint Embedded-Anmeldeansicht in Visual Studio Code.

Nach der Anmeldung zeigt die Erweiterung die SharePoint Embedded-Startansicht an.

Screenshot der SharePoint Embedded-Startansicht in Visual Studio Code nach der Anmeldung. In der Ansicht werden Aktionen zum Erstellen eines Containertyps und zum Laden einer Beispiel-App aufgelistet.

Erstellen eines Standardcontainertyps

Ein Containertyp definiert die Beziehung, die Zugriffsrechte, die Rechnungsverantwortung und ausgewählte Verhaltensweisen für eine Reihe von SharePoint Embedded-Containern.

  1. Wählen Sie Containertyp erstellen aus.
  2. Wählen Sie als Zahlungsmethode Standard aus.
  3. Geben Sie einen Namen für den Containertyp ein.
  4. Folgen Sie den Anweisungen, bis die Erstellung abgeschlossen ist.

Screenshot des Visual Studio Code-Eingabefelds, das während des Flusses zum Erstellen eines Containertyps zur Eingabe eines Containertypnamens auffordert.

Verwenden Sie einen Standardcontainertyp, wenn die organization, die die App besitzt, für die Nutzung von SharePoint Embedded bezahlt. Wählen Sie für die Auswertung die Option "Test" aus. Wählen Sie für die Kunden-Mandanten-Abrechnung die Pass-Through-Option aus, die die directToCustomer Abrechnungsklassifizierung verwendet.

Erstellen oder Auswählen der besitzenden App

Jeder Containertyp verfügt über eine eigene Microsoft Entra ID-Anwendung.

  1. Erstellen Sie eine neue Microsoft Entra ID-Anwendung, oder wählen Sie eine vorhandene Anwendungs-ID aus.
  2. Wenn Sie eine neue Anwendung erstellen, geben Sie deren Namen ein.
  3. Die Erweiterung kann Entwicklungseinstellungen konfigurieren.

Screenshot des Eingabefelds von Visual Studio Code, das zur Eingabe eines Microsoft Entra ID Anwendungsnamens auffordert, während die besitzende App für den Containertyp erstellt wird.

Achtung

Wenn Sie eine vorhandene Anwendung auswählen, aktualisiert die Erweiterung die Konfiguration dieser App. Verwenden Sie für diesen Schnellstart keine Produktions-App.

Informationen zum Modell finden Sie unter SharePoint Embedded-App-Architektur.

Standardabrechnung konfigurieren

Standard-Containertypen erfordern eine Azure-Abrechnung. Die Erweiterung fügt die Abrechnung unter Verwendung eines Azure-Abonnements und einer Ressourcengruppe an, auf die Ihr Konto zugreifen kann.

  1. Wählen Sie ein Azure-Abonnement aus.
  2. Wählen Sie eine Ressourcengruppe aus.
  3. Warten Sie, bis die Erweiterung den Microsoft.Syntex-Ressourcenanbieter registriert und die Abrechnung angefügt hat.

Wenn Sie die Einrichtung der Abrechnung überspringen oder nicht über die erforderlichen Azure-Berechtigungen verfügen, zeigt die Struktur an, dass die Abrechnung nicht eingerichtet ist. Um die Einrichtung später abzuschließen, klicken Sie mit der rechten Maustaste auf den Containertyp. Wählen Sie dann "Rechnung anfügen" aus.

Containertyp lokal registrieren

Sie müssen den Containertyp im nutzenden Mandanten registrieren, bevor Ihre App Container erstellen oder auf Inhalte zugreifen kann.

  1. Folgen Sie nach der Erstellung der Eingabeaufforderung, um den Containertyp im lokalen Mandanten zu registrieren.
  2. Wenn die Eingabeaufforderung nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf den Containertyp, und wählen Sie Registrieren aus.
  3. Überprüfen Sie die Berechtigungen.
  4. Erteilen der Administratorzustimmung im Browser.
  5. Kehren Sie zu Visual Studio Code zurück.

Die Registrierung konfiguriert die Berechtigungen, die die besitzende App für Container des Containertyps verwenden kann.

Screenshot der SharePoint Embedded-Erweiterung, die zur Registrierung des Containertyps beim lokalen Mandanten auffordert, mit hervorgehobener Registrierungsaktion.

Erstellen Ihres ersten Containers

  1. Erweitern Sie in der SharePoint Embedded-Struktur Ihren Containertyp.
  2. Klicken Sie mit der rechten Maustaste auf Container.
  3. Wählen Sie Container erstellen aus.
  4. Geben Sie einen Containernamen ein.
  5. Vergewissern Sie sich, dass der Container in der Struktur angezeigt wird.

Ein Container ist die grundlegende Speichereinheit und Sicherheitsgrenze in SharePoint Embedded.

Screenshot der SharePoint-Embedded-Struktur in Visual Studio Code. Ein Containertyp wird erweitert, der Knoten Container wird mit der rechten Maustaste angeklickt und der Befehl Container erstellen wird ausgewählt.

Screenshot des Eingabefelds von Visual Studio Code, das zur Eingabe eines Containernamens auffordert.

Beispiel-App laden

  1. Wählen Sie in der SharePoint Embedded-Ansicht "Beispiel-App laden" aus.
  2. Wählen Sie ein SharePoint Embedded-Beispiel aus.

Screenshot der Startansicht der SharePoint Embedded-Erweiterung mit ausgewählter Aktion

  1. Lesen Sie hierzu die Warnung über lokale Nur-Text-Geheimnisse.
  2. Wenn Sie aufgefordert werden, einen geheimen Clientschlüssel zu erstellen, wählen Sie OK für lokale Entwicklung aus.
  3. Die Laufzeitkonfigurationsdatei soll von der Erweiterung ausgefüllt werden.

Wichtig

Die Beispielkonfiguration ist nur für die Entwicklung vorgesehen. Es speichert Authentifizierungsgeheimnisse im Klartext auf Ihrem lokalen Computer.

Ausführen der Beispiel-App

Öffnen Sie ein Terminal und führen Sie die Beispiel-App aus dem generierten Beispielverzeichnis aus.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

Das Beispiel beginnt:

  • Eine React-Clientanwendung.
  • Ein Azure Functions-Anwendungsserver

Warten Sie, bis beide Konsolenausgaben angezeigt werden.

Gehen Sie dann wie folgt vor:

  1. Öffnen http://localhost:8080.
  2. Melden Sie sich mit demselben Microsoft 365-Administratorkonto an.
  3. Wählen Sie auf der Startseite Container aus.
  4. Erstellen Sie Container, und laden Sie Dateien über die Beispielbenutzeroberfläche hoch.

Hinweis

Der Erststart kann einige Minuten dauern, während Abhängigkeiten installiert und beide Anwendungen erstellt werden.

Behandeln von Problemen beim Start

Problembeschreibung Prüfen
Portkonflikt Die App versucht den nächsten verfügbaren Port, wenn Port 8080 verwendet wird.
Abhängigkeiten schlagen fehl Ausführen npm installund dann erneut ausführen npm run start .
Authentifizierungsfehler Stellen Sie sicher, dass die Microsoft Entra ID-App die erwarteten Umleitungs-URIs enthält.
Zugriff verweigert Vergewissern Sie sich, dass die Registrierung und die Administratoreinwilligung erfolgreich waren.
Abrechnung nicht eingerichtet Vergewissern Sie sich, dass Sie über die Berechtigungen "Besitzer" oder "Mitwirkender" für das ausgewählte Azure-Abonnement verfügen, und verwenden Sie dann "Abrechnung anfügen".

Bereinigen

Wenn Sie die Tests abgeschlossen haben:

  1. Entfernen Sie nicht mehr benötigte Testcontainer.
  2. Überprüfen Sie die Azure-Abrechnungsressourcen, die Sie für diese Schnellstartanleitung erstellt haben.
  3. Entfernen Sie lokale Beispielgeheimnisse, die nicht mehr benötigt werden.

Nächste Schritte

Weitere Informationen zu Containertypoptionen finden Sie unter Erstellen und Konfigurieren eines Containertyps.

  • Last updated on