Készíts egy Fabric alkalmazást Claude Code-szal

Ezt a receptet használd egy Fabric alkalmazáshoz, amely egy CSV fájlt interaktív adatkezelővé alakít. Claude Code átvizsgálja a fájlt, megerősíti a projektet, olyan szűrőket és vizualizációkat valósít meg, amelyek illeszkednek az elérhető oszlopokhoz, és az alkalmazást a terminálról validálja.

A kész alkalmazás a CSV fájlt is tartalmazza a statikus tartalomban, és betölti az adatokat a böngészőben. Ez a megközelítés jól működik minta, nyilvános vagy nem érzékeny adatoknál, amelyek nem igényelnek élő kapcsolatot.

Ebben az oktatóanyagban a következőket fogja megtanulni:

  • Telepítsd és indítsd el a Claude Code-ot.
  • Kérd meg Claude Code-ot, hogy építsen fel és vizsgáljon meg egy Fabric alkalmazást.
  • Építs egy interaktív explorert a CSV fájlod köré.
  • Nézze át és validálja a generált változtatásokat.
  • Telepítsd az alkalmazást a Fabric-re.
  • Ellenőrizd a telepítést, és nyisd meg az alkalmazást.

Prerequisites

  • Node.js 20 vagy újabb.
  • Egy terminál, amelyet Claude Code támogat.
  • Claude Pro, Max, Team, Enterprise vagy Console fiók Claude Code-hozzáféréssel.
  • Egy Fabric hozzáféréssel rendelkező Microsoft-fiók.
  • Egy Fabric munkaterület, ahol közreműködői, tagi vagy rendszergazdai engedélyekkel rendelkezik.
  • A Fabric Apps munkaterhelése engedélyezve a bérlő számára.
  • Egy fejlécsorral rendelkező UTF-8 CSV-fájl. Ismerd a teljes útvonalat a fájlhoz, mielőtt elkezded a Claude kódot.

Important

Egy CSV fájl, amelyet statikus alkalmazástartalomként telepítenek, elérhető azok számára, akik hozzáférhetnek az alkalmazáshoz. Ne használd ezt a receptet titkokra, személyes adatokra vagy más érzékeny információkra.

A Claude-kód rendszerkövetelményekről és fióklehetőségekről lásd a Claude-kód beállítási dokumentációját.

Telepítsd Claude kódot

Telepítsd a Claude Code-ot az operációs rendszeredhez használt módszerrel.

Windows

Telepítse a Claude Code-ot a WinGet segítségével:

winget install Anthropic.ClaudeCode

macOS, Linux vagy Linuxos Windows-alrendszer

Használd a natív telepítőt:

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

Ellenőrizze a telepítést:

claude --version
claude doctor

További telepítési módszerekért lásd: Claude Code telepítése.

Kezdj Claude-kódot

  1. Nyiss meg egy terminált az anyamappában, ahol létre akarod hozni a projektet.

  2. Kezdő Claude kód:

    claude

  3. Ha kérik, fejezd be a böngésző hitelesítési folyamatát.

  4. Nézze át a Claude Code által kért mappáhozzáférést és parancsi jogosultságokat.

Ne indítsd el a Claude Code-ot olyan mappában, amely nem kapcsolódó fájlokat tartalmaz, amiket nem akarsz átvizsgálni vagy módosítani.

Az alkalmazás létrehozása és futtatása

Illesztsd be a következő promptot a Claude Code-ba:

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.

A parancsokat csak akkor hagyd jóvá, ha átnézted őket. Fejezze be a Rayfin böngésző bejelentkezését, ha kérik. Miután a frontend elindul, nyisd meg azt a helyi URL-címet, amelyet a Claude Code kiír.

Kérd meg Claude Code-ot, hogy készítse el az adatböngészőt

Add meg Claude Code-nak a teljes utat a CSV fájlodhoz, és írd le, hogyan kell az embereknek feltárniuk az adatokat. Az ügynök megvizsgálhatja a fejléceket és mintaértékeket, hogy az irányításokat és vizualizációkat az adathalmazhoz igazítsa.

Használd a következő promptot kezdőreceptként. Cseréld <full-path-to-csv-file> le a fájlod útjával.

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.

Nézze át a tervet, mielőtt Claude Code szerkeszti a projektet. Ha a terv nem felel meg az igényeidnek, javítsd ki, mielőtt jóváhagynád a bevezetést.

A létrehozott módosítások áttekintése

Miután Claude Code befejezte, kérd meg, hogy tekintse át a munkáját:

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.

Nézd át magad a forrásvezérlő diff-et. Különös figyelmet fordítsunk arra:

  • A másolt CSV-objektum és az, hogy közzétehető-e.
  • CSV elemzés és típuskövetkeztetés.
  • A szolgáltatás konfigurációja itt: rayfin/rayfin.yml.
  • Új függőségek itt: package.json.
  • Titkos adatokat vagy bejelentkezési adatokat, amelyeket nem szabad véglegesítened.

Az alkalmazás ellenőrzése

Kérd meg Claude Code-ot, hogy fussza le a projekt meglévő validációját:

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.

A böngészőben hasonlíts össze néhány sort, összesített és szűrt eredményt a forrás CSV fájljal. Tesztelj üres eredményeket, hibás adatokat, billentyűzetes navigációt és keskeny képernyőket.

Telepítsd a kész alkalmazást

Miután átnézted a változtatásokat és tesztelted az alkalmazást, kérd meg Claude Code-ot, hogy telepítse azt:

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.

Ugyanaz npx rayfin up a parancs frissíti a meglévő telepítést, amikor folytatod az alkalmazás fejlesztését.

Folytasd a Claude Code ismétlését

Használj fókuszált promptokat a későbbi változtatásokhoz. Tartalmazza a kívánt viselkedést, az érintett felhasználókat, a korlátozásokat és az érvényesítési lépéseket.

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.

Minden kérést elég kicsinek tartsd átnézéshez. Kötelezz be egy működő állapotot, mielőtt Claude Code-ot kérnéd egy nagy vagy potenciálisan romboló változtatásért.

Hibakeresés a Claude Code munkafolyamatának

Claude-kód csak parancsokat nyomtat

Mondd meg Claude Code-nak, hogy futtasson le a parancsokat és jelentse az eredményeket. Nézd át és hagyd jóvá a kért parancsengedélyeket.

Egy parancs vár a bejelentkezésre

Fejezd be a böngésző bejelentkezési folyamatát. Ezután mondd meg Claude Code-nak, hogy a bejelentkezés befejeződött, hogy folytatódhasson.

Claude Code rossz mappában dolgozik

Lépj ki a munkamenetből, nyiss meg egy terminált a létrehozott projektmappában, és futtasd újra a(z) claude parancsot.

Claude Code nem talál parancsot

Futtassa a claude doctor parancsot a Claude Code telepítésének ellenőrzéséhez. Rayfin parancsokhoz ellenőrizd, hogy Node.js 20 vagy annál annál magasabb, és a projektfüggőségek telepítve vannak.

Az alkalmazás megnyílik, de a CSV adatok nem töltődnek be

Kérd meg Claude Code-ot, hogy vizsgálja meg a böngészőhálózati és konzol hibáit, ellenőrizze a telepített eszközútot, és ellenőrizze, hogy a CSV fájl benne van-e a statikus build kimenetben.

Claude-kód javaslatot tesz --force

Követelje meg, hogy a Claude Code először jelenítse meg a potenciálisan káros sémaműveleteket. Csak akkor fogadd el --force , ha megérted és jóváhagyod az esetleges adatvesztést.

Egyéb alkalmazási problémákért lásd: Troubleshoot Fabric Apps.

Kapcsolódó tartalom

  • Utolsó frissítés időpontja: