Créer une application Fabric avec Claude Code

Utilisez cette recette pour créer une application Fabric qui transforme un fichier CSV en explorateur de données interactif. Claude Code inspecte le fichier, génère l’ossature du projet, implémente des filtres et des visualisations adaptés aux colonnes disponibles, et valide l’application depuis votre terminal.

L’application complétée inclut le fichier CSV dans son contenu statique et charge les données dans le navigateur. Cette approche fonctionne bien pour des données d’échantillonnage, publiques ou non sensibles qui ne nécessitent pas de connexion en direct.

Dans ce tutoriel, vous allez :

  • Installez et lancez Claude Code.
  • Demandez à Claude Code d’échafauder et d’inspecter une application Fabric.
  • Construis un explorateur interactif autour de ton fichier CSV.
  • Examinez et validez les modifications générées.
  • Déploie l’application sur Fabric.
  • Vérifiez le déploiement et ouvrez l’application.

Prerequisites

  • Node.js 20 ou version ultérieure.
  • Un terminal supporté par Claude Code.
  • Un compte Claude Pro, Max, Team, Enterprise ou Console avec accès Claude Code.
  • Un compte Microsoft avec accès à Fabric.
  • Un espace de travail Fabric où vous disposez des autorisations Contributeur, Membre ou Administrateur.
  • La charge de travail Fabric Apps activée pour votre locataire.
  • Un fichier CSV UTF-8 avec une ligne d’en-tête. Connaissez le chemin complet vers le fichier avant de commencer Claude Code.

Important

Un fichier CSV déployé sous forme de contenu statique est disponible pour les personnes pouvant accéder à l’application. N’utilisez pas cette recette pour des secrets, des données personnelles ou d’autres informations sensibles.

Pour les exigences système et options de compte de Code Claude, consultez la documentation d’installation de Code Claude.

Installer Claude Code

Installez Claude Code en utilisant la méthode de votre système d’exploitation.

Windows

Installez du code Claude avec WinGet :

winget install Anthropic.ClaudeCode

macOS, Linux, ou Sous-système Windows pour Linux

Utilisez l’installateur natif :

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

Vérifiez l’installation :

claude --version
claude doctor

Pour d’autres méthodes d’installation, voir Installer Claude Code.

Démarre Claude Code

  1. Ouvrez un terminal dans le dossier parent où vous souhaitez créer le projet.

  2. Démarrer Claude Code :

    claude

  3. Terminez le processus d’authentification dans le navigateur si vous y êtes invité.

  4. Examinez les droits d’accès aux dossiers et de commandes que Claude Code demande.

Ne lancez pas Claude Code dans un dossier contenant des fichiers sans lien que vous ne voulez pas qu’il inspecte ou modifie.

Générer et exécuter l’application

Collez l’invite suivante dans 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.

Approuvez les commandes seulement après les avoir relues. Complétez la connexion au navigateur Rayfin quand on vous le demande. Après le démarrage du frontend, ouvrez l’URL locale que Claude Code signale.

Demandez à Claude Code de construire l’explorateur de données

Donnez à Claude Code le chemin complet vers votre fichier CSV et décrivez comment les gens devraient explorer les données. L’agent peut inspecter les en-têtes et les valeurs d’échantillonnage pour adapter les contrôles et les visualisations au jeu de données.

Servez-vous de la recette suivante comme point de départ. Remplacez-le <full-path-to-csv-file> par le chemin vers votre fichier.

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.

Révisez le plan avant que Claude Code ne modifie le projet. Si le plan ne correspond pas à vos besoins, corrigez-le avant d’approuver la mise en œuvre.

Passer en revue les modifications générées

Après que Claude Code ait terminé, demandez-lui de revoir son travail :

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.

Consultez vous-même le diff de la gestion de version. Portez une attention particulière aux éléments suivants :

  • L’asset CSV copié et la question de savoir s’il est approprié de publier.
  • Analyse CSV et inférence de types.
  • Configuration de service dans rayfin/rayfin.yml.
  • Nouvelles dépendances dans package.json.
  • Des secrets ou des identifiants que vous ne devez pas valider.

Validez l’application

Demandez à Claude Code d’exécuter la validation existante du projet :

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.

Dans le navigateur, comparez quelques lignes, totaux et résultats filtrés avec le fichier CSV source. Tests de résultats vides, données mal formées, navigation au clavier et écrans étroits.

Déploie l’application terminée

Après avoir examiné les modifications et testé l’application, demandez à Claude Code de la déployer :

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.

La même npx rayfin up commande met à jour un déploiement existant lorsque vous continuez à développer l’application.

Continuez à itérer avec Claude Code

Utilisez des consignes ciblées pour les changements ultérieurs. Incluez le comportement souhaité, les utilisateurs concernés, les contraintes et les étapes de validation.

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.

Gardez chaque demande assez petite pour qu’elle soit examinée. Validez un état fonctionnel avant de demander à Claude Code d’apporter une modification importante ou potentiellement destructrice.

Dépanner le flux de travail de Claude Code

Claude Code n’imprime que les commandes

Dis à Claude Code d’exécuter les commandes et de rapporter leurs résultats. Examinez et approuvez les autorisations de commande demandées.

Une commande attend la connexion

Terminez le processus de connexion dans le navigateur. Ensuite, dis à Claude Code que la connexion est terminée pour qu’elle puisse continuer.

Claude Code fonctionne dans le mauvais dossier

Quittez la session, ouvrez un terminal dans le dossier du projet généré et exécutez à nouveau claude.

Claude Code ne trouve pas de commande

Exécutez claude doctor pour vérifier que Claude Code est installé. Pour les commandes Rayfin, assurez-vous que Node.js 20 ou une version ultérieure ainsi que les dépendances du projet sont installés.

L’application s’ouvre mais les données CSV ne se chargent pas

Demandez à Claude Code d’inspecter les erreurs du réseau et de la console du navigateur, de vérifier le chemin de l’asset déployé, et de confirmer que le fichier CSV est inclus dans la sortie statique de la compilation.

Claude Code propose --force

Exigez que Claude Code montre d’abord les opérations de schéma potentiellement destructrices. N’acceptez --force que lorsque vous comprenez et approuvez la possible perte de données.

Pour d’autres problèmes liés aux applications, voir Dépannage des applications Fabric.

Contenu connexe

  • Dernière mise à jour :