Vytvořte aplikaci Fabric pomocí Claude Code

Použijte tento recept k vytvoření aplikace Fabric, která promění CSV soubor v interaktivní datový průzkumník. Claude Code soubor kontroluje, konstruuje projekt, implementuje filtry a vizualizace odpovídající dostupným sloupcům a ověřuje aplikaci z vašeho terminálu.

Dokončená aplikace obsahuje CSV soubor ve svém statickém obsahu a data načítá v prohlížeči. Tento přístup dobře funguje pro vzorky, veřejná nebo necitlivá data, která nevyžadují živé připojení.

V tomto kurzu se naučíte:

  • Nainstalujte a spusťte Claude Code.
  • Požádejte Claude Code, aby vytvořil kostru aplikace Fabric a zkontroloval ji.
  • Vytvořte interaktivní průzkumník kolem svého CSV souboru.
  • Zkontrolujte a ověřte generované změny.
  • Nasadit aplikaci do Fabric.
  • Ověřte nasazení a otevřete aplikaci.

Předpoklady

  • Node.js 20 nebo novější.
  • Terminál podporovaný Claude Code.
  • Účet Claude Pro, Max, Team, Enterprise nebo Console s přístupem ke Claude Code.
  • účet Microsoft s přístupem k Fabric.
  • Pracovní prostor Fabric, kde máte oprávnění přispěvatele, člena nebo správce.
  • Pracovní zátěž Fabric Apps byla zapnuta pro vašeho tenanta.
  • Soubor UTF-8 CSV s řádkem hlavičky. Znáte celou cestu k souboru, než začnete s Claude Code.

Important

CSV soubor nasazený jako statický obsah aplikace je dostupný lidem, kteří k aplikaci mají přístup. Nepoužívejte tento recept na tajemství, osobní údaje nebo jiné citlivé informace.

Pro systémové požadavky a možnosti účtu Claude Code viz dokumentaci k nastavení Claude Code.

Nainstalujte Claude Code

Nainstalujte Claude Code pomocí této metody pro váš operační systém.

Windows

Instalace Claude Code pomocí WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux nebo Subsystém Windows pro Linux

Použijte nativní instalátor:

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

Ověřte tuto instalaci:

claude --version
claude doctor

Pro další metody instalace viz Instalace Claude Code.

Start Claude Code

  1. Otevřete terminál ve složkě rodičů, kde chcete projekt vytvořit.

  2. Začněte Claude Code:

    claude

  3. Pokud k tomu budete vyzváni, dokončete proces ověření v prohlížeči.

  4. Zkontrolujte přístupová oprávnění ke složkám a příkazy, která Claude Code vyžaduje.

Nezačínejte Claude Code ve složce, která obsahuje nesouvisející soubory, které nechcete, aby se kontrolovaly nebo měnily.

Vygenerujte a spusťte aplikaci

Vložte následující 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.

Schvalujte příkazy až po jejich zkontrolování. Přihlašujte se do prohlížeče Rayfin, jakmile je vyzváno. Po spuštění frontendu otevřete lokální URL, kterou Claude Code hlásí.

Požádejte Claude Code, aby vytvořil datový průzkumník

Dejte Claude Code kompletní cestu k vašemu CSV souboru a popište, jak by lidé měli data prozkoumávat. Agent může kontrolovat hlavičky a vzorkové hodnoty, aby přizpůsobil ovládací prvky a vizualizace datové sadě.

Použijte následující prompt jako výchozí recept. Nahraďte <full-path-to-csv-file> cestou k vašemu souboru.

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.

Plán si prohlédněte před tím, než Claude Code projekt upraví. Pokud plán neodpovídá vašim požadavkům, opravte ho před schválením realizace.

Kontrola vygenerovaných změn

Po dokončení Claude Code ho požádejte, aby si zkontroloval svou práci:

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.

Zkontrolujte si sami rozdíly ve správě zdrojového kódu. Věnujte zvláštní pozornost:

  • Zkopírovaný CSV asset a zda je vhodné ho publikovat.
  • CSV parsování a odvodování typů.
  • Konfigurace služby v rayfin/rayfin.yml.
  • Nové závislosti v package.json.
  • Tajemství nebo pověření, která nesmíte prozradit.

Ověření aplikace

Požádejte Claude Code, aby provedl stávající validaci 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 prohlížeči porovnejte několik řádků, součtů a filtrovaných výsledků se zdrojovým CSV souborem. Testujte prázdné výsledky, deformovaná data, navigaci klávesnicí a úzké obrazovky.

Nasadit hotovou aplikaci

Po zhodnocení změn a otestování aplikace požádejte Claude Code, aby ji 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.

Stejný npx rayfin up příkaz aktualizuje existující nasazení, když pokračujete ve vývoji aplikace.

Pokračujte v iteraci s Claude Code

Používejte zaměřené výzvy pro pozdější změny. Zahrňte požadované chování, postižené uživatele, omezení 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.

Každý požadavek udržujte dostatečně malý, aby ho bylo možné zkontrolovat. Než požádáte Claude Code o velkou nebo potenciálně destruktivní změnu, zajistěte funkční stav.

Řešení problémů s workflow Claude Code

Claude Code tiskne pouze příkazy

Řekni Claudovi Code, aby spustil příkazy a nahlásil výsledky. Zkontrolujte a schválte požadovaná oprávnění příkazů.

Na přihlášení čeká příkaz

Dokončete přihlašovací proces prohlížeče. Pak řekněte Claude Code, že přihlášení je dokončeno, aby mohl pokračovat.

Claude Code funguje ve špatné složce

Ukonči relaci, otevři terminál ve složce vygenerovaného projektu a znovu spusť claude.

Claude Code nemůže najít žádný příkaz

Spusťte claude doctor pro kontrolu instalace Claude Code. Pro příkazy Rayfin ověřte, že jsou nainstalovány Node.js 20 nebo novější a závislosti projektu.

Aplikace se otevře, ale CSV data se nenačtou

Požádejte Claude Code, aby zkontroloval chyby v síti prohlížeče a konzoli, ověřil cestu nasazeného assetu a potvrdil, že CSV soubor je zahrnut ve statickém výstupu sestavení.

Claude Code navrhuje --force

Požadujte, aby Claude Code nejprve ukázal potenciálně destruktivní operace schématu. Přijímejte --force pouze tehdy, když pochopíte a schválíte možnou ztrátu dat.

Pro další problémy s aplikacemi viz Troubleshoot Fabric Apps.

Související obsah

  • Poslední aktualizace v