Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Verwenden Sie dieses Rezept, um eine Fabric-App zu erstellen, die eine CSV-Datei in einen interaktiven Datenexplorer verwandelt. Claude Code inspiziert die Datei, baut das Projekt ab, implementiert Filter und Visualisierungen, die zu den verfügbaren Spalten passen, und validiert die App von Ihrem Terminal aus.
Die fertige App enthält die CSV-Datei in ihrem statischen Inhalt und lädt die Daten im Browser. Dieser Ansatz funktioniert gut für Sample-, öffentliche oder nicht sensible Daten, die keine Live-Verbindung erfordern.
In diesem Tutorial lernen Sie:
- Claude Code installieren und starten.
- Bitten Sie Claude Code, das Grundgerüst einer Fabric-App zu erstellen und sie zu prüfen.
- Baue einen interaktiven Explorer um deine CSV-Datei herum.
- Überprüfen und validieren Sie die generierten Änderungen.
- Deploye die App auf Fabric.
- Verifiziere die Bereitstellung und öffne die App.
Voraussetzungen
- Node.js 20 oder später.
- Ein Terminal, das von Claude Code unterstützt wird.
- Ein Claude Pro-, Max-, Team-, Enterprise- oder Console-Konto mit Claude Code-Zugriff.
- Ein Microsoft-Konto mit Zugriff auf Fabric.
- Ein Fabric Arbeitsbereich, in dem Sie über Berechtigungen "Mitwirkender", "Mitglied" oder "Administrator" verfügen.
- Die Fabric Apps Workload ist für Ihren Tenant aktiviert.
- Eine UTF-8 CSV-Datei mit einer Header-Zeile. Kennen Sie den vollständigen Pfad zur Datei, bevor Sie mit Claude Code beginnen.
Important
Eine CSV-Datei, die als statischer App-Inhalt bereitgestellt wird, steht Personen zur Verfügung, die auf die App zugreifen können. Verwenden Sie dieses Rezept nicht für Geheimnisse, persönliche Daten oder andere sensible Informationen.
Für Claude Code Systemanforderungen und Kontooptionen siehe die Claude Code Einrichtungsdokumentation.
Claude Code installieren
Installieren Sie Claude Code, indem Sie die Methode für Ihr Betriebssystem verwenden.
Windows
Claude Code mit WinGet installieren:
winget install Anthropic.ClaudeCode
macOS, Linux oder Windows-Subsystem für Linux
Verwenden Sie den nativen Installer:
curl -fsSL https://claude.ai/install.sh | bash
Überprüfen Sie die Installation:
claude --version
claude doctor
Für andere Installationsmethoden siehe Claude Code installieren.
Claude Code starten
Öffne ein Terminal im Hauptordner, in dem du das Projekt erstellen möchtest.
Start Claude Code:
claudeSchließen Sie den Browser-Authentifizierungsablauf ab, falls Sie dazu aufgefordert werden.
Überprüfen Sie den Ordnerzugriff und die Befehlsberechtigungen, die Claude Code anfordert.
Starte Claude Code nicht in einem Ordner, der nicht zusammenhängende Dateien enthält, die du nicht inspizieren oder verändern möchtest.
Erstelle das App-Grundgerüst und starte die App
Fügen Sie folgenden Prompt in Claude Code ein:
Set up a new Rayfin app for me, end to end.
Create the project in a folder named csv-data-explorer. Before changing code, read any
CLAUDE.md, copilot-instructions.md, and agent guidance included in the scaffolded project.
Do the work yourself instead of only printing instructions:
1. Run `npm create @microsoft/rayfin@latest csv-data-explorer`.
2. Inspect the scaffolded project. Explain the purpose of rayfin/rayfin.yml,
rayfin/data/, and src/.
3. Install dependencies if the scaffold command didn't install them.
4. Run `npx rayfin login` and pause while I complete sign-in.
5. Deploy the backend with `npx rayfin up`.
6. Confirm the deployment with `npx rayfin up status`.
7. Start the frontend with `npm run dev`.
8. Tell me the local URL to open and summarize what you created.
Ask before making a destructive change or using a force option.
Genehmige Befehle erst, nachdem du sie überprüft hast. Schließen Sie die Anmeldung im Rayfin-Browser durch, wenn Sie aufgefordert werden. Nachdem das Frontend gestartet ist, öffne die lokale URL, die Claude Code meldet.
Bitte Claude Code, den Data Explorer zu bauen
Geben Sie Claude Code den vollständigen Pfad zu Ihrer CSV-Datei und beschreiben Sie, wie die Nutzer die Daten erkunden sollten. Der Agent kann die Header und Beispielwerte inspizieren, um Steuerungen und Visualisierungen an den Datensatz anzupassen.
Verwenden Sie den folgenden Prompt als Startrezept. Ersetze <full-path-to-csv-file> durch den Pfad zu deiner Datei.
Turn this Fabric app into a data explorer for the CSV file at
<full-path-to-csv-file>.
Requirements:
- Inspect the headers and a representative sample of rows first. Summarize the
inferred date, numeric, Boolean, and categorical columns before editing.
- Don't modify the source file. Copy it into an appropriate static asset folder with
a clear name so the deployed app can load it.
- Parse quoted fields, escaped commas, missing values, and line breaks correctly.
Use an existing CSV dependency if the project includes one. Otherwise, add a
well-maintained parser and explain why it's needed.
- Build KPI callouts and two useful charts based on the columns actually present.
Don't invent fields or values.
- Add a global search, column filters appropriate to each inferred data type, sortable
columns, pagination, and a control to clear all filters.
- Show the filtered row count, and calculate KPIs and charts from the filtered rows.
- Add a detailed data grid and preserve the original column names.
- Include loading, empty, and error states.
- Report malformed rows without crashing the app.
- Make the layout usable with a keyboard and responsive at desktop and mobile sizes.
- Follow the scaffolded project's existing component and styling patterns.
- Don't add dependencies unless they're necessary.
Before editing, inspect the relevant files and give me a short implementation plan.
Then make the changes, run the existing build, start the app, and validate the main
flows in a browser at desktop and mobile sizes. Explain any errors you fix.
Überprüfen Sie den Plan, bevor Claude Code das Projekt überarbeitet. Wenn der Plan nicht Ihren Anforderungen entspricht, korrigieren Sie ihn, bevor Sie die Umsetzung genehmigen.
Überprüfen der generierten Änderungen
Nachdem Claude Code fertig ist, bitte ihn, seine Arbeit zu überprüfen:
Review the changes you made against every requirement in my previous prompt.
Check for:
- Incorrect parsing of quoted fields, escaped commas, missing values, or line breaks.
- Type inference that changes valid identifiers or loses numeric precision.
- KPIs or charts that don't update from the filtered rows.
- Search, filtering, sorting, pagination, or clear-filter controls that don't work.
- Invented fields, values, or fallback data that aren't in the CSV file.
- The original CSV file being modified.
- Missing loading, empty, or error states.
- TypeScript, build, browser console, or responsive layout errors.
Fix confirmed issues, rerun the existing build and browser checks, and summarize the
final behavior.
Überprüfe den Diff in der Quellcodeverwaltung selbst. Achte besonders auf:
- Das kopierte CSV-Asset und ob es geeignet ist, es zu veröffentlichen.
- CSV-Parsing und Typinferenz.
- Service-Konfiguration in
rayfin/rayfin.yml. - Neue Abhängigkeiten in
package.json. - Geheimnisse oder Anmeldedaten, die du nicht committen darfst.
Überprüfen der App
Bitten Sie Claude Code, die bestehende Validierung des Projekts durchzuführen:
Validate the app without adding new tools.
1. Run the existing build and type-check commands from package.json.
2. Start the frontend if it isn't already running and report the local URL.
3. In a browser, verify the initial row count against the CSV file.
4. Test search, each filter type, sorting, pagination, clear filters, and malformed-row
handling. Confirm that KPIs and charts update with the filtered rows.
5. Check desktop and mobile layouts and report browser console errors.
6. Fix confirmed issues and rerun the failed check.
Im Browser vergleichen Sie einige Zeilen, Summen und gefilterte Ergebnisse mit der Quell-CSV-Datei. Testen Sie leere Ergebnisse, fehlformatierte Daten, Tastaturnavigation und schmale Bildschirme.
Deploye die fertige App
Nachdem Sie die Änderungen überprüft und die App getestet haben, bitten Sie Claude Code, sie bereitzustellen:
Deploy the reviewed app to Fabric.
1. Show me the current git diff and summarize what will be deployed.
2. Run `npx rayfin up`.
3. Run `npx rayfin up status`.
4. Confirm that the deployment is healthy.
5. Give me the hosted app URL and Fabric portal link from the command output.
Stop and explain the issue if deployment or verification fails.
Derselbe npx rayfin up Befehl aktualisiert eine bestehende Bereitstellung, wenn du die App weiterentwickelst.
Weiter iterieren mit Claude Code
Verwenden Sie fokussierte Prompts für spätere Änderungen. Fügen Sie das gewünschte Verhalten, betroffene Nutzer, Einschränkungen und Validierungsschritte hinzu.
Add saved views to the CSV data explorer.
Let users name and save the current search, filters, sort order, and visible columns
in browser storage. Don't store or duplicate CSV rows in browser storage. Add controls
to apply, rename, and delete a saved view. Run the existing build and browser checks,
then list the user flows I should retest.
Halte jede Anfrage klein genug, um sie zu überprüfen. Verbinde einen funktionierenden Zustand, bevor du Claude Code bittest, eine große oder potenziell zerstörerische Änderung vorzunehmen.
Fehlerbehebung des Claude Code-Workflows
Claude Code druckt nur Befehle aus
Sag Claude Code, er soll die Befehle ausführen und die Ergebnisse melden. Überprüfen und genehmigen Sie die angeforderten Befehlsberechtigungen.
Ein Befehl wartet auf die Anmeldung
Schließen Sie den Anmeldeprozess des Browsers ab. Dann sag Claude Code, dass die Anmeldung abgeschlossen ist, damit es fortgesetzt werden kann.
Claude Code funktioniert im falschen Ordner
Beenden Sie die Sitzung, öffnen Sie ein Terminal im Scaffolded-Projektordner und starten claude Sie erneut.
Claude Code findet keinen Befehl
Führen Sie claude doctor aus, um die Claude-Code-Installation zu überprüfen. Für Rayfin-Befehle bestätigen Sie, dass Node.js 20 oder höher und die Projektabhängigkeiten installiert sind.
Die App öffnet sich, aber die CSV-Daten werden nicht geladen
Bitten Sie Claude Code, die Fehler im Browsernetzwerk und in der Konsole zu überprüfen, den Pfad des bereitgestellten Assets zu überprüfen und zu bestätigen, dass die CSV-Datei in der statischen Build-Ausgabe enthalten ist.
Claude Code schlägt vor, --force
Claude Code sollte zuerst die potenziell destruktiven Schema-Operationen zeigen. Akzeptieren Sie --force nur, wenn Sie den möglichen Datenverlust verstehen und zustimmen.
Für weitere App-Probleme siehe Troubleshoot Fabric Apps.