Buat aplikasi Fabric dengan Claude Code

Gunakan resep ini untuk membuat aplikasi Fabric yang mengubah file CSV menjadi penjelajah data interaktif. Claude Code memeriksa file, mengatur proyek, mengimplementasikan filter dan visualisasi yang sesuai dengan kolom yang tersedia, serta memvalidasi aplikasi dari terminal Anda.

Aplikasi yang sudah selesai menyertakan file CSV dalam konten statisnya dan memuat data di browser. Pendekatan ini bekerja dengan baik untuk data sampel, publik, atau nonsensitif yang tidak memerlukan koneksi langsung.

Di tutorial ini, Anda akan:

  • Instal dan mulai Claude Code.
  • Minta Claude Code untuk membuat kerangka dan memeriksa aplikasi Fabric.
  • Bangun penjelajah interaktif di sekitar file CSV Anda.
  • Tinjau dan validasi perubahan yang dihasilkan.
  • Sebarkan aplikasi ke Fabric.
  • Verifikasi penerapan dan buka aplikasi.

Prasyarat

  • Node.js 20 atau yang lebih baru.
  • Terminal yang didukung oleh Claude Code.
  • Akun Claude Pro, Max, Team, Enterprise, atau Console dengan akses Claude Code.
  • Akun Microsoft dengan akses ke Fabric.
  • Ruang kerja Fabric tempat Anda memiliki izin Kontributor, Anggota, atau Admin.
  • Beban kerja Fabric Apps telah diaktifkan untuk tenant Anda.
  • File CSV UTF-8 dengan baris header. Ketahui jalur lengkap ke file sebelum Anda memulai Claude Code.

Important

File CSV yang diterapkan sebagai konten aplikasi statis tersedia bagi orang yang dapat mengakses aplikasi tersebut. Jangan gunakan resep ini untuk rahasia, data pribadi, atau informasi sensitif lainnya.

Untuk persyaratan sistem Claude Code dan opsi akun, lihat dokumentasi pengaturan Claude Code.

Instal Claude Code

Instal Claude Code menggunakan metode untuk sistem operasi Anda.

Windows

Instal Claude Code dengan WinGet:

winget install Anthropic.ClaudeCode

macOS, Linux, atau Subsistem Windows untuk Linux

Gunakan installer asli:

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

Verifikasi penginstalan:

claude --version
claude doctor

Untuk metode instalasi lain, lihat Instal Claude Code.

Mulai Claude Code

  1. Buka terminal di folder induk tempat Anda ingin membuat proyek.

  2. Mulai Claude Code:

    claude

  3. Selesaikan alur autentikasi browser jika diminta.

  4. Tinjau akses folder dan izin perintah yang diminta Claude Code.

Jangan mulai Claude Code di folder yang berisi file yang tidak terkait yang tidak ingin Anda periksa atau modifikasi.

Buat kerangka dan jalankan aplikasi

Tempelkan perintah berikut ke 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.

Setujui perintah hanya setelah Anda meninjaunya. Selesaikan masuk browser Rayfin saat diminta. Setelah frontend dimulai, buka URL lokal yang dilaporkan Claude Code.

Minta Claude Code untuk membangun penjelajah data

Berikan Claude Code jalur lengkap ke file CSV Anda dan jelaskan bagaimana orang harus mengeksplorasi data tersebut. Agen dapat memeriksa header dan nilai sampel untuk menyesuaikan kontrol dan visualisasi dengan dataset.

Gunakan prompt berikut sebagai resep awal. Ganti <full-path-to-csv-file> dengan path ke file Anda.

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.

Tinjau rencana sebelum Claude Code mengedit proyek. Jika rencana tidak sesuai dengan kebutuhan Anda, perbaiki sebelum menyetujui pelaksanaan.

Meninjau perubahan yang dihasilkan

Setelah Claude Code selesai, mintalah ia meninjau karyanya:

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.

Tinjau sendiri perbedaan kontrol sumbernya. Perhatikan secara khusus pada:

  • Aset CSV yang disalin dan apakah layak untuk dipublikasikan.
  • Penguraian CSV dan inferensi tipe.
  • Konfigurasi layanan di rayfin/rayfin.yml.
  • Dependensi baru di package.json.
  • Rahasia atau kredensial yang tidak boleh Anda lakukan.

Memvalidasi aplikasi

Minta Claude Code untuk menjalankan validasi proyek yang sudah ada:

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.

Di browser, bandingkan beberapa baris, total, dan hasil yang difilter dengan file CSV sumber. Uji hasil kosong, data yang tidak valid, navigasi menggunakan keyboard, dan layar sempit.

Sebarkan aplikasi yang sudah selesai

Setelah Anda meninjau perubahan dan menguji aplikasi, minta Claude Code untuk menerapkannya:

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.

Perintah yang sama npx rayfin up memperbarui deployment yang sudah ada saat Anda melanjutkan pengembangan aplikasi.

Lanjutkan iterasi dengan Claude Code

Gunakan prompt yang terfokus untuk perubahan selanjutnya. Sertakan perilaku yang diinginkan, pengguna yang terdampak, kendala, dan langkah validasi.

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.

Jaga setiap permintaan agar cukup kecil untuk ditinjau. Tetapkan status kerja sebelum Anda meminta Claude Code melakukan perubahan besar atau yang berpotensi merusak.

Memecahkan masalah alur kerja Claude Code

Claude Code hanya mencetak perintah

Beri tahu Claude Code untuk menjalankan perintah dan melaporkan hasilnya. Tinjau dan setujui izin perintah yang diminta.

Perintah menunggu hingga login

Selesaikan alur masuk ke browser. Kemudian beri tahu Claude Code bahwa proses masuk sudah selesai sehingga bisa dilanjutkan.

Claude Code bekerja di folder yang salah

Keluar dari sesi, buka terminal di folder proyek scaffolded, dan jalankan claude lagi.

Claude Code tidak dapat menemukan perintah

Jalankan claude doctor untuk memeriksa instalasi Claude Code. Untuk menjalankan perintah Rayfin, pastikan Node.js 20 atau yang lebih baru dan dependensi proyek sudah terpasang.

Aplikasi terbuka tetapi data CSV tidak dimuat

Minta Claude Code untuk memeriksa kesalahan jaringan browser dan konsol, memverifikasi jalur aset yang disebarkan, dan mengonfirmasi bahwa file CSV termasuk dalam output build statis.

Claude Code mengusulkan --force

Minta Claude Code menunjukkan operasi skema yang berpotensi merusak terlebih dahulu. Terima --force hanya jika Anda memahami dan menyetujui kemungkinan kehilangan data.

Untuk masalah aplikasi lainnya, lihat Memecahkan masalah Fabric Apps.

Konten terkait

  • Terakhir diperbarui pada