Lag en Fabric-app med Claude Code

Bruk denne oppskriften til å lage en Fabric-app som gjør en CSV-fil om til en interaktiv datautforsker. Claude Code inspiserer filen, stiller opp prosjektet, implementerer filtre og visualiseringer som passer de tilgjengelige kolonnene, og validerer appen fra terminalen din.

Den ferdige appen inkluderer CSV-filen i sitt statiske innhold og laster dataene i nettleseren. Denne tilnærmingen fungerer godt for prøvedata, offentlige eller ikke-sensitive data som ikke krever en live-tilkobling.

I denne opplæringen:

  • Installer og start Claude Code.
  • Be Claude Code om å sette opp og inspisere en Fabric-app.
  • Bygg en interaktiv utforsker rundt CSV-filen din.
  • Gå gjennom og godkjenn de genererte endringene.
  • Distribuer appen til Fabric.
  • Bekreft distribusjonen og åpne appen.

Forutsetninger

  • Node.js 20 eller senere.
  • En terminal støttet av Claude Code.
  • En Claude Pro-, Max-, Team-, Enterprise- eller Console-konto med Claude Code-tilgang.
  • En Microsoft-konto med tilgang til Fabric.
  • Et Fabric-arbeidsområde hvor du har tillatelser som bidragsyter, medlem eller administrator.
  • Fabric Apps-arbeidsbelastningen er aktivert for din leietaker.
  • En UTF-8 CSV-fil med en header-rad. Kjenn hele stien til filen før du starter Claude Code.

Important

En CSV-fil distribuert som statisk app-innhold er tilgjengelig for folk som kan få tilgang til appen. Ikke bruk denne oppskriften for hemmeligheter, personopplysninger eller annen sensitiv informasjon.

For Claude Code-systemkrav og kontoalternativer, se Claude Code-oppsettsdokumentasjonen.

Installer Claude Code

Installer Claude Code ved å bruke metoden for operativsystemet ditt.

Windows

Installer Claude Code med WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux eller Windows-undersystem for Linux

Bruk den innebygde installasjonsprogrammet:

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

Bekreft installasjonen:

claude --version
claude doctor

For andre installasjonsmetoder, se Installer Claude Code.

Start Claude Code

  1. Åpne en terminal i foreldremappen hvor du vil opprette prosjektet.

  2. Start Claude Code:

    claude

  3. Fullfør nettleserens autentiseringsprosess hvis du blir bedt om det.

  4. Gå gjennom mappetilgangen og kommandotillatelsene som Claude Code ber om.

Ikke start Claude Code i en mappe som inneholder urelaterte filer du ikke vil at den skal inspisere eller endre.

Stillas og kjør appen

Lim inn 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.

Godkjenn kommandoer først etter at du har gjennomgått dem. Fullfør Rayfin-nettleserens innlogging når du blir bedt om det. Etter at frontenden starter, åpne den lokale URL-en som Claude Code rapporterer.

Be Claude Code bygge datautforskeren

Gi Claude Code hele veien til CSV-filen din og beskriv hvordan folk bør utforske dataene. Agenten kan inspisere hodene og prøveverdiene for å tilpasse kontroller og visualiseringer til datasettet.

Bruk følgende prompt som startoppskrift. Erstatt <full-path-to-csv-file> med stien til filen din.

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å gjennom planen før Claude Code redigerer prosjektet. Hvis planen ikke samsvarer med kravene dine, korriger den før du godkjenner implementeringen.

Gå gjennom de genererte endringene

Etter at Claude Code er ferdig, be den gjennomgå arbeidet sitt:

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.

Gå gjennom kildekontroll-differensialet selv. Vær spesielt oppmerksom på:

  • Den kopierte CSV-ressursen og om den er passende å publisere.
  • CSV-parsing og typeinferens.
  • Tjenestekonfigurasjon i rayfin/rayfin.yml.
  • Nye avhengigheter i package.json.
  • Hemmeligheter eller kvalifikasjoner du ikke må forplikte.

Valider appen

Be Claude Code kjøre prosjektets 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 nettleseren, sammenlign noen rader, totaler og filtrerte resultater med kilde-CSV-filen. Testtomme resultater, feildannede data, tastaturnavigasjon og smale skjermer.

Distribuer den ferdige appen

Etter at du har gjennomgått endringene og testet appen, be Claude Code om å distribuere 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 kommandoen oppdaterer en eksisterende distribusjon når du fortsetter å utvikle appen.

Fortsett å iterere med Claude Code

Bruk fokuserte prompts for senere endringer. Inkluder ønsket atferd, berørte brukere, begrensninger og valideringstrinn.

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 forespørsel liten nok til å kunne gjennomgås. Forplikt deg til en fungerende tilstand før du ber Claude Code om å gjøre en stor eller potensielt destruktiv endring.

Feilsøk Claude Code-arbeidsflyten

Claude Code skriver kun ut kommandoer

Be Claude Code kjøre kommandoene og rapportere resultatene. Gå gjennom og godkjenn de forespurte kommandotillatelsene.

En kommando venter på innlogging

Fullfør nettleserens innloggingsflyt. Si deretter til Claude Code at innloggingen er fullført slik at det kan fortsette.

Claude Code fungerer i feil mappe

Avslutt økten, åpne en terminal i den stillasbaserte prosjektmappen, og kjør claude igjen.

Claude Code finner ingen kommando

Kjør claude doctor for å sjekke installasjonen av Claude Code. For Rayfin-kommandoer, bekreft at Node.js 20 eller nyere og at prosjektavhengighetene er installert.

Appen åpnes, men CSV-dataene lastes ikke inn

Be Claude Code inspisere nettlesernettverket og konsollfeilene, verifisere den distribuerte asset-stien, og bekrefte at CSV-filen er inkludert i den statiske byggeutdataen.

Claude Code foreslår --force

Krev at Claude Code viser de potensielt destruktive skjemaoperasjonene først. Aksepter --force kun når du forstår og godkjenner mulig datatap.

For andre appproblemer, se Troubleshoot Fabric Apps.

Relatert innhold

  • Sist oppdatert