Skapa en Fabric-app med Claude Code

Använd detta recept för att skapa en Fabric-app som förvandlar en CSV-fil till en interaktiv datautforskare. Claude Code granskar filen, bygger upp projektet, implementerar filter och visualiseringar som passar de tillgängliga kolumnerna och validerar appen från din terminal.

Den färdiga appen inkluderar CSV-filen i sitt statiska innehåll och laddar in datan i webbläsaren. Denna metod fungerar bra för prov, offentlig eller icke-känslig data som inte kräver en live-anslutning.

I den här handledningen kommer du att:

  • Installera och starta Claude Code.
  • Be Claude Code att hjälpa dig att skapa grundstrukturen för och granska en app i Fabric.
  • Bygg en interaktiv utforskare kring din CSV-fil.
  • Gå igenom och validera de genererade ändringarna.
  • Distribuera appen till Fabric.
  • Verifiera driftsättningen och öppna appen.

Förutsättningar

  • Node.js 20 eller senare.
  • En terminal som stöds av Claude Code.
  • Ett Claude Pro-, Max-, Team-, Enterprise- eller Console-konto med Claude Code-åtkomst.
  • En Microsoft-konto med åtkomst till Fabric.
  • En Fabric arbetsyta där du har behörighet som deltagare, medlem eller administratör.
  • Fabric Apps-arbetsbelastningen är aktiverad för din hyresgäst.
  • En UTF-8 CSV-fil med en headerrad. Känn till hela vägen till filen innan du börjar med Claude Code.

Important

En CSV-fil som distribueras som statiskt appinnehåll är tillgänglig för personer som kan komma åt appen. Använd inte detta recept för hemligheter, personuppgifter eller annan känslig information.

För Claude Code-systemkrav och kontoalternativ, se Claude Code-installationsdokumentationen.

Installera Claude Code

Installera Claude Code genom att använda metoden för ditt operativsystem.

Windows

Installera Claude Code med WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux eller Podsystém Windowsu pre Linux

Använd det inbyggda installationsprogrammet:

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

Kontrollera installationen:

claude --version
claude doctor

För andra installationsmetoder, se Install Claude Code.

Start Claude Code

  1. Öppna en terminal i föräldramappen där du vill skapa projektet.

  2. Start Claude Code:

    claude

  3. Slutför webbläsarens autentiseringsflöde om du blir tillfrågad.

  4. Gå igenom mappåtkomst och kommandobehörigheter som Claude Code begär.

Starta inte Claude Code i en mapp som innehåller orelaterade filer som du inte vill att den ska granska eller ändra.

Skapa och kör appen

Klistra in följande prompt i 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.

Godkänn kommandon först efter att du har granskat dem. Slutför inloggningen till Rayfin-webbläsaren när du blir tillfrågad. När frontend har startat, öppna den lokala URL som Claude Code anger.

Be Claude Code bygga datautforskaren

Ge Claude Code hela vägen till din CSV-fil och beskriv hur folk bör utforska datan. Agenten kan inspektera headers och stickprovsvärden för att anpassa kontroller och visualiseringar till datamängden.

Använd följande prompt som startrecept. Ersätt <full-path-to-csv-file> med sökvägen till din fil.

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.

Gå igenom planen innan Claude Code redigerar projektet. Om planen inte motsvarar dina krav, rätta till den innan du godkänner genomförandet.

Granska de genererade ändringarna

När Claude Code är klar, be den granska sitt arbete:

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.

Granska diffen i versionshanteringen själv. Var särskilt uppmärksam på:

  • Den kopierade CSV-resursen och om den är lämplig för publicering.
  • CSV-parsning och typinferens.
  • Tjänstekonfiguration i rayfin/rayfin.yml.
  • Nya beroenden i package.json.
  • Hemligheter eller meriter som du inte får begå.

Verifiera appen

Be Claude Code köra projektets befintliga validering:

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.

I webbläsaren, jämför några rader, totalsummor och filtrerade resultat med källfilen från CSV-filen. Testa tomma resultat, felaktiga data, tangentbordsnavigering och smala skärmar.

Distribuera den färdiga appen

Efter att du har granskat ändringarna och testat appen, be Claude Code att distribuera den:

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.

Samma npx rayfin up kommando uppdaterar en befintlig distribution när du fortsätter utveckla appen.

Fortsätt iterera med Claude Code

Använd fokuserade uppmaningar för senare ändringar. Inkludera önskat beteende, påverkade användare, begränsningar och valideringssteg.

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.

Håll varje begäran tillräckligt liten för att granska. Checka in ett fungerande läge innan du ber Claude Code att göra en större eller potentiellt destruktiv ändring.

Felsök Claude Code-arbetsflödet

Claude Code skriver bara ut kommandon

Säg åt Claude Code att köra kommandona och rapportera deras resultat. Granska och godkänn de begärda kommandobehörigheterna.

Ett kommando väntar på inloggning

Slutför webbläsarens inloggningsflöde. Säg sedan till Claude Code att inloggningen är klar så att det kan fortsätta.

Claude Code fungerar i fel mapp

Avsluta sessionen, öppna en terminal i mappen för det genererade projektet och kör claude igen.

Claude Code kan inte hitta något kommando

Kör claude doctor för att kontrollera installationen av Claude Code. För Rayfin-kommandon, bekräfta att Node.js 20 eller senare och projektberoendena är installerade.

Appen öppnas men CSV-datan laddas inte

Be Claude Code att inspektera fel i webbläsarens nätverkspanel och konsol, verifiera sökvägen till den distribuerade resursen och bekräfta att CSV-filen ingår i utdata från den statiska byggprocessen.

Claude Code föreslår --force

Kräv att Claude Code först visar de potentiellt destruktiva schemaoperationerna. Acceptera --force endast när du förstår och godkänner den möjliga dataförlusten.

För andra appproblem, se Felsök Fabric Apps.

Relaterat innehåll

  • Uppdaterades senast