Claude Code ile bir Fabric uygulaması oluştur

Bu tarifi kullanarak bir CSV dosyasını etkileşimli veri gezginine dönüştüren bir Fabric uygulaması oluşturun. Claude Code dosyayı inceler, projeyi destekler, mevcut sütunlara uygun filtreler ve görselleştirmeler uygular ve uygulamayı terminalinizden doğrular.

Tamamlanan uygulama, CSV dosyasını statik içeriğine dahil eder ve verileri tarayıcıda yükler. Bu yaklaşım, canlı bağlantı gerektirmeyen örnek, kamuya açık veya hassas olmayan veriler için iyi çalışır.

Bu eğitimde şunları yapacaksınız:

  • Claude Code'u kurup başlat.
  • Claude Code'dan bir Fabric uygulamasının iskeletini oluşturmasını ve incelemesini iste.
  • CSV dosyanızın etrafında etkileşimli bir gezgin geliştirin.
  • Oluşturulan değişiklikleri gözden geçirin ve doğrulayın.
  • Uygulamayı Fabric'e dağıtın.
  • Dağıtımı doğrulayın ve uygulamayı açın.

Prerequisites

  • Node.js 20 veya üzeri.
  • Claude Code tarafından desteklenen bir terminal.
  • Claude Code erişimi olan bir Claude Pro, Max, Team, Enterprise veya Console hesabı.
  • Fabric'e erişimi olan bir Microsoft hesabı.
  • Katkıda Bulunan, Üye veya Yönetici izinlerine sahip olduğunuz bir Fabric çalışma alanı.
  • Fabric Apps iş yükü kiracınız için etkinleştirildi.
  • Başlık satırı olan bir UTF-8 CSV dosyası. Claude Code'a başlamadan önce dosyaya giden yolu tam bilin.

Important

Uygulamaya erişebilen kişiler için statik uygulama içeriği olarak dağıtılan bir CSV dosyası mevcuttur. Bu tarifi sırlar, kişisel veriler veya diğer hassas bilgiler için kullanmayın.

Claude Code sistem gereksinimleri ve hesap seçenekleri için Claude Code kurulum dokümantasyonuna bakınız.

Claude Code Kurulumu

Claude Code'u işletim sisteminiz için bu yöntemi kullanarak kurun.

Windows

WinGet ile Claude Code'u yükleyin:

winget install Anthropic.ClaudeCode

macOS, Linux ya da Linux için Windows Alt Sistemi

Yerel kurulumcunu kullanın:

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

Yüklemeyi doğrulayın:

claude --version
claude doctor

Diğer kurulum yöntemleri için bkz. Claude Kodu Kurulumu.

Claude Kodu'na Başla

  1. Proje oluşturmak istediğiniz ana klasörde bir terminal açın.

  2. Claude Code'u Başlat:

    claude

  3. Eğer istenirse tarayıcı kimlik doğrulama akışını tamamla.

  4. Claude Code'un istediği klasör erişim ve komut izinlerini gözden geçirin.

Claude Code'u, incelemesini veya değiştirmesini istemediğiniz alakasız dosyalar içeren bir klasörde başlatmayın.

İskele kur ve uygulamayı çalıştır

Aşağıdaki isteği Claude Code'a yapıştırın:

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.

Komutları ancak inceledikten sonra onaylayın. Rayfin tarayıcı girişini istendiğinde tamamla. Ön yüz başladıktan sonra, Claude Code'un bildirdiği yerel URL'yi açın.

Claude Code'dan veri gezici oluşturmasını isteyin

Claude Code'a CSV dosyanıza giden tam yolu verin ve insanların verileri nasıl keşfetmesi gerektiğini anlatın. Ajan, başlıkları ve örnek değerlerini inceleyerek kontrolleri ve görselleştirmeleri veri setine uyarlayabilir.

Aşağıdaki promptu başlangıç tarifi olarak kullanın. <full-path-to-csv-file> öğesini dosyanızın yolu ile değiştirin.

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 projeyi düzenlemeden önce planı gözden geçirin. Plan gereksinimlerinizle uyumlu değilse, uygulamayı onaylamadan önce düzeltin.

Oluşturulan değişiklikleri gözden geçirme

Claude Code işini bitirdikten sonra, ondan yaptığı işi gözden geçirmesini isteyin:

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.

Kaynak kontrol farkını kendiniz gözden geçirin. Özellikle şunlara dikkat edin:

  • Kopyalanan CSV varlığı ve yayımlanmasının uygun olup olmadığı.
  • CSV ayrıştırma ve tür çıkarımı.
  • rayfin/rayfin.yml içinde hizmet yapılandırması.
  • package.json içindeki yeni bağımlılıklar.
  • Commit etmemeniz gereken sırlar veya kimlik bilgileri.

Uygulamayı doğrulama

Claude Code'dan projenin mevcut doğrulamasını çalıştırmasını iste:

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.

Tarayıcıda, birkaç satır, toplam ve filtrelenmiş sonuçları kaynak CSV dosyasıyla karşılaştırın. Boş sonuçları, hatalı biçimlendirilmiş verileri, klavye ile gezinmeyi ve dar ekranları test edin.

Bitmiş uygulamayı dağıtın

Değişiklikleri gözden geçirip uygulamayı test ettikten sonra, Claude Code'dan uygulamayı dağıtmasını iste:

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.

Aynı npx rayfin up komut, uygulamayı geliştirmeye devam ettiğinizde mevcut bir dağıtımı güncelliyor.

Claude Code ile yinelemeye devam edin

Daha sonraki değişiklikler için odaklanmış istemler kullanın. İstenen davranışı, etkilenen kullanıcıları, kısıtlamaları ve doğrulama adımlarını dahil edin.

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.

Her talebi gözden geçirebileceğiniz kadar küçük tutun. Claude Code'dan büyük veya potansiyel olarak yıkıcı bir değişiklik yapmasını istemeden önce, çalışır durumdaki hâli kaydedin.

Claude Code iş akışının sorunlarını giderin

Claude Code sadece komutları yazdırır

Claude Code'a komutları çalıştırmasını ve sonuçlarını raporlamasını söyle. İstenen komut izinlerini gözden geçirip onaylayın.

Bir komut giriş için bekliyor

Tarayıcı giriş akışını tamamla. Sonra Claude Code'a giriş işleminin tamamlandığını söyleyin, böylece devam edebilsin.

Claude Code yanlış klasörde çalışıyor

Oturumdan çıkın, iskele proje klasöründe bir terminal açın ve tekrar çalıştırın claude .

Claude Code bir komut bulamıyor

Claude Code kurulumunu kontrol etmek için claude doctor çalıştırın. Rayfin komutları için Node.js 20 veya daha yeni olduğunu ve proje bağımlılıklarının kurulduğunu doğrulayın.

Uygulama açılıyor ama CSV veri yüklenmiyor

Claude Code'dan tarayıcı ağı ve konsol hatalarını incelemesini, dağıtılan varlık yolunu doğrulamasını ve CSV dosyasının statik derleme çıktısına dahil olduğunu doğrulamasını istedin.

Claude Code öneride bulunuyor --force

Claude Code'un önce potansiyel yıkıcı şema işlemlerini göstermesini iste. Yalnızca olası veri kaybını anladığınızda ve onayladığınızda kabul --force edin.

Diğer uygulama sorunları için Troubleshoot Fabric Apps'a bakınız.

İlgili içerik

  • Son güncelleştirme: