Freigeben über

Implementierungsanleitung

Beginnen Sie mit dem Starter-Kit Repository , um schnell produktiv zu werden. Das Forken des Repositorys ist die empfohlene Best Practice – Sie können Ihre Anpassungen in Ihrem Fork speichern und als Grundlage für Ihr eigenes Projekt verwenden. Das Projekt ist vorkonfiguriert, sodass Sie es direkt lokal ausführen können, und es sind Skripts verfügbar, um alles für Sie einzurichten.

Voraussetzungen

Die lokale Entwicklung wird unter Windows, macOS und Linux unterstützt. Installieren Sie oder haben Sie Zugriff auf:

Wahlfrei

  • Dev-Container / GitHub Codespaces. Wenn Sie Codespaces verwenden, wählen Sie mindestens einen 8-Core-Computer aus, und öffnen Sie den Codespace in VS Code lokal. Folgen Sie dann dem Setuphandbuch im Repository.

Forken Sie das Starter-Kit in Ihr eigenes GitHub-Konto, damit Sie Ihre Änderungen nachverfolgen und verwalten können.

git clone https://github.com/<your-account>/fabric-extensibility-toolkit.git
cd fabric-extensibility-toolkit

2. Starten der Entwicklungsumgebung

Führen Sie das Setupskript aus, um voraussetzungen zu konfigurieren (z. B. Microsoft Entra-App, Standardwerte). Verwenden Sie pwsh unter macOS/Linux.

# From the repo root
pwsh ./scripts/Setup/Setup.ps1 -WorkloadName "Org.MyWorkload"

Starten Sie dann die lokale Entwicklungsumgebung und das DevGateway:

# Terminal 1: start the local dev server (frontend + APIs)
pwsh ./scripts/Run/StartDevServer.ps1

# Terminal 2: register your local instance with Fabric
pwsh ./scripts/Run/StartDevGateway.ps1

3. Testen Sie Ihr Setup

Im Fabric-Portal:

  • Stellen Sie sicher, dass die erforderlichen Mandantenentwicklereinstellungen im Verwaltungsportal aktiviert sind.
  • Aktivieren Sie den Fabric-Entwicklermodus für Ihr Konto.
  • Öffnen Sie den Workload Hub, suchen Sie Ihre Workload (z. B Org.MyWorkload. ), und erstellen Sie ein Hello World-Element in Ihrem Entwicklungsarbeitsbereich.
  • Der Editor wird geöffnet – überprüfen Sie, ob das Element wie erwartet funktioniert und wie ein systemeigenes Artefakt im Arbeitsbereich angezeigt wird.

4. Passen Sie den Code an Ihre Anforderungen an.

Nehmen Sie zuerst kleine Änderungen vor, und überprüfen Sie alles vom Anfang bis zum Ende.

  • Aktualisieren sie die Editorkomponente (z. B.): Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx
  • Erstellen Sie eine Grundstruktur für einen neuen Elementtyp mit: ./scripts/Setup/CreateNewItem.ps1
  • Aktualisieren Sie Ihr Manifest bei Bedarf, und führen Sie es lokal aus, um das Verhalten zu überprüfen.

KI-gestützte Entwicklung

Dieses Repository funktioniert gut mit KI-Tools für Pair-Programming. Unabhängig davon, ob Sie lokal oder in GitHub Codespaces entwickeln, können Sie GitHub Copilot oder andere KI-Assistenten verwenden, um Aufgaben wie das Bearbeiten von React-Komponenten, das Aktualisieren von Routen oder das Generieren von Testgerüsten zu beschleunigen.

Tipp

Das Starter-Kit Repository ist KI-fähig und enthält GitHub Copilot-Anweisungen, die Sie durch die Anpassung des Hello World-Elements an Ihre Anforderungen führen. Andere KI-Tools (z. B. Anthropic Claude) können die gleichen Anleitungen befolgen, müssen jedoch so konfiguriert sein, dass die Anleitungsdateien oder Dokumente des Repositorys gelesen werden.

  • Verwenden Sie KI zum Entwerfen von Element-Editor-/Ansichtskomponenten und passen Sie sich dann an die Host-API-Muster an, die im Starter-Kit verwendet werden.
  • Bitten Sie KI, das Workloadmanifest zusammenzufassen und minimale Berechtigungssätze vorzuschlagen.
  • In Codespaces ist Copilot im Browser oder VS Code Desktop verfügbar; lassen Sie den Entwicklungsserver laufen, um Änderungen sofort zu sehen.

Tipp

Wenn Sie wissen möchten, was andere erstellt haben, öffnen Sie die Erweiterbarkeitsbeispiele und stellen Sie diese in Ihrer Umgebung bereit. Dort finden Sie umfangreiche Elementtypen, die Ihnen bei den ersten Schritten helfen.

Schnelle Iteration und Fehlerbehebung in Fabric

Das Erweiterbarkeitsframework wurde für eine schnelle Entwicklung entwickelt.

  • Wenn der Dev-Server und DevGateway ausgeführt wird, werden Codeänderungen in Ihrer App sofort angezeigt, wenn Sie das Element in Fabric öffnen.
  • Sie können mithilfe der Entwicklertools Ihres Browsers debuggen, während die Workload im Fabric iFrame gehostet wird.
  • Iterieren Sie schnell über die UI-, Routen- und Manifestkonfigurationen und validieren Sie das End-to-End-Verhalten in Ihrem Fabric-Arbeitsbereich.

Bewährte Methoden

  • Forken Sie das Starter-Kit-Repository und verwenden Sie Ihren Fork als Basis für Ihr Projekt.
  • Halten Sie Ihren Fork mit Upstream auf dem neuesten Stand, um Verbesserungen zu erhalten.
  • Überprüfen Sie Ihr Workloadmanifest frühzeitig und folgen Sie dem Prinzip der geringsten Rechte.
  • Verwenden Sie einen Dev-Container oder Codespaces für eine konsistente, einwegbare Umgebung.
  • Verwenden Sie die bereitgestellten Skripts (Setup, StartDevServer, StartDevGateway), um das Setup und den täglichen Workflow zu automatisieren.
  • Last updated on