Crea una app de Fabric con Claude Code

Utiliza esta receta para crear una app Fabric que convierte un archivo CSV en un explorador de datos interactivo. Claude Code inspecciona el archivo, estructura el proyecto, implementa filtros y visualizaciones que se ajustan a las columnas disponibles y valida la aplicación desde tu terminal.

La aplicación completada incluye el archivo CSV en su contenido estático y carga los datos en el navegador. Este enfoque funciona bien para datos de muestra, públicos o no sensibles que no requieren una conexión en vivo.

En este tutorial, usted hará lo siguiente:

  • Instala y pon en marcha Claude Code.
  • Pide a Claude Code que genere la estructura e inspeccione una app de Fabric.
  • Construye un explorador interactivo alrededor de tu archivo CSV.
  • Revisa y valida los cambios generados.
  • Despliega la app en Fabric.
  • Verifica el despliegue y abre la app.

Prerequisites

  • Node.js 20 o posterior.
  • Un terminal soportado por Claude Code.
  • Una cuenta de Claude Pro, Max, Team, Enterprise o Consola con acceso a Claude Code.
  • Un cuenta Microsoft con acceso a Fabric.
  • Un área de trabajo de Fabric en la que tiene permisos de colaborador, miembro o administrador.
  • La carga de trabajo de Fabric Apps habilitada para tu inquilino.
  • Un archivo CSV UTF-8 con una fila de cabecera. Conoce el camino completo hasta el archivo antes de empezar Claude Code.

Importante

Un archivo CSV desplegado como contenido estático de la app está disponible para las personas que pueden acceder a la aplicación. No utilices esta receta para secretos, datos personales u otra información sensible.

Para los requisitos del sistema y opciones de cuenta de Claude Code, consulte la documentación de configuración de Claude Code.

Instalar código Claude

Instala Claude Code usando el método de tu sistema operativo.

Windows

Instala el código Claude con WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux o Subsistema de Windows para Linux

Usa el instalador nativo:

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

Compruebe la instalación:

claude --version
claude doctor

Para otros métodos de instalación, véase Instalar Claude Code.

Inicia el código Claude

  1. Abre un terminal en la carpeta principal donde quieras crear el proyecto.

  2. Comienza el código Claude:

    claude

  3. Completa el flujo de autenticación del navegador si se lo solicita.

  4. Revisa los permisos de acceso a carpetas y comandos que solicita Claude Code.

No inicies Claude Code en una carpeta que contiene archivos no relacionados que no quieres que inspeccione o modifique.

Andamiaje y ejecuta la app

Pega el siguiente prompt en 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.

Aprueba los comandos solo después de revisarlos. Completa el inicio de sesión del navegador Rayfin cuando te lo pidan. Después de que inicie el frontend, abre la URL local que Claude Code reporta.

Pide a Claude Code que construya el explorador de datos

Dale a Claude Code el camino completo hasta tu archivo CSV y describe cómo debería explorar la gente los datos. El agente puede inspeccionar los encabezados y los valores de muestra para adaptar los controles y visualizaciones al conjunto de datos.

Usa el siguiente prompt como receta inicial. Sustituye <full-path-to-csv-file> por la ruta hacia tu archivo.

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.

Revisa el plan antes de que Claude Code edite el proyecto. Si el plan no cumple con tus requisitos, corrígelo antes de aprobar la implementación.

Revisión de los cambios generados

Cuando Claude Code termine, pídele que revise su trabajo:

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.

Revisa tú mismo el diff del control de código fuente. Presta especial atención a lo siguiente:

  • El recurso CSV copiado y si es apropiado publicarlo.
  • Análisis CSV e inferencia de tipos.
  • Configuración de servicios en rayfin/rayfin.yml.
  • Nuevas dependencias en package.json.
  • Secretos o credenciales que no debes comprometer.

Validación de la aplicación

Pide a Claude Code que ejecute la validación existente del proyecto:

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.

En el navegador, compara unas pocas filas, totales y resultados filtrados con el archivo CSV de origen. Prueba resultados vacíos, datos malformados, navegación por teclado y pantallas estrechas.

Despliega la aplicación terminada

Después de revisar los cambios y probar la app, pide a Claude Code que la despliegue:

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.

El mismo npx rayfin up comando actualiza un despliegue existente cuando sigues desarrollando la aplicación.

Sigue iterando con Claude Code

Utiliza indicaciones específicas para realizar cambios posteriores. Incluye el comportamiento deseado, los usuarios afectados, las restricciones y los pasos de validación.

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.

Mantén cada solicitud lo suficientemente pequeña como para poder revisarla. Haz un commit de un estado funcional antes de pedirle a Claude Code que realice un cambio importante o potencialmente destructivo.

Solucionar el flujo de trabajo de Claude Code

Claude Code solo imprime comandos

Dile a Claude Code que ejecute los comandos y reporte sus resultados. Revisa y aprueba los permisos de mando solicitados.

Un comando espera a iniciar sesión

Completa el flujo de inicio de sesión del navegador. Luego dile a Claude Code que el inicio de sesión está completo para que pueda continuar.

Claude Code funciona en la carpeta equivocada

Sal de la sesión, abre un terminal en la carpeta del proyecto estructurado y vuelve a ejecutarlo claude .

Claude Code no encuentra un comando

Ejecuta claude doctor para comprobar la instalación de Claude Code. Para los comandos de Rayfin, confirma que Node.js 20 o una versión posterior esté instalado y que las dependencias del proyecto estén instaladas.

La app se abre pero los datos CSV no cargan

Pide a Claude Code que inspeccione los errores de la red y la consola del navegador, verifique la ruta del activo desplegado y confirme que el archivo CSV está incluido en la salida estática de la compilación.

Claude Code propone --force

Exigir que Claude Code muestre primero las operaciones de esquema potencialmente destructivas. Acepta --force solo cuando entiendas y apruebes la posible pérdida de datos.

Para otros problemas con las apps, consulta Solucionar problemas en aplicaciones de Fabric.

Contenido relacionado

  • Se actualizó por última vez el