כיצד לבנות אפליקציית CRUD React עם Supabase Cloud Storage

React חוללה מהפכה באופן שבו מפתחים בונים ממשקי משתמש עבור יישומי אינטרנט. הארכיטקטורה מבוססת הרכיבים והתחביר ההצהרתי שלו מספקים בסיס רב עוצמה ליצירת חוויות משתמש אינטראקטיביות ודינמיות.

כמפתח React, שליטה ביישום פעולות CRUD (צור, קריאה, עדכן, מחק) הוא צעד ראשון ומכריע לקראת בניית פתרונות אינטרנט חזקים ויעילים.

למד כיצד לבנות אפליקציית React CRUD פשוטה, תוך שימוש ב-Supabase Cloud Storage כפתרון הקצה שלך.

Supabase Backend-as-a-Service Solution

ספקי Backend-as-a-Service (BaaS)., כמו Supabase, מציעים חלופה נוחה לבניית שירות אחורי מלא מאפס עבור יישומי האינטרנט שלך. באופן אידיאלי, פתרונות אלו מספקים מגוון רחב של שירותי backend שנבנו מראש שחיוניים להקמת מערכת אחורי יעילה עבור יישומי האינטרנט של React.

עם BaaS, אתה יכול להשתמש בתכונות כגון אחסון נתונים, מערכות אימות, מנויים בזמן אמת ועוד ללא צורך בפיתוח ותחזוקה של שירותים אלו באופן עצמאי.

על ידי שילוב פתרונות BaaS כמו Supabase בפרויקט שלך, אתה יכול לצמצם משמעותית את זמן הפיתוח והמשלוח, ועדיין ליהנות משירותי אחורי חזקים.

הגדר פרויקט אחסון בענן של Supabase

כדי להתחיל, עבור אל האתר של Supabase, והירשם לחשבון.

1. לאחר שנרשמת לחשבון, היכנס לחשבון שלך לוּחַ מַחווָנִים עמוד.
2. הקלק על ה פרוייקט חדש לַחְצָן.
3. מלאו את פרטי הפרויקט והקליקו על צור פרויקט חדש.
4. עם הגדרת הפרויקט, בחר ולחץ על עורך SQL לחצן תכונות בחלונית התכונות השמאלית.
5. הפעל את הצהרת SQL למטה ב- עורך SQL כדי ליצור טבלת הדגמה. זה יכיל את הנתונים שבהם תשתמש עם אפליקציית React.

   לִיצוֹרשולחן מוצרים (
    מזהה bigint שנוצר כברירת מחדל כמפתח ראשי של זהות,
    טקסט שם,
    טקסט תיאור
   );

הגדר אפליקציית React CRUD

צור אפליקציית React, נווט אל ספריית השורש וצור קובץ חדש, .env, כדי להגדיר כמה משתני סביבה. פנה ל-Supabase שלך הגדרות עמוד, פתח את ממשק API מקטע, והעתק את הערכים עבור כתובת האתר של הפרויקט ו מפתח אנון ציבורי. הדבק את אלה בקובץ ה-env שלך:

REACT_APP_SUPABASE_URL = כתובת האתר של הפרויקט
REACT_APP_SUPABASE_ANON_KEY = מפתח אנוני ציבורי

לאחר מכן, הפעל את הפקודה הזו כדי להתקין את ספריית ה-JavaScript של Supabase בפרויקט React שלך:

npm התקן את @supabase/supabase-js

הגדר את לקוח Supabase

בתוך ה src ספרייה, צור חדש utils/SupabaseClient.js הקובץ והקוד שלהלן:

יְבוּא { createClient } מ'@supabase/supabase-js'; 
const supabaseURL = process.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
יְצוּאconst supabase = createClient (supabaseURL, supabaseAnonKey);

קוד זה יוצר מופע לקוח של Supabase על ידי אספקת כתובת ה-URL של Supabase ומפתח אנון ציבורי, מה שמאפשר ליישום React לתקשר עם ממשקי ה-API של Supabase ולבצע פעולות CRUD.

אתה יכול למצוא את הקוד של הפרויקט הזה בזה מאגר GitHub.

יישם את פעולות CRUD

כעת לאחר שהגדרת בהצלחה את אחסון הענן של Supabase ואת פרויקט React שלך, יישם את פעולות ה-CRUD באפליקציית React שלך.

1. הוסף נתונים למסד הנתונים

פתח את ה src/App.js קובץ, מחק את קוד ה-boilerplate React, והוסף את הדברים הבאים:

יְבוּא { useState, useEffect } מ'לְהָגִיב';
יְבוּא כרטיס מוצר מ'./components/ProductCard';
יְבוּא { supabase } מ'./utils/SupabaseClient';
יְבוּא'./App.css';
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
אסינכרוןפוּנקצִיָהaddProduct() {
לְנַסוֹת {
const { נתונים, שגיאה } = לְהַמתִין supabase
 .מ('מוצרים')
 .לְהַכנִיס({
 שם שם,
 תיאור: תיאור
 })
 .יחיד();
אם (שְׁגִיאָה) לזרוק שְׁגִיאָה;
חַלוֹן.location.reload();
 } לתפוס (שגיאה) {
 התראה (error.message);
 }
 }

קוד זה מגדיר את an addProduct פונקציית מטפל שמכניסה באופן אסינכרוני רשומה חדשה ל- מוצרים טבלה במסד הנתונים בענן. אם פעולת ההוספה תצליח, הדף ייטען מחדש כדי לשקף את רשימת המוצרים המעודכנת.

2. קרא נתונים ממסד הנתונים בענן

הגדר פונקציית מטפל כדי להביא את הנתונים המאוחסנים ממסד הנתונים.

const [מוצרים, setProducts] = useState([]);
אסינכרוןפוּנקצִיָהgetProducts() {
לְנַסוֹת {
const { נתונים, שגיאה } = לְהַמתִין supabase
 .מ('מוצרים')
 .בחר('*')
 .לְהַגבִּיל(10);
אם (שְׁגִיאָה) לזרוק שְׁגִיאָה;
אם (נתונים != ריק) {
 setProducts (נתונים);
 }
 } לתפוס (שגיאה) {
 התראה (error.message);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

קוד זה מביא באופן אסינכרוני את הנתונים ממסד הנתונים. שאילתת האחזור מאחזרת את כל הנתונים מטבלת המוצרים, מגבילה את התוצאות ל-10 רשומות לכל היותר, ומעדכנת את מוצרים' מצב עם הנתונים שאוחזרו.

ה useEffectוו תגובה מפעיל את 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>

"רשימת מוצרים-מיכל">
 {products.map((מוצר) => (



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

הנתונים שהובאו ב- מערך מוצרים מועבר כאביזרים ומעובד באופן דינמי בתוך כרטיס מוצר רכיב באמצעות מַפָּה פוּנקצִיָה.

3. עדכן ומחק נתונים קיימים במסד הנתונים

ליצור חדש רכיבים/ProductCard.js קובץ ב- /src מַדרִיך. לפני הגדרת פונקציות המטפל, בוא נראה את המצבים ואת רכיבי ה-JSX שתטמיע ברכיב זה.

יְבוּא { useState } מ'לְהָגִיב';
יְבוּא { supabase } מ'../utils/SupabaseClient';
יְבוּא'./productcard.styles.css';
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהכרטיס מוצר(אביזרים) {
const מוצר = props.product;
const [עריכה, עריכה עריכה] = useState(שֶׁקֶר);
const [name, setName] = useState (product.name);
const [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>
 );
}

אסינכרוןפוּנקצִיָהupdateProduct() {
לְנַסוֹת {
const { נתונים, שגיאה } = לְהַמתִין supabase
 .מ('מוצרים')
 .עדכון({
 שם שם,
 תיאור: תיאור
 })
 .eq('תְעוּדַת זֶהוּת', מזהה מוצר);
אם (שְׁגִיאָה) לזרוק שְׁגִיאָה;
חַלוֹן.location.reload();
 } לתפוס (שגיאה) {
 התראה (error.message);
 }
}

אסינכרוןפוּנקצִיָהמחק מוצר() {
לְנַסוֹת {
const { נתונים, שגיאה } = לְהַמתִין supabase
 .מ('מוצרים')
 .לִמְחוֹק()
 .eq('תְעוּדַת זֶהוּת', מזהה מוצר);
אם (שְׁגִיאָה) לזרוק שְׁגִיאָה;
חַלוֹן.location.reload();
 } לתפוס (שגיאה) {
 התראה (error.message);
 }
}