หมายเหตุ
การเข้าถึงหน้านี้ต้องได้รับการอนุญาต คุณสามารถลอง ลงชื่อเข้าใช้หรือเปลี่ยนไดเรกทอรีได้
การเข้าถึงหน้านี้ต้องได้รับการอนุญาต คุณสามารถลองเปลี่ยนไดเรกทอรีได้
ใช้สูตรนี้เพื่อสร้างแอป 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 สําหรับ tenant ของคุณ
- ไฟล์ CSV UTF-8 ที่มีแถวหัวเรื่อง รู้เส้นทางทั้งหมดของไฟล์ก่อนเริ่ม Claude Code
Important
ไฟล์ CSV ที่ติดตั้งเป็นเนื้อหาแอปแบบคงที่จะพร้อมใช้งานสําหรับผู้ที่สามารถเข้าถึงแอปได้ อย่าใช้สูตรนี้สําหรับความลับ ข้อมูลส่วนบุคคล หรือข้อมูลที่ละเอียดอ่อนอื่น ๆ
สําหรับข้อกําหนดระบบและตัวเลือกบัญชี Claude Code โปรดดูเอกสารการตั้งค่า Claude Code
ติดตั้ง Claude Code
ติดตั้ง Claude Code โดยใช้วิธีสําหรับระบบปฏิบัติการของคุณ
Windows
ติดตั้งโค้ด Claude ด้วย WinGet:
winget install Anthropic.ClaudeCode
macOS, Linux หรือ ระบบย่อย Windows สำหรับ Linux
ใช้ตัวติดตั้งแบบเนทีฟ:
curl -fsSL https://claude.ai/install.sh | bash
ตรวจสอบการติดตั้ง:
claude --version
claude doctor
สําหรับวิธีการติดตั้งอื่น ๆ ดูที่ ติดตั้งโค้ด Claude
เริ่มโค้ด Claude
เปิดเทอร์มินัลในโฟลเดอร์แม่ที่คุณต้องการสร้างโปรเจกต์
เริ่มโค้ด Claude:
claudeดําเนินการตรวจสอบสิทธิ์เบราว์เซอร์ให้เสร็จสิ้นหากมีการแจ้ง
ตรวจสอบสิทธิ์การเข้าถึงโฟลเดอร์และคําสั่งที่ 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 ให้เสร็จสมบูรณ์เมื่อมีการแจ้ง หลังจากที่ frontend เริ่มต้น ให้เปิด 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 จะตัดต่อโครงการ ถ้าแผนไม่ตรงกับความต้องการของคุณ ให้แก้ไขก่อนอนุมัติการดําเนินการ
ตรวจสอบการเปลี่ยนแปลงที่สร้างขึ้น
หลังจาก 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 Code ว่าการลงชื่อเข้าใช้เสร็จสมบูรณ์เพื่อให้ดําเนินการต่อได้
Claude Code ทํางานในโฟลเดอร์ผิด
ออกจากเซสชัน เปิดเทอร์มินัลในโฟลเดอร์โปรเจกต์แบบ scaffolded แล้วรัน claude อีกครั้ง
Claude Code ไม่พบคําสั่ง
รัน claude doctor เพื่อตรวจสอบการติดตั้ง Claude Code สําหรับคําสั่ง Rayfin ให้ตรวจสอบว่า Node.js 20 หรือใหม่กว่าและ dependencies ของโปรเจกต์ถูกติดตั้งแล้ว
แอปเปิดขึ้นแต่ข้อมูล CSV ไม่โหลด
ขอให้ Claude Code ตรวจสอบข้อผิดพลาดของเครือข่ายเบราว์เซอร์และคอนโซล ตรวจสอบเส้นทางทรัพย์สินที่ติดตั้ง และยืนยันว่าไฟล์ CSV ถูกรวมอยู่ในผลลัพธ์ static build
Claude Code เสนอ --force
กําหนดให้ Claude Code แสดงการดําเนินการสคีมาที่อาจทําลายได้ก่อน ยอมรับ --force เฉพาะเมื่อคุณเข้าใจและอนุมัติการสูญหายของข้อมูลที่อาจเกิดขึ้น
สําหรับปัญหาแอปอื่น ๆ ดูที่ การแก้ไขปัญหาแอป Fabric