用 Claude Code 建立一個 Fabric 應用程式

使用這個配方來建立一個 Fabric 應用程式，將 CSV 檔案轉換成互動式資料探索器。 Claude Code 會檢查檔案、架構專案、實作符合可用欄位的篩選器和視覺化，並從你的終端機驗證應用程式。

完成的應用程式會將 CSV 檔案納入靜態內容，並在瀏覽器中載入資料。 這種方法對於樣本、公開或不需即時連線的非敏感資料效果良好。

在本教學課程中，您會：

  • 安裝並啟動 Claude 程式碼。
  • 請 Claude Code 建立並檢視 Fabric 應用程式的基本架構。
  • 圍繞你的 CSV 檔案建立互動式瀏覽器。
  • 檢視並驗證所產生的變更。
  • 將應用程式部署到 Fabric。
  • 確認部署後開啟應用程式。

先決條件

  • Node.js 20 或更新版本。
  • 一個由 Claude Code 支援的終端機。
  • 擁有 Claude Code 存取權的 Claude Pro、Max、Team、Enterprise 或 Console 帳號。
  • 可存取 Fabric 的 Microsoft 帳戶。
  • 一個 Fabric 工作區，你擁有貢獻者、成員或管理員權限。
  • Fabric Apps 工作負載已啟用給你的租戶。
  • 一個帶有標頭列的 UTF-8 CSV 檔案。 在開始使用 Claude Code 之前，先知道檔案的完整路徑。

Important

一個以靜態應用程式內容部署的 CSV 檔案，供能存取該應用程式的人使用。 請勿使用此配方處理機密、個人資料或其他敏感資訊。

關於 Claude Code 系統需求與帳號選項，請參閱 Claude Code 設定文件。

安裝 Claude Code

使用您作業系統的方法安裝 Claude Code。

Windows 作業系統

使用 WinGet 安裝 Claude 程式碼：

winget install Anthropic.ClaudeCode

macOS、Linux 或 Windows 子系統 Linux 版

使用原生安裝程式：

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

確認安裝：

claude --version
claude doctor

其他安裝方法請參見 安裝 Claude Code。

啟動 Claude 程式碼

  1. 在你想建立專案的父資料夾裡開啟一個終端機。

  2. 啟動 Claude 程式碼：

    claude

  3. 如果被要求，請完成瀏覽器驗證流程。

  4. 檢視 Claude Code 請求的資料夾存取權限和指令權限。

不要在包含你不想讓它檢查或修改的無關檔案的資料夾裡啟動 Claude Code。

搭建支架並執行應用程式

將以下提示貼入 Claude 程式碼：

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 瀏覽器登入。 前端啟動後，打開 Claude Code 回報的本地 URL。

請 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 編輯專案前，請先檢視計畫。 如果計畫不符合您的需求，請在批准實施前修正。

檢視已產生的變更

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 程式碼只印出指令

告訴 Claude Code 執行指令並回報結果。 審查並核准所請求的指揮權限。

一個指令正在等待登入

完成瀏覽器登入流程。 然後告訴 Claude Code 已完成登入，讓它可以繼續。

Claude Code 在錯誤的資料夾中運作

退出會話，在支架專案資料夾中開啟終端機，然後再次執行 claude 。

Claude Code 找不到指令

跑 claude doctor 去檢查 Claude Code 的安裝情況。 對於 Rayfin 指令，請確認 Node.js 20 或更新版本，且專案相依關係已安裝。

應用程式可以開啟，但 CSV 資料無法載入

請 Claude Code 檢查瀏覽器網路和主控台錯誤，確認已部署的資產路徑，並確認 CSV 檔案是否包含在靜態建置輸出中。

克勞德·科德提出 --force

要求 Claude Code 先顯示可能破壞性的結構操作。 只有在你理解並核准可能的資料遺失時才接受 --force 。

其他應用程式問題請參見故障排除 Fabric 應用程式。

相關內容

  • Last updated on