Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Use esta receita para criar uma aplicação Fabric que transforme um ficheiro CSV num explorador de dados interativo. O Claude Code inspeciona o ficheiro, estrutura o projeto, implementa filtros e visualizações que se ajustam às colunas disponíveis e valida a aplicação a partir do seu terminal.
A aplicação concluída inclui o ficheiro CSV no seu conteúdo estático e carrega os dados no navegador. Esta abordagem funciona bem para dados de exemplo, públicos ou não sensíveis que não requerem ligação em tempo real.
Neste tutorial, irá aprender a:
- Instala e inicia o Claude Code.
- Pede ao Claude Code para gerar a estrutura de base e inspecionar uma aplicação Fabric.
- Constrói um explorador interativo à volta do teu ficheiro CSV.
- Revise e valide as alterações geradas.
- Implementa a aplicação no Fabric.
- Verifica a implementação e abre a aplicação.
Pré-requisitos
- Node.js 20 ou posterior.
- Um terminal suportado pelo Claude Code.
- Uma conta Claude Pro, Max, Team, Enterprise ou Console com acesso ao Claude Code.
- Uma conta Microsoft com acesso ao Fabric.
- Um espaço de trabalho Fabric onde tens permissões de Contribuidor, Membro ou Administrador.
- Carga de trabalho do Fabric Apps ativada para o seu tenant.
- Um ficheiro CSV UTF-8 com uma linha de cabeçalho. Conhece o caminho completo até ao ficheiro antes de começares o Claude Code.
Importante
Um ficheiro CSV disponibilizado como conteúdo estático da aplicação está disponível para quem possa aceder à aplicação. Não use esta receita para segredos, dados pessoais ou outra informação sensível.
Para requisitos do sistema e opções de conta do Claude Code, consulte a documentação de configuração do Claude Code.
Instalar o Código Claude
Instala o Claude Code usando o método para o teu sistema operativo.
Windows
Instale Código Claude com WinGet:
winget install Anthropic.ClaudeCode
macOS, Linux, ou Subsistema Windows para Linux
Use o instalador nativo:
curl -fsSL https://claude.ai/install.sh | bash
Verifique a instalação:
claude --version
claude doctor
Para outros métodos de instalação, veja Instalar Claude Code.
Inicie o Código Claude
Abre um terminal na pasta pai onde queres criar o projeto.
Inicie o Código Claude:
claudeComplete o fluxo de autenticação do navegador se solicitado.
Revise as permissões de acesso a pastas e comandos que o Claude Code solicita.
Não comeces o Claude Code numa pasta que contenha ficheiros não relacionados que não queiras que ele inspecione ou modifique.
Andaime e executa a aplicação
Cole o seguinte prompt no 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.
Aprove os comandos apenas depois de os rever. Complete o início de sessão do navegador Rayfin quando solicitado. Depois de iniciar o frontend, abra o URL local que o Claude Code reporta.
Peça ao Claude Code para construir o explorador de dados
Dê ao Claude Code o caminho completo até ao seu ficheiro CSV e descreva como as pessoas devem explorar os dados. O agente pode inspecionar os cabeçalhos e valores de amostra para adaptar os controlos e visualizações ao conjunto de dados.
Use o seguinte prompt como receita inicial. Substitui <full-path-to-csv-file> pelo caminho para o teu ficheiro.
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.
Revê o plano antes de Claude Code editar o projeto. Se o plano não corresponder aos seus requisitos, corrija-o antes de aprovar a implementação.
Revise as alterações geradas
Depois de o Claude Code terminar, peça-lhe para rever o seu trabalho:
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.
Revê tu próprio a diferença de controlo de versão. Preste especial atenção a:
- O recurso CSV copiado e se é adequado publicá-lo.
- Análise sintática CSV e inferência de tipos.
- Configuração do serviço em
rayfin/rayfin.yml. - Novas dependências em
package.json. - Segredos ou credenciais que não deve comprometer.
Validar a aplicação
Peça ao Claude Code para executar a validação existente do projeto:
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.
No navegador, compare algumas linhas, totais e resultados filtrados com o ficheiro CSV de origem. Teste resultados vazios, dados mal formados, navegação por teclado e ecrãs estreitos.
Implementar a aplicação finalizada
Depois de rever as alterações e testar a aplicação, peça ao Claude Code para a implementar:
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.
O mesmo comando npx rayfin up atualiza uma implantação existente à medida que continua a desenvolver a aplicação.
Continuar a iterar com Claude Code
Utilize instruções específicas para alterações posteriores. Inclua o comportamento desejado, utilizadores afetados, restrições e passos de validação.
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.
Mantenha cada pedido pequeno o suficiente para ser analisado. Faça um commit de um estado funcional antes de pedir ao Claude Code para fazer uma alteração de grande dimensão ou potencialmente destrutiva.
Resolver problemas do fluxo de trabalho do Claude Code
Claude Code apenas imprime comandos
Diz ao Claude Code para executar os comandos e reportar os resultados. Revise e aprove as permissões de comando solicitadas.
Um comando espera por iniciar sessão
Complete o fluxo de início de sessão do navegador. Depois diz ao Claude Code que o login está concluído para que possa continuar.
Claude Code funciona na pasta errada
Saia da sessão, abra um terminal na pasta do projeto estruturado e execute claude novamente.
Claude Code não consegue encontrar um comando
Corre claude doctor para verificar a instalação do Claude Code. Para os comandos do Rayfin, confirme que o Node.js 20 ou posterior e as dependências do projeto estão instalados.
A aplicação abre, mas os dados CSV não carregam
Peça ao Claude Code para inspecionar os erros de rede e da consola no navegador, verificar o caminho do recurso implantado e confirmar que o ficheiro CSV está incluído na saída da compilação estática.
Claude Code propõe --force
Exigir que o Claude Code mostre primeiro as operações de esquema potencialmente destrutivas. Aceitar --force apenas quando compreender e aceitar a possível perda de dados.
Para outros problemas com as aplicações, consulte Resolução de Problemas com Aplicações Fabric.