Luo Fabric-sovellus Claude Codella

Käytä tätä reseptiä luodaksesi Fabric-sovelluksen, joka muuttaa CSV-tiedoston interaktiiviseksi datanhallintaohjelmaksi. Claude Code tarkastaa tiedoston, tukee projektia, toteuttaa suodattimia ja visualisointeja, jotka sopivat käytettävissä oleviin sarakkeisiin, ja validoi sovelluksen päätteeltäsi.

Valmis sovellus sisältää CSV-tiedoston staattiseen sisältöön ja lataa tiedot selaimeen. Tämä lähestymistapa toimii hyvin näytteen, julkisen tai ei-arkaluonteisen datan kohdalla, joka ei vaadi reaaliaikaista yhteyttä.

Tässä opetusohjelmassa:

  • Asenna ja käynnistä Claude Code.
  • Pyydä Claude Code rakentamaan ja tarkastamaan Fabric-sovelluksen.
  • Rakenna interaktiivinen resurssienhallintaohjelma CSV-tiedostosi ympärille.
  • Tarkista ja validoi luodut muutokset.
  • Ota sovellus käyttöön Fabric-palvelussa.
  • Vahvista käyttöönotto ja avaa sovellus.

Edellytykset

  • Node.js 20 vuotta tai vanhempia.
  • Päätelaite, jota tukee Claude Code.
  • Claude Pro-, Max-, Team-, Enterprise- tai Console-tili, jossa on pääsy Claude Code -järjestelmään.
  • Microsoft-tili, jolla on pääsy Fabric-palveluun.
  • Fabric-työtila, jossa sinulla on Contributor-, Member- tai Admin-oikeudet.
  • Fabric Appsin työkuorma on käytössä vuokralaisellesi.
  • UTF-8 CSV-tiedosto, jossa on otsikkorivi. Tunne koko polku tiedostoon ennen kuin aloitat Claude-koodin.

Tärkeää

CSV-tiedosto, joka on otettu käyttöön staattisena sovellussisältönä, on saatavilla niille, jotka voivat käyttää sovellusta. Älä käytä tätä reseptiä salaisuuksiin, henkilötietoihin tai muihin arkaluontoisiin tietoihin.

Claude-koodin järjestelmävaatimukset ja tilivaihtoehdot löytyvät Claude Code -asetusdokumentaatiosta.

Asenna Claude-koodi

Asenna Claude Code käyttämällä tätä menetelmää käyttöjärjestelmällesi.

Windows

Asenna Claude Code WinGetillä:

winget install Anthropic.ClaudeCode

macOS, Linux tai Windows-alijärjestelmä Linuxille

Käytä natiiviasennusohjelmaa:

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

Tarkista asennus:

claude --version
claude doctor

Muita asennusmenetelmiä varten katso Asenna Claude-koodi.

Aloita Claude-koodi

  1. Avaa päätelaite vanhemmassa kansiossa, johon haluat luoda projektin.

  2. Aloita Claude-koodi:

    claude

  3. Suorita selaimen tunnistautumisprosessi, jos pyydetään.

  4. Tarkista Claude Code pyytämät kansion käyttöoikeudet ja komentooikeudet.

Älä aloita Claude-koodia kansiosta, joka sisältää toisistaan riippumattomia tiedostoja, joita et halua sen tarkastavan tai muokkaavan.

Rakenna ja käynnistä sovellus

Liitä seuraava kehote Claude-koodiin:

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.

Hyväksy komennot vasta kun olet tarkistanut ne. Suorita Rayfin-selaimen kirjautuminen täyteen, kun pyydetään. Kun frontend käynnistyy, avaa paikallinen URL, jonka Claude Code raportoi.

Pyydä Claude Coden rakentamaan data explorer

Anna Claude Codelle koko polku CSV-tiedostoosi ja kuvaile, miten ihmisten tulisi tutkia dataa. Agentti voi tarkastaa otsikot ja näytearvot räätälöidäkseen ohjaukset ja visualisoinnit aineiston mukaan.

Käytä seuraavaa kehotetta aloitusreseptinä. Korvaa <full-path-to-csv-file> se polulla tiedostoosi.

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.

Tarkista suunnitelma ennen kuin Claude Code muokkaa projektia. Jos suunnitelma ei vastaa vaatimuksiasi, korjaa se ennen toteutuksen hyväksymistä.

Tarkastele luotuja muutoksia

Kun Claude Code on valmis, pyydä sitä tarkistamaan työnsä:

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.

Tarkista itse versionhallintajärjestelmä. Kiinnitä erityistä huomiota:

  • Kopioitu CSV-assetti ja se, onko se sopivaa julkaista.
  • CSV-jäsentäminen ja tyyppipäättely.
  • Palvelukonfiguraatio .rayfin/rayfin.yml
  • Uudet riippuvuudet .package.json
  • Salaisuuksia tai pätevyyksiä, joita ei saa sitoa.

Vahvista sovellus

Pyydä Claude Coden suorittamaan projektin olemassa oleva validointi:

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.

Selaimessa vertaa muutamia rivejä, kokonaislukuja ja suodatettuja tuloksia lähde-CSV-tiedostoon. Testaa tyhjät tulokset, virheellinen data, näppäimistönavigointi ja kapeat näytöt.

Ota valmis sovellus käyttöön

Kun olet tarkistanut muutokset ja testannut sovelluksen, pyydä Claude Code ottamaan sen käyttöön:

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.

Sama npx rayfin up komento päivittää olemassa olevan käyttöönoton, kun jatkat sovelluksen kehittämistä.

Jatka Claude Code -iterointia

Käytä kohdennettuja kehotuksia myöhempiin muutoksiin. Sisällytä haluttu käyttäytyminen, vaikuttaneet käyttäjät, rajoitteet ja validointivaiheet.

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.

Pidä jokainen pyyntö tarpeeksi pienenä tarkistettavaksi. Sitoudu toimiva tila ennen kuin pyydät Claude Codea tekemään suuren tai mahdollisesti tuhoisan muutoksen.

Claude Code -työnkulun vianetsintä

Claude Code tulostaa vain komentoja

Käskekää Claude Code suorittamaan komennot ja raportoimaan niiden tulokset. Tarkista ja hyväksy pyydetyt komentooikeudet.

Komento odottaa kirjautumista

Viimeistele selaimen kirjautumisprosessi. Sitten kerro Claude Codelle, että kirjautuminen on valmis, jotta se voi jatkua.

Claude Code toimii väärässä kansiossa

Poistu sessiosta, avaa terminaali telineisessä projektikansiossa ja käynnistä claude se uudelleen.

Claude Code ei löydä komentoa

Juokse claude doctor tarkistamaan Claude-koodin asennus. Rayfin-komentojen osalta varmista, että Node.js 20 tai uudempi ja projektin riippuvuudet on asennettu.

Sovellus avautuu, mutta CSV-data ei lataudu

Pyydä Claude Codia tarkistamaan selaimen verkko- ja konsolivirheet, varmistamaan käyttöön otetun asset-polun ja varmistamaan, että CSV-tiedosto sisältyy staattiseen build-tulokseen.

Claude Code ehdottaa --force

Vaaditaan, että Claude Code näyttää ensin mahdollisesti tuhoavat skeemaoperaatiot. Hyväksy --force vasta, kun ymmärrät ja hyväksyt mahdollisen tiedonkatoamisen.

Muita sovellusongelmia varten katso Troubleshoot Fabric Apps.

Liittyvä sisältö

  • Viimeksi päivitetty