Создайте приложение Fabric с помощью Claude Code

Используйте этот рецепт, чтобы создать приложение Fabric, которое превращает CSV-файл в интерактивный проводник данных. Claude Code проверяет файл, поддерживает проект, реализует фильтры и визуализации, соответствующие доступным столбцам, и проверяет приложение с вашего терминала.

Готовое приложение включает CSV-файл в статическое содержимое и загружает данные в браузер. Этот подход хорошо работает для выборочных, публичных или неконфиденциальных данных, которые не требуют живого соединения.

Изучив это руководство, вы:

  • Установите и запустите Claude Code.
  • Попросите Claude Code создать каркас и изучить приложение Fabric.
  • Создайте интерактивный проводник вокруг вашего CSV-файла.
  • Проверьте и подтвердите сгенерированные изменения.
  • Разверните приложение в Fabric.
  • Проверьте развертывание и откройте приложение.

Необходимые условия

  • Node.js 20 или более поздняя версия.
  • Терминал, поддерживаемый Claude Code.
  • Аккаунт Claude Pro, Max, Team, Enterprise или Console с доступом к Claude Code.
  • Учетная запись Microsoft с доступом к Fabric.
  • Рабочая область Fabric, в которой у вас есть права участника, члена или администратора.
  • Рабочая нагрузка Fabric Apps включена для вашего арендатора.
  • Файл CSV UTF-8 с заголовочной строкой. Знай полный путь к файлу, прежде чем начинать Claude Code.

Important

CSV-файл, развернутый в виде статического контента приложения, доступен тем, кто может получить доступ к приложению. Не используйте этот рецепт для секретов, личных данных или другой конфиденциальной информации.

Для системных требований и опций аккаунта Claude Code см. документацию по настройке Claude Code.

Установка Claude Code

Установите Claude Code, используя метод для вашей операционной системы.

Windows

Установите Claude Code с помощью WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux или подсистема Windows для Linux

Используйте встроенный установщик:

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

Проверьте установку:

claude --version
claude doctor

Для других способов установки см. раздел Install Claude Code.

Запустить Claude Code

  1. Откройте терминал в родительской папке, где хотите создать проект.

  2. Запустите Claude Code:

    claude

  3. Завершите процедуру аутентификации в браузере, если появится запрос.

  4. Проверьте доступ к папкам и права на команды, которые запрашивает Claude Code.

Не начинайте Claude Code в папке, где содержатся не связанные файлы, которые вы не хотите, чтобы он проверял или изменял.

Сгенерируйте каркас приложения и запустите его

Вставьте следующий запрос в 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.

Одобряйте команды только после их рассмотрения. Завершите вход в браузере Rayfin при появлении запроса. После запуска фронтенда откройте локальный URL, который предоставляет Claude Code.

Попросите Claude Code создать дата-эксплорер

Дайте Claude Code полный путь к вашему CSV-файлу и опишите, как людям следует исследовать данные. Агент может проверять заголовки и значения выборок, чтобы адаптировать управление и визуализации под набор данных.

Используйте следующий запрос в качестве стартового рецепта. Замените <full-path-to-csv-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.

Ознакомьтесь с планом до того, как Клод Код отредактирует проект. Если план не соответствует вашим требованиям, исправьте его перед утверждением реализации.

Просмотрите созданные изменения

Когда Claude Code завершит работу, попросите его проверить свою работу:

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.

Самостоятельно просмотрите различия в системе контроля версий. Обратите особое внимание на:

  • Скопированный CSV-ресурс и возможность его публикации.
  • Парсинг CSV и вывод по типам.
  • Конфигурация сервиса в rayfin/rayfin.yml.
  • Новые зависимости в package.json.
  • Секреты или удостоверения, которые нельзя раскрывать.

Проверка приложения

Попросите Claude Code запустить существующую валидацию проекта:

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.

В браузере сравните несколько строк, итогов и отфильтрованных результатов с исходным CSV-файлом. Тестируйте пустые результаты, искажённые данные, навигацию по клавиатуре и узкие экраны.

Развернуть готовое приложение

После того как вы просмотрите изменения и протестируете приложение, попросите Claude Code развернуть приложение:

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.

Та же npx rayfin up команда обновляет существующее развертывание при продолжении разработки приложения.

Продолжайте итеративную работу с Claude Code

Используйте сфокусированные подсказки для последующих изменений. Включите желаемое поведение, затронутых пользователей, ограничения и шаги валидации.

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.

Держите каждую заявку достаточно маленькой для рассмотрения. Зафиксируйте рабочее состояние, прежде чем просить Claude Code внести крупное или потенциально разрушительное изменение.

Устранение неполадок в рабочем процессе Claude Code

Claude Code печатает только команды

Скажи Клод Коду выполнить команды и сообщить о результатах. Просмотрите и одобрите запрошенные разрешения для команд.

Команда ожидает входа в систему

Завершите процесс входа в браузер. Затем скажите Клоду Коду, что вход завершён, чтобы продолжить.

Claude Code работает не в той папке

Выйдите из сеанса, откройте терминал в папке сгенерированного проекта и запустите claude ещё раз.

Клод Код не может найти команду

Запустите claude doctor, чтобы проверить установку Claude Code. Для выполнения команд Rayfin убедитесь, что установлена Node.js версии 20 или новее и что установлены зависимости проекта.

Приложение открывается, но CSV-данные не загружаются

Попросите Claude Code проверить ошибки сети браузера и консоли, проверить путь развернутого ассета и убедиться, что CSV-файл включён в статический результат сборки.

Claude Code предлагает --force

Требуйте, чтобы Claude Code сначала показал потенциально разрушительные операции схемы. Принимайте --force только тогда, когда понимаете и одобряете возможную потерю данных.

По другим проблемам с приложениями см. Устранение неполадок приложений Fabric.

Связанные материалы

  • Последнее обновление: