Maak een Fabric-app met Claude Code

Gebruik dit recept om een Fabric-app te maken die een CSV-bestand omzet in een interactieve data explorer. Claude Code inspecteert het bestand, ondersteunt het project, implementeert filters en visualisaties die passen bij de beschikbare kolommen en valideert de app vanaf je terminal.

De voltooide app bevat het CSV-bestand in de statische inhoud en laadt de gegevens in de browser. Deze aanpak werkt goed voor sample-, openbare of niet-gevoelige data die geen liveverbinding vereist.

In deze handleiding leert u:

Installeer en start Claude Code.
Vraag Claude Code om de basisstructuur van een Fabric-app te genereren en deze te inspecteren.
Bouw een interactieve verkenner rond je CSV-bestand.
Bekijk en valideer de gegenereerde wijzigingen.
Rol de app uit op Fabric.
Controleer de implementatie en open de app.

Prerequisites

Node.js 20 of hoger.
Een terminal ondersteund door Claude Code.
Een Claude Pro-, Max-, Team-, Enterprise- of Console-account met Claude Code-toegang.
Een Microsoft-account met toegang tot Fabric.
Een Fabric werkruimte met inzender-, lid- of beheerdersmachtigingen.
De Fabric Apps-workload is ingeschakeld voor je tenant.
Een UTF-8 CSV-bestand met een header-rij. Ken het volledige pad naar het bestand voordat je Claude Code begint.

Important

Een CSV-bestand dat als statische app-inhoud wordt ingezet, is beschikbaar voor mensen die toegang hebben tot de app. Gebruik dit recept niet voor geheimen, persoonlijke gegevens of andere gevoelige informatie.

Voor de systeemvereisten van Claude Code en accountopties, zie de Claude Code opzetdocumentatie.

Claude Code installeren

Installeer Claude Code door de methode voor je besturingssysteem te gebruiken.

Windows

Installeer Claude Code met WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux of Windows-subsysteem voor Linux

Gebruik de native installer:

curl -fsSL https://claude.ai/install.sh | bash

Controleer de installatie:

claude --version
claude doctor

Voor andere installatiemethoden, zie Claude Code installeren.

Claude Code starten

Open een terminal in de hoofdmap waar je het project wilt aanmaken.
Start Claude Code:
```
claude
```
Voltooi de browserverificatiestroom als daarom wordt gevraagd.
Controleer de maptoegang en opdrachtmachtigingen die Claude Code vraagt.

Start Claude Code niet in een map die niet-gerelateerde bestanden bevat die je niet wilt inspecteren of wijzigen.

Genereer en start de app

Plak de volgende prompt in Claude Code:

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.

Keur opdrachten pas goed nadat je ze hebt gecontroleerd. Voltooi de Rayfin-browser-aanmelding wanneer daarom wordt gevraagd. Nadat de frontend is gestart, open je de lokale URL die Claude Code rapporteert.

Vraag Claude Code om de data explorer te bouwen

Geef Claude Code het volledige pad naar je CSV-bestand en beschrijf hoe mensen de data zouden moeten verkennen. De agent kan de headers en samplewaarden inspecteren om controles en visualisaties af te stemmen op de dataset.

Gebruik de volgende prompt als startrecept. Vervang <full-path-to-csv-file> het met het pad naar je bestand.

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.

Bekijk het plan voordat Claude Code het project bewerkt. Als het plan niet aan je eisen voldoet, corrigeer het dan voordat je de uitvoering goedkeurt.

De gegenereerde wijzigingen controleren

Nadat Claude Code klaar is, vraag je het om zijn werk te beoordelen:

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.

Bekijk zelf de diff van broncodebeheer. Let vooral op:

De gekopieerde CSV-asset en of het geschikt is om te publiceren.
CSV-parseren en type-inferentie.
Serviceconfiguratie in rayfin/rayfin.yml.
Nieuwe afhankelijkheden in package.json.
Geheimen of inloggegevens die je niet mag committen.

De app valideren

Vraag Claude Code om de bestaande validatie van het project uit te voeren:

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.

Vergelijk in de browser een paar rijen, totalen en gefilterde resultaten met het bron-CSV-bestand. Test lege resultaten, ongeldige gegevens, toetsenbordnavigatie en smalle schermen.

Rol de voltooide app uit

Nadat je de wijzigingen hebt bekeken en de app hebt getest, vraag Claude Code om deze te implementeren:

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.

Hetzelfde npx rayfin up commando updatet een bestaande implementatie wanneer je de app verder ontwikkelt.

Blijf itereren met Claude Code

Gebruik gerichte prompts voor latere wijzigingen. Neem het gewenste gedrag, getroffen gebruikers, beperkingen en validatiestappen op.

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.

Houd elk verzoek klein genoeg om te kunnen beoordelen. Bepaal een werktoestand voordat je Claude Code vraagt een grote of mogelijk destructieve verandering door te voeren.

Problemen met de Claude Code-werkstroom oplossen

Claude Code geeft alleen opdrachten weer

Zeg tegen Claude Code dat hij de commando's moet uitvoeren en hun resultaten moet rapporteren. Bekijk en keur de gevraagde commandorechten goed.

Voltooi de inlogflow van de browser. Vertel dan Claude Code dat het inloggen voltooid is zodat het verder kan gaan.

Claude Code werkt in de verkeerde map

Sluit de sessie af, open een terminal in de gegenereerde projectmap en voer claude opnieuw uit.

Claude Code kan geen commando vinden

Ren claude doctor om de Claude Code-installatie te controleren. Voor Rayfin-commando's bevestig dat Node.js 20 of hoger en dat de projectafhankelijkheden zijn geïnstalleerd.

De app opent, maar de CSV-gegevens laden niet

Vraag Claude Code om de fouten in het browsernetwerk en de console te inspecteren, het pad van de gedeployeerde asset te verifiëren en te bevestigen dat het CSV-bestand is opgenomen in de statische build-uitvoer.

Claude Code stelt voor `--force`

Laat Claude Code eerst de potentieel destructieve schema-operaties tonen. Accepteer --force alleen wanneer je het mogelijke dataverlies begrijpt en goedkeurt.

Voor andere appproblemen, zie Troubleshoot Fabric Apps.

Feedback

Is deze pagina nuttig?

Laatst bijgewerkt om 2026-09-29