Πώς να δημιουργήσετε μια εφαρμογή CRUD React με το Supabase Cloud Storage

Το React έχει φέρει επανάσταση στον τρόπο με τον οποίο οι προγραμματιστές δημιουργούν διεπαφές χρήστη για εφαρμογές web. Η αρχιτεκτονική που βασίζεται σε στοιχεία και η δηλωτική σύνταξη παρέχουν μια ισχυρή βάση για τη δημιουργία διαδραστικών και δυναμικών εμπειριών χρήστη.

Ως προγραμματιστής του React, η γνώση του τρόπου εφαρμογής των λειτουργιών CRUD (Δημιουργία, Ανάγνωση, Ενημέρωση, Διαγραφή) είναι ένα κρίσιμο πρώτο βήμα προς τη δημιουργία ισχυρών και αποτελεσματικών λύσεων ιστού.

Μάθετε πώς να δημιουργείτε μια απλή εφαρμογή React CRUD, χρησιμοποιώντας το Supabase Cloud Storage ως λύση υποστήριξης.

Λύση Supabase Backend-as-a-Service

Παρόχους Backend-as-a-Service (BaaS)., όπως το Supabase, προσφέρουν μια βολική εναλλακτική λύση για τη δημιουργία μιας ολοκληρωμένης υπηρεσίας υποστήριξης από την αρχή για τις εφαρμογές Ιστού σας. Στην ιδανική περίπτωση, αυτές οι λύσεις παρέχουν ένα ευρύ φάσμα προκατασκευασμένων υπηρεσιών υποστήριξης που είναι απαραίτητες για τη δημιουργία ενός αποτελεσματικού συστήματος υποστήριξης για τις εφαρμογές web React σας.

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

Ενσωματώνοντας λύσεις BaaS όπως το Supabase στο έργο σας, μπορείτε να μειώσετε σημαντικά τον χρόνο ανάπτυξης και αποστολής, ενώ παράλληλα επωφεληθείτε από ισχυρές υπηρεσίες υποστήριξης.

Ρυθμίστε ένα έργο αποθήκευσης στο cloud του Supabase

Για να ξεκινήσετε, κατευθυνθείτε στο Ο ιστότοπος της Supabaseκαι εγγραφείτε για λογαριασμό.

1. Μόλις εγγραφείτε για λογαριασμό, συνδεθείτε στον λογαριασμό σας ταμπλό σελίδα.
2. Κάνε κλικ στο Νέο Έργο κουμπί.
3. Συμπληρώστε τα στοιχεία του έργου και κάντε κλικ στο Δημιουργία νέου έργου.
4. Με τη ρύθμιση του έργου, επιλέξτε και κάντε κλικ στο Επεξεργαστής SQL κουμπί χαρακτηριστικών στο αριστερό πλαίσιο χαρακτηριστικών.
5. Εκτελέστε την πρόταση SQL παρακάτω στο Επεξεργαστής SQL για να δημιουργήσετε έναν πίνακα επίδειξης. Θα περιέχει τα δεδομένα που θα χρησιμοποιήσετε με την εφαρμογή React.

   δημιουργώτραπέζι προϊόντα (
    id bigint που δημιουργείται από προεπιλογή ως πρωτεύον κλειδί ταυτότητας,
    κείμενο ονόματος,
    κείμενο περιγραφής
   );

Ρυθμίστε μια εφαρμογή React CRUD

Δημιουργήστε μια εφαρμογή React, μεταβείτε στον ριζικό κατάλογο και δημιουργήστε ένα νέο αρχείο, .env, για να ορίσετε ορισμένες μεταβλητές περιβάλλοντος. Πηγαίνετε στο Supabase σας Ρυθμίσεις σελίδα, ανοίξτε το API ενότητα και αντιγράψτε τις τιμές για URL έργου και δημόσιο κλειδί ανωνύμου. Επικολλήστε τα στο αρχείο env σας:

REACT_APP_SUPABASE_URL = URL έργου
REACT_APP_SUPABASE_ANON_KEY = δημόσιο κλειδί anon

Στη συνέχεια, εκτελέστε αυτήν την εντολή για να εγκαταστήσετε τη βιβλιοθήκη JavaScript του Supabase στο έργο σας React:

npm εγκατάσταση @supabase/supabase-js

Διαμορφώστε τον πελάτη Supabase

Στο src κατάλογο, δημιουργήστε ένα νέο utils/SupbaseClient.js αρχείο και τον παρακάτω κώδικα:

εισαγωγή {createClient } από'@supbase/supbase-js'; 
συνθ supabaseURL = process.env. REACT_APP_SUPABASE_URL;
συνθ supabaseAnonKey = διεργασία.env. REACT_APP_SUPABASE_ANON_KEY;
εξαγωγήσυνθ supabase = createClient (supabaseURL, supabaseAnonKey);

Αυτός ο κώδικας δημιουργεί μια παρουσία πελάτη Supabase παρέχοντας τη διεύθυνση URL του Supabase και ένα δημόσιο κλειδί anon, επιτρέποντας στην εφαρμογή React να επικοινωνεί με τα API του Supabase και να εκτελεί λειτουργίες CRUD.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Εφαρμογή των πράξεων CRUD

Τώρα που ρυθμίσατε με επιτυχία τον αποθηκευτικό χώρο cloud της Supabase και το έργο React, εφαρμόστε τις λειτουργίες CRUD στην εφαρμογή React σας.

1. Προσθήκη δεδομένων στη βάση δεδομένων

Ανοιξε το src/App.js αρχείο, διαγράψτε τον κωδικό React του boilerplate και προσθέστε τα εξής:

εισαγωγή { useState, useEffect } από'αντιδρώ';
εισαγωγή Κάρτα Προϊόντος από'./components/ProductCard';
εισαγωγή { subbase } από'./utils/SupbaseClient';
εισαγωγή"./App.css";
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [name, setName] = useState('');
συνθ [description, setDescription] = useState('');
ασυγχρονισμόςλειτουργίαaddProduct() {
δοκιμάστε {
συνθ { δεδομένα, σφάλμα } = αναμένω υποβάση
 .από('προϊόντα')
 .εισάγετε({
 όνομα: όνομα,
 περιγραφή: περιγραφή
 })
 .μονόκλινο();
αν (λάθος) βολή λάθος;
παράθυρο.location.reload();
 } σύλληψη (λάθος) {
 ειδοποίηση (error.message);
 }
 }

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

2. Διαβάστε δεδομένα από τη βάση δεδομένων Cloud

Ορίστε μια συνάρτηση χειριστή για την ανάκτηση των αποθηκευμένων δεδομένων από τη βάση δεδομένων.

συνθ [products, setProducts] = useState([]);
ασυγχρονισμόςλειτουργίαgetProducts() {
δοκιμάστε {
συνθ { δεδομένα, σφάλμα } = αναμένω υποβάση
 .από('προϊόντα')
 .επιλέγω('*')
 .όριο(10);
αν (λάθος) βολή λάθος;
αν (στοιχεία != μηδενικό) {
 setProducts (δεδομένα);
 }
 } σύλληψη (λάθος) {
 ειδοποίηση (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Αυτός ο κώδικας ανακτά ασύγχρονα τα δεδομένα από τη βάση δεδομένων. Το ερώτημα ανάκτησης ανακτά όλα τα δεδομένα από τον πίνακα προϊόντων, περιορίζοντας τα αποτελέσματα σε μέγιστο αριθμό 10 εγγραφών και ενημερώνει το προϊόντα' κατάσταση με τα ανακτημένα δεδομένα.

ο useEffectReact hook τρέχει το getProducts λειτουργεί όταν τοποθετείται το εξάρτημα. Αυτό διασφαλίζει ότι τα δεδομένα των προϊόντων λαμβάνονται και αποδίδονται κατά την αρχική απόδοση του στοιχείου. Τέλος, προσθέστε τον κώδικα που αποδίδει τα στοιχεία εισόδου JSX στο πρόγραμμα περιήγησης για να επιτρέψει στους χρήστες να προσθέσουν προϊόντα σε μια βάση δεδομένων Supabase και να εμφανίσουν τα υπάρχοντα προϊόντα που έχουν ληφθεί από τη βάση δεδομένων.

ΕΠΙΣΤΡΟΦΗ (
 <>

"κεφαλίδα-κοντέινερ">
Αποθηκεύστε Προϊόντα</h3>
 </div>
 </header>


Προσθήκη δεδομένων προϊόντων στη βάση δεδομένων Supabase</h3>


"δημιουργώ-προϊόν-κοντέινερ">


Όνομα προϊόντος</label>
 τύπος="κείμενο"
 id="όνομα"
 onChange={(e) => setName (e.target.value)}
 />
Περιγραφή προϊόντος</label>
 τύπος="κείμενο"
 id="περιγραφή"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Προσθήκη προϊόντος
 </button>
 </div>
 </div>




Τρέχοντα Προϊόντα σε η Βάση Δεδομένων</h3>

"product-list-container">
 {products.map((προϊόν) => (



 </div>
 ))}
 </div>
 </>
 );
}

Τα δεδομένα που ανακτήθηκαν στο σειρά προϊόντων μεταβιβάζεται ως στηρίγματα και αποδίδεται δυναμικά εντός του Κάρτα Προϊόντος συστατικό που χρησιμοποιεί το χάρτης λειτουργία.

3. Ενημερώστε και διαγράψτε τα υπάρχοντα δεδομένα στη βάση δεδομένων

Δημιούργησε ένα νέο components/ProductCard.js αρχείο στο /src Ευρετήριο. Πριν ορίσουμε τις λειτουργίες χειριστή, ας δούμε τις καταστάσεις και τα στοιχεία JSX που θα εφαρμόσετε σε αυτό το στοιχείο.

εισαγωγή { useState } από'αντιδρώ';
εισαγωγή { subbase } από"../utils/SupabaseClient";
εισαγωγή"./productcard.styles.css";
εξαγωγήΠροκαθορισμένολειτουργίαΚάρτα Προϊόντος(στηρίγματα) {
συνθ προϊόν = στηρίγματα.προϊόν;
συνθ [editing, setEditing] = useState(ψευδής);
συνθ [όνομα, setName] = useState (product.name);
συνθ [description, setDescription] = useState (product.description);
ΕΠΙΣΤΡΟΦΗ (
"προϊόν-κάρτα">


 {επεξεργασία ψευδής? (


{product.name}</h5>


{product.description}</p>
"κουμπί διαγραφής" onClick={() => deleteProduct()}>Διαγραφή προϊόντος</button>
"κουμπί επεξεργασίας" onClick={() => setEditing(αληθής)}>Επεξεργασία προϊόντος</button>
 </div>
 ): (


Επεξεργασία προϊόντος</h4>
"κουμπί επιστροφής" onClick={() => setEditing(ψευδής)}>Επιστροφή</button>


"όνομα">Όνομα προϊόντος</label>
 τύπος="κείμενο"
 id="όνομα"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"περιγραφή">Περιγραφή προϊόντος</label>
 τύπος="κείμενο"
 id="περιγραφή"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"κουμπί ενημέρωσης" onClick={() => updateProduct()}>Ενημέρωση προϊόντος σε Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

ασυγχρονισμόςλειτουργίαενημέρωσηΠροϊόν() {
δοκιμάστε {
συνθ { δεδομένα, σφάλμα } = αναμένω υποβάση
 .από('προϊόντα')
 .εκσυγχρονίζω({
 όνομα: όνομα,
 περιγραφή: περιγραφή
 })
 .eq('ταυτότητα', product.id);
αν (λάθος) βολή λάθος;
παράθυρο.location.reload();
 } σύλληψη (λάθος) {
 ειδοποίηση (error.message);
 }
}

ασυγχρονισμόςλειτουργίαΔιαγραφή προϊόντος() {
δοκιμάστε {
συνθ { δεδομένα, σφάλμα } = αναμένω υποβάση
 .από('προϊόντα')
 .διαγράφω()
 .eq('ταυτότητα', product.id);
αν (λάθος) βολή λάθος;
παράθυρο.location.reload();
 } σύλληψη (λάθος) {
 ειδοποίηση (error.message);
 }
}