Schnellstart: Erstellen Ihrer ersten App mit VS Code

Gilt für: Entwickler

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 Azure Abrechnung an und registriert den Containertyp. Anschließend erstellen Sie einen Container und führen eine lokale Beispiel-App aus.

In diesem Artikel wird die Erstellungsjourney gestartet. Weitere Informationen zur Abrechnung finden Sie unter Erstellen und Konfigurieren eines Containertyps.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie über Folgendes verfügen:

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

Wichtig

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

Installieren der Erweiterung

1. Öffnen Sie Visual Studio Code.
2. Öffnen Sie Erweiterungen über die Aktivitätsleiste.
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 Akzeptieren aus, um die Administratoreinwilligung zu erteilen.
6. Kehren Sie bei der Umleitung zu Visual Studio Code zurück.

Wichtig

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

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

Erstellen eines Standardcontainertyps

Ein Containertyp definiert die Beziehung, Zugriffsberechtigungen, Abrechnungskonten und ausgewählte Verhaltensweisen für eine Gruppe von SharePoint Embedded-Containern.

1. Wählen Sie Containertyp erstellen aus.
2. Wählen Sie für die Abrechnungsmethode standard aus.
3. Geben Sie einen Containertypnamen ein.
4. Befolgen Sie die Anweisungen, bis die Erstellung abgeschlossen ist.

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

Erstellen oder Auswählen der besitzenden App

Jeder Containertyp besitzt eine 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. Lassen Sie die Erweiterung die Entwicklungseinstellungen konfigurieren.

Achtung

Wenn Sie eine vorhandene Anwendung auswählen, aktualisiert die Erweiterung die Konfiguration dieser App. Verwenden Sie für diese Schnellstartanleitung keine Produktions-App. Informationen zum Modell finden Sie unter SharePoint Embedded-App-Architektur.

Konfigurieren der Standardabrechnung

Standard Containertypen erfordern Azure Abrechnung. Die Erweiterung fügt die Abrechnung mithilfe eines Azure Abonnement 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 anfügt.

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

Lokales Registrieren des Containertyps

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

1. Folgen Sie nach der Erstellung der Aufforderung, 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 Sie die Administratoreinwilligung 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.

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.

Laden einer Beispiel-App

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

1. Überprüfen Sie die Warnung zu lokalen Nur-Text-Geheimnissen.

2. Wenn Sie aufgefordert werden, einen geheimen Clientschlüssel zu erstellen, wählen Sie OK für die lokale Entwicklung aus.

3. Lassen Sie die Erweiterung die Laufzeitkonfigurationsdatei auffüllen.

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 Sie 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 Beispiel-Benutzeroberfläche hoch.

Hinweis

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

Problembehandlung beim Starten

Problembeschreibung	Prüfen
Portkonflikt	Die App versucht den nächsten verfügbaren Port, wenn Port 8080 verwendet wird.
Fehler bei Abhängigkeiten	Führen Sie npm installaus, und führen Sie dann erneut aus npm run start .
Authentifizierungsfehler	Vergewissern Sie sich, dass die Microsoft Entra ID App über die erwarteten Umleitungs-URIs verfügt.
Zugriff verweigert	Bestätigen Sie, dass die Registrierung und administratoreinwilligung erfolgreich war.
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 Testcontainer, die Sie nicht mehr benötigen.
2. Überprüfen Sie 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.