Δημιουργία εφαρμογής Fabric με Claude Code

Χρησιμοποιήστε αυτήν τη συνταγή για να δημιουργήσετε μια εφαρμογή Fabric που μετατρέπει ένα αρχείο CSV σε αλληλεπιδραστική εξερεύνηση δεδομένων. Ο Claude Code επιθεωρεί το αρχείο, στηρίζει το έργο, εφαρμόζει φίλτρα και απεικονίσεις που ταιριάζουν στις διαθέσιμες στήλες και επικυρώνει την εφαρμογή από το τερματικό σας.

Η ολοκληρωμένη εφαρμογή περιλαμβάνει το αρχείο CSV στο στατικό της περιεχόμενο και φορτώνει τα δεδομένα στο πρόγραμμα περιήγησης. Αυτή η προσέγγιση λειτουργεί καλά για δείγματα, δημόσια ή μη ευαίσθητα δεδομένα που δεν απαιτούν δυναμική σύνδεση.

Σε αυτό το πρόγραμμα εκμάθησης:

  • Εγκαταστήστε και ξεκινήστε το Claude Code.
  • Ζητήστε από τον Claude Code να σκαλωσίσει και να επιθεωρήσει μια εφαρμογή Fabric.
  • Δημιουργήστε έναν διαδραστικό εξερευνητή γύρω από το αρχείο CSV σας.
  • Ελέγξτε και επικυρώστε τις αλλαγές που δημιουργούνται.
  • Αναπτύξτε την εφαρμογή στο Fabric.
  • Επαληθεύστε την ανάπτυξη και ανοίξτε την εφαρμογή.

Προαπαιτούμενα στοιχεία

  • Node.js 20 ή μεταγενέστερη έκδοση.
  • Ένα τερματικό που υποστηρίζεται από τον κώδικα Claude.
  • Ένας λογαριασμός Claude Pro, Max, Team, Enterprise ή Console με πρόσβαση Claude Code.
  • Ένας λογαριασμός Λογαριασμός Microsoft με πρόσβαση στο Fabric.
  • Ένας χώρος εργασίας Fabric όπου έχετε δικαιώματα συμβάλλου, μέλους ή διαχειριστή.
  • Ο φόρτος εργασίας Fabric Apps είναι ενεργοποιημένος για τον μισθωτή σας.
  • Ένα αρχείο CSV UTF-8 με μια σειρά κεφαλίδας. Γνωρίστε την πλήρη διαδρομή προς το αρχείο πριν ξεκινήσετε τον κώδικα Claude.

Σημαντικός

Ένα αρχείο CSV που αναπτύσσεται ως στατικό περιεχόμενο εφαρμογής είναι διαθέσιμο σε άτομα που έχουν πρόσβαση στην εφαρμογή. Μην χρησιμοποιείτε αυτήν τη συνταγή για μυστικά, προσωπικά δεδομένα ή άλλες ευαίσθητες πληροφορίες.

Για τις απαιτήσεις συστήματος και τις επιλογές λογαριασμού Claude Code, ανατρέξτε στην τεκμηρίωση ρύθμισης του Claude Code.

Εγκαταστήστε τον κώδικα Claude

Εγκαταστήστε τον κώδικα Claude χρησιμοποιώντας τη μέθοδο για το λειτουργικό σας σύστημα.

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

  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 όταν σας ζητηθεί. Αφού ξεκινήσει το 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

Χρησιμοποιήστε εστιασμένες προτροπές για μεταγενέστερες αλλαγές. Συμπεριλάβετε την επιθυμητή συμπεριφορά, τους επηρεαζόμενους χρήστες, τους περιορισμούς και τα βήματα επικύρωσης.

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 λειτουργεί σε λάθος φάκελο

Κλείστε τη συνεδρία, ανοίξτε ένα τερματικό στον φάκελο του έργου και εκτελέστε claude ξανά.

Ο κώδικας Claude δεν μπορεί να βρει μια εντολή

Εκτελέστε claude doctor για να ελέγξετε την εγκατάσταση του Claude Code. Για εντολές Rayfin, επιβεβαιώστε ότι Node.js 20 ή νεότερη έκδοση και ότι έχουν εγκατασταθεί οι εξαρτήσεις του έργου.

Η εφαρμογή ανοίγει, αλλά τα δεδομένα CSV δεν φορτώνονται

Ζητήστε από τον Claude Code να επιθεωρήσει τα σφάλματα δικτύου και κονσόλας του προγράμματος περιήγησης, να επαληθεύσει τη διαδρομή του αναπτυγμένου στοιχείου και να επιβεβαιώσει ότι το αρχείο CSV περιλαμβάνεται στην έξοδο στατικής έκδοσης.

Ο Claude Code προτείνει --force

Απαιτήστε από τον Claude Code να εμφανίζει πρώτα τις δυνητικά καταστροφικές λειτουργίες σχήματος. Αποδεχτείτε --force μόνο όταν κατανοήσετε και εγκρίνετε την πιθανή απώλεια δεδομένων.

Για άλλα προβλήματα εφαρμογών, ανατρέξτε στο θέμα Αντιμετώπιση προβλημάτων εφαρμογών Fabric.

Σχετικό περιεχόμενο

  • Τελευταία ενημέρωση στις