Vytvorte Fabric aplikáciu pomocou Claude Code

Použite tento recept na vytvorenie aplikácie Fabric, ktorá premení CSV súbor na interaktívny prieskumník dát. Claude Code kontroluje súbor, vytvára projekt ako oporu, implementuje filtre a vizualizácie, ktoré zapadajú do dostupných stĺpcov, a overuje aplikáciu z vášho terminálu.

Dokončená aplikácia obsahuje CSV súbor vo svojom statickom obsahu a načítava údaje v prehliadači. Tento prístup dobre funguje pre vzorky, verejné alebo necitlivé údaje, ktoré nevyžadujú živé pripojenie.

V tomto kurze:

  • Nainštalujte a spustite Claude Code.
  • Požiadajte Claude Code, aby vypracoval a skontroloval aplikáciu Fabric.
  • Vytvorte interaktívny prieskumník okolo svojho CSV súboru.
  • Skontrolujte a overte vygenerované zmeny.
  • Nainštalujte aplikáciu do Fabric.
  • Overte nasadenie a otvorte aplikáciu.

Požiadavky

  • Node.js 20 alebo neskôr.
  • Terminál podporovaný Claude Code.
  • Claude Pro, Max, Team, Enterprise alebo konzolový účet s prístupom k Claude kódu.
  • Konto Microsoft s prístupom k Fabric.
  • Fabric pracovný priestor, kde máte oprávnenia prispievateľa, člena alebo administrátora.
  • Záťaž Fabric Apps je zapnutá pre vášho tenanta.
  • UTF-8 CSV súbor s riadkom hlavičky. Poznajte celú cestu k súboru predtým, než začnete s Claude Code.

Dôležitý

CSV súbor nasadený ako statický obsah aplikácie je dostupný ľuďom, ktorí majú prístup k aplikácii. Nepoužívajte tento recept na tajomstvá, osobné údaje alebo iné citlivé informácie.

Pre systémové požiadavky Claude Code a možnosti účtu si pozrite dokumentáciu k nastaveniu Claude Code.

Inštalácia Claude Code

Nainštalujte Claude Code pomocou tejto metódy pre váš operačný systém.

Windows

Inštalácia Claude Code pomocou WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux alebo Windows Subsystem for Linux

Použite natívny inštalátor:

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

Overte inštaláciu:

claude --version
claude doctor

Pre ďalšie metódy inštalácie pozri Inštalovať Claude Code.

Start Claude Code

  1. Otvorte terminál v nadradenom priečinku, kde chcete vytvoriť projekt.

  2. Začnite Claude kód:

    claude

  3. Dokončite proces autentifikácie v prehliadači, ak je na to vyzvaný.

  4. Prezrite si prístupové a príkazové oprávnenia, ktoré Claude Code vyžaduje.

Nezačínajte Claude Code v priečinku, ktorý obsahuje nesúvisiace súbory, ktoré nechcete, aby sa kontrolovali alebo upravovali.

Postavte lešenie a spustite aplikáciu

Vložte nasledujúci prompt do 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.

Schvaľujte príkazy až po ich preštudovaní. Dokončite prihlásenie do prehliadača Rayfin, keď je na to vyzvané. Po spustení frontendu otvorte lokálnu URL, ktorú Claude Code hlási.

Požiadajte Claude Code, aby vytvoril data explorer

Dajte Claude Code kompletnú cestu k vášmu CSV súboru a opíšte, ako by mali ľudia skúmať dáta. Agent môže kontrolovať hlavičky a vzorkovacie hodnoty, aby prispôsobil ovládacie prvky a vizualizácie dátovej sade.

Použite nasledujúci podnet ako východiskový recept. Nahraďte <full-path-to-csv-file> to cestou k svojmu súboru.

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.

Prejdite si plán predtým, než Claude Code upraví projekt. Ak plán nespĺňa vaše požiadavky, opravte ho pred schválením implementácie.

Skontrolujte generované zmeny

Po dokončení Claude Code ho požiadajte, aby si zhodnotil svoju prácu:

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.

Skontroluj si verziu zdrojového kódu sám. Venujte osobitnú pozornosť:

  • Skopírovaný CSV asset a či je vhodné ho zverejniť.
  • CSV parsovanie a odvodzovanie typu.
  • Konfigurácia služby v rayfin/rayfin.yml.
  • Nové závislosti v package.json.
  • Tajomstvá alebo poverenia, ktoré nesmiete prezradiť.

Overte aplikáciu

Požiadajte Claude Code, aby spustil existujúcu validáciu projektu:

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.

V prehliadači porovnajte niekoľko riadkov, súčtov a filtrovaných výsledkov so zdrojovým CSV súborom. Testujte prázdne výsledky, zdeformované údaje, navigáciu klávesnicou a úzke obrazovky.

Nasadiť hotovú aplikáciu

Po preštudovaní zmien a otestovaní aplikácie požiadajte Claude Code, aby ju nasadil:

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.

Ten istý npx rayfin up príkaz aktualizuje existujúce nasadenie, keď pokračujete vo vývoji aplikácie.

Pokračovať v iterovaní s Claude Code

Používajte zamerané prompty na neskoršie zmeny. Zahrňte požadované správanie, postihnutých používateľov, obmedzenia a validačné kroky.

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.

Udržujte každú požiadavku dostatočne malú na preštudovanie. Zaveďte funkčný stav skôr, než požiadate Claude Code o veľkú alebo potenciálne deštruktívnu zmenu.

Riešenie problémov s workflow Claude Code

Claude Code tlačí iba príkazy

Povedz Claude Code, aby spustil príkazy a nahlásil výsledky. Skontrolujte a schválte požadované povolenia príkazov.

Príkaz čaká na prihlásenie

Dokončite prihlasovací proces prehliadača. Potom povedzte Claude Code, že prihlásenie je dokončené, aby mohol pokračovať.

Claude Code funguje v nesprávnom priečinku

Ukončite reláciu, otvorte terminál v scaffolded projektovej zložke a spustite claude znova.

Claude Code nevie nájsť príkaz

Bežte claude doctor skontrolovať inštaláciu Claude Code. Pre Rayfin príkazy potvrďte, že Node.js 20 alebo viac a závislosti projektu sú nainštalované.

Aplikácia sa otvorí, ale CSV dáta sa nenačítajú

Požiadajte Claude Code, aby skontroloval sieť prehliadača a chyby konzoly, overil cestu nasadeného assetu a potvrdil, že CSV súbor je zahrnutý v statickom výstupe zostavenia.

Claude Code navrhuje --force

Vyžaduj, aby Claude Code najprv ukázal potenciálne deštruktívne operácie schémy. Prijmite --force len vtedy, keď pochopíte a schválite možnú stratu dát.

Pre ďalšie problémy s aplikáciami pozri Troubleshoot Fabric Apps.

Súvisiaci obsah

  • Naposledy aktualizované: