Stwórz aplikację Fabric z kodem Claude

Użyj tego przepisu, aby stworzyć aplikację Fabric, która zamienia plik CSV w interaktywną eksplorator danych. Claude Code sprawdza plik, konstruuje projekt, implementuje filtry i wizualizacje dopasowane do dostępnych kolumn oraz weryfikuje aplikację z Twojego terminala.

Ukończona aplikacja zawiera plik CSV w swojej statycznej zawartości i ładuje dane w przeglądarce. To podejście sprawdza się dobrze dla próbek, danych publicznych lub niewrażliwych, które nie wymagają połączenia na żywo.

W tym samouczku nauczysz się następujących rzeczy:

  • Zainstaluj i uruchom kod Claude'a.
  • Poproś Claude Code o wygenerowanie szkieletu aplikacji Fabric i przeanalizowanie jej.
  • Zbuduj interaktywną eksploratorkę wokół pliku CSV.
  • Przejrzyj i zweryfikowaj wygenerowane zmiany.
  • Wdroż aplikację na Fabric.
  • Zweryfikowaj wdrożenie i otwórz aplikację.

Wymagania wstępne

  • Node.js 20 lub nowszy.
  • Terminal obsługiwany przez Claude Code.
  • Konto Claude Pro, Max, Team, Enterprise lub konsola z dostępem do kodu Claude.
  • konto Microsoft z dostępem do Fabric.
  • Obszar roboczy Fabric, w którym masz uprawnienia Współautor, Członek lub Administrator.
  • Obciążenie Fabric Apps jest włączone dla Twojego tenanta.
  • Plik CSV w formacie UTF-8 z wierszem nagłówka. Znaj pełną ścieżkę do pliku, zanim zaczniesz Claude Code.

Important

Plik CSV wdrożony jako statyczna zawartość aplikacji jest dostępny dla osób, które mają dostęp do aplikacji. Nie używaj tego przepisu na sekrety, dane osobowe ani inne wrażliwe informacje.

Aby poznać wymagania systemowe Claude Code i opcje konta, zobacz dokumentację ustawień Claude Code.

Instalacja Claude Code

Zainstaluj kod Claude'a, korzystając z tej metody dla swojego systemu operacyjnego.

Windows

Zainstaluj kod Claude za pomocą WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux lub Podsystem Windows dla systemu Linux

Użyj natywnego instalatora:

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

Zweryfikuj instalację:

claude --version
claude doctor

Inne metody instalacji można znaleźć w artykule Install Claude Code.

Start Claude Code

  1. Otwórz terminal w folderze nadrzędnym, w którym chcesz utworzyć projekt.

  2. Rozpocznij kod Claude'a:

    claude

  3. Zakończ proces uwierzytelniania przeglądarki, jeśli zostanie o to zapytany.

  4. Przejrzyj uprawnienia dostępu do folderów i poleceń, o które prosi Claude Code.

Nie zaczynaj Claude Code w folderze, który zawiera niepowiązane pliki, których nie chcesz, żeby przeglądał lub modyfikował.

Utwórz szkielet aplikacji i uruchom ją

Wklej poniższy prompt do 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.

Zatwierdzaj polecenia dopiero po ich przejrzeniu. Dokończ logowanie w przeglądarce Rayfin, gdy pojawi się monit. Po uruchomieniu frontendu otwórz lokalny adres URL, który raportuje kod Claude'a.

Poproś Claude Code o zbudowanie eksploratora danych

Daj Claude Code pełną ścieżkę do pliku CSV i opisz, jak ludzie powinni eksplorować dane. Agent może analizować nagłówki i przykładowe wartości, aby dostosować elementy sterujące i wizualizacje do zbioru danych.

Użyj poniższego promptu jako przepisu startowego. Zastąp <full-path-to-csv-file> ścieżką do pliku.

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.

Przejrzyj plan, zanim Claude Code zedytuje projekt. Jeśli plan nie spełnia Twoich wymagań, poprawij go przed zatwierdzeniem wdrożenia.

Przeglądanie wygenerowanych zmian

Gdy Claude Code zakończy działanie, poproś go o przejrzenie swojej pracy:

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.

Samodzielnie przejrzyj różnicę kontroli wersji. Zwróć szczególną uwagę na:

  • Skopiowany asset CSV i czy warto go publikować.
  • Parsowanie CSV i wnioskowanie typu.
  • Konfiguracja usług w rayfin/rayfin.yml.
  • Nowe zależności w package.json.
  • Sekrety lub dokumenty, których nie wolno ujawniać.

Weryfikowanie aplikacji

Poproś Claude Code o przeprowadzenie istniejącej weryfikacji projektu:

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.

W przeglądarce porównaj kilka wierszy, sumy i filtrowane wyniki z źródłowym plikiem CSV. Testuj puste wyniki, zdeformowane dane, nawigację klawiaturą i wąskie ekrany.

Wdrożenie gotowej aplikacji

Po przejrzeniu zmian i przetestowaniu aplikacji poproś Claude Code o jej wdrożenie:

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.

To samo npx rayfin up polecenie aktualizuje istniejące wdrożenie, gdy kontynuujesz rozwój aplikacji.

Kontynuuj iterację z kodem Claude'a

Używaj precyzyjnych promptów do późniejszych zmian. Uwzględnij pożądane zachowanie, dotkniętych użytkowników, ograniczenia oraz kroki walidacji.

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.

Każde żądanie utrzymuj na tyle małe, aby można je było przejrzeć. Najpierw zawierz stan działający, zanim poprosisz Claude Code o dużą lub potencjalnie destrukcyjną zmianę.

Rozwiązywanie problemów z workflow Claude Code

Kod Claude'a drukuje tylko polecenia

Powiedz Claude'owi Code'owi, żeby wykonał polecenia i zgłosił wyniki. Przejrzyj i zatwierdz żądane uprawnienia do poleceń.

Na zalogowanie czeka komenda

Zakończ proces logowania do przeglądarki. Następnie powiedz Claude Code, że zalogowanie się jest zakończone, żeby można było kontynuować.

Kod Claude'a działa w złym folderze

Zakończ sesję, otwórz terminal w folderze projektu utworzonego przez generator i uruchom ponownie claude.

Claude Code nie może odnaleźć polecenia

Uruchom claude doctor, aby sprawdzić instalację Claude Code. W przypadku poleceń Rayfin upewnij się, że zainstalowano Node.js w wersji 20 lub nowszej oraz zależności projektu.

Aplikacja się otwiera, ale dane CSV się nie ładują

Poproś Claude Code o sprawdzenie błędów sieci przeglądarki i konsoli, weryfikację ścieżki wdrożonego zasobu oraz potwierdzenie, że plik CSV jest uwzględniony w statycznym wyjściu buildu.

Kodeks Claude'a proponuje --force

Wymagaj, aby kod Claude'a najpierw pokazał potencjalnie destrukcyjne operacje schematu. Akceptuj --force tylko wtedy, gdy rozumiesz i zatwierdzasz możliwą utratę danych.

W przypadku innych problemów z aplikacjami zobacz Troubleshoot Fabric Apps.

Treści powiązane

  • Ostatnia aktualizacja o