Opret en Fabric-app med Claude Code

Brug denne opskrift til at lave en Fabric-app, der omdanner en CSV-fil til en interaktiv dataexplorer. Claude Code inspicerer filen, stiller projektet op, implementerer filtre og visualiseringer, der passer til de tilgængelige kolonner, og validerer appen fra din terminal.

Den færdige app inkluderer CSV-filen i dens statiske indhold og indlæser dataene i browseren. Denne tilgang fungerer godt til prøvedata, offentlige eller ikke-følsomme data, der ikke kræver en liveforbindelse.

I dette selvstudium skal du:

  • Installer og start Claude Code.
  • Bed Claude Code om at stille og inspicere en Fabric-app.
  • Byg en interaktiv udforsker omkring din CSV-fil.
  • Gennemgå og valider de genererede ændringer.
  • Udrul appen til Fabric.
  • Verificér udrulningen og åbn appen.

Forudsætninger

  • Node.js 20 eller senere.
  • En terminal understøttet af Claude Code.
  • En Claude Pro-, Max-, Team-, Enterprise- eller Console-konto med adgang til Claude Code.
  • En Microsoft-konto med adgang til Fabric.
  • Et Fabric-arbejdsområde, hvor du har tilladelser til bidragsyger, medlem eller administrator.
  • Fabric Apps-arbejdsbelastningen er aktiveret for din lejer.
  • En UTF-8 CSV-fil med en header-række. Kend hele stien til filen, før du starter Claude Code.

Vigtig

En CSV-fil, der er implementeret som statisk app-indhold, er tilgængelig for folk, der kan få adgang til appen. Brug ikke denne opskrift til hemmeligheder, personlige data eller andre følsomme oplysninger.

For Claude Code systemkrav og kontomuligheder, se Claude Code opsætningsdokumentationen.

Installer Claude Code

Installer Claude Code ved at bruge metoden til dit operativsystem.

Windows

Installer Claude Code med WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux eller Windows-undersystem til Linux

Brug den oprindelige installationsprogram:

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

Bekræft installationen:

claude --version
claude doctor

For andre installationsmetoder, se Install Claude Code.

Start Claude Code

  1. Åbn en terminal i forældremappen, hvor du vil oprette projektet.

  2. Start Claude Code:

    claude

  3. Fuldfør browserens autentificeringsflow, hvis du bliver bedt om det.

  4. Gennemgå mappeadgangen og kommandorettighederne, som Claude Code anmoder om.

Start ikke Claude Code i en mappe, der indeholder urelaterede filer, du ikke ønsker, at den skal inspicere eller ændre.

Sæt stilladset og kør appen

Indsæt følgende 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.

Godkend kun kommandoer, efter du har gennemgået dem. Gennemfør login-indloggingen i Rayfin-browseren, når du bliver bedt om det. Når frontenden starter, åbner du den lokale URL, som Claude Code rapporterer.

Bed Claude Code om at bygge data explorer

Giv Claude Code hele stien til din CSV-fil og beskriv, hvordan folk bør udforske dataene. Agenten kan inspicere headere og prøveværdier for at tilpasse kontroller og visualiseringer til datasættet.

Brug følgende prompt som startopskrift. Erstat <full-path-to-csv-file> med stien til 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.

Gennemgå planen, før Claude Code redigerer projektet. Hvis planen ikke matcher dine krav, så ret den, før du godkender implementeringen.

Gennemgå de genererede ændringer

Når Claude Code er færdig, bed den gennemgå sit arbejde:

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.

Gennemgå versionsversionssystemet selv. Vær særligt opmærksom på:

  • Den kopierede CSV-asset og om den er passende at offentliggøre.
  • CSV-parsing og type-inferens.
  • Servicekonfiguration i rayfin/rayfin.yml.
  • Nye afhængigheder i package.json.
  • Hemmeligheder eller legitimationsoplysninger, som du ikke må begå.

Valider appen

Bed Claude Code om at køre projektets eksisterende 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 browseren sammenlign nogle få rækker, totaler og filtrerede resultater med kilden til CSV-filen. Testresultater med tomme resultater, fejldannede data, tastaturnavigation og smalle skærme.

Udrul den færdige app

Efter du har gennemgået ændringerne og testet appen, så bed Claude Code om at implementere 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.

Den samme npx rayfin up kommando opdaterer en eksisterende deployment, når du fortsætter med at udvikle appen.

Fortsæt iterationen med Claude Code

Brug fokuserede prompts til senere ændringer. Inkluder den ønskede adfærd, berørte brugere, begrænsninger og valideringstrin.

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.

Hold hver anmodning lille nok til at kunne gennemgå dem. Forpligt dig til en arbejdstilstand, før du beder Claude Code om at foretage en stor eller potentielt ødelæggende ændring.

Fejlsøg Claude Code-arbejdsgangen

Claude Code udskriver kun kommandoer

Sig til Claude Code, at han skal køre kommandoerne og rapportere deres resultater. Gennemgå og godkend de anmodede kommandotilladelser.

En kommando venter på login.

Fuldfør browserens login-flow. Fortæl derefter Claude Code, at login er fuldført, så det kan fortsætte.

Claude Code fungerer i den forkerte mappe

Luk sessionen, åbn en terminal i den stilladsede projektmappe, og kør claude igen.

Claude Code kan ikke finde en kommando

Løb claude doctor for at tjekke Claude Code-installationen. For Rayfin-kommandoer, bekræft at Node.js 20 eller senere, og projektafhængighederne er installeret.

Appen åbner, men CSV-dataene indlæses ikke

Bed Claude Code om at inspicere browsernetværket og konsolfejlene, verificere den deployerede asset-sti og bekræfte, at CSV-filen er inkluderet i det statiske build-output.

Claude Code foreslår --force

Kræve, at Claude Code først viser de potentielt destruktive skemaoperationer. Accepter --force kun, når du forstår og godkender det mulige datatab.

For andre app-problemer, se Fejlfinding af Fabric Apps.

Relateret indhold

  • Sidst opdateret den