Hogyan készítsünk CRUD React alkalmazást Supabase Cloud Storage segítségével

A React forradalmasította azt a módot, ahogyan a fejlesztők felhasználói felületeket készítenek webes alkalmazásokhoz. Összetevő alapú architektúrája és deklaratív szintaxisa hatékony alapot biztosít az interaktív és dinamikus felhasználói élmények létrehozásához.

React fejlesztőként a CRUD (Create, Read, Update, Delete) műveletek megvalósításának elsajátítása az első döntő lépés a robusztus és hatékony webes megoldások kiépítése felé.

Tanulja meg, hogyan készíthet egyszerű React CRUD alkalmazást a Supabase Cloud Storage háttérmegoldásaként.

Supabase Backend-as-a-Service Solution

Backend-as-a-Service (BaaS) szolgáltatókA Supabase-hez hasonlóan kényelmes alternatívát kínálnak egy teljes körű háttérszolgáltatás létrehozására a semmiből a webes alkalmazások számára. Ideális esetben ezek a megoldások az előre beépített háttérszolgáltatások széles skáláját kínálják, amelyek elengedhetetlenek a React webalkalmazások hatékony háttérrendszerének beállításához.

A BaaS segítségével olyan funkciókat használhat, mint az adattárolás, hitelesítési rendszerek, valós idejű előfizetések és még sok más anélkül, hogy ezeket a szolgáltatásokat önállóan kellene fejleszteni és karbantartani.

A BaaS megoldások, például a Supabase projektbe való integrálásával jelentősen csökkentheti a fejlesztési és szállítási időt, miközben továbbra is élvezheti a robusztus háttérszolgáltatások előnyeit.

Supabase Cloud Storage Project beállítása

A kezdéshez menjen a következőhöz Supabase honlapja, és regisztráljon egy fiókot.

1. Miután regisztrált egy fiókot, jelentkezzen be fiókjába Irányítópult oldalon.
2. Kattintson a Új projekt gomb.
3. Töltse ki a projekt adatait, és kattintson a gombra Új projekt létrehozása.
4. A projekt beállítása után válassza ki és kattintson a gombra SQL szerkesztő funkció gomb a bal oldali funkciók panelen.
5. Futtassa az alábbi SQL utasítást a SQL szerkesztő demótábla létrehozásához. Ez fogja tárolni azokat az adatokat, amelyeket a React alkalmazással fog használni.

   teremtasztal Termékek (
    id bigint alapértelmezés szerint identitás elsődleges kulcsaként generálva,
    név szövege,
    leírás szövege
   );

React CRUD alkalmazás beállítása

Hozzon létre egy React alkalmazást, navigáljon a gyökérkönyvtárba, és hozzon létre egy új fájlt, .env, néhány környezeti változó beállításához. Irány a Supabase beállítások oldalt, nyissa meg a API szakaszt, és másolja át az értékeket projekt URL-je és nyilvános anon kulcs. Illessze be ezeket az env fájlba:

REACT_APP_SUPABASE_URL = projekt URL
REACT_APP_SUPABASE_ANON_KEY = nyilvános anon kulcs

Ezután futtassa ezt a parancsot a Supabase JavaScript-könyvtárának telepítéséhez a React projektben:

npm install @supabase/supabase-js

Konfigurálja a Supabase klienst

Ban,-ben src könyvtárat, hozzon létre egy újat utils/SupabaseClient.js fájl és az alábbi kód:

import {Client létrehozása } tól től"@supabase/supabase-js"; 
const supabaseURL = process.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
exportconst supabase = CreateClient (supabaseURL, supabaseAnonKey);

Ez a kód Supabase-ügyfélpéldányt hoz létre a Supabase URL-cím és egy nyilvános anon kulcs megadásával, lehetővé téve a React alkalmazás számára, hogy kommunikáljon a Supabase API-kkal és CRUD-műveleteket hajtson végre.

A projekt kódját itt találja meg GitHub adattár.

Hajtsa végre a CRUD műveleteket

Most, hogy sikeresen beállította a Supabase felhőtárhelyét és a React projektjét, hajtsa végre a CRUD műveleteket a React alkalmazásban.

1. Adatok hozzáadása az adatbázishoz

Nyissa meg a src/App.js fájlt, törölje a React kódot, és adja hozzá a következőket:

import { useState, useEffect } tól től'reagál';
import ProductCard tól től"./components/ProductCard";
import { supabase } tól től'./utils/SupabaseClient';
import'./App.css';
exportalapértelmezettfunkcióApp() {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
asyncfunkcióaddProduct() {
próbáld ki {
const { adat, hiba } = várja supabázis
 .tól től('Termékek')
 .insert({
 név: név,
 leírás: leírás
 })
 .egyetlen();
ha (hiba) dobás hiba;
ablak.location.reload();
 } fogás (hiba) {
 riasztás (error.message);
 }
 }

Ez a kód meghatároz egy addProduct kezelő funkció, amely aszinkron módon beszúr egy új rekordot a Termékek táblázat a felhőadatbázisban. Ha a beszúrási művelet sikeres, az oldal újra betöltődik, hogy tükrözze a frissített terméklistát.

2. Adatok olvasása a felhőadatbázisból

Határozzon meg egy kezelő függvényt a tárolt adatok adatbázisból való lekéréséhez.

const [termékek, setProducts] = useState([]);
asyncfunkciógetProducts() {
próbáld ki {
const { adat, hiba } = várja supabázis
 .tól től('Termékek')
 .select('*')
 .határ(10);
ha (hiba) dobás hiba;
ha (adat != nulla) {
 setProducts (adatok);
 }
 } fogás (hiba) {
 riasztás (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Ez a kód aszinkron módon lekéri az adatokat az adatbázisból. A lekérési lekérdezés lekéri az összes adatot a termékek táblájából, az eredményeket legfeljebb 10 rekordra korlátozva, és frissíti a Termékek' állapotát a visszakeresett adatokkal.

A useEffectReagálás horog fut a getProducts funkció, amikor az alkatrész fel van szerelve. Ez biztosítja a termékek adatainak lekérését és megjelenítését az összetevő kezdeti megjelenítésekor. Végül adja hozzá azt a kódot, amely a bemeneti JSX elemeket jeleníti meg a böngészőben, hogy a felhasználók hozzáadhassanak termékeket egy Supabase adatbázishoz, és megjelenítsék az adatbázisból lekért meglévő termékeket.

Visszatérés (
 <>

"fejléc-tároló">
Bolti termékek</h3>
 </div>
 </header>


Termékadatok hozzáadása a Supabase adatbázishoz</h3>


"terméktároló létrehozása">


Termék neve</label>
 típus="szöveg"
 id="név"
 onChange={(e) => setName (e.target.value)}
 />
Termékleírás</label>
 típus="szöveg"
 id="leírás"
 onChange={(e) => setDescription (e.target.value)}
 />


 addProduct()}>
 Termék hozzáadása
 </button>
 </div>
 </div>




Aktuális termékek ban ben az Adatbázis</h3>

"terméklista-tároló">
 {products.map((termék) => (



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

A lekért adatok a termékek tömbje kellékként kerül átadásra, és dinamikusan jelenítik meg a ProductCard komponens segítségével térkép funkció.

3. Meglévő adatok frissítése és törlése az adatbázisban

Újat csinálni összetevők/ProductCard.js fájl a /src Könyvtár. A kezelő függvények meghatározása előtt nézzük meg, milyen állapotokat és JSX elemeket fog implementálni ebben a komponensben.

import { useState } tól től'reagál';
import { supabase } tól től"../utils/SupabaseClient";
import"./productcard.styles.css";
exportalapértelmezettfunkcióProductCard(kellékek) {
const termék = kellékek.termék;
const [szerkesztés, setEditing] = useState(hamis);
const [név, setName] = useState (termék.név);
const [leírás, setDescription] = useState (termék.leírás);
Visszatérés (
"termékkártya">


 {szerkesztés hamis? (


{product.name}</h5>


{product.description}/p>
"törlés gomb" onClick={() => deleteProduct()}>Termék törlése</button>
"szerkesztés gomb" onClick={() => setEditing(igaz)}>Termék szerkesztése</button>
 </div>
 ): (


Termék szerkesztése</h4>
"visszalépés gomb" onClick={() => setEditing(hamis)}>Menj vissza</button>


"név">Termék neve</label>
 típus="szöveg"
 id="név"
 defaultValue={termék.név}
 onChange={(e) => setName (e.target.value)}/>
"leírás">Termékleírás</label>
 típus="szöveg"
 id="leírás"
 defaultValue={termék.leírás}
 onChange={(e) => setDescription (e.target.value)}/>


"frissítés gomb" onClick={() => updateProduct()}>Termék frissítése ban ben Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asyncfunkciótermék frissítése() {
próbáld ki {
const { adat, hiba } = várja supabázis
 .tól től('Termékek')
 .update({
 név: név,
 leírás: leírás
 })
 .eq("azonosító", termék azonosító);
ha (hiba) dobás hiba;
ablak.location.reload();
 } fogás (hiba) {
 riasztás (error.message);
 }
}

asyncfunkciótörölje Termék() {
próbáld ki {
const { adat, hiba } = várja supabázis
 .tól től('Termékek')
 .töröl()
 .eq("azonosító", termék azonosító);
ha (hiba) dobás hiba;
ablak.location.reload();
 } fogás (hiba) {
 riasztás (error.message);
 }
}