Crea un'app Fabric con Claude Code

Usa questa ricetta per creare un'app Fabric che trasforma un file CSV in un esploratore dati interattivo. Claude Code ispeziona il file, supporta il progetto, implementa filtri e visualizzazioni che si adattano alle colonne disponibili e valida l'app dal tuo terminale.

L'app completa include il file CSV nel suo contenuto statico e carica i dati nel browser. Questo approccio funziona bene per dati campione, pubblici o non sensibili che non richiedono una connessione in tempo reale.

In questa esercitazione, imparerai a:

  • Installa e avvia Claude Code.
  • Chiedi a Claude Code di generare la struttura di base e analizzare un'app Fabric.
  • Costruisci un esploratore interattivo attorno al tuo file CSV.
  • Rivedi e convalida le modifiche generate.
  • Distribuisci l'app su Fabric.
  • Verifica il deployment e apri l'app.

Prerequisiti

  • Node.js 20 o versione successiva.
  • Un terminale supportato da Claude Code.
  • Un account Claude Pro, Max, Team, Enterprise o Console con accesso al codice Claude.
  • Un account Microsoft con accesso a Fabric.
  • Area di lavoro Fabric in cui si dispone delle autorizzazioni Collaboratore, Membro o Amministratore.
  • Il carico di lavoro di Fabric Apps abilitato per il tuo inquilino.
  • Un file CSV UTF-8 con una riga di header. Conosci il percorso completo verso il file prima di iniziare Claude Code.

Important

Un file CSV pubblicato come contenuto statico dell'app è disponibile per chi può accedere all'app. Non usare questa ricetta per segreti, dati personali o altre informazioni sensibili.

Per i requisiti di sistema e le opzioni di account di Claude Code, consulta la documentazione di configurazione di Claude Code.

Installa il codice Claude

Installa Claude Code usando il metodo per il tuo sistema operativo.

Windows

Installa codice Claude con WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux o sottosistema Windows per Linux

Usa l'installatore nativo:

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

Verificare l'installazione:

claude --version
claude doctor

Per altri metodi di installazione, vedi Installa Codice Claude.

Inizia il codice Claude

  1. Apri un terminale nella cartella genitore dove vuoi creare il progetto.

  2. Inizia il codice Claude:

    claude

  3. Completa il flusso di autenticazione del browser se richiesto.

  4. Rivedi i permessi di accesso alle cartelle e dei comandi richiesti da Claude Code.

Non avviare Claude Code in una cartella che contiene file non correlati che non vuoi che ispezioni o modifichi.

Creare ed eseguire l'app

Incolla il seguente prompt in 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.

Approva i comandi solo dopo averli esaminati. Completa l'accesso al browser Rayfin quando richiesto. Dopo l'avvio del frontend, apri l'URL locale che Claude Code segnala.

Chiedi a Claude Code di costruire il data explorer

Dai a Claude Code il percorso completo verso il tuo file CSV e descrivi come le persone dovrebbero esplorare i dati. L'agente può esaminare le intestazioni e i valori di esempio per adattare i controlli e le visualizzazioni in base al set di dati.

Usa il seguente prompt come ricetta iniziale. Sostituisci <full-path-to-csv-file> con il percorso verso il tuo file.

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.

Rivedi il piano prima che Claude Code modifichi il progetto. Se il piano non corrisponde ai tuoi requisiti, correggilo prima di approvare l'implementazione.

Esaminare le modifiche generate

Dopo che Claude Code ha finito, chiedigli di rivedere il suo lavoro:

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.

Controlla personalmente la diff del controllo del codice sorgente. Presta particolare attenzione a:

  • L'asset CSV copiato e se è appropriato pubblicarlo.
  • Analisi dei file CSV e inferenza dei tipi.
  • Configurazione del servizio in rayfin/rayfin.yml.
  • Nuove dipendenze in package.json.
  • Segreti o credenziali che non dovresti commettere.

Convalidare l'app

Chiedi a Claude Code di eseguire la validazione esistente del progetto:

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.

Nel browser, confronta alcune righe, totali e risultati filtrati con il file CSV sorgente. Test risultati vuoti, dati malformati, navigazione da tastiera e schermi stretti.

Distribuisci l'app finita

Dopo aver esaminato le modifiche e testato l'app, chiedi a Claude Code di distribuirla:

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.

Lo stesso npx rayfin up comando aggiorna una distribuzione esistente quando continui a sviluppare l'app.

Continua a iterare con Claude Code

Usa prompt focalizzati per i cambiamenti successivi. Includere il comportamento desiderato, gli utenti coinvolti, i vincoli e i passaggi di validazione.

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.

Mantieni ogni richiesta abbastanza piccola da poterla esaminare. Effettua un commit di uno stato funzionante prima di chiedere a Claude Code di apportare una modifica significativa o potenzialmente distruttiva.

Risoluzione dei problemi del flusso di lavoro di Claude Code

Claude Code stampa solo i comandi

Dì a Claude Code di eseguire i comandi e riportare i risultati. Rivedi e approva i permessi di comando richiesti.

Un comando attende l'accesso

Completa la procedura di accesso nel browser. Poi dì a Claude Code che il login è completato così può continuare.

Claude Code funziona nella cartella sbagliata

Esci dalla sessione, apri un terminale nella cartella del progetto generata e esegui di nuovo claude.

Claude Code non riesce a trovare un comando

Esegui claude doctor per verificare l'installazione di Claude Code. Per usare i comandi Rayfin, assicurati che siano installati Node.js 20 o versioni successive e le dipendenze del progetto.

L'app si apre ma i dati CSV non si caricano

Chiedi a Claude Code di ispezionare gli errori della rete e della console del browser, verifica il percorso dell'asset distribuito e conferma che il file CSV sia incluso nell'output statico della build.

Claude Code propone --force

Richiedi prima a Claude Code di mostrare le operazioni di schema potenzialmente distruttive. Accetta --force solo quando capisci e approvi la possibile perdita di dati.

Per altri problemi con le app, vedi Troubleshoot Fabric Apps.

Contenuti correlati

  • Ultimo aggiornamento: